Cancelling grid data read ajax request

[Shabtai]

Hi,

I'm using Kendo grid within div and while reading data I'm blocking to prevent user activity on it. I need to put long process cancellation button in order to cancel ajax grid request.

$('#div').block({
message: '<h1 style="color:blue;">אנא המתן...</h1><br><input type="button" value="CANCEL" onclick="cancelSemHours()"/>'
});

On server side I'm supposed to implement following in data read action :

if (!Response.IsClientConnected)
{
    Response.End();
}

How do I implement the client-side cancellation with kendo grid? (cancelSemHours function) 

Thank you in advance,
Waiting for your kind and prompt reply
Shabtai

[Alexander Popov]

Hello Shabtai,

I would recommend making an Ajax request to the Action that sets the IsClientConnected to false, for example:

<script>
function cancelSemHours(){
   $.ajax("SemHours_DisconnectClient");
}
</script>

 
Regards,
Alexander Popov
Telerik

[Shabtai]

Sorry, but Response.IsClientConnected is read-only.

It should be done using ajax function req.abort() or $.ajaxPrefilter
but how do I catch request object for my Kendo grid?

[Alexander Popov]

Hello Shabtai,

Getting the Grid's read request is currently not supported out of the box, however you could intercept the request by attaching a function to the jQuery's ajaxSend event. Here is an example:     

<script type="text/javascript">
    $(document).ajaxSend(function (event, jqXHR, ajaxOptions) {
        if (ajaxOptions.url == "Path/To/GridReadAction") {
            window._gridXHR = jqXHR;
        }
    });

    $(document).ready(function () {
        $("#abort").click(function () {
            window._gridXHR.abort();
        });
    });

</script>

<button id="abort">Abort Ajax Request</button>

@(Html.Kendo().Grid<SomeViewModel>()
    .Name("grid")
     ...
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GridReadAction", "Grid"))
     )

 
Regards,
Alexander Popov
Telerik

[Shabtai]

Thank you, your solution worked perfect, but only on client side...

On server side, after grid read action is called, after cancellation on client side, the process is still working, continuing execution of  stored procedure in DB...
When I'm trying to go on with other actions from UI, it is stuck (as soon as data read ActionResult is not completed)

I suppose, there's a solution for cancelling server side action (kendo grid) as well...

BTW, what am I supposed to return on grid read action on cancellation of action instead of: 
return Json(dt.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
?

Thanks

[Alexander Popov]

Hello again,

This behavior is expected, unless the server-side is configured to process the requests asynchronously. How to do that is not directly related to Kendo UI and is described on various places over the Internet.
Once the request's abort method is called the browser will disregard its response, so it does not matter what the Action will return.
 
Regards,
Alexander Popov
Telerik