JS error in RadGrid when resizing columns in Ajaxify Timer example

[Hamidreza]

Hi, We're using Telerik ASP.NET AJAX (2011 Q2) in our product. in some pages we need to refresh the RadGrid by timer every 10 sec. As it's described in "Ajax / Ajaxify Timer" demo example in here . The example just shows a grid without any client side grid features like resizing columns, regrouping, selecting rows, sorting, etc. We need these features in our application. So we enabled many of them . But if during any client side activity in grid (like resizing columns) the  timer fires to refresh the grid, the ajax request initiated by timer causes error  inside one of  Telerik WebResource .axd dynamic files and then the grid keeps to raise more errors or fails to continue to work and freezes. This is one of those errors but we get many different error types too:
Microsoft JScript runtime error: '_events' is null or not an object

It looks like DOM object gets corrupted after a timer ajax call during any client side function in RadGrid and it fails to handle error. Is there any way to recognize client activity before timer ajax request?

This is very important issue in our product and needs to be fixed as soon as possible. Please Help.

[Veli]

Hello Hamidreza,

These errors may happen due to MS AJAX framework's inability to dispose properly of AJAX components when you interact with them. In the case of RadGrid, when resizing columns, RadGrid uses additional dynamically created DOM elements and other settings that cannot be immediately disposed until the resizing finishes. If the AJAX control is disposed during resizing, the grid client state is broken and remains inconsistent until a full page refresh. This is why you are getting other errors after the initial error.

To work around this limitation, you can use some javascript to prevent RadGrid from refreshing if there is any user activity. To identify activity, you can use the mousemove DOM event attached to the RadGrid container element. If the user moves the mouse over RadGrid, the timer would be stopped. It would also be resumed later on when the cursor does not move over RadGrid for a specified amount of time.

All the javascript can be attached on the pageLoad() function:

function pageLoad() {
    var grid = $find("RadGrid1"), //the grid object
        timer = $find("Timer1"),  //the timer object
        inactiveInterval = 1000,  //idle interval
        inactiveTimeout = null;   //idle timeout

    $addHandler(grid.get_element(), "mousemove", function(e) {
        //clear idle timeout on activity
        if (inactiveTimeout)
            clearTimeout(inactiveTimeout);

        //stop timer to prevent postback
        timer._stopTimer();

        //set a new idle timer to count idle time
        inactiveTimeout = setTimeout(function() {
            timer._startTimer();
        }, inactiveInterval);
    });

    grid.add_disposing(function() {
        //clear the idle timeout when the grid is disposed
        clearTimeout(inactiveTimeout);
    });
}

Let me know how this approach works for you.

Veli
the Telerik team