Refresh Grid After DataSource Sync

[Kevin]

I'm working on an application that will use the Grid to display data and allow a user to modify the data using CRUD methods within the grid. It is connected to a DataSource that sends the data to another page to perform the actual SQL functions.

I was curious if there was some sort of callback event, specifically for Creating and Updating, that would allow the Grid to be refreshed after a transaction, ensuring data integrity?

Possible scenario: a user creates a row within the grid, and saves the changes. The row is created without an ID, as one is assigned after the SQL statement has executed. If the user then makes another change to that row, it has no ID to use to perform the SQL update correctly.

Any help would be much appreciated!

[Steve]

This is a better way of wording the issue I am currently having so I'm also hoping for an answer on this

[Steve]

Kevin, figured out a way to do this now:

transport: {
read: {
url: "http://myurl.json"
},
create: {
url: "http://mycreate.json",
type: "POST",
complete: function(e) {
$("#grid").data("kendoGrid").dataSource.read(); 
}
},
......

I can't find this "complete" event anywhere in the documentation but after a lot of searching on here I found it. If you do a read() on your datasource then, the grid will update (or anything else you want to do in there).
I don't know if there is a better way, but this should work going off your description.

[Kevin]

Brilliant! I was hoping there was an undocumented property to achieve this. They really should add this to the documentation!

Thanks!

[johnny young]

is working in the "update" add this code in the transport:
               complete: function(e) {
$("#grid").data("kendoGrid").dataSource.read(); 
}


thanks a lot

[Muhammad]

Thanks a lot this also resolved my problem.

[erwin]

The manual refresh of the datasource is not neccessary if
the create/update methods return the modified data as response to the request.

The typical scenario is that fields such as "id" or "last_modification" are set by the database at INSERT or UPDATE
through triggers or sequences.

Just return the same json structure for the modified/created object (record) only as you did to initially populate the datasource (according to the datasource model). The datasource and grid will update themselves smoothly without any manual refresh code and without the additional roundtrip caused by calling read().

As a newbie to jquery / json programming I had quite a hard time to find this out - probably obvious to experienced web developers.

[Just]

@erwin: you are right but the only issue I've seen with that is that it doesn't retain the initial sort order as the grid inserts the created row at the top. It works fine for Update.

[erwin]

Inserting a new row and maintaining the sort order can be very confusing if you have a paged grid and the sort order places the new row on a page other than the currently visible one.

[wgmleslie]

@Erwin - Thank you for your excellent suggestion.

                        IQueryable<uspGetBillingRowResultSet0> billingRow = entitiesModel.UspGetBillingRow((int)Session["EmployeeId"], billing.BillingID).AsQueryable();
                        DataSourceResult result = billingRow.ToDataSourceResult(request);

                        return Json(result);

Returning the DataSourceResult for the created or updated row worked.

[erwin]

@wgmleslie - Glad I could be of help

[Aldo]

Hi Erwin,

You mentioned that the manual refresh of the datasource is not neccessary if the create/update methods return
the modified data as response to the request. Just return the same json structure for the modified/created object (record) only as you did to initially populate the datasource (according to the datasource model). The datasource and grid will update themselves smoothly without any manual refresh code and without the additional roundtrip caused by calling read().

My question here is : how does the datasource and grid update themselves?

Actually I am trying ‘Save all changes with one request’ (http://www.telerik.com/support/code-library/save-all-changes-with-one-request)
solution. I modified UpdateCreateDelete() method to return  modified data as response to the request. Now I want to make datasource and grid update themselves smoothly without the additional roundtrip caused by calling read().

Please suggest how I may do this.

 

public ActionResult UpdateCreateDelete([DataSourceRequest] DataSourceRequest request,
            [Bind(Prefix = "updated")]List<Order> updatedOrders,
            [Bind(Prefix = "added")]List<Order> newOrders,
            [Bind(Prefix = "deleted")]List<Order> deletedOrders)
        {
            if (updatedOrders != null && updatedOrders.Count > 0)
            {
                for (int i = 0; i < updatedOrders.Count; i++)
                {
                    var target = orderList.Where(o => o.OrderID == updatedOrders[i].OrderID).FirstOrDefault();

                    if (target != null)
                    {
                        int targetIndex = orderList.IndexOf(target);
                        orderList[targetIndex].OrderDate = updatedOrders[i].OrderDate;
                        orderList[targetIndex].EmployeeID = updatedOrders[i].EmployeeID;
                        orderList[targetIndex].OrderDescription = updatedOrders[i].OrderDescription;
                    }
                }
            }

            if (newOrders != null && newOrders.Count > 0)
            {
                for (int i = 0; i < newOrders.Count; i++)
                {
                    newOrders[i].OrderID = orderList[orderList.Count - 1].OrderID + 1;
                    orderList.Add(newOrders[i]);
                }

            }

            if (deletedOrders != null && deletedOrders.Count > 0)
            {
                for (int i = 0; i < deletedOrders.Count; i++)
                {
                    var target = orderList.Where(o => o.OrderID == deletedOrders[i].OrderID).FirstOrDefault();

                    if (target != null)
                    {
                        orderList.Remove(target);
                    }
                }
            }

            List<Order> responseOrders = new List<Order>();
            responseOrders.AddRange(updatedOrders);
            responseOrders.AddRange(newOrders);
            responseOrders.AddRange(deletedOrders);

            return Json(responseOrders.ToDataSourceResult(request, ModelState));

            //return Json("Success!");
        }

Thanks!

[Saima]

Can you please send code how can return same record?

[erwin]

The code is of course different for the different server techniques. I had to use python with no wrappers provide by telerik so that may not be of much use to you. The json structure has to be exactly the same as for other operations with only the affected record(s) in it.

[Calvin]

This approach doesn't work when taking the grid's datasource offline, creating a batch of entries, and then taking the datasource online (which triggers a sync). Even though the server's 201 response includes the newly created objects (in the expected format), the grid's version isn't fixed up.  If for example you immediately attempt to delete one of the new records via the grid's UI or programmatically against the datasource the DELETE request isn't issued.

[Rahul]

Thanking you in 2021 !!!, Steve for posting this solution to this problem. This solutions seems to be most elegant and most standard in comparision to the documentations provided by telerik team. 

and yes , must say that though telerik provides some cool features, but documentation to support them are pathetic at times.. always the simplest possible solution.. and support on forum is so less. 

[Tsvetomir]

Hi Rahul,

Indeed, when the Create request is sent and the response contains the updated data item, then the Grid will update automatically and there will be no need to manually refresh it. Please find the respective demo here:

https://demos.telerik.com/kendo-ui/grid/editing-inline

As per the quality of the documentation, we do our best to keep it up-to-date. Is it possible for you to share feedback on which part of the documentation should we focus on?

Thank you in advance.

 

Regards,
Tsvetomir
Progress Telerik