jqgrid treegrid custom css-class for each tree-level

Question

I have a deep tree and for user it's difficult to distinguish the levels. Is it possible to have custom css-classes for each level? For example firstlike h1 and bold, second bold ...

Kennethkennett

Answer 1

I find the question interesting, but I think that one can better use individual icons for the tree nodes. If you do need to set CSS style per row I can you forward to the answer and this one. You should just change the test criteria in the demos to test the content of the hidden level column.

So I created the demo which demonstrate how you can set individual icons per node level:

First of all I should mention, that TreeGrid supports individual icons for leafs out-of-the-box. You can just add icon property to the posted data. The value of the property should be the CSS class which will be added to the div which represent the icon. For example icon: "ui-icon-star". The standard class for the icon is "ui-icon-radio-off". Additionally the div receive the classes "ui-icon tree-leaf treeclick". So if you find the icon which you need in the standard jQuery UI icons the changing if the icon of the leaf will be very easy.

Non-leaf tree nodes have two icons: one in the collapsed form and another in the expanding form. There are no simple way to change the icons per jqGrid configuration, but you can implement the requirement by writing an additional JavaScript code inside of loadComplete and with respect of chaining (overwriting or subclassing) of expandNode and collapseNode method like I suggested here.

In the demo I just changed the icons of the top-level tree nodes. In the same way you can change icons on any other level. Below you find the most important parts of the code from my demo:

var $grid = $("#treegrid"),
    orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode;

$grid.jqGrid({
    ....
    loadComplete: function (data) {
        var item, i, l = data.length || 0;
        for (i = 0; i < l; i++) {
            item = data[i];
            if (!item.isLeaf && (item.level === "0" || item.level === 0)) {
                if (item.expanded) {
                    $("#" + item.id + " div.treeclick")
                        .removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-carat-1-s");
                } else {
                    $("#" + item.id + " div.treeclick")
                        .removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-carat-1-e");
                }

            }
        }
    }
});

$.jgrid.extend({
    expandNode: function (rc) {
        var ret = orgExpandNode.call(this, rc);
        if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) {
            $("#" + rc._id_ + " div.treeclick")
                .removeClass("ui-icon-triangle-1-s ui-icon-carat-1-e")
                .addClass("ui-icon-carat-1-s");
        }
        return ret;
    },
    collapseNode: function (rc) {
        var ret = orgCollapseNode.call(this, rc);
        if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) {
            $("#" + rc._id_ + " div.treeclick")
                .removeClass("ui-icon-triangle-1-e ui-icon-carat-1-s")
                .addClass("ui-icon-carat-1-e");
        }
        return ret;
    }
});

UPDATED: I thought a little more about the problem of tree icons and modified the code to the new demo.

I decided that it would be more practicable to be able to define icons of the tree node exactly like for the leafs. Because one need to specify two icons one can separate the classes for collapsed and expanded icons by comma. For example: icon: "ui-icon-carat-1-e,ui-icon-carat-1-s". The code can be rewritten to the following:

var $grid = $("#treegrid"),
    orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode,
    changeTreeNodeIcon = function (item) {
        var icons, $div, id;
        if (!item.isLeaf && typeof item.icon === "string") {
            icons = item.icon.split(',');
            if (icons.length === 2) {
                id = item[this.p.localReader.id] || item[this.p.jsonReader.id];
                $div = $("#" + $.jgrid.jqID(id) + " div.treeclick");
                if (item.expanded) {
                    $div.removeClass(icons[0])
                        .removeClass("ui-icon-triangle-1-s")
                        .addClass(icons[1]);
                } else {
                    $div.removeClass(icons[1])
                        .removeClass("ui-icon-triangle-1-e")
                        .addClass(icons[0]);
                }
            }
        }
    };

$grid.jqGrid({
    ....
    loadComplete: function (data) {
        var item, i, l = data.length || 0;
        for (i = 0; i < l; i++) {
            item = data[i];
            changeTreeNodeIcon.call(this, item);
        }
    }
});

$.jgrid.extend({
    expandNode: function (rc) {
        var ret = orgExpandNode.call(this, rc);
        changeTreeNodeIcon.call(this[0], rc);
        return ret;
    },
    collapseNode: function (rc) {
        var ret = orgCollapseNode.call(this, rc);
        changeTreeNodeIcon.call(this[0], rc);
        return ret;
    }
});

UPDATED: I posted the feature request and the pull request which add the described above functionality to TreeGrid.

Blakeslee

@gleb: You are welcome! If you have problem with horizontal scrolling of Tree Grid with many columns another answer can give you ideas how to improve the situation. – Blakeslee

@gleb: I posted just now the feature request and the pull request which add the described above functionality to TreeGrid. – Blakeslee