Ajaxed Grid - must click it twice

[Mike]

I have a grid that contains a column containing a checkbox.  Clicking the checkbox does an autopostback (the checked rows are saved in an array in the session so that the user's selections are preserved across multiple pages of the grid).  This works fine, but was orginally very slow to refresh in the browser (it wasn't really usable).  To speed it up I added entries to the RadAjaxManagerProxy to enable Partial Page Refreshes when the checkboxes are clicked.  This made the user experience much better; users can now quickly check the boxes in the grid without waiting.

But another feature of this page is that users can click anywhere in a grid row to postback to the server - then the grid is hidden and the detail fields of the record are displayed.  The problem I'm having is that the ajax settings are messing up the row click feature.  Users now have to click the row twice.  (The first click does postback to the server, but the client is doing a partial page refresh which leaves the grid still visible.  The second row click refreshes the whole page, which is the desired result.)

In summary, I want a checkbox in a grid that does an autopostback and a partial page refresh (only the grid should refresh).  Clicking anywhere else in the grid should do a postback and a full page refresh.

Would appreciate suggestions on resolving this. 

Here are the ajax settings:

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="chkSelected">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdOrders" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

And here's the grid:

<oscarcontrols:OscarGrid runat="server" ID="grdOrders" AutoGenerateColumns="false"
    Visible="true" PageSize="10" AllowPaging="true" ShowHeader="true" Width="100%"
    AllowSorting="true" EnableEmbeddedSkins="true" DataKeyNames="OrdID" OnPageIndexChanged="grdOrders_PageIndexChanged"
    OnPageSizeChanged="grdOrders_PageSizeChanged" OnItemCommand="grdOrders_ItemCommand"
    OnSelectedIndexChanged="grdOrders_SelectedIndexChanged" OnItemDataBound="grdOrders_ItemDataBound"
    Skin="Outlook" OnSortCommand="grdOrders_SortCommand"
    OnPreRender="grdOrders_PreRender">
    <ClientSettings EnableRowHoverStyle="true" EnableAlternatingItems="false" EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
    <PagerStyle Position="TopAndBottom" Mode="NextPrevAndNumeric" Width="100%" AlwaysVisible="false" />
    <MasterTableView OnPreRender="grdOrders_PreRender" DataKeyNames="OrdID">
        <NoRecordsTemplate>
            <oscarcontrols:OscarPanel runat="server" ID="pnlNoRecords" Width="100%" CssClass="procOrdersNoRecordsFound">
                <h2>
                    <oscarcontrols:OscarLabel runat="server" ID="lblSorry" Text="Sorry. Try Again." /></h2>
                <oscarcontrols:OscarLabel runat="server" ID="lblNoRecords" Text="There were no records found that matched your search criteria." /><br />
                <br />
            </oscarcontrols:OscarPanel>
        </NoRecordsTemplate>
        <Columns>
            <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
                <HeaderTemplate>
                    <oscarcontrols:OscarGridCheckBox TargetGrid="grdOrders" IsHeader="true" ID="chkSelectAll"
                        AutoPostBack="true" runat="server"></oscarcontrols:OscarGridCheckBox>
                </HeaderTemplate>
                <ItemTemplate>
                    <oscarcontrols:OscarGridCheckBox TargetGrid="grdOrders" IsItem="true" ID="chkSelected"
                        AutoPostBack="true" runat="server"></oscarcontrols:OscarGridCheckBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <%--  _columnOrdID --%>
            <telerik:GridTemplateColumn UniqueName="Order #" HeaderText="Order #" SortExpression="OrdID"
                HeaderStyle-VerticalAlign="Top" ItemStyle-VerticalAlign="Top">
                <ItemTemplate>
                    <oscarcontrols:OscarLabel ID="lblOrdID" runat="server" Text='<%# Bind("OrdID") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <%-- _columnOrderStatus --%>
            <telerik:GridTemplateColumn UniqueName="Order Status" HeaderText="Order Status" SortExpression="OrdStatusName"
                HeaderStyle-VerticalAlign="Top" ItemStyle-VerticalAlign="Top">
                <ItemTemplate>
                    <oscarcontrols:OscarLabel ID="lblOrderStatus" runat="server" Text='<%# Bind("OrdStatusName") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</oscarcontrols:OscarGrid>

[Maria Ilieva]

Hi Mike,

I would suggest you to review the following online demo which elaborates on partial ajaxification scenarios. In your case you should set the same Grid as updated control and remove the setting in which the RadGrid ajaxify itself.

Kind regards,
Maria Ilieva
the Telerik team

[Mike]

Thank you, Maria.

The online demo was very helpful.  I was able to resolve the issue by programatically adding the AjaxSettings within the grid's ItemCreated event.  I set the Ajaxified Control and the updated control to be the checkbox.  Like this:

protected void grdOrders_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = e.Item as GridDataItem;
            OscarGridCheckBox chkSelected = (OscarGridCheckBox)(dataItem["CheckBoxTemplateColumn"]).FindControl("chkSelected");
            RadAjaxManagerProxy1.AjaxSettings.AddAjaxSetting(chkSelected, chkSelected);  //ajaxify the checkbox
        }
    }