Adding dynamic rows to treeGrid

[Tzelon]

Hey,

I trying to figure out how to add rows dynamically to TreeGrid, I want to do something like this:
var treeObj = $("#TreeGridContainer").data("ejTreeGrid");

treeObj.addRow({Id: "b560b2ab",parentId:  'b560b2ab', name: "tzelon", phone: 55555});

And it would add it to the right place under his parent.

I search the forum and the docs but didn't find anything. 

 

Thanks 

Tzelon Machluf 

[Mahalakshmi Karthikeyan]

Hi Tzelon,

Thank you for contacting Syncfusion support.

We can add a new row dynamically at run time with the help of “addRow” public method. Also we can add them with our desired position relevant to the selected row by passing rowPosition as an argument to the addRow method. Please find the below code example for details.

<button id="AddRow">AddRow</button>

<div id="Treegrid"></div>

<script type="text/javascript">

$("#Treegrid").ejTreeGrid({

//…

});

$("#AddRow").click(function () {

         var treeObj = $("#Treegrid").data("ejTreeGrid");

         var data = { taskID: "b560b2ab", taskName: "tzelon", progress:"50" }

         treeObj.addRow(data, ej.TreeGrid.RowPosition.Child);

})

</script>

Here we have added the dynamic row to the child of selected row. Please find the available row position from below,

•       Below: add a new row below to the selected row.

•       Above: add a new row above to the selected row.

•       Child: add a new row as child to the selected row.

•       Top: add a new row to the top of TreeGrid

•       Bottom: add a new row to the bottom of TreeGrid.

We have also prepared a sample based on this and you can find the sample under the following location.

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

Regards,

Mahalakshmi K.

[Tzelon]

Hey Mahalakshmi,

Thanks for the replay. 

I able to use your example to add rows, but I want to add it under a specific row problematically.

How can I select row by id using javascript ?

Thanks 

[Jonesherine Stephen]

Hi Tzelon,

Thank you for contacting Syncfusion support.

By using “selectedRowIndex” API, we can dynamically select the row by index of record in TreeGrid.

We can add the record in specific position according to selected row like above, below and child.

Please find the below code example for details.

<button id="AddRow">AddRow</button>

<div id="Treegrid"></div>

<script type="text/javascript">

$("#Treegrid").ejTreeGrid({

//…

});

$("#AddRow").click(function () {

                var treeObj = $("#Treegrid").data("ejTreeGrid");               

                var record = treeObj.model.updatedRecords,

                len = record.length, selectedIndex=-1;

                //selecting the rowIndex by taskID

                for (var i = 0; i < len; i++)

                {

                    if(record[i].taskID==5)

                    {

                        selectedIndex = i;

                        break;

                    }

                }

                //Assigning the rowIndex to selectedRowIndex in setModel

                treeObj.setModel({ "selectedRowIndex": selectedIndex });

                var data = { taskID: "b560b2ab", taskName: "tzelon", progress:"50" }

                treeObj.addRow(data, ej.TreeGrid.RowPosition.Child);

            })

        });

</script>

We have prepared sample for your reference, in this sample we have selected the record which as taskID as 5 and added new record as child of selected record.

You can find the sample under the following location.

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

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

Regards,
Jone Sherine P S

[Tzelon]

Hi Tzelon,

Thank you for contacting Syncfusion support.

By using “selectedRowIndex” API, we can dynamically select the row by index of record in TreeGrid.

We can add the record in specific position according to selected row like above, below and child.

Please find the below code example for details.

<button id="AddRow">AddRow</button>

<div id="Treegrid"></div>

<script type="text/javascript">

$("#Treegrid").ejTreeGrid({

//…

});

$("#AddRow").click(function () {

                var treeObj = $("#Treegrid").data("ejTreeGrid");               

                var record = treeObj.model.updatedRecords,

                len = record.length, selectedIndex=-1;

                //selecting the rowIndex by taskID

                for (var i = 0; i < len; i++)

                {

                    if(record[i].taskID==5)

                    {

                        selectedIndex = i;

                        break;

                    }

                }

                //Assigning the rowIndex to selectedRowIndex in setModel

                treeObj.setModel({ "selectedRowIndex": selectedIndex });

                var data = { taskID: "b560b2ab", taskName: "tzelon", progress:"50" }

                treeObj.addRow(data, ej.TreeGrid.RowPosition.Child);

            })

        });

</script>

We have prepared sample for your reference, in this sample we have selected the record which as taskID as 5 and added new record as child of selected record.

You can find the sample under the following location.

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

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

Regards,
Jone Sherine P S

Hey,

Thanks for answering, 

It's not so efficient to go over the array of rows to find the Id of the row I need. 

Doesn't we have a map of taskID (row  ID) to the object or the index in the array ?

Our requirements are for hundreds of rows that we will get from our DB, and then dynamically adding new rows every few seconds .

Thanks 

Tzelon 

[Jonesherine Stephen]

Hi Tzelon,

We regret about the inconvenience caused.

We need to find the index of the row while adding new record. Then only we can add the record either above or below on that particular index.

Once we added a record under that particular index its parentId gets updated.

 We have prepared the workaround sample for your reference.

Please find the code snippet below:

<button id="AddRow">AddRow</button>

<div id="TreeGridContainer"></div>

<script type="text/javascript">

$("#TreeGridContainer ").ejTreeGrid({

//…

});

var Id = 15;

        $("#AddRow").click(function () {

            Id += 1;

            var treeObj = $("#TreeGridContainer").data("ejTreeGrid");

            var records = treeObj.model.updatedRecords,

            selectedIndex = -1;

            var arr = records.filter(function (item) { return item.TaskID == 4; });

            //We can select the row using index.

            selectedIndex = records.indexOf(arr[0]);

           treeObj.setModel({ "selectedRowIndex": selectedIndex });

            var data = { "TaskID": Id, "TaskName": "Child Task 3", "StartDate": "02/23/2014", "EndDate": "02/27/2014", "Duration": 5, "Progress": "40" }

            treeObj.addRow(data, ej.TreeGrid.RowPosition.Below);

        })        

</script>

You can find the sample under the following location.

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

 But at present there is no support to add the record dynamically under the parent using ParentID in self reference datasource. For this we have already logged a feature request regarding 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

Is this your requirement? If not Can you please share more details regarding your requirement? This would be helpful for us to serve you.

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

Regards,

Jone Sherine P S

[Tzelon]

Thanks for the answer and the new feature, looking for it .

[Mahalakshmi Karthikeyan]

Hi Tzelon, 

 

Thanks for the update. 

Please get back to us if you need further assistance on this. 

 

Regards, 

Mahalakshmi K. 

[okechukwu victor]