How to update TreeGrid after modification of data source

[Nabil]

Hi,

I am filling my treegrid this way :

<ejs-treegrid id="MyTreeGrid" dataSource="ViewBag.DataSource" hasChildMapping="hasChild" idMapping="id" height="700" parentIdMapping="pid">.....</ejs-treegrid>

I am adding a new item from javascript :

var treeObj = document.getElementById('MyTreeGrid').ej2_instances[0];
var ds = treeObj.dataSource;
ds.unshift({id: ...., pid: .....});
treeObj.dataSource = ds;

However it doesn't wok, the treegrid is not refreshed and the newly added item doesn't appear.

Any idea please ?

[Farveen Sulthana Thameeztheen Basha]

Hi Nabil,

We are working on this query with high Priority and provide you further details by on or before 26^th August 2022. Until then we appreciate your patience.

Regards,
Farveen sulthana T

[Priyadarshan Selvan]

Hi Nabil,

Thanks for contacting syncfusion support.

Query#:- How to update TreeGrid after modification of data source

Based upon your query, we suggest you to use the extendArray method when assigning the treegrid dataSource property to the variable.

Refer to the code below:-

Index.cshtml

 

<ejs-button id="element" content="Update" cssClass="e-small"></ejs-button>

<ejs-treegrid id="MyTreeGrid" dataSource="@ViewBag.data" idMapping="TaskId" parentIdMapping='ParentId' allowPaging="true" treeColumnIndex="1">

    <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings>

    <e-treegrid-columns>

        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90" isPrimaryKey="true"></e-treegrid-column>

        <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>

        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"

                           format="yMd" type="date" width="90"></e-treegrid-column>

        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>

    </e-treegrid-columns>

</ejs-treegrid>

 

 

<script>

    document.getElementById('element').onclick = function () {

        var treeObj = document.getElementById("MyTreeGrid").ej2_instances[0];

        var ds = ej.treegrid.extendArray(treeObj.dataSource);

        ds.unshift({

            TaskId : 111,

            TaskName : "New Task 1",

            Duration : 7,

            ParentId : null,

            isParent : true

        });

        treeObj.dataSource = ds;

    }

</script>

Please find the attached sample.

Please get back to us for further assistance.

Regards,

Priyadarshan Selvan

Attachment: coresample_8b61948d.zip