Ajax loading panel does not appear after button postback

[Satbir]

Hi,

I have two radgridviews, and one radcombobox for the ajax operations. Flow is that user enters information in grid1, on submitting the data, radcombobox gets populated with the details entered in grid1. On change of this dropdown, grid 2 gets reflected.

My problem is that when i click on Save button, and server side validation fails, user is brought back to the page. at that time i am unable to select item from the radcombobox, it does not open up to show options. Also when i perform any operation on the grids, Ajax loading icon does not appear. Following is the code.

UserControl1.ascx

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Windows7"

    MinDisplayTime="30" />

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="rgXAxisDetails">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="rgXAxisDetails" />

                <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="radCmbXAxisColumn">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="radCmbXAxisColumn" />

                <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManagerProxy>

<div>

    <table cellspacing="0" cellpadding="2" border="0" width="100%">

        <tr>

            <td colspan="2" style="font-weight: normal">

                <asp:Label ID="lblGenericChart" runat="server" Font-Bold="True" Text="Generic Chart Plot"></asp:Label>

                <asp:Label ID="lblError" runat="server" Text="" ForeColor="red"></asp:Label>

            </td>

        </tr>

    </table>

    <table cellspacing="2" cellpadding="2" border="0" width="100%">

        <tr>

            <td colspan="2">

                <asp:Label ID="lblErrorXAxis" runat="server" Text="" ForeColor="red"></asp:Label></td>

        </tr>

        <tr>

            <td colspan="2">

              

                <telerik:RadGrid ID="rgXAxisDetails" Skin="Windows7" GridLines="Both" runat="server"

                    AutoGenerateColumns="False" SelectedItemStyle-BackColor="blue" OnUpdateCommand="rgXAxisDetails_UpdateCommand"

                    OnItemCommand="rgXAxisDetails_ItemCommand" OnEditCommand="rgXAxisDetails_EditCommand"

                    OnItemDataBound="rgXAxisDetails_ItemDataBound" OnNeedDataSource="rgXAxisDetails_NeedDataSource"

                    OnInsertCommand="rgXAxisDetails_InsertCommand" OnItemCreated="rgXAxisDetails_ItemCreated"

                    OnDeleteCommand="rgXAxisDetails_DeleteCommand" AllowMultiRowEdit="false">

                    <MasterTableView InsertItemDisplay="Bottom" HorizontalAlign="NotSet" EditMode="InPlace"

                        TableLayout="Fixed" CommandItemDisplay="Bottom">

                        <Columns>

                            <telerik:GridTemplateColumn UniqueName="tcColumnName" HeaderText="Column Name">

                                <ItemTemplate>

                                    <asp:Label ID="lblColumnName" runat="server"></asp:Label>

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <telerik:RadComboBox ID="radCmbColumnName" runat="server">

                                    </telerik:RadComboBox>

                                    <asp:RequiredFieldValidator ID="rfvColName" runat="server" ErrorMessage="*" ControlToValidate="radCmbColumnName"

                                        InitialValue="--Select--" Display="Dynamic"></asp:RequiredFieldValidator>

                                    <asp:CustomValidator ID="cvColumnName" runat="server" ErrorMessage="*Duplicate column"

                                        ControlToValidate="radCmbColumnName" OnServerValidate="cvColumnName_ServerValidate"

                                        Display="Dynamic">

                                    </asp:CustomValidator>

                                    <asp:CustomValidator ID="cvColNameInYaxis" runat="server" ErrorMessage="*Column exists in Yaxis data"

                                        ControlToValidate="radCmbColumnName" OnServerValidate="cvColNameInYaxis_ServerValidate"

                                        Display="Dynamic">

                                    </asp:CustomValidator>

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn UniqueName="tcAxis" HeaderText="Axis">

                                <ItemTemplate>

                                    <asp:Label ID="lblAxis" runat="server"></asp:Label>

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <telerik:RadComboBox ID="radCmbAxis" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedEventHandler">

                                        <Items>

                                            <telerik:RadComboBoxItem Text="--Select--" Value="--Select--" />

                                            <telerik:RadComboBoxItem Text="Primary Top" Value="Primary Top" />

                                            <telerik:RadComboBoxItem Text="Primary Bottom" Value="Primary Bottom" />

                                            <telerik:RadComboBoxItem Text="Secondary Top" Value="Secondary Top" />

                                            <telerik:RadComboBoxItem Text="Secondary Bottom" Value="Secondary Bottom" />

                                        </Items>

                                    </telerik:RadComboBox>

                                    <asp:RequiredFieldValidator ID="rfvAxis" runat="server" ErrorMessage="*" ControlToValidate="radCmbAxis"

                                        InitialValue="--Select--"></asp:RequiredFieldValidator>

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn UniqueName="tcIsSameAxis" HeaderText="Is Same Axis">

                                <ItemTemplate>

                                    <asp:CheckBox ID="cbIsSameAxisDisplay" runat="server" Enabled="false" />

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <asp:CheckBox ID="cbIsSameAxis" runat="server" />

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">

                                <ItemStyle CssClass="MyImageButton" Width="3%" />

                                <HeaderStyle Width="3%" />

                            </telerik:GridEditCommandColumn>

                            <telerik:GridButtonColumn ConfirmText="Delete this entry?" ConfirmDialogType="RadWindow"

                                ConfirmTitle="Attention" ConfirmDialogHeight="100" ConfirmDialogWidth="250" ButtonType="ImageButton"

                                CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

                                <ItemStyle CssClass="MyImageButton" Width="3%" />

                                <HeaderStyle Width="3%" />

                            </telerik:GridButtonColumn>

                        </Columns>

                        <CommandItemTemplate>

                            <table class="rgXAxisCommandTable">

                                <tr>

                                    <td align="left">

                                        <asp:Button ID="AddNewRecordButton" CommandName="InitInsert" runat="server" CssClass="rgAdd" />

                                        <asp:LinkButton ID="lnkAddNewRow" runat="server" CommandName="InitInsert" Text="Add new record"></asp:LinkButton>

                                    </td>

                                </tr>

                            </table>

                        </CommandItemTemplate>

                        <PagerStyle AlwaysVisible="True" />

                        <HeaderStyle Font-Bold="True" BackColor="#BDBDBD" ForeColor="Black" />

                    </MasterTableView>

                    <SelectedItemStyle BackColor="Blue" />

                </telerik:RadGrid>

            </td>

        </tr>

        <tr>

            <%-- <td>

        </td>--%>

            <td colspan="2">

                <telerik:RadComboBox ID="radCmbXAxisColumn" runat="server" OnSelectedIndexChanged="radCmbXAxisColumn_SelectedIndexChanged"

                    AutoPostBack="True">

                </telerik:RadComboBox> 
                <asp:HiddenField ID="hdnXAxisColName" runat="server" />

                <asp:HiddenField ID="hdnIsXAxisInEdit" runat="server" />

            </td>

        </tr>

        <tr>

            <td colspan="2">

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <asp:Label ID="lblErrorYAxis" runat="server" ForeColor="red"></asp:Label>

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <telerik:RadGrid ID="rgYAxisDetails" runat="server" AutoGenerateColumns="False" Skin="Windows7"

                    GridLines="Both" SelectedItemStyle-BackColor="blue" OnItemDataBound="rgYAxisDetails_ItemDataBound"

                    OnNeedDataSource="rgYAxisDetails_NeedDataSource" OnDeleteCommand="rgYAxisDetails_DeleteCommand"

                    OnInsertCommand="rgYAxisDetails_InsertCommand" OnItemCommand="rgYAxisDetails_ItemCommand"

                    OnUpdateCommand="rgYAxisDetails_UpdateCommand" AllowMultiRowEdit="false">

                    <MasterTableView InsertItemDisplay="Bottom" HorizontalAlign="NotSet" EditMode="InPlace"

                        TableLayout="Fixed" CommandItemDisplay="Bottom">

                        <%--            <RowIndicatorColumn>

                        <HeaderStyle Width="20px" />

                    </RowIndicatorColumn>

                    <ExpandCollapseColumn>

                        <HeaderStyle Width="20px" />

                    </ExpandCollapseColumn>--%>

                        <Columns>

                            <telerik:GridTemplateColumn UniqueName="tcColumnName" HeaderText="Column Name">

                                <ItemTemplate>

                                    <asp:Label ID="lblColumnName" runat="server"></asp:Label>

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <telerik:RadComboBox ID="radCmbColumnName" runat="server">

                                    </telerik:RadComboBox>

                                    <asp:RequiredFieldValidator ID="rfvYColName" runat="server" ErrorMessage="*" ControlToValidate="radCmbColumnName"

                                        InitialValue="--Select--" Display="Dynamic"></asp:RequiredFieldValidator>

                                    <asp:CustomValidator ID="cvYColumnName" runat="server" ErrorMessage="*Duplicate column"

                                        ControlToValidate="radCmbColumnName" OnServerValidate="cvYColumnName_ServerValidate"

                                        Display="Dynamic">

                                    </asp:CustomValidator>

                                    <asp:CustomValidator ID="cvYColNameInXAxis" runat="server" ErrorMessage="*Column exists in Xaxis data"

                                        ControlToValidate="radCmbColumnName" OnServerValidate="cvYColNameInXAxis_ServerValidate"

                                        Display="Dynamic">

                                    </asp:CustomValidator>

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn UniqueName="tcAxis" HeaderText="Axis">

                                <ItemTemplate>

                                    <asp:Label ID="lblAxis" runat="server"></asp:Label>

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <telerik:RadComboBox ID="radCmbAxis" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedEventHandler">

                                        <Items>

                                            <telerik:RadComboBoxItem Text="--Select--" Value="--Select--" />

                                            <telerik:RadComboBoxItem Text="Primary Left" Value="Primary Left" />

                                            <telerik:RadComboBoxItem Text="Primary Right" Value="Primary Right" />

                                            <telerik:RadComboBoxItem Text="Secondary Left" Value="Secondary Left" />

                                            <telerik:RadComboBoxItem Text="Secondary Right" Value="Secondary Right" />

                                        </Items>

                                    </telerik:RadComboBox>

                                    <asp:RequiredFieldValidator ID="rfvYAxis" runat="server" ErrorMessage="*" ControlToValidate="radCmbAxis"

                                        InitialValue="--Select--"></asp:RequiredFieldValidator>

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn UniqueName="tcPlottingType" HeaderText="Plotting Type">

                                <ItemTemplate>

                                    <asp:Label ID="lblPlottingType" runat="server"></asp:Label>

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <telerik:RadComboBox ID="radCmbPlottingType" runat="server">

                                        <Items>

                                            <telerik:RadComboBoxItem Text="--Select--" Value="--Select--" />

                                            <telerik:RadComboBoxItem Text="Line" Value="Line" />

                                            <telerik:RadComboBoxItem Text="Area" Value="Area" />

                                            <telerik:RadComboBoxItem Text="Marker" Value="Circle" />

                                        </Items>

                                    </telerik:RadComboBox>

                                    <asp:RequiredFieldValidator ID="rfvYPlottingType" runat="server" ErrorMessage="*"

                                        ControlToValidate="radCmbPlottingType" InitialValue="--Select--"></asp:RequiredFieldValidator>

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn UniqueName="tcPlottingColor" HeaderText="Plotting Color">

                                <ItemTemplate>

                                    <asp:Label ID="lblPlottingColor" runat="server"></asp:Label>

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <telerik:RadComboBox ID="radCmbCPlottingColor" runat="server">

                                    </telerik:RadComboBox>

                                    <asp:RequiredFieldValidator ID="rfvYPlottingColor" runat="server" ErrorMessage="*"

                                        ControlToValidate="radCmbCPlottingColor" InitialValue="--Select--"></asp:RequiredFieldValidator>

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn UniqueName="tcIsSameAxis" HeaderText="Is Same Axis">

                                <ItemTemplate>

                                    <asp:CheckBox ID="cbIsSameAxisDisplay" runat="server" Enabled="false" />

                                </ItemTemplate>

                                <EditItemTemplate>

                                    <asp:CheckBox ID="cbIsSameAxis" runat="server" />

                                </EditItemTemplate>

                            </telerik:GridTemplateColumn>

                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">

                                <ItemStyle CssClass="MyImageButton" Width="3%" />

                                <HeaderStyle Width="3%" />

                            </telerik:GridEditCommandColumn>

                            <telerik:GridButtonColumn ConfirmText="Delete this entry?" ConfirmDialogType="RadWindow"

                                ConfirmTitle="Attention" ConfirmDialogHeight="100" ConfirmDialogWidth="250" ButtonType="ImageButton"

                                CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

                                <ItemStyle CssClass="MyImageButton" Width="3%" />

                                <HeaderStyle Width="3%" />

                            </telerik:GridButtonColumn>

                        </Columns>

                        <CommandItemTemplate>

                            <table class="rgYAxisCommandTable">

                                <tr>

                                    <td align="left">

                                        <asp:Button ID="AddNewRecordButton" CommandName="InitInsert" runat="server" CssClass="rgAdd" />

                                        <asp:LinkButton ID="lnkAddNewRow" runat="server" CommandName="InitInsert" Text="Add new record"></asp:LinkButton>

                                    </td>

                                </tr>

                            </table>

                        </CommandItemTemplate>

                        <PagerStyle AlwaysVisible="True" />

                        <HeaderStyle Font-Bold="True" BackColor="#BDBDBD" ForeColor="Black" />

                    </MasterTableView>

                    <SelectedItemStyle BackColor="Blue" />

                </telerik:RadGrid></td>

        </tr>

        <tr>

            <td align="center" colspan="2">

                <br />

                <asp:Button ID="btnSave" runat="server" Text="Save"  OnClick="btnSave_Click" />

                <asp:Button ID="btnCancel" runat="server" Text="Cancel" />

            </td>

        </tr>

    </table>

    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">

    </telerik:RadWindowManager>

