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. Image for the cookie policy date

TreeGrid?Grid - Update values in grid

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

6 Replies

JS Jonesherine Stephen Syncfusion Team November 11, 2016 06:43 AM UTC

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
  



MS Michael Salzlechner November 11, 2016 10:20 AM UTC

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


JS Jonesherine Stephen Syncfusion Team November 14, 2016 03:28 PM UTC

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 
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.  
We have also prepared a sample that can be downloaded from the following location.  
 
Regards, 
Jone sherine P S 



MS Michael Salzlechner November 29, 2016 03:35 PM UTC

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



MS Michael Salzlechner November 29, 2016 07:22 PM UTC

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





JS Jonesherine Stephen Syncfusion Team November 30, 2016 08:27 AM UTC

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 
Regards, 
Jone sherine P S 


Loader.
Up arrow icon