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.
Unfortunately, activation email could not send to your email. Please try again.

How to replace a node's children on expansion

Thread ID:

Created:

Updated:

Platform:

Replies:

123200 Feb 25,2016 06:23 AM Feb 29,2016 12:44 PM JavaScript 3
loading
Tags: ejTreeGrid
John Greenwood
Asked On February 25, 2016 06:23 AM

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>

Mahalakshmi Karthikeyan [Syncfusion]
Replied On February 26, 2016 07:40 AM

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.


John Greenwood
Replied On February 26, 2016 09:44 AM

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).

Mahalakshmi Karthikeyan [Syncfusion]
Replied On February 29, 2016 12:44 PM

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;