Start Building Professional
Web Apps Today

TreeGrid

Hi!

I have two questions about TreeGrid:

1) Could i change icon of parent when i click for open it and there are no kids in this branch? How can i do it?

2) It possible to make 3 state check box in tree grid - tree function enableThreeStateCheckboxes doesnt work with treegrid. How can i do it?

Thanks for fast answers.

Best regards

Dmitry

>>1) Could i change icon of parent when i click for open it and there are no kids in this branch? How can i do it?
Basically icon of item can be changed by
    grid.cell(i,j).setImage(url);
In your scenario dynamic data loading used ( right ? ), so you can use onXLE event to detect moment when data for branch loaded

mygrid.attachEvent("onXLE",function(obj,len,pid){
    if (len==0)
        grid.cell(pid,0).setImage(some_image);      
});

>>2) It possible to make 3 state check box in tree grid - tree function enableThreeStateCheckboxes doesnt work with treegrid. How can i do it?

There is no native support for such functionality, something similar can be created by using existing onCheckbox event and custom code to check-uncheck parent|child checkboxes.
If you need a sample of such custom code - please contact us directly at support@dhtmlx.com

Hello,

About the first question. I'am trying implement that solution in my treeGrid but the onXLE function isn't reciving any parameters.

mygrid.attachEvent("onXLE",function(obj,len,pid){
     alert(obj); ->always pop 'undefined'
     alert(len);->always pop 'undefined'
     alert(pid); ->always pop 'undefined'
     if (len==0)
        grid.cell(pid,0).setImage(some_image);      
});

I'm using dhtmlxGrid v.1.6 Professional edition build 80512 with iexplorer 6

Thank you a lot

The solution described above was based on side effect , which exist in version 1.5, and not available in version 1.6 or 2.0

mygrid.attachEvent("onXLE",function(obj,len,pid){
  var pid = mygrid.xmlLoader.doXPath("//rows")[0].getAttribute("parent");
  if (!mygrid.getSubItems(pid))
       grid.cell(pid,0).setImage(some_image);  
});

Nice, it seems worked well. The image is changing, but when i click on node to expand/colapse, it's reseting to the default image again.

I've tried to debug some events, but unlucky i haven't found who is reseting the image.

Thanks again.

The treegrid can change images used for "open"|"close" state showing, but image, which set by setImage - can't be reset automatically, only by different setImage call. 

Ok, my problem is while the onXLE event works well, and it's changes the image, when i click in other node of the treeGrid (for expand or colapse) the image changed in the onXLE event (leaf icon) resets to the default icon (folder icon). This behevior happens always. Exists any workaround to avoid this? I wan't the leaf icon stays, though the ideal solution would change the state of the tree node to has_kids = 0, but it's seems not possible.

Thanks.

>>I wan't the leaf icon stays, though the ideal solution would change the state of the tree node to has_kids = 0, but it's seems not possible.

mygrid.attachEvent("onXLE",function(obj,len,pid){
  var pid = mygrid.xmlLoader.doXPath("//rows")[0].getAttribute("parent");
  if (!mygrid.getSubItems(pid)){
  var r=mygrid._h2.get[pid];
  mygrid._h2.change(pid,"state","blank");
  mygrid._updateTGRState(r);
 }  
});

Please contact us directly at support@dhtmlx.com if you need a working sample.

wow, nice. The only problem remainning is the leaf icons that was setted with setImage on XLE event reseting to default when open/close any branch

Problem can't be reconstructed with local samples - please contact us directly if you need a working sample.
By the way, are you using treegrid in normal or in split view?

Yes, i'am using mygrid.splitAt(1);  for split the tree part from the grid (table) part.

Testing the page without the split view works correctly. It seems that the problem comes for use slit view.

In case of split mode, the situation is more complex, please try to use next code to update image after loading

mygrid.attachEvent("onXLE",function(obj,len,pid){
  var pid = mygrid.xmlLoader.doXPath("//rows")[0].getAttribute("parent");
  if (!mygrid.getSubItems(pid)){
  mygrid.cells(pid,0).setImage('codebase/imgs/leaf.gif');  
  mygrid.cells4(mygrid.getRowById(pid).childNodes[0]).setImage('codebase/imgs/leaf.gif');  
  }
});

That's work nicely.

The complete function with image change and plus icon removal when  no childs exists in dynamic data loading:

mygrid.attachEvent("onXLE",function(obj,len,pid){
              var pid = mygrid.xmlLoader.doXPath("//rows")[0].getAttribute("parent");
              if (!mygrid.getSubItems(pid)){ // has childs?
                   //image change to leaf
                   mygrid.cells(pid,0).setImage('leaf.gif');
                  // image change when slitAt is used
                  mygrid.cells4(mygrid.getRowById(pid).childNodes[0]).setImage('leaf.gif');
                  // change the state of the parent node to be a leaf node (no plus-minus icon)
                  var r=mygrid._h2.get[pid];
                  mygrid._h2.change(pid,"state","blank");
                  mygrid._updateTGRState(r);
                 } 
            });

Thanks, a lot