Problems with callback on load() dhtmlTreeGrid

Hi All,

Loving your products but having some trouble getting some tests to work.

I have a TreeGrid loaded fine, however I want to run a function against the rows of the table once it’s rendered so I added a callback to load(). This function is supposed to perform some action on the 2nd TD of each TR, however it only works on the first two TR’s then seems to give up.

Please help.

Here’s my code:

[code]var mygrid;

function stackedBarChart() {
$("#mygrid_container .objbox table.obj tbody tr").each(function(){
var currentNode = $(this).find(“td”).eq(1);
var altbarRatios = currentNode.html();
var bars = “”;
//console.log(altbarRatios);
if (altbarRatios && altbarRatios != ’ ‘) {
var chartArray = altbarRatios.split(’|’);
for (var i=0;i<chartArray.length;i++) {
index_pos = $.inArray(chartArray[i], chartArray)+1
bars += “

  • ” + chartArray[i] + “
  • ”;
    }
    var barChart = “
      ” + bars + “
    ”;
    var content = currentNode.text().replace(altbarRatios, barChart);
    currentNode.empty();
    currentNode.html(content);
    }
    });
    }

    function doInitGrid(){
    mygrid = new dhtmlXGridObject(‘mygrid_container’);
    mygrid.setImagePath(“js/libs/dhtmlxGrid/codebase/imgs/”);
    mygrid.setHeader(“Programmes, Applications Status, Total Applications, Requiring Action”);
    //mygrid.setIconPath(“js/libs/dhtmlxTree/codebase/imgs/csh_dhx_terrace/”);
    mygrid.enableHeaderMenu();
    mygrid.selMultiRows = true;
    mygrid.setSkin(“clear”);
    mygrid.setColTypes(“tree,txt,link,link”);
    mygrid.attachHeader("#text_search, ,#cspan,#cspan");
    mygrid.setInitWidthsP(“40,30,15,15”);
    mygrid.setColAlign(“left,center,center,center”) ;
    mygrid.enableAutoHeight(true);
    mygrid.setAwaitedRowHeight(“40”);
    mygrid.setColSorting(“str,na,int,int”);
    mygrid.init();
    mygrid.enableSmartRendering(true);
    mygrid.load(“xml-tests/tree3.xml”, stackedBarChart);
    }

    doInitGrid();[/code]

    Replying to myself because I think I have the solution although I cant get it to work just yet.

    mygrid.forEachRow must be the solution, but how do implement it in my example?

    Sorted:

    [code]var mygrid;

    function stackedBarChart(id) {
    var cell = mygrid.cells(id, 1);
    barRatios = cell.getValue();
    var bars = “”;
    if (barRatios && barRatios != ’ ‘) {
    var chartArray = barRatios.split(’|’);
    for (var i=0;i<chartArray.length;i++) {
    if (chartArray[i] != 0) {
    index_pos = $.inArray(chartArray[i], chartArray)+1
    bars += “

  • ” + chartArray[i] + “
  • ”;
    } else {
    continue;
    }
    }
    var barChart = “
      ” + bars + “
    ”;
    cell.setValue(barChart);
    }
    }

    function doInitGrid(){
    mygrid = new dhtmlXGridObject(‘mygrid_container’);
    mygrid.setImagePath(“js/libs/dhtmlxGrid/codebase/imgs/”);
    mygrid.setHeader(“Programmes, Applications Status, Total Applications, Requiring Action”);
    mygrid.enableHeaderMenu();
    mygrid.selMultiRows = true;
    mygrid.setSkin(“clear”);
    mygrid.setColTypes(“tree,txt,link,link”);
    mygrid.attachHeader("#text_search, ,#cspan,#cspan");
    mygrid.setInitWidthsP(“40,30,15,15”);
    mygrid.setColAlign(“left,center,center,center”) ;
    mygrid.enableAutoHeight(true);
    mygrid.setAwaitedRowHeight(“40”);
    mygrid.setColSorting(“str,na,int,int”);
    mygrid.init();
    mygrid.enableSmartRendering(true);
    mygrid.loadXML(‘xml-tests/tree3.xml’, function(){
    mygrid.forEachRow(function(id){stackedBarChart(id)});
    });
    }

    doInitGrid();[/code]