Dynamically insert table to a cell.

[Deepak]

Hi,
I want to dynamically insert a table in  the cells of a Grid Column.
Please tell me how can this be done on item_bound event ?

below is the designer code of the grid.

<

 

 

telerik:RadGrid AutoGenerateColumns="False" ID="RadGridAssignment" AllowFilteringByColumn="False"

 

 

 

AllowSorting="True" PageSize="50" ShowFooter="False" AllowPaging="True" runat="server"

 

 

 

EnableLinqExpressions="False" EnableHeaderContextMenu="False" EnableHeaderContextFilterMenu="False"

 

 

 

OnDeleteCommand="RadGridAssignment_DeleteCommand" OnNeedDataSource="RadGridAssignment_NeedDataSource"

 

 

 

OnItemDataBound="RadGridAssignment_ItemDataBound" OnItemCreated="RadGridAssignment_ItemCreated"

 

 

 

OnCancelCommand="RadGridAssignment_CancelCommand" ShowGroupPanel="True" OnItemCommand="RadGridAssignment_ItemCommand"

 

 

 

OnUpdateCommand="RadGridAssignment_UpdateCommand" OnPreRender="RadGridAssignment_PreRender"

 

 

 

EnableEmbeddedSkins="True" EnableTheming="True" Skin="Office2007" GridLines="None"

 

 

 

HeaderStyle-HorizontalAlign="Left" HorizontalAlign="Center">

 

 

 

<MasterTableView AllowFilteringByColumn="False" AllowSorting="True" AllowMultiColumnSorting="True"

 

 

 

AllowPaging="True" TableLayout="Auto" CommandItemDisplay="Top" InsertItemDisplay="Top"

 

 

 

Dir="LTR" EditMode="EditForms" DataKeyNames="ObjectId,ParentObjectId,AssignmentId"

 

 

 

GridLines="None" EnableTheming="True">

 

 

 

<HeaderStyle Font-Bold="true" />

 

 

 

<CommandItemSettings ShowAddNewRecordButton="true" ShowRefreshButton="false" AddNewRecordText=""

 

 

 

AddNewRecordImageUrl="~/client/Images/Edit.gif" />

 

 

 

<Columns>

 

 

 

<telerik:GridEditCommandColumn UniqueName="EditColumn" ButtonType="ImageButton" EditImageUrl="~/client/Images/Edit.gif"

 

 

 

EditText="Edit" ItemStyle-Width="20" HeaderStyle-Width="35">

 

 

 

</telerik:GridEditCommandColumn>

 

 

 

<telerik:GridButtonColumn CommandName="Delete" ImageUrl="~/client/Images/Delete.gif"

 

 

 

ButtonType="ImageButton" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"

 

 

 

Text="Delete" UniqueName="Delete" ItemStyle-Width="20" HeaderStyle-Width="35">

 

 

 

</telerik:GridButtonColumn>

 

 

 

<telerik:GridBoundColumn DataField="ObjectName" HeaderText="ObjectName" SortExpression="ObjectName"

 

 

 

UniqueName="ObjectName">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="AssessorName" HeaderText="Assessor" SortExpression="AssessorName"

 

 

 

UniqueName="AssessorName">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="Reviewer1" HeaderText="ReviewerLevel1" SortExpression="ReviewerLevel1"

 

 

 

UniqueName="Reviewer1">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="Reviewer2" HeaderText="ReviewerLevel2" SortExpression="ReviewerLevel2"

 

 

 

UniqueName="Reviewer2">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="Reviewer3" HeaderText="ReviewerLevel3" SortExpression="ReviewerLevel3"

 

 

 

UniqueName="Reviewer3">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="Reviewer4" HeaderText="ReviewerLevel4" SortExpression="ReviewerLevel4"

 

 

 

UniqueName="Reviewer4">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridBoundColumn DataField="Reviewer5" HeaderText="ReviewerLevel5" SortExpression="ReviewerLevel5"

 

 

 

UniqueName="Reviewer5">

 

 

 

</telerik:GridBoundColumn>

 

 

 

<telerik:GridTemplateColumn UniqueName="ParentObjectName" DataField="ParentObjectName"

 

 

 

GroupByExpression="ParentObjectName Group By ParentObjectName " Visible="false">

 

 

 

</telerik:GridTemplateColumn>

 

 

 

<telerik:GridBoundColumn DataField="ParentObjectTypeId" UniqueName="ParentObjectTypeId"

 

 

 

Visible="false">

 

 

 

</telerik:GridBoundColumn>

 

 

 

</Columns>

 

[Shinu]

Hi Deepak,

Here is one approach I tried to achieve the similar scenario. Instead of creating Table from code behind I tried to create it in aspx page and based on some condition I am changing the Template Column's control Visibility from code behind. Please check this and see if it helps you.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" onitemdatabound="RadGrid1_ItemDataBound">
 <MasterTableView >
   <Columns>
     <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID"></telerik:GridBoundColumn>
     <telerik:GridTemplateColumn HeaderText="TemplateColumn">
        <ItemTemplate>
           <table border="1" width="100%" style="display:none;" id="table1" runat="server" >
            <tr>
             <td>
                <asp:Label ID="lblShipCity" runat="server" Text='<%# Bind("ShipCity") %>'></asp:Label>
             </td>
            </tr>
            <tr>
             <td>
               <asp:Label ID="lblName" runat="server" Text='<%# Bind("ShipName")%>'></asp:Label>
             </td>
           </tr>
         </table>
         <asp:Label ID="Label1" runat="server" Text='<%#bind ("ShipCity") %>'></asp:Label>
         <asp:Label ID="Label2" runat="server" Text='<%#bind ("ShipName") %>'></asp:Label>
      </ItemTemplate>
    </telerik:GridTemplateColumn>
   </Columns>
 </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
   if (e.Item is GridDataItem)
   {
      GridDataItem item = (GridDataItem)e.Item;
      Label label1 = (Label)item.FindControl("Label1");
      Label label2 = (Label)item.FindControl("Label2");
      if (item["OrderID"].Text == "10265")
      {
         HtmlTable table = (HtmlTable)item.FindControl("table1");
         table.Style.Add("display", "table");
         label1.Visible = false;
         label2.Visible = false;
        }
    }
}

Thanks,
-Shinu.

[Deepak]

Hi Shinu ,
In this case i have no of rows produced dynamically so we have to use code behind.Based on dataset , lets say it has 3 rows then the table will contain 3 rows .
can we use radgrid inside the itemtemplate to achieve this ?
Thanks

[Tsvetina]

Hi Deepak,

You cannot modify the template of a GridTemplateColumn on ItemDataBound event if this is what you are asking. Also, adding controls in ItemDataBound is not recommended, as this event does not fire on each postback. You could use ItemCreated instead. If the inserted component will be a simple HTML structure, RadGrid PreRender is an option, too, if ItemCreated is too early for your requirements.

However, I would advise you to declare the component that you want to show statically in the template and make it initially invisible - for example a GridTemplateColumn with a RadGrid in its ItemTemplate (Visible property set to false initially). Where needed, you can access the nested grid in the ItemDataBound event of the parent grid and bind it to the data in question.

All the best,
Tsvetina
the Telerik team