Capturing AJAX requests for Refreshing Session

[Darren]

I have a site with several ajax MVC grids, and I want to implement a session timeout warning window after a given amount of time.  As such, I want the timeout to be refreshed each time the user Adds, Edits, or Deletes one of the rows in the grid.  Now, I know I can go into each grid and set the OnDataBound event to point to a function that resets the timer.  But, I would really like to go it globally.  For example, I am using the following code to reset the timeout for all jquery ajax requests:

// Set up the timer for the Session Timeout
$(document).ready(function () {
    ResetTimeout();

    $.ajaxSetup({
        complete: function () {
            // Reset the timeout
            ResetTimeout();
        }
    });
});

In trying to do something similar for the data grids, I added the following code at the bottom of the _Layout page:

<script type="text/javascript">
    $('.t-grid').each(function (index) {
        var gridName = $(this).attr("id");
        var grid = $('#' + gridName);
        alert(grid.data('tGrid'));

    });
</script>

At this point, I am just trying to access the grid, but the alert is showing "undefined".  So, I have two questions:

1. Any idea how I can dynamically get a hold of each grid?
2. Once I have the grid, how can I add a binding to the OnDataBound event?

Thanks in advance for your help.

[Atanas Korchev]

Hi,

 This should work:

$('.t-grid').each(function () {

        var grid = $(this).data('tGrid');

});

On a side note the grid is using $.ajax too so handling $.ajaxSetup should work. You can also use the OnComplete client side event of the grid.

Regards,
Atanas Korchev
the Telerik team

[Darren]

Atanas,

Thank you for your reply.  I have attached a sample project that displays the behavior I am seeing.  Using the project, when you click on the check box, the "complete" event is fired.  However, none of the grid's ajax requests cause it to be fired.  Let me know if you need any further information.

Thanks,

-Darren

[Atanas Korchev]

Hi,

It seems that the complete event is not raised if $.ajax specifies a complete function itself (as the grid does). The same can be reproduced easily in your example (find attached).

Use the Grid OnComplete instead of $.ajaxSetup.

Regards,

Atanas Korchev
the Telerik team

[Darren]

Thanks, again, Atanas.

But, I would rather not have to touch every grid in the application to add the OnComplete event handler.  Is there any way to do this generically (i.e. find any grids and set the handler when the page loads)?  As I stated above, the code I would have normally used for this doesn't seem to be working, and the code you suggested is also returning "undefined" when I try to use an alert to display the grid variable.

Let me know if you would like another sample solution.

Thanks,

-Darren

[Atanas Korchev]

Hi,

 I am not sure how to help further. I already said twice that you need to use the OnComplete event. The complete handler attached via $.ajaxSetup will not be called if complete is handled by $.ajax in another place (demonstrated in your project).

On a side note you have two different versions of jQuery included in your project. Make sure only one version of jQuery is included (Telerik Extensions for ASP.NET MVC supports jQuery 1.7.1).

Regards,
Atanas Korchev
the Telerik team

[Darren]

Well, it sounds like the answer is that there isn't any way to do it without touching every grid. Oh, well. I'll update this post if I ever find a solution. Thanks for taking the time to help. -Darren

[Darren]

For posterity's sake, I wanted to document how I eventually got it to work.  The following code allowed me to bind the "onComplete" event of each grid to a custom function:

// Set up the grids to reset the timeout with each refresh
$('.t-grid').each(function () {
    $(this).bind("complete", function () {
        ResetTimeout();
    });
});

The key is to place this javascript AFTER the call to include the Telerik scripts.
I hope this helps someone else in the future.