TreeGrid?Grid - Update values in grid

[Michael Salzlechner]

What is the proper way to update values in a grid without having to reload the whole grid?

We have a property grid that always shows the same rows but the content of one of the columns changes as the user navigates the app.

I want the column content to be updated without the rows changing, flickering, scrolling etc.

thanks

Mike

[Jonesherine Stephen]

Hi Michael, 

We can’t able to understand your query regarding “TreeGrid?Grid - Update values in grid”.  

Please clarify us whether do you want to update values in ejGrid or ejTreeGrid? And share us more details regarding your requirement or samples/screen shots related to your query with us. It would be helpful for us to understand your requirement clearly and update the response. 

Please let us know if you require further assistance on this.
Regards, 
Jone sherine P S  

[Michael Salzlechner]

I am interested in both the ejTreeGrid as well as the ejGrid

i am adding rows to the ejTreeGrid or ejGrid.

Later i want to change the value of a row/column to a new value without having to reload all the data 

thanks

Mike

[Jonesherine Stephen]

Hi Michael, 

Thanks for contacting Syncfusion support 

Please find the response below 

TreeGrid: 

We can refresh the particular row by using “refreshRow” public method without reloading the entire TreeGrid. We have prepared the work around and changed the value of the particular field and refreshed the modified row alone. 

Please find the code example below: 

<button onclick="rowRefresh()" style="margin-bottom:5px">Refresh Row</button> 

<script> 

function rowRefresh() { 

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

            selectedItem = treeObj.model.selectedItem; 

            //to refresh the selected row 

            if (selectedItem && selectedItem.index == 6) { 

                var item = selectedItem.item, 

                modifiedItem = {                   

                    taskName: "Update Task",                    

                }; 

                item = modifiedItem; 

                selectedItem.taskName = item.taskName;                

                treeObj.refreshRow(selectedItem.index); 

            } 

        } 

</script> 

We have also prepared the sample for your reference. Please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/refreshrow-mike-1198041033 

Is this your requirement? If not could you please share us more details regarding your requirement with us. It would be helpful for us to serve you better. 

Grid: 

Your requirement “Do not reload/retrieve entire data from server while updating the Grid”, this can be achieved by using the RemoteSaveAdaptor of the DataManager which in turn bind to the Grid. Refer to the following code example.  

<div id="Grid"></div>  

<script type="text/javascript">  

    $(function () {  

        var jsonData = @Html.Raw(Json.Encode(ViewBag.dataSource));  

        $("#Grid").ejGrid({  

            dataSource: ej.DataManager({  

                json: jsonData,  

                insertUrl: "/Home/Insert",  

                updateUrl: "/Home/Update",  

                removeUrl: "/Home/Delete",  

                adaptor: "remoteSaveAdaptor"  

            }),  

                 .  ..   

                   . . .   

        });  

    });  

</script>  

  

        public ActionResult Index(){  

            ViewBag.dataSource = OrderRepository.GetAllRecords().ToList();  

            return View();  

        }  

        public ActionResult Update(EditableOrder value)  

        {  

            OrderRepository.Update(value);  

            return Json(value, JsonRequestBehavior.AllowGet);  

        }  

        public ActionResult Insert(EditableOrder value)  

        {  

            OrderRepository.Add(value);  

            return Json(value, JsonRequestBehavior.AllowGet);  

        }  

Note:  While updating/adding a record, corresponding record alone will be returned from the server  

Grid will internally manages to reflect the updated changes using the RemoteSaveAdaptor after the update records were updated in the server end. Therefore, you don’t need to manually reload the record in the Grid.  

Refer to the following Help Document.  

https://help.syncfusion.com/js/datamanager/data-adaptors#remotesave-adaptor  

We have also prepared a sample that can be downloaded from the following location.  

Sample: http://www.syncfusion.com/downloads/support/forum/127373/ze/F127373-2000536203.zip  

 

Regards, 

Jone sherine P S 

[Michael Salzlechner]

thanks for the update

but this allows me only to update the selected item. How do i update any other row?

Also the data model does not get updated

thanks

Mike

[Michael Salzlechner]

i may have figured this out

looks like the following works

// get item

var itemToUpdate = treeObj.model.currentViewData[iIndexToUpdate];

// modify item data

...

// refresh row

treeObj.refreshRow(itemToUpdate.index);

[Jonesherine Stephen]

Hi Michael, 

We have prepared the work around and provided two text boxes for index and new task name and retrieved the required record by using provided index value from the updated records collection. 

We need to modify both item collection and record collection to update the changes in model.dataSource.  

Please find the behavior of record’s collection on virtualization/non-virtualization mode below: 

Record Collection	Virtualization Mode[enableVirtualization: true]	Non-virtualization Mode  [enableVirtualization: false]
currentViewData	Records in current view only present in the records collection	All the records will be available in the record collection
updatedRecords	All the records present in the record collection.   During collapse action, the visible records only will be available in this collection so record index may vary as per the records collection	All the records will be available in the record collection

Please find the code example below: 

Index<input type="text" id="indexSelected" style="margin-left:8px;margin-bottom:10px" /> 

    New TaskName<input type="text" id="refreshedTaskName" style="margin-left:7px;margin-bottom:10px" /> 

    <br /> 

    <button onclick="rowRefresh()" style="margin-bottom:5px">Refresh Row</button> 

<script> 

function rowRefresh() { 

            //To get the value entered in TextBox 

            var textName = $('#refreshedTaskName').val(), 

                textIndex = $('#indexSelected').val(), 

                treeObj = $("#TreeGridContainer").data("ejTreeGrid"), 

                updatedRecords = treeObj.model.updatedRecords; 

            //To retrieve the required row from updated records 

            itemToUpdate = updatedRecords[textIndex]; 

            if (itemToUpdate) { 

                //To refresh the required record 

                itemToUpdate.taskName = itemToUpdate.item.taskName = textName; 

                treeObj.refreshRow(itemToUpdate.index); 

            } 

            else { 

                alert("Enter the valid Index"); 

            } 

        } 

</script> 

We have also prepared the sample based on this. Please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Michaelrefreshrow1997769948 

Regards, 

Jone sherine P S