AjaxLoadingPanel + RadGrid + Collapsing Column Group = Javascript Error

[EpiqDev]

Telerik,

I have found that collapsing/expanding a group by column in a RadGrid can cause Javascript Errors when using the AjaxLoadingPanel. 

Here is my situation...

I am using the following Javascript to capture the begin and end request to show the Loading Panel (based on the example here):

    var loadingPanel = "";
    var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
    var postBackElement = "";
    pageRequestManager.add_initializeRequest(initializeRequest);
    pageRequestManager.add_endRequest(endRequest);

    //Ajax Request
    function initializeRequest(sender, eventArgs) {
        setLoadingPanelStyle($get('<% = RadAjaxLoadingPanel1.ClientID %>'))

        loadingPanel = $find('<% = RadAjaxLoadingPanel1.ClientID %>');
        postBackElement = eventArgs.get_postBackElement().id;
        loadingPanel.show(postBackElement);
    }

    //End Ajax Request
    function endRequest(sender, eventArgs) {
        loadingPanel = $find('<% = RadAjaxLoadingPanel1.ClientID %>');
        loadingPanel.hide(postBackElement);
    }


    //Set Style of loading Panel
    function setLoadingPanelStyle(ourLoadingPanel) {
        ourLoadingPanel.style.height = document.documentElement.scrollHeight + "px";
        ourLoadingPanel.style.width = document.documentElement.scrollWidth + "px";
        ourLoadingPanel.style.position = "absolute";
        ourLoadingPanel.style.top = "0";
        ourLoadingPanel.style.left = "0";
    }

This javascript works 99% of the time. The one situation it does not work is when the user collapses/expands a grouping by column on the radgrid. In both cases the postBackElement in the initializeRequest and endRequest function end up returning null and throwing a javascript error.

I have modifyied my Javascript to check for null, but the result is that the AjaxLoadingPanel does not show.

Is there anything that I can do to make the AjaxLoadingPanel show up for this situation without modifying this code too terribly?

Thanks,

Thomas M. Porter II

[Georgi Krustev]

Hello Tom,

The error is thrown because the expand/collapse button does not have an ID. In the current implementation of the button there is no need button to have id. To avoid this issue, I will suggest you use RadAjaxPanel. Here is an help article describing how to show/hide RadAjaxLoadingPanel when RadAjax is used.

If you still need to use UpdatePanel you can check if the element which make the postback has an ID. If it have not an ID you can check if the parent item has an ID and its name contains the unique id of the grid. Thus you can show the RadAjaxLoadingPanel on the parent item which has an ID.

Kind regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.