TreeGrid unable to enable smart rendering

Hi there. I’m on the dhtmlx TreeGrid trial trying to see if it’ll work for a company project, and I wanted to see if there was a way to set the parent rows to be collapsed by default. I know that treegrid.collapseAllItems([starting index]) exists, but where do I put that in the code? No matter where I put it, when I reload all parent nodes are expanded. (update below, got it to work but still have following question)

I’d also like to enable smart rendering on the treegrid, but I can’t seem to figure out where to put treegrid.enableSmartRendering(true) either. My code is below, it’s a super simple test table, can’t figure out why these things won’t work.

Thanks.

<!DOCTYPE html>
<html>
    <head>
        <title>Starting with dhtmlxTreeGrid</title>
        <script type="text/javascript" src="codebase/treegrid.js"></script>
        <link rel="stylesheet" href="codebase/treegrid.css">
    </head>
    <body>
        <div id="treegrid_container"></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: "#" }] },
                    { width: 100, id: "b", header: [{ text: "Town" }] },
                    { width: 200, id: "c", header: [{ text: "Last Name" }] },
                    { width: 200, id: "d", header: [{ text: "Address" }] }
                ],
                headerRowHeight: 50,
                // data: dataset,
                height: 400,
                //adjust: true
            });
            treegrid.data.parse(dataset);
        </script>
    </body>
</html>

UPDATE: I figured out how to get the parents to collapse by default, I just had to use treegrid.collapseAll() instead of treegrid.closeAllItems(1) after installing dhtmlx suite. Now I’m getting the error “Uncaught TypeError: treegrid.enableSmartRendering is not a function” on my treegrid.enableSmartRendering(true) function call. No idea what that’s about.

UPDATE 2: From what I’m finding, enableSmartRender is an outdated Suite 5 function? What would its Suite 6 or most recent dhtmlx equivalent be, or do I really need to contact them for a Suite 5 pro trial?

There is no enableSmartRendering() method in the dhtmlxTreeGrid 6. Smart rendering mode now is a default behavior you don’t need to enable it.

1 Like