Kendo grid - Cancel request

[Salvatore]

Hello there,
i have a project with MVC Asp.Net, Kendo v. "2024.4.1112.462" and would like to
- load data into grid, the data is returned by MVC Controller
- the spinner with the "loading data in progress" should never appear
- so the user can "play" on the grid header filters while loading data is ongoing 
- when the user clicks on "apply" on grid header filter, the previous request must be canceled to run the new request with latest filters applied, in this way the c#  CancellationToken is Canceled on server side.

Can you tell me how to "cancel" the actual http request from the kendo grid (client) and execute the new one, as described in the last point?

thanks in advance

[Anton Mironov]

Hi Salvatore,

Thank you for the details provided.

Here’s how you can approach your requirements with Kendo UI for ASP.NET MVC:

1. Prevent the Loading Spinner from Appearing

You can hide the loading spinner for the Kendo Grid by overriding its CSS. Add the following style to your page:

.k-loading-mask {
    display: none !important;
}

This will prevent the loading indicator from showing while data is being fetched.

---

2. Cancel Previous Ajax Requests When Applying New Filters

The Kendo Grid does not natively cancel previous Ajax requests. However, you can customize the dataSource’s transport to track and abort the previous request before starting a new one. Here’s an example of how to set this up:

var currentRequest = null;

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: function(options) {
                // Abort previous request if still running
                if (currentRequest && currentRequest.readyState !== 4) {
                    currentRequest.abort();
                }
                currentRequest = $.ajax({
                    url: "/YourController/YourAction",
                    data: options.data,
                    success: function(result) {
                        options.success(result);
                    },
                    error: function(result) {
                        options.error(result);
                    }
                });
            }
        },
        // ... other dataSource settings
    },
    // ... other grid settings
});

This ensures that only the latest request is processed, and any previous request is canceled on the client side.

---

3. Server-Side Cancellation with CancellationToken

Currently, the ToDataSourceResultAsync method in Kendo UI for ASP.NET MVC does not support passing a CancellationToken. This means that even if you abort the request on the client, the server-side operation will continue to execute. Native support for server-side cancellation is not available at this time.

---

If you need further guidance on customizing the grid or handling specific scenarios, let me know!

 

Kind Regards,
Anton Mironov
Progress Telerik