rowSelecting and rowSelected event during postback

[Pavel]

Hi,

I'm evaluating these control for the last few weeks. So far looking good, but I've stumbled over the major issue.

- I'm using masterpages
- I have a single aspx page, which contains dynamically loaded usercontrol (let's call it UC1) using my factory. This user control contains another usercontrol (UC2), also loaded dynamically using factory.
- The RadGrid is defined in the UC1 container. I've set a rowSelected and rowSelecting event handler for this grid. Every time user selects a row, I want to update the panel in the UC2 user control. This works great.
- If the user is quick and changes row "during the running postback", I receive the "Property or method is not supported by this object". The source of this error is located somewhere in the telerik's JS source.
- rowSelecting and rowSelected handlers are not being called during the postback, the error happens prior to calling them.
- It looks like my handlers are not accessible. But I don't really understand how is this possible as the handler is defined in the UC1 and I'm updating small part of UC2 only. It is really annoying as I've quite a lot of these errors when controlling the grid using the keyboard.

Any ideas? Thanks.

[Tsvetoslav]

Hello Pavel,

I suppose that upon row selection your are either throwing an ajax request or making a post back having set EnablePostBackOnRowSelectin = true for the RadGrid control. I'd advise you to implement a way to prevent the second post-back as obviously that might lead to inconsistent client components in the browser and hence javascript exceptions. And actually that is very easy to implement. Just set a flag in the OnRowSelected client-side event that a post-back is about to occur and then in the OnRowSelecting event check the flag: if it is set, cancel the event (args.set_cancel(true) ).

Hope it helps.

Greetings,
Tsvetoslav
the Telerik team

[Pavel]

Tsvetoslav,

thank you for your answer. Unfortunately, I believe this is not the case. Please refer to my current solution in the code snippets below:

Grid declaration and its settings in UC1:

<telerik:RadGrid AutoGenerateColumns="false" ID="grid" runat="server" Width="100%" Height="100%"
                 AllowFilteringByColumn="false" EnableLinqExpressions="false"
                 ShowFooter="false" ShowGroupPanel="false" ShowStatusBar="false" GridLines="None" AllowPaging="true">
    <PagerStyle Mode="NextPrevNumericAndAdvanced" />
    <MasterTableView PageSize="50" DataKeyNames="ID" ClientDataKeyNames="ID" TableLayout="Fixed">
    </MasterTableView>
    <SortingSettings EnableSkinSortStyles="true" />
    <ClientSettings AllowColumnHide="true" AllowColumnsReorder="true" ColumnsReorderMethod="Reorder" EnablePostBackOnRowClick="false"
                    EnableRowHoverStyle="true" AllowKeyboardNavigation="true">
        <Selecting AllowRowSelect="true" />
        <Resizing AllowColumnResize="true" AllowResizeToFit="true" EnableRealTimeResize="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
        <ClientEvents OnRowSelecting="rowSelecting" OnRowSelected="rowSelected" />
        <KeyboardNavigationSettings AllowSubmitOnEnter="false" EnableKeyboardShortcuts="false" />
    </ClientSettings>
</telerik:RadGrid>

Keeping the "ajaxRequestInProgressGrid" flag up to date in UC1:

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequestGrid);
prm.add_endRequest(EndRequestGrid);
var ajaxRequestInProgressGrid = false;

function InitializeRequestGrid(sender, args) {
    ajaxRequestInProgressGrid = true;
}

function EndRequestGrid(sender, args) {
    ajaxRequestInProgressGrid = false;
}

Solving the row selection in UC1:

function rowSelecting(sender, args) {
    if (ajaxRequestInProgressGrid) {
        args.set_Cancel(true);
        return false;
    }
}

function rowSelected(sender, args) {
        var record_ID = null;

        var grid = $find("<%= grid.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var selectedRows = MasterTable.get_selectedItems();
        if (selectedRows.length > 0) {
            var row = selectedRows[0];
            record_ID = row.getDataKeyValue("ID");
        }
        reloadForm(record_ID); // Method defined in UC2
}

calling the ajax request in UC2:

function reloadForm(record_ID) {
    $find("<%= radPanelForm.ClientID %>").ajaxRequest(record_ID);
}

The behavior of this solution:
- Everything works just fine as soon as I won't try to change selected row during the postback in progress
- If I change the row during the postback, even the "rowSelecting" method won't get called! The exception raises even before calling this method. I suppose these methods are not accessible for the RadGrid instance. But I can't see a reason why this should be happening.

Any solution or workaround is appreciated.
Thank you.

[Daniel]

Hello Pavel,

There are two alternative solutions, besides the approach suggested by Tsvetoslav.

1) Use loading panel - this way the user won't be able to click during postback
AJAX Loading Panel

2) Take advantage of the AJAX request queuing functionality
Ajax requests queueing

Let me know whether they are suitable for your scenario.

Regards,
Daniel
the Telerik team

[Pavel]

Hello Daniel,

thank you for your reply. Unfortunately, I believe you didn't follow my issue properly. Sticking a loading panel over the grid every time user changes a grid row, that is a pure UX disaster. Also, I'm not quite sure how can ajax requests queueing help in my case as I'm dealing with a single request only. I simply want RadGrid to call my CLIENT SIDE methods "rowSelecting" and "rowSelected" even when there is a SINGLE ajax request in progress without telerik's JS code throwing me an exception.

Thank you for your time and possible quick solution as this is the only current issue holding us from a purchase based on our proof of concept project.

[Tsvetoslav]

Hi Pavel,

Attached is a small sample where I have implemented the solution discussed in my previous post. Could you try to reproduce the exception on it, as I was not able to, and give some directions on how to do so on my side. 

Regards,
Tsvetoslav
the Telerik team

[Pavel]

Tsvetoslav,

thank you for the provided sample code. I've been playing with it for a while and I finally found the reason. Next time, I should not assign initializeRequest and endRequests handlers outside the pageLoad event handler. Doing so solved the issue for me, lesson learned :)

Thank you very much for your time and support.