This is a migrated thread and some comments may be shown as answers.

Kendo MVC Grid - Refresh after AJAX Row Operation

10 Answers 1385 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 04 Sep 2012, 03:21 PM
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

10 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 10 Sep 2012, 02:20 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Thomas
Top achievements
Rank 1
answered on 09 Oct 2012, 06:24 PM
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.
0
Vladimir Iliev
Telerik team
answered on 12 Oct 2012, 11:28 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sean
Top achievements
Rank 1
answered on 15 Oct 2012, 09:18 PM
So how do you do this with the trial version? I need to build a proof of concept to justify using Kendo. Thanks
0
Nandan
Top achievements
Rank 1
answered on 23 Oct 2012, 11:56 AM
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  
0
Vladimir Iliev
Telerik team
answered on 25 Oct 2012, 02:52 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Praseeda
Top achievements
Rank 1
answered on 30 Oct 2012, 06:38 AM
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();
        }
0
Jorge
Top achievements
Rank 1
answered on 14 Nov 2012, 07:02 PM
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.
0
John
Top achievements
Rank 1
answered on 07 Feb 2019, 04:01 PM

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

 

0
Alex Hajigeorgieva
Telerik team
answered on 11 Feb 2019, 03:22 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Scott
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Thomas
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Nandan
Top achievements
Rank 1
Praseeda
Top achievements
Rank 1
Jorge
Top achievements
Rank 1
John
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or