RadGrid with NestedTemplateView ajax problem

[Neil]

Hello, I have a RadGrid with a NestedTemplateView similar to the following:

     

<telerik:RadGrid id="RadGrid1"
                 runat="server"
                 Gridlines="None"
                 ShowStatusBar="true"
                 AllowSorting="True"
                 AllowPaging="True"
                 AllowFilteringByColumn="true"
                 AutoGenerateColumns="true"
                 Height="100%"
                 PageSize="70"
                 DataKeyNames="GUID"
                 OnItemCommand="RadGrid1_ItemCommand"
                 ShowGroupPanel="True"
                 OnPreRender="RadGrid1_PreRender"
                 OnNeedDataSource="RadGrid1_NeedDataSource"
                 OnDataBound="RadGrid1_DataBound">

    <MasterTableView GroupLoadMode="server"
                     TableLayout="Fixed"
                     GroupsDefaultExpanded="False"
                     ClientDataKeyNames="GUID"
                     DataKeyNames="GUID">
    <NestedViewSettings>
        <ParentTableRelation>
            <telerik:GridRelationFields DetailKeyField="GUID" MasterKeyField="GUID" />
        </ParentTableRelation>
    </NestedViewSettings>
        <NestedViewTemplate>
            <asp:Panel ID="NestedViewPanel1"
                       runat="server"
                       CssClass="viewWrap bordered-bottom">
                <telerik:RadTabStrip runat="server"
                                     ID="RadTabStrip1"
                                     Orientation="HorizontalTop"
                                     SelectedIndex="0"
                                     MultiPageID="RadMultiPage1">
                    <Tabs>
                        <telerik:RadTab Text="A"></telerik:RadTab>
                        <telerik:RadTab Text="B"></telerik:RadTab>
                    </Tabs>
               </telerik:RadTabStrip>
               <telerik:RadMultiPage runat="server"
                                     ID="RadMultiPage1"
                                     SelectedIndex="0"
                                     Height="200px"
                                     Width="1200px"
                                     CssClass="tablePadding">

                        <telerik:RadPageView runat="server">
                                <%= GetDetails() %>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server">
                        <p>Test</p>
                        </telerik:RadPageView>
               </telerik:RadMultiPage>

           </asp:Panel>
        </NestedViewTemplate>
    </MasterTableView>
    <ClientSettings AllowDragToGroup="True" EnableRowHoverStyle="true">
        <Selecting AllowRowSelect="True" />

        <Scrolling AllowScroll="True"
                   EnableVirtualScrollPaging="True"
                   UseStaticHeaders="True"
                   SaveScrollPosition="True" />
    </ClientSettings>
    <GroupingSettings ShowUnGroupButton="true"></GroupingSettings>
</telerik:RadGrid>

When a row is expanded, a hidden field gets populated with the GUID of the row clicked (in ItemCommand event):

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        hiddenGUIDField.Value = RadGrid1.MasterTableView.Items[e.Item.ItemIndex].GetDataKeyValue("GUID").ToString();
    }
}

Finally, the <%= GetDetails() %> is evaluated and placed onto the page:

public string GetDetails()
{
    string markUp = s.GetContentFromServiceLayers(hiddenGUIDField.Value)
    return Server.HtmlDecode(markUp);
}

(Note: GetDetails() just returns a pre-formatted string of HTML markup to be displayed within the RadPageView)

This all works fine, until a 2nd row is expanded.  At this point, the Ajax will fire, but the results are then placed onto both NestedTemplateViews, instead of just the most recent one.  How can I fix this so that each expanded row has it's own relevant content?  I thought that the ParentTableRelation takes care of this.

Thanks.

[Princy]

Hello Neli,

