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.
Syncfusion Feedback

Adding dynamic rows to treeGrid

Thread ID:

Created:

Updated:

Platform:

Replies:

123742 Apr 17,2016 09:17 AM UTC Feb 18,2018 11:31 PM UTC JavaScript 8
loading
Tags: ejTreeGrid
Tzelon
Asked On April 17, 2016 09:17 AM UTC

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 [Syncfusion]
Replied On April 18, 2016 11:25 AM UTC

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
Replied On April 18, 2016 11:33 AM UTC

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 [Syncfusion]
Replied On April 19, 2016 03:50 PM UTC

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
Replied On April 20, 2016 07:01 AM UTC

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 [Syncfusion]
Replied On April 21, 2016 01:12 PM UTC

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
Replied On April 25, 2016 10:40 AM UTC

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

Mahalakshmi Karthikeyan [Syncfusion]
Replied On April 26, 2016 04:14 PM UTC

Hi Tzelon, 
 
Thanks for the update. 
Please get back to us if you need further assistance on this. 
 
Regards, 
Mahalakshmi K. 


okechukwu victor
Replied On February 18, 2018 11:31 PM UTC


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.

Warning Icon 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.Close Icon

;