My requirement : To display the hierarchial items in Radgrid.
Instead of using Nestedview template, thought of using iframe for each grid row.
For example :
===========
Parent record
|
| -->iframe page with child grid
|
|--> iframe page with grand child grid
====================================
For this, my code has single radgrid with one GridTemplateColumn column
Inside that GridTemplateColumn
- created Header template -inside that, table for column headers
- created item template - inside that table for column values
In the first column in the table will be image column, if click on the img, it will open the iframe page and based in the query string am binding the child grid records.
My issue is, i want sorting, filtering for each column inside the header template.
Because of one template column, default filtering option will be one textbox appearing in the grid.
my code is:
<telerik:RadGrid ID="grdparent" runat="server" Width="600px" AutoGenerateColumns="false"
OnNeedDataSource="Needdatasource" ItemStyle-Height="25px" AlternatingItemStyle-Height="25px"
SelectedItemStyle-Height="25px" BorderColor="#009933" BorderWidth="1px" GroupingEnabled="false"
AllowSorting="True" AllowMultiRowSelection="False" AllowFilteringByColumn="True"
AllowPaging="True" GridLines="None" ShowGroupPanel="false" ShowStatusBar="true"
FilterItemStyle-BackColor="#F1F7EE" PageSize="10">
<GroupingSettings CaseSensitive="false" />
<MasterTableView DataKeyNames="ParentID" AllowMultiColumnSorting="false" InsertItemPageIndexAction="ShowItemOnFirstPage"
InsertItemDisplay="Top" GroupLoadMode="Server" ShowHeadersWhenNoRecords="true"
CommandItemDisplay="None" EditMode="PopUp" EnableHeaderContextMenu="false"
CommandItemSettings-AddNewRecordText="Add" AllowAutomaticInserts="false"
AllowFilteringByColumn="True" AllowSorting="true" ExpandCollapseColumn-ButtonType="ImageButton">
<Columns>
<telerik:GridTemplateColumn>
<HeaderTemplate>
<table width="600px" class="mod_content" cellpadding="0" cellspacing="0" border="0">
<tr onclick="selectRow(this);">
<td style="width: 30px">
</td>
<td style="width: 50px">
Parent ID
</td>
<td style="width: 300px">
Parent Name
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table width="600px" class="mod_content" cellpadding="0" cellspacing="0" border="0">
<tr onclick="activeRow(this);">
<td style="width: 30px">
<a href="#" onclick="return toggleDivDisplay('tr_<%#DataBinder.Eval(Container,"DataItem.ParentID")%>', this, false,'Child.aspx?ParentID=<%#DataBinder.Eval(Container,"DataItem.ParentID")%>' );">
<img src="../images/Expand.gif" alt="Expand/Collapse" id="tr_<%#DataBinder.Eval(Container,"DataItem.ParentID")%>image"
height="14" width="14" border="0" /></a>
</td>
<td style="width: 50px">
<asp:Label ID="lblHdnParentID" runat="server" CssClass="gridlabel" Text='<%#DataBinder.Eval(Container, "DataItem.ParentID")%>'></asp:Label>
</td>
<td style="width: 150px">
<asp:Label ID="lblParentIDName" CssClass="gridlabel" Text='<%# Eval("ParentName") %>'
runat="server"></asp:Label>
</td>
</tr>
<tr style="padding: 0px 0px 0px 0px">
<td colspan="3" style="padding: 0px 0px 0px 0px">
<div id='tr_<%#DataBinder.Eval(Container,"DataItem.ParentID")%>' class="display_false"
style="padding-left: 15px">
<iframe id="tr_<%#DataBinder.Eval(Container,"DataItem.ParentID")%>frame" src="Child.aspx"
frameborder="0" scrolling="yes" height="150" width="100%"></iframe>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
3 Answers, 1 is accepted
I have created a sample project showing how you could sort and filter from the HeaderTemplate of a GridTemplateColumn. The idea is to include a button with CommandName equal to Sort and CommandArgument the DataField you want to sort as shown below. In order to enable filtering you could use the GridTableView.filter client-side method.
<telerik:GridTemplateColumn DataField="Name" UniqueName="Name"> <HeaderTemplate> <table> <tr> <td> <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="Name" Text="Sort by Name"></asp:LinkButton> </td> </tr> <tr> <td> <telerik:RadTextBox ID="RadTextBox1" runat="server" Text='<%# ((GridItem)Container).OwnerTableView.GetColumn("Name").CurrentFilterValue %>'> <ClientEvents OnValueChanged="ValueChanged" /> </telerik:RadTextBox> </td> </tr> </table> <telerik:RadScriptBlock runat="server"> <script> function ValueChanged(sender, args) { var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); tableView.filter("Name", args.get_newValue(), "Contains"); } </script> </telerik:RadScriptBlock> </HeaderTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label> </ItemTemplate></telerik:GridTemplateColumn>Regards,
Antonio Stoilkov
the Telerik team
Rank 1
Thanks for your reply.
Its sounds good.
You did the sample for one template column ,one columnn ["Name"] data.
My concern here is, i have one template column , with 3 labels , it will display the ["EmpId"], ["Empname"], ["EmpRole"] like this.
here my problem is you are getting the field name from template column id... such as
<
telerik:GridTemplateColumn DataField="Name" UniqueName="Name">
in the Get column method
<
telerik:RadTextBox ID="RadTextBox1" runat="server"
Text='<%# ((GridItem)Container).OwnerTableView.GetColumn("Name").CurrentFilterValue %>'>
<ClientEvents OnValueChanged="ValueChanged" />
</telerik:RadTextBox>
inside the one template column, i have my entire grid table there.
For example you created name only. i want to add Emp id and Emp role also.
<telerik:radgrid id="RadGrid1" runat="server" onneeddatasource="RadGrid1_NeedDataSource"
autogeneratecolumns="false" allowfilteringbycolumn="true" mastertableview-isfilteritemexpanded="false">
<MasterTableView>
<Columns>
<telerik:GridTemplateColumn DataField="Name" UniqueName="Name">
<HeaderTemplate>
<table>
<tr>
<td>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="ID"
Text="Sort by ID"></asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Sort" CommandArgument="Name"
Text="Sort by Name"></asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="Sort" CommandArgument="Role"
Text="Sort by Role"></asp:LinkButton>
</td>
</tr>
<tr>
<td>
<telerik:RadTextBox ID="RadTextBox1" runat="server"
Text='<%# ((GridItem)Container).OwnerTableView.GetColumn("ID").CurrentFilterValue %>'>
<ClientEvents OnValueChanged="ValueChanged" />
</telerik:RadTextBox>
</td>
<td>
<telerik:RadTextBox ID="RadTextBox1" runat="server"
Text='<%# ((GridItem)Container).OwnerTableView.GetColumn("Name").CurrentFilterValue %>'>
<ClientEvents OnValueChanged="ValueChanged" />
</telerik:RadTextBox>
</td>
<td>
<telerik:RadTextBox ID="RadTextBox1" runat="server"
Text='<%# ((GridItem)Container).OwnerTableView.GetColumn("Role").CurrentFilterValue %>'>
<ClientEvents OnValueChanged="ValueChanged" />
</telerik:RadTextBox>
</td>
</tr>
</table>
<telerik:RadScriptBlock runat="server">
<script>
function ValueChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter(
"Name", args.get_newValue(), "Contains");
}
</script>
</telerik:RadScriptBlock>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>'></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</td>
<td>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Role") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:radgrid>
I have updated the project in order to show the desired functionality implemented. The steps are described below:
- Include a hidden column for each of the fields so you could persist the CurrentFilterValue
<telerik:GridBoundColumn DataField="Name" UniqueName="Name" Display="false"></telerik:GridBoundColumn><telerik:GridBoundColumn DataField="ID" UniqueName="ID" Display="false"></telerik:GridBoundColumn><telerik:GridBoundColumn DataField="Role" UniqueName="Role" Display="false"></telerik:GridBoundColumn>- In the value changed event change the column UniqueName depending on the RadTextBox ID
function ValueChanged(sender, args){ var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>"); var columnUniqueName; switch (sender.get_id().substring(sender.get_id().lastIndexOf("_") + 1)) { case "RadTextBox1": columnUniqueName = "ID"; break; case "RadTextBox2": columnUniqueName = "Name"; break; case "RadTextBox3": columnUniqueName = "Role"; break; } tableView.filter(columnUniqueName, args.get_newValue(), "Contains");}Kind regards,
Antonio Stoilkov
the Telerik team