Refresh Grid After DataSource Sync

15 posts, 1 answers
  1. Kevin
    Kevin avatar
    3 posts
    Member since:
    Mar 2012

    Posted 25 May 2012 Link to this post

    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!
  2. Steve
    Steve avatar
    2 posts
    Member since:
    May 2011

    Posted 27 May 2012 Link to this post

    This is a better way of wording the issue I am currently having so I'm also hoping for an answer on this
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Steve
    Steve avatar
    2 posts
    Member since:
    May 2011

    Posted 27 May 2012 Link to this post

    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.

  5. Kevin
    Kevin avatar
    3 posts
    Member since:
    Mar 2012

    Posted 28 May 2012 Link to this post

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

    Thanks!
  6. johnny young
    johnny young avatar
    3 posts
    Member since:
    Jan 2010

    Posted 04 Oct 2012 Link to this post

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


    thanks a lot
  7. Muhammad
    Muhammad avatar
    4 posts
    Member since:
    Nov 2010

    Posted 08 Nov 2012 Link to this post

    Thanks a lot this also resolved my problem.
  8. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 13 Nov 2012 Link to this post

    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.








  9. Just
    Just avatar
    24 posts
    Member since:
    Aug 2012

    Posted 13 Nov 2012 Link to this post

    @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.
  10. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 07 Dec 2012 Link to this post

    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.
  11. wgmleslie
    wgmleslie avatar
    4 posts
    Member since:
    Dec 2013

    Posted 28 Feb 2014 in reply to erwin Link to this post

    @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.
  12. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 28 Feb 2014 in reply to wgmleslie Link to this post

    @wgmleslie - Glad I could be of help
  13. Aldo
    Aldo avatar
    3 posts
    Member since:
    Oct 2013

    Posted 17 Apr 2014 Link to this post

    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!
  14. Saima
    Saima avatar
    7 posts
    Member since:
    Apr 2014

    Posted 07 May 2014 in reply to erwin Link to this post

    Can you please send code how can return same record?
  15. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 14 May 2014 in reply to Saima Link to this post

    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.
  16. Calvin
    Calvin avatar
    42 posts
    Member since:
    Jul 2011

    Posted 17 Dec 2014 in reply to Aldo Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready