Any callback for .rebind()?

[Brad]

I'm using a PageMethod to update grid data on the server-side and then rebinding on the successful callback. During the PageMethod I have a LoadingPanel shown which I hide on the successful callback. However, the rebind also takes some time and I would like to hide the LoadingPanel AFTER the rebind is complete. Is there any way to have a callback function for rebind()? Or maybe some other way to know when it's complete? At the moment, I'm using a setTimeout to give it an arbitrary second or two to complete (which is not, obviously, always correct)

[Veli]

Hello Brad,

Have you tried the client-side OnDataBound event in RadGrid?

Veli
the Telerik team

[Brad]

My client events include OnDataBound and OnDataBinding: neither fire.

<ClientSettings>
    <ClientEvents OnDataBinding="dataBinding"OnDataBound="dataBound" />
</ClientSettings>

[Veli]

OnDataBinding should fire before actual databinding and OnDataBound - right after. If they do not fire, then RadGrid is not rebound. Are you setting the grid data source using RadGrid.get_masterTableView().set_dataSource() and then calling RadGrid.get_masterTableView().dataBind()? Can you send us some sample code we can look at?

Veli
the Telerik team

[Brad]

I am not calling set_dataSource(); I am executing a PageMethod that updates the Session datasource object. When the PageMethod success function fires, I call rebind() on the grid. This works perfectly except that I cannot show the LoadingPanel for the duration of the rebind. Presently, I just hide the panel after an arbitrary 2 seconds with a setTimeout command in the PageMethod success function. I would prefer to hide the panel when the rebind is complete.

function executeProjectSearch(sender) {
    try {
        showLoadingImage("<%= uxPanelBar.ClientID %>");
        var addressSearchString = $('#<%= uxProjectSearchAddressTextBox.ClientID %>').val();
        var nameSearchString = $('#<%= uxProjectSearchNameTextBox.ClientID %>').val();

        if (addressSearchString.length == 0 && nameSearchString.length == 0) {
            log('no go.');
        } else if (addressSearchString.length != 0) {
            PageMethods.SearchProjects("address", addressSearchString
                , projectSearchSucceeded
                , projectSearchFailed);
        } else if (nameSearchString.length != 0) {
            PageMethods.SearchProjects("name", nameSearchString
                , projectSearchSucceeded
                , projectSearchFailed);
        }
    }
    catch (ex) {
        try { log(' ** executeProjectSearch > ERROR: ' + ex.get_Message()); }
        catch (anotherEx) { log(' ** executeProjectSearch > ERROR: no message'); }
        finally { hideLoadingImage(); }
        throw ex;
    }
}
function projectSearchSucceeded(returnValue, userContext, methodName) {
    try {
        // show results
        var resultsGrid = $find('<%= uxSearchResultsGrid.ClientID %>');
        if (resultsGrid == null) { throw 'cannot find <%= uxSearchResultsGrid.ClientID %>'; }
        var resultsGridTable = resultsGrid.get_masterTableView();
        resultsGridTable.rebind();
        var resultsPanel = $find('<%= uxPanelBar.ClientID %>').findItemByText('Results');
        resultsPanel.expand();
        //hideLoadingImage();
        setTimeout('hideLoadingImage();', 2000); // give some time for rebind to complete
    }
    catch (ex) {
        try { log(' ** projectSearchSucceeded > ERROR: ' + ex.get_Message()); }
        catch (anotherEx) { log(' ** projectSearchSucceeded > ERROR: no message'); }
        finally { hideLoadingImage(); }
        throw ex;
    }
}
function projectSearchFailed(error, userContext, methodName) {
    try {
        growl(methodName + ' failed', 'warning', 'Whoops!', true);
        hideLoadingImage();
    }
    catch (ex) {
        try { log(' ** projectSearchFailed > ERROR: ' + ex.get_Message()); }
        catch (anotherEx) { log(' ** projectSearchFailed > ERROR: no message'); }
        finally { hideLoadingImage(); }
        throw ex;
    }
}

[Veli]

OK, then you are using server-side binding. In this case, you need to structure your code in a bit different manner. Note that a call to RadGrid.rebind() will make a postback. If you AJAX-ify RadGrid, this would be an AJAX postback. After a postback is started, you should be expecting the page content to change, so it is not recommended (and supported) to be executing javascript after a postback has started. RadGrid will reload on AJAX and the entire AJAX client life cycle will be restarted.

As for hiding the loading panel, in the general case, you can use RadGrid's GridCreated event in this case. This event fires after every postback (AJAX or regular) when the RadGrid client component has finished initialization. This is a good place to execute code that waits for RadGrid to fully load on the client.

On the other hand, if you just need to hide a loading panel, AJAX-ifying RadGrid with a RadAjaxPanel or RadAjaxManager and associating a RadAjaxLoading with it would do the same job. The loading panel would show on every AJAX request updating RadGrid, and calling .rebind() is exactly updating RadGrid.

Veli
the Telerik team