is it possible to set alternate row backcolor on a jqgrid Treegrid

Question

i am starting to play around with jqGrid Treegrid but i don't see anyway to set alternative row back color. Is this possible?

Answer 1

If you mean altRows and altclass parameters, then there not works. To be exactly at the tree grid initialization time (inside of setTreeGrid) some jqGrid parameters will be reset. How you can see here the value of the altRows parameter will be set to false. The reason of the change would be clear if you imagine that expanding/collapsing of tree nodes can change the order of the tree items so you would be have

from the original tree

UPDATED: A workaround is always exist. See the demo with the following code:

var resetAltRows = function () {
    // I think one can improve performance the function a little if needed,
    // but it should be done the same
    $(this).children("tbody:first").children('tr.jqgrow').removeClass('myAltRowClass');
    $(this).children("tbody:first").children('tr.jqgrow:visible:odd').addClass('myAltRowClass');
};
$("#tree").jqGrid({
    url: 'AdjacencyTreeAltRows.json',
    datatype:'json',
    mtype:'GET',
    colNames: ["ID", 'Description', "Total"],
    colModel: [
        {name:'id', index:'id', width: 1, hidden: true, key: true},
        {name:'desc', width:180, sortable:false},
        {name:'num', width:80, sortable:false, align:'center'}
    ],
    treeGridModel:'adjacency',
    height:'auto',
    //altRows: true,
    //altclass: 'myAltRowClass',
    rowNum: 10000,
    treeGrid: true,
    ExpandColumn:'desc',
    loadComplete: function() {
        var grid = this;
        resetAltRows.call(this);
        $(this).find('tr.jqgrow td div.treeclick').click(function(){
            resetAltRows.call(grid);
        });
        $(this).find('tr.jqgrow td span.cell-wrapper').click(function(){
            resetAltRows.call(grid);
        });
    },
    ExpandColClick: true,
    caption:"TreeGrid Test"
});