We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. How to replace a node's children on expansion

How to replace a node's children on expansion

Hi, 

I'd like to replace a node's children when the user expands it. We can handle the expanding event and update the data. How do we refresh the expanded node on the UI?

Example code pasted below:

<body>
    <div class="content-container-fluid">
        <div class="row">
            <div class="cols-sample-area">
                <div id="TreeGridContainer" style="height: 450px; width: 100%;"/>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        var data = [];
        var x = 0;
        for (var i = 0; i < 2000; i++) {
            var parent = {};
            parent["Name"] = "Parent " + i;

            var children = [];
            var child = {};
            child["Name"] = "DUMMY";
            children.push(child);

            parent["Child"] = children;
            data[i] = parent;
        }

        $(function () {
            $("#TreeGridContainer").ejTreeGrid({
                dataSource: data,
                allowColumnResize: true,
                allowSorting: true,
                allowSelection: true,
                childMapping: "Child",
                enableVirtualization: true,
                treeColumnIndex: 0,
                enableResize: true,
                enableCollapseAll: true,
                selectionType: "multiple",
                columns: [
                      { field: "Name", headerText: "Name", editType: "stringedit" }
                ]
            });
        });

        $("#TreeGridContainer").ejTreeGrid({
            expanding: function (args) {
                // Update children of expanded parent. 
                var rowIndex = args.recordIndex;

                var children = [];
                for (var j = 1; j < 1000; j++) {
                    var child = {};
                    child["Name"] = "Child " + j;
                    children.push(child);
                }

                data[rowIndex]["Child"] = children;

                // How to refresh parent node?
            }
        });
    </script>
</body>

3 Replies
MK Mahalakshmi Karthikeyan Syncfusion Team February 26, 2016 12:40 PM UTC

Hi John,

Thanks for contacting Syncfusion support.

We can add child to the Parent when we expanding it using “addRow()” public method. We have slightly changed your code according to this. Please refer below code example for details.

<body>

    <div class="content-container-fluid">

        <div class="row">

            <div class="cols-sample-area">

                <div id="TreeGridContainer" style="height: 450px; width: 100%;" />

            </div>

        </div>

    </div>


    <script type="text/javascript">


       //…


        $(function () {

            $("#TreeGridContainer").ejTreeGrid({

                dataSource: data,

                //…

                columns: [

                      { field: "Name", headerText: "Name", editType: "stringedit" }

                ],

                expanding: function (args) {

                    // Update children of expanded parent.

                    var rowIndex = args.recordIndex;

                   

                    var children = [];

                    for (var j = 1; j < 10; j++) {

                        var child = {

                            "Name": "Child " + j

                        };

                        obj = $("#TreeGridContainer").data("ejTreeGrid");

                        // set the current record as selected Item

                        args.model.selectedRowIndex = args.recordIndex;

                       args.model.selectedItem = args.data;


                        // add child to the selected item.

                        obj.addRow(child, ej.TreeGrid.RowPosition.Child);

                        children.push(child);

                    }                                     

                }

            });         

        });      

    </script>

</body>

We have also modified your sample and you can find the sample under the following location.

Sample: http://jsplayground.syncfusion.com/Sync_5beye4c5

Regards,

Mahalakshmi K.


JG John Greenwood February 26, 2016 02:44 PM UTC

That works very nicely, thank you. 

Is there a way to get the TreeGrid to perform well with large numbers of nodes? (e.g. starting with 2000 parent nodes and adding 1000 child nodes in the expansion event).

MK Mahalakshmi Karthikeyan Syncfusion Team February 29, 2016 05:44 PM UTC

Hi John,

We can also able to reproduce the time delay when using the “addRow()” public method to add child to the parents when they expanded. But at present there is no built in support to add dynamic rows when the parent gets expended. So we have logged a feature report regrading this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Please let us know if you require further assistance on this.

Regards,

Mahalakshmi K.


Loader.
Live Chat Icon For mobile
Up arrow icon