Update data in grid programmatically

[A]

I have a grid worth of data coming from 2 different data sources that I smash together on the server side and send to the grid. Data from one of my sources is fine (ish... it is pretty slow too), data from the other source is brutally slow. So I want to send all of the data from source one and the first page worth of data from source 2 to the grid on page load, and then use JQuery/ajax to do a deferred load on the remaining data in the background.

I do not want to do an AJAX call per page because data source 1 isn't fast enough for that.

Since the second data source is so slow, I am chunking the unpopulated data into page sized chunks (blocks of 10) and letting the async goodness do its thing. I can do the ajax and get the supplemental data without a problem. I just can't seem to get the grid to respect the updated data. I can't replace the whole datasource's data set at once because we are doing this all async and we will have data pouring in all willy nilly and we don't want to have potential over writes. So we have to update it per row.

const fieldsToUpdate = ["field1", "field2", "field3", "field4"];

$.ajax({
.... blah blah blah ....
success: function(responseData) {

     const accounts = responseData.Data.AccountList;
     for (let idx = 0; idx < accounts.length; idx++) {
              const curAccount = accounts[idx];
              const dataItem = theGrid.dataSource.get(curAccount.AccountNumber);
              if (dataItem) {
			console.log(`Deferred data load for: ${curAccount.AccountNumber}`);
			for (let propIdx = 0; propIdx < fieldsToUpdate.length; propIdx++) {
				const key = fieldsToUpdate[propIdx];

                                // because the set method will ignore anything that isn't marked as 'editable' and I don't care about that
                                let hasEdit = false;
				if (dataItem.fields[key].hasOwnProperty("editable")) {
					dataItem.fields[key].editable = hasEdit = true;
				}

				// actually set the value
				dataItem.set(key, curAccount[key]);

                                // set it back to whatever it was
                                  if (hasEdit) {
					dataItem.fields[key].editable = false;
				}
			}

                        // we don't care
			dataItem.dirtyFields = {};
                        dataItem.dirty = false;
	}
     }
}
});
				
				

So the above kinda sorta works. It will display the right data until you attempt to move to a different page. Then it looses it mind and the data reverts back to what it was originally (unset) and the paging breaks and the grid just stops working all together. There are no errors visible in the console.

What is the proper way to update individual rows of data in a grid that may or may not be visible on the current page of the grid?

[Tsvetomir]

Hi,

In general, it really depends on where the data operations of the grid are executed. For instance, if the grid is set up for server-side data processing when you change the page, the grid will initiate an AJAX request and it will gather the data directly from the database. 

Hence, if the data is updated only locally but has not been synced, it will not be persisted after the first refresh. If you want to sync the data after you have finished modifying it, you should call the sync() method of the data source:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/sync

It would be very helpful if you could share the declaration of the Telerik UI Grid so that I could investigate and make the connection between the provided snippet and the grid's setup. 

Looking forward to your reply.

 

Kind regards,
Tsvetomir
Progress Telerik

[A]

The mark up looks like:

@(Html.Kendo().Grid<AssociatedAccount>().Name("associatedAccounts")
.Height(370)
.BindTo(Model.Data.AssociatedAccounts)
.DataSource(ds=>ds.Ajax().Model(m=>m.Id("AccountNumber")))
.Columns(columns =>
{
columns.Bound(b => b.AccountNumber).Hidden().ClientTemplate("<span class='accountNumber' data-id='" + Model.Data.Id + "' data-bp='#:data.BusinessPartnerAccountNumber#' data-at='#:data.AccountTypeId#'>#:data.AccountNumber#</span>");
columns.Bound(b => b.FormattedAccountNumber).Title("Account Number").Width(180).ClientTemplate("<span>#:data.FormattedAccountNumber#</span>#if(data.IsDefaultAccount){#<i class='fas fa-circle is-default'></i>#}#").HtmlAttributes(new {title = "click to select", @class = "std-col" });
columns.Bound(b => b.DescriptiveName).Title("Descriptive Name").HtmlAttributes(new {title = "click to select", @class="std-col"});
columns.Bound(b => b.BillDeliveryMethodName).Title("Bill Preferences").HtmlAttributes(new {title = "click to select", @class = "std-col" });
columns.Template("<span><img src='/images/pencil-edit-button.svg' alt='Edit this row' title='Edit this row' class='edit-row-btn'> <i class='delete-row-btn far fa-trash-alt' title='click to delete'></i></span>").HtmlAttributes(new {@class = "action-column"}).Width(80);
})
.ToolBar(tb => tb.Search())
.Pageable()
.Sortable()
.Scrollable()
.Deferred())

I do not ever want the grid to update the data or attempt to update the data.
I just want it to display what I am giving it as data and to let me manage the updating of the data.
The operations for the updates that I am doing, I need to handle outside of the grid.... I am just looking for a presentation layer for a really big slab of data.

-Cam

[Tsvetomir]

I have noticed that both the BindTo and the DataSource options are utilized. It is important to point out that the two are not compatible - they are interchangeable. You should use only one of the approaches. 

If you would like to have local binding only with no create/update/delete operations, I recommend that you seed the data with the data() method, if the data is not loaded with the BindTo collection.

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource