Issue with the combination of RadXmlHttpPanel and RadAjaxPanel

[Anirban]

Hello,
I have got an issue with the combination of RadXmlHttpPanel and RadAjaxPanel. The scenario is described below-

I have a page Product.aspx. There are left menus in a user control LeftMenu.ascx. In the main section of the page there are ten user controls which are used to Add or edit a product. This main user controls' visibility can be on/off by clicking the left menus and it is done in client side javascript. Now to make the performance optimized we decided to load the user control's data on demand. There are only two user controls which has required fields. So those control's data will be loaded on page load. But the other eight control's data will be loaded if the user decides to open that user control by clicking the left menu.
To accomplish this I followed the demo given here http://demos.telerik.com/aspnet-ajax/xmlhttppanel/examples/gridinxmlhttppanel/defaultcs.aspx. The on demand user control's data controls are wrapped by RadXmlHttpPanels. The data is loaded by javascript-

function leftMenuClicked(index) {
        showForm(index);
        hideAllOtherForm(index);
        showPanelData(index);
}

function showPanelData(index) {
    var productId = getProductId();   
        var panel = getXmlHttpPanel(index);
        if (panel) {
            panel.set_value(productId);
        }
}

The getXmlHttpPanel() function just returns the RadXmlHttpPanel object using $find() function according to the index value.

Now, there are few user controls which are used to add/edit detail data. There is a RadGrid in the control to show the existing records. Just below that there is a "Add More" button, by clicking which a form will be opened below the button to enter the data. The grid also has edit and delete buttons. The edit won't be inline, but the data will be opened in the same form used for adding. So, to ajaxify this, I have wrapped everything inside the control i.e. the grid and the form for add/edit in a RadAjaxPanel. Here is one of the User control's code-

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue" />
                <telerik:RadAjaxPanel ID="radAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                <telerik:RadXmlHttpPanel ID="RadXmlHttpPanel1" runat="server" OnServiceRequest="XmlHttpPanel_ServiceRequest"
                RenderMode="Block" LoadingPanelID="RadAjaxLoadingPanel1">
                    <asp:panel runat="server" CssClass="rc_fields" id="divProductMediaGrid" ClientIDMode="Static" style="min-height: 200px;">
                        <telerik:RadGrid AutoGenerateColumns="False" ID="RadGridProductMedia" runat="server" Skin="WebBlue" OnItemDataBound="RadGridProductMedia_ItemDataBound" OnItemCommand="RadGridProductMedia_ItemCommand" AllowPaging="true" PageSize="4"  EnableClientScriptEvaluation="true" >
                            <PagerStyle Mode="NumericPages" />
                            <MasterTableView TableLayout="Fixed">
                                <Columns>
                                    <telerik:GridTemplateColumn HeaderText="Type">
                                        <ItemTemplate>
                                            <asp:Label ID="lblMediaType" runat="server" Text='<%# GetMediaTypeText(Convert.ToInt32( Eval("MediaType"))) %>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderText="Thumbnail" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center">
                                        <ItemTemplate>
                                            <asp:Image ID="imgThumbnail" runat="server" AlternateText="Thumbnail" ImageAlign="Middle" Height="50px" Width="70px" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn HeaderText="Caption" DataField="Caption" HeaderStyle-Width="180px"  />
                                    <telerik:GridBoundColumn HeaderText="Sort Order" DataField="SortOrder" HeaderStyle-Width="115px" />
                                    <telerik:GridCheckBoxColumn HeaderText="Is Primary" DataField="IsPrimary" HeaderStyle-Width="110px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
                                    <telerik:GridCheckBoxColumn HeaderText="Is Active" DataField="IsActive" HeaderStyle-Width="120px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />
                                    <telerik:GridButtonColumn Text="Edit" UniqueName="EditMedia" CommandName="EditMedia" ButtonType="ImageButton" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center" ImageUrl="~/assets/images/Edit.gif"  />
                                    <telerik:GridButtonColumn Text="Delete" UniqueName="DeleteMedia" CommandName="DeleteMedia" ButtonType="ImageButton" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center"  ImageUrl="~/assets/images/Delete.gif"  ConfirmDialogType="RadWindow" ConfirmText="Are you sure you want to Delete this Media?" ConfirmTitle="Delete" />
                                </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>            
                    </asp:panel>
                    <div style="float: right;">
                        <asp:LinkButton ID="lnkAddMoreMedia" CausesValidation="false" runat="server" CssClass="first" OnClick="lnkAddMoreMedia_Click" Text="<b><b>Add More Media</b></b>"></asp:LinkButton>
                    </div>
                    <asp:panel runat="server" CssClass="rc_fields" id="divProductMediaForm" ClientIDMode="Static" Visible="false" >                         
                         <fieldset>
                            <label>Type </label>
                            <asp:DropDownList ID="drpMediaType" AutoPostBack="true" OnSelectedIndexChanged="drpMediaType_SelectedIndexChanged"  runat="server" ClientIDMode="Static" />
                        </fieldset>
                        <fieldset>
                            <label>Thumbnail </label>
                            <div style="float:right;width: 82%;">
                                <telerik:RadAsyncUpload ID="uploadThumbnail"   runat="server" AllowedFileExtensions="jpg,jpeg,png,gif" Skin="WebBlue" TemporaryFolder="~/Upload/temp"  />                           
                            </div>
                        </fieldset>
                        <fieldset>
                            <label>Caption </label>
                            <asp:TextBox ID="txtCaption"  runat="server" MaxLength="150"  />                           
                        </fieldset>
                        <fieldset>
                            <label>Sort Order </label>
                            <telerik:RadNumericTextBox ID="txtSortOrder" Skin="WebBlue"  runat="server" MaxLength="2" NumberFormat-DecimalDigits="0" NumberFormat-AllowRounding="true"  />                           
                        </fieldset>
                        <fieldset>
                            <label>Is Primary </label>
                            <input type="checkbox" ID="chkIsPrimary" class="checkbox"  runat="server"   />                           
                        </fieldset>  
                        <fieldset>
                            <label>Is Active </label>
                            <input type="checkbox" ID="chkIsActive" class="checkbox"  runat="server"   />                           
                        </fieldset>
                        <div class="buttons">
                            <asp:LinkButton ID="lnkAdd" CausesValidation="false" runat="server" CssClass="first" OnClick="lnkAdd_Click" Text="<b><b>Save Media</b></b>"></asp:LinkButton>                             
                        </div>
                        <asp:HiddenField ID="hidProductMediaId" runat="server" ClientIDMode="Static" />
                    </asp:panel>                   
                    </telerik:RadXmlHttpPanel>   
                    </telerik:RadAjaxPanel>


Now the problem is that, the Edit/Delete buttons in the Grid are not working. Just nothing is happening if I click on the Edit/Delete buttons, although the ItemCommand event is attached with the grid. The probable reason is that, the grid has to be rebound in every postback to make the paging works properly. The Page_load event handler is like this-

public void Page_Load(object sender, System.EventArgs e)
        {
            if (IsPostBack)
            {
                DisplayGridData();
            }
        }


Can anyone please assist me in solving this issue?
Thanks in advance.

[Fiko]

Hi Anirban,

I have already answered your support ticket. For convenience I have pasted my reply:

"I have made some changes to the provided code in order to run it. I was not able to reproduce the behavior that you experience, however, and I am not quite sure that I completely understood you setup. This is why, could you please rework my test project in order to reproduce the problem (add code for UserControls etc.) and send it back. I will check it and do my best to provide a working solution as soon as possible.

In addition, I recommend you to check these links. They provide information about how to DataBind the RadGrid control.

• http://www.telerik.com/help/aspnet-ajax/grdadvanceddatabinding.html
• http://demos.telerik.com/aspnet-ajax/grid/examples/programming/needdatasource/defaultcs.aspx

I am looking forward to hearing from you."

Greetings,
Fiko
the Telerik team