Kendo MVC Grid - Refresh after AJAX Row Operation

[Scott]

Hello, I am using the Kendo MVC Grid and would like to know how to refresh the grid server-side after one of the AJAX row operations such as Destroy, Update, or Create. The reason for this is I have my columns "ranked" let's say from 0 to 100. A user can update the row that is ranked 100 to 3 and all items in between must be re-ranked to account for the update. This works fine server-side, but the client does not actually rebind. Is there a javascript method that I can run after the AJAX operation succeeds similar to the "Error" method used to trap and show AJAX errors?

Thank you as always,

Scott

[Vladimir Iliev]

Hi Scott,

 
The MVC Grid actually rebind itself after such operation. Can you send us your current Grid configuration or prepare example project where the issue can be reproduced?


Update: Please note that the above works only for Telerik Extensions for MVC Grid. For the Kendo UI for ASP.NET MVC Grid there is new event "requestEnd" in the latest internal build, which can be used in your case. You can place your DataSource read method inside this event. There is event type parameter which can be used to determinate which operation is complete, and reload the data if the type is different than read.

Kind Regards,
Vladimir Iliev
the Telerik team

[Thomas]

Hi i'm having the same problem which version is the internal build? I have downloaded v2012.2.1002 but requestEnd is not in this one.

[Vladimir Iliev]

Hi Thomas,


The RequestEnd event of the DataSource is available from the KendoUI Q2 2012, SP1 - v.2012.2.913. Please find the examples below of how to use the RequestEnd event:

• KendoUI MVC wrappers:

      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("Products_Read", "Grid"))
          .Events(events => events.RequestEnd("onRequestEnd"))
       )
  )
  
  <script>
      function onRequestEnd(e) {
          //RequestEnd handler code
      }
  </script>

• KendoUI Web: 

  function onRequestEnd() {
      //RequestEnd event handler code
  }
  
  $(document).ready(function() {
      $("#grid").kendoGrid({
          dataSource: {
              type: "odata",
              transport: {
                  read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
              },
              schema: {
                  model: {
                      fields: {
                          OrderID: { type: "number" },
                          Freight: { type: "number" },
                          ShipName: { type: "string" },
                          OrderDate: { type: "date" },
                          ShipCity: { type: "string" }
                      }
                  }
              },
              requestEnd: onRequestEnd
          },

  

 

Kind Regards,
Vladimir Iliev
the Telerik team

[Sean]

So how do you do this with the trial version? I need to build a proof of concept to justify using Kendo. Thanks

[Nandan]

Hello,
  How can I upgrade to  Q2 2012, SP1 - v.2012.2.913. Currently I am using trial version of kendoui.trial.2012.2.710.

Regards,
Nandan  

[Vladimir Iliev]

Hi,

 

Please note that the trial accounts currently are not eligible for downloading service packs, however in current case you can open new support ticket to send you the new version of KendoUI.

Kind Regards,
Vladimir Iliev
the Telerik team

[Praseeda]

But, if you use the datasource.read() on RequestEnd event, it will go to an infinite loop.

function onRequestEnd(e)
        {
            alert("on request end");
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read();
        }

[Jorge]

I was able to update the grid after an ajax update with:

function onGridRequestEnd(evt) {
    if (evt.type === "update") {
        evt.sender.read();
    }
}

I think it is weird that this doesn't happen automatically (in all cases), at least for the row that was edited.

In my case: The automatic update fails when when one of the columns is edited as a custom template in EditorTemplates. In that case, if a dropdown change changes multiple columns, not all columns are updated.

[John]

The statement below fires on "Save" but not on "Cancel".  What is needed for the capture the cancel button click?

.Events(events => events.RequestEnd("onRequestEnd"))

 

[Alex Hajigeorgieva]

Hello, John,

You can add an event handler to the cancel event of the Kendo UI Grid:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/cancel

Kind Regards,
Alex Hajigeorgieva
Progress Telerik