TreeGrid styling rows differently based on parent/child status

Suite and Optimus Suite 5
#1

Hi there. I’ve successfully created a treegrid with some test data in it, but now I’d like to see if I could style the rows differently based on whether or not they’re a parent to at least one other row. Here’s my current code:

<!DOCTYPE html>
<html>
    <head>
        <title>Starting with dhtmlxTreeGrid</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <link rel="stylesheet" type="text/css" href="codebase/suite.css"/>
        <script src="codebase/suite.js"></script>
    </head>
    <body>
        <div id="treegrid_container" ng-if=""></div>
        <script>
            var dataset = [
                {
                    "id": 1,
                    "a": 1,
                    "b": "Linwood",
                    "c": "Petersen",
                    "d": "Dahlgreen Place"
                },
                {
                    "id": 2,
                    "parent": 1,
                    "a": 2,
                    "b": "Edenburg",
                    "c": "Agnes",
                    "d": "Gem Street"
                },
                {
                    "id": 3,
                    "parent": 1,
                    "a": 3,
                    "b": "Charleston",
                    "c": "Smith",
                    "d": "Glimwood Terrace"
                },
                {
                    "id": 4,
                    "a": 4,
                    "b": "Pittsburgh",
                    "c": "Black",
                    "d": "Sycamore Road"
                },
                {
                    "id": 5,
                    "parent": 4,
                    "a": 5,
                    "b": "San Antonio",
                    "c": "Chalmers",
                    "d": "Main Street"
                },
                {
                    "id": 6,
                    "parent": 4,
                    "a": 6,
                    "b": "Minneapolis",
                    "c": "Jones",
                    "d": "Phillip's Place"
                }
            ];
            var treegrid = new dhx.TreeGrid("treegrid_container", {
                columns: [
                    { width: 100, id: "a", header: [{ text: "ID Number" }] },
                    { width: 100, id: "b", header: [{ text: "Town" }] },
                    { width: 200, id: "c", header: [{ text: "Last Name" }] },
                    { width: 200, id: "d", header: [{ text: "Address" }] }
                ],
                headerRowHeight: 50,
                height: 400
            });
            var parentStyle = {
                color: "#216126"
            }
            treegrid.data.parse(dataset, function(){
                for(var i = 0; i < treegrid.getRowsNum(); i++){
                    var id = treegrid.getRowId(i);
                    if(id.parent == null) $(id).css(parentStyle);
                }
            });
            treegrid.collapseAll();
        </script>
    </body>
</html>

I’m following this forum discussion since I’m fairly new to javascript, but my treegrid.data.parse function is throwing the following console error for some reason:
Uncaught TypeError: Cannot read property ‘toJsonArray’ of undefined
at e.parse (suite.js:22)
at e.t.parse (suite.js:13)
at index.html:75
I’m using a trial version of Suite 6. Any ideas how I’d go about styling rows if they’re a parent but leaving them unstyled otherwise? I’m only testing for one parental level so the condition .parent == null is fine for my case, not sure where it’s breaking.

Thanks.

#2

Please, note that in the suite 6 parse() method has no callback function.So you should use:

treegrid.data.parse(dataset)

Also, please, note that in the callback function you are using the methods of the dhtmlxTreegrid 5, while it is not avilable to use it for the dhtmlxSuite 6.
Please, refer to the followiung snippet
https://snippet.dhtmlx.com/ivdiha09

1 Like