</div>

Following are the settings for the ajax manager in my usercontrol.ascx.cs

objRadAJAXManager = RadAjaxManager.GetCurrent(Page);
                objRadAJAXManager.ClientEvents.OnRequestStart = "onRequestStart";

                //X Axis grid
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgXAxisDetails, rgXAxisDetails, RadAjaxLoadingPanel1);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgXAxisDetails, RadWindowManager1, RadAjaxLoadingPanel1);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgXAxisDetails, lblErrorXAxis);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgXAxisDetails, lblErrorYAxis);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgXAxisDetails, radCmbXAxisColumn);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgXAxisDetails, hdnXAxisColName);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgXAxisDetails, rgYAxisDetails);

                //Y axis grid
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgYAxisDetails, rgYAxisDetails, RadAjaxLoadingPanel1);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgYAxisDetails, RadWindowManager1, RadAjaxLoadingPanel1);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgYAxisDetails, lblErrorYAxis);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgYAxisDetails, lblErrorXAxis);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(rgYAxisDetails, rgXAxisDetails);

                // X axis column drop down
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(radCmbXAxisColumn, radCmbXAxisColumn, RadAjaxLoadingPanel1);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(radCmbXAxisColumn, RadWindowManager1, RadAjaxLoadingPanel1);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(radCmbXAxisColumn, hdnXAxisColName);
                objRadAJAXManager.AjaxSettings.AddAjaxSetting(radCmbXAxisColumn, rgYAxisDetails);

Thanks in advance

Satbir

[Viktor Tachev]

Hi Satbir,

I am not sure I understand the scenario you are trying to implement. Scenario where data in one RadGrid is populated based on a selection in another RadGrid is illustrated in this demo.

If your case is not similar to the demo could you elaborate more on the details of your project? What user action triggers the events? How is the data in the first Grid populated? What data from the first RadGrid are you using to populate the ComboBox with data? Also how is the second Grid affected by the selection from the RadComboBox?

Could you share your full source code with the code-behind so me and anyone who would like to help could provide better assistance?

Regards,
Viktor Tachev
Telerik