I have tried the following code and it is showing TextBox with corresponding DataKeyValue on each NestedViewItem. Please have a look into this code.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" DataKeyNames="EmployeeID"
           DataSourceID="SqlDataSource1" OnPreRender="RadGrid1_PreRender">
           <MasterTableView ClientDataKeyNames="EmployeeID" DataKeyNames="EmployeeID">
               <NestedViewSettings>
                   <ParentTableRelation>
                       <telerik:GridRelationFields DetailKeyField="EmployeeID" MasterKeyField="EmployeeID" />
                   </ParentTableRelation>
               </NestedViewSettings>
               <NestedViewTemplate>
                   <asp:Panel ID="NestedViewPanel1" runat="server">
                       <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop"
                           SelectedIndex="0" MultiPageID="RadMultiPage1">
                           <Tabs>
                               <telerik:RadTab Text="A">
                               </telerik:RadTab>
                               <telerik:RadTab Text="B">
                               </telerik:RadTab>
                           </Tabs>
                       </telerik:RadTabStrip>
                       <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="tablePadding">
                           <telerik:RadPageView ID="RadPageView1" runat="server">
                           </telerik:RadPageView>
                           <telerik:RadPageView ID="RadPageView2" runat="server">
                               <p>
                                   Test</p>
                           </telerik:RadPageView>
                       </telerik:RadMultiPage>
                   </asp:Panel>
               </NestedViewTemplate>
           </MasterTableView>
       </telerik:RadGrid>
       <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
           SelectCommand="SELECT top 5  EmployeeID,FirstName,LastName FROM [Employees] ">
       </asp:SqlDataSource>

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
   {
       foreach (GridDataItem item in RadGrid1.Items)
       {
           if (item.Expanded)
           {
               GridNestedViewItem nestedItem = (GridNestedViewItem)item.ChildItem;
               Panel txtbx = (Panel)nestedItem.FindControl("NestedViewPanel1");
               RadMultiPage multiPage = (RadMultiPage)txtbx.FindControl("RadMultiPage1");
               RadPageView page1 = (RadPageView)multiPage.FindControl("RadPageView1");
               TextBox txt = new TextBox();
               txt.Text=item.GetDataKeyValue("EmployeeID").ToString();
               page1.Controls.Add(txt);
           }
       }
   }

Thanks,
Princy.

[Neil]

Hi Princy,

I cannot thank you enough.  This worked great.  I was missing some logic in the PreRender which was causing my problem.

[Neil]

Hi Princy,

I actually just noticed something.  When running that code on PreRender, I get one event per item on the page (so if my page size is 50, I get 50 requests each time I expand one item)

I was able to fix this by moving the logic into the ItemCommand event.

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        var item = (GridDataItem)(e.Item);

            GridNestedViewItem nestedItem = (GridNestedViewItem)item.ChildItem;
            Panel txtbx = (Panel)nestedItem.FindControl("NestedViewPanel1");
            RadMultiPage multiPage = (RadMultiPage)txtbx.FindControl("RadMultiPage1");
            RadPageView page1 = (RadPageView)multiPage.FindControl("RadPageView1");
            Label lbl = new Label();
            lbl.Text = Server.HtmlDecode(MethodtoGrabMarkUp());
            page1.Controls.Add(lbl);
    }
}

However, I now only can have 1 expanded content area with content.  For example, expanding the first item works great.  However, on expanding a second item, this item renders correctly - however the first item then loses all of it's content.

Is it possible to achieve this within the ItemCommand event?

[Princy]

Hi Neli,

One option is you can save the index of the expanded items in ItemCommand event and in PreRender event instead of looping through all the item, loops only through the expanded item like below.

C#:

protected void RadGrid1_PreRender(object sender, EventArgs e)
   {
       if (list.Count > 0)
       {
           for (int count = 0; count < list.Count; count++)
           {
               GridDataItem item = (GridDataItem)RadGrid1.MasterTableView.Items[count];
               GridNestedViewItem nestedItem = (GridNestedViewItem)item.ChildItem;
               Panel txtbx = (Panel)nestedItem.FindControl("NestedViewPanel1");
               RadMultiPage multiPage = (RadMultiPage)txtbx.FindControl("RadMultiPage1");
               RadPageView page1 = (RadPageView)multiPage.FindControl("RadPageView1");
               TextBox txt = new TextBox();
               txt.Text = item.GetDataKeyValue("EmployeeID").ToString();
               page1.Controls.Add(txt);
           }
       }
   }
   ArrayList list=new ArrayList();
   protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
   {
      if (e.CommandName == "ExpandCollapse")
       {
           GridDataItem item = (GridDataItem)e.Item;
           if (!e.Item.Expanded)
           {
                list.Add(item.ItemIndex);
           }
           else
           {
               list.Remove(item.ItemIndex);
           }
       }
   }

Thanks,
Princy.