Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by vel on May 18, 2009 04:12
open dhtmlx forum
how to check/uncheck subgrid checkbox using main grid check box?

Hi,
i am using grid with subgrid for displaying/manupulating records. The main grid header have the check box, by check/uncheck that checkbox, it check/uncheck all checkboxs available in same column. i have achived this functionlaity using #master_checkbox filter. In subgrid also have a header checkbox, by check/uncheck that checkbox, it is  check/uncheck all the checkboxs placed in same column. This is also achieved using #master_checkbox. Now my problem is when i check/uncheck parent grid header checkbox, it should check/uncheck checkbox placed in the same column of parent grid and it should check/uncheck all the checkboxs placed in subgrid as well. But when u check/uncheck subgrid header checkbox, it should check/uncheck the sub grid column check boxes only. how to achive this? please help me

Thanks in advance,
Vel
Answer posted by Alex (support) on May 18, 2009 05:32

Hello, 

in this case you can use master_checkbox for sub grid. 

And a checkbox with own onclick header for parent grid. When checkbox in the parent header is clicked, you can change state for each checkbox in parent grid and its subgrid:

parent.forEachRow(function(id){
parent.cells(id,INDEX).setValue(state);
});

subgrid.forEachRow(function(id){
subgrid.cells(id,INDEX).setValue(state);
});

Answer posted on May 18, 2009 05:45
Thanks for your reply.
But i am getting clearly. Here what is the word 'parent' and 'subgrid'. what it is exactly indicats? please give example code?
Thanks.
Vel
Answer posted by Alex (support) on May 18, 2009 05:56

parent is object of the parent grid and subgrid is object of the subgrid inside it.

A small example:

parent.setHeader("...,<input type='checkbox' id='ch' onclick='setState()'>,..);

...

var state;

function setState(){

state = document.getElementById("ch").checked?1:0;

parent.forEachRow(function(id){

parent.cells(id,INDEX).setValue(state);
});
var subgrid = parent.cells(row_id,cell_index).getSubGrid();
subgrid.forEachRow(function(id){
subgrid.cells(id,INDEX).setValue(state);
});

}

Answer posted on May 18, 2009 06:27
Hi,
This is my code for defining my Grid.
mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("themes/General/css/images_dhtmlgrid/");
    mygrid.setHeader("<input type='checkbox' id='ch' onclick='setState();'>,&nbsp;,IP Address,Sys Name,Interface Count,Assign Impact");
    mygrid.setInitWidths("100,30,180,180,180,180")
    mygrid.setColAlign("left,left,left,left,left,left")
    mygrid.setColTypes("sub_row,edtxt,ro,edtxt,ro,co");
   
    mygrid.getCombo(5).put('Low',"Low");
    mygrid.getCombo(5).put('Medium',"Medium");
    mygrid.getCombo(5).put('High',"High");
      mygrid.init();
    mygrid.loadXML(xmlFile);

And i have used php code for generating XML file for subgrid. There i am setting the header, coltypes and all other parameters.
so how do i create object for subgrid. Could you please help me.

Answer posted by Alex (support) on May 18, 2009 06:40

Subgrid can be got by grid.cells(row_id,cell_index).getSubGrid() method. But subgrid is created when you open it.

You can should check if the subgrid exists:

function setState(){
 state = document.getElementById("ch").checked?1:0;
 mygrid.forEachRow(function(id){
  var subgrid = mygrid.cells(id,0).getSubGrid();
  if(subgrid)
  subgrid.forEachRow(function(sid){
  subgrid.cells(sid,INDEX).setValue(state);
  });
 });
}


Answer posted on May 18, 2009 06:53
i got the error is mygrid.cells(id, 0).getSubGrid is not a function
Is it need any new js file?
Answer posted by Alex (support) on May 18, 2009 07:16

No, you don't need any special js file. The sample in your package is dhtmlxGrid/samples/extended_modes/pro_subgrids.html 

Please, check that cell type is sub_row_grid. 

Answer posted on May 19, 2009 08:14
Hi, thanks for your help. I have included the necesary javascript files. But still it says that error 


mygrid.cells(id, 0).getSubGrid is not a function

Please help me.

Answer posted by Support on May 19, 2009 08:38
Please be sure that all cells in the column "0" has type "sub_row_grid", such error as in your case, can occur only if you are calling method against cell which doesn't support it ( only sub_row_grid cell supports such method ) 

If you have mixed row values ( some rows have sub-grids and some are other types )  you can modify looping code as

 mygrid.forEachRow(function(id){
  var cell = mygrid.cells(id,0);
  var subgrid = null;
  if(cell.getSubGrid && (subgrid=cell.getSubGrid()))
      subgrid.forEachRow(function(sid){
          subgrid.cells(sid,INDEX).setValue(state);
     });


Answer posted on May 19, 2009 09:00
Hi,
still dont have luck. It is not working for me. here i have attached my working files. i am developing the application using prado framework. It is a simple logic.i am using php file to generate grid xml and subgrid xml. Please have a look and suggest the changes.

Thanks
Attachments (2)
ViewManageEdit.page3.56 Kb
ViewManageEdit.php9.88 Kb
Answer posted by Support on May 20, 2009 10:36
Next is snippet from your code 

function setState(){

 state = document.getElementById("ch").checked?1:0;
  mygrid.forEachRow(function(id)
  {
  var cell = mygrid.cells(id,0);
  var subgrid = null;
  if(cell.getSubGrid && (subgrid=cell.getSubGrid()))
  subgrid.forEachRow(function(sid)
  {
  subgrid.cells(sid,INDEX).setValue(state);
  });
  });
}

The INDEX in  
        subgrid.cells(sid,INDEX).setValue(state); 
need to be replaced with actual index of column for which checkbox state need to be changed
Answer posted by Support on May 20, 2009 10:37
Working sample sent by email.
Answer posted on May 21, 2009 02:03
hi,
Thanks for your support. But i didn't received any mail with attachment. gin2vel@gmail.com is my alternate mail id. you can send that attachment to that email id.

Thanks,
Vel
Answer posted by Support on May 21, 2009 02:21
Sample sent to gin2vel@gmail.com