We have an requirement Like Merging Header columns in Grid.
Name Depeartment
FirstName Last Name Engineering Management
I can add table in template column,if am doing that missing all the grid predifined functionality .(Like Reordering,Sorting,filtering,paging etc).Is there any way to add headers(Name,Department) statically with out missing any grid functionality to Grid Header section.Please Some body help on this.Telerik provided the solution for WPF,silverlight if somebody have any idea please help us.
Thanks in Advance,
Bhaskar.
8 Answers, 1 is accepted
You can implement filtering and sorting for sub-columns in your template columns as illustrates in these examples:
Column Types(see the last column in the grid and the buttons inside its header template)
Individual filtering and sorting for "sub-columns" in template column
Please note that column resize and reorder can be handled for the entire template column (not for nested sub-columns in it) in the same manner as with other grid controls.
All the best,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
Thanks for the reply.If we are using Template column,and made Headercontextmenu true the column selection is not working.it is showing only bound column items.I want to show all columns in that selection so that user can hide/unhide the columns.But here iam not able to see all the columns.I want column selection window for the grid.
Thanks,
Bhaskar.
Could you please try to set DataField property for GridTemplateColumn and see if it makes any difference?
Kind regards,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
I had already set the datafield property.But It was hiding entire template column fields.I want to show all the columns available in template column in Headercontextmenu show columns option(There i can hide and unhide columns with in template column).Please let me know how can we achive this.
If the issue persists, please send us the problematic code for further investigation. Thus I could be able to find a quick resolution of this issue.
Best wishes,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
Iam attaching code here .i want to display my data like in gif file.but i dont want to miss any grid functionality (reoreding,grouping,paging,sorting,filtering).I am using headercontextmenu,but if i use template columns it is not identifying all the columns with in the template column.not able to get filters for each individual columns with in group.please look into my code,If u Provide sample project for us most appriciated.
CODE in ASPX
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UnitCapacitiesView.ascx.cs"
Inherits="Shell.SharePoint.SP.RM.Web.RMUserControls.UnitCapacitiesView" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="AssemblyName" Namespace="NamesapceName"
TagPrefix="custom" %>
<style type="text/css">
.style1
{
width: 791px;
}
</style>
<table>
<tr>
<td class="style1">
</td>
</tr>
<tr>
<td class="style1">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RadGrid1" AllowSorting="true" EnableHeaderContextMenu="true"
OnItemCommand="RadGrid1_ItemCommand" AllowPaging="True" AllowFilteringByColumn="true"
runat="server" AutoGenerateColumns="false">
<ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
<Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
AllowColumnResize="True"></Resizing>
</ClientSettings>
<MasterTableView>
<GroupByExpressions>
<telerik:GridGroupByExpression>
<GroupByFields>
<telerik:GridGroupByField FieldName="Itemname" HeaderText="ItemName" />
</GroupByFields>
<SelectFields>
<telerik:GridGroupByField FieldName="Itemname" HeaderText="ItemName" />
</SelectFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<Columns>
<telerik:GridBoundColumn HeaderText="TypeName" DataField="TypeName" UniqueName="TypeName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderText="Itemname" DataField="Itemname" UniqueName="Itemname">
</telerik:GridBoundColumn>
<custom:MyCustomFilteringColumn DataField1="NMCapactiy" HeaderText="BaseCase" UniqueName="MyCustomTemplateColumn">
<HeaderTemplate>
<table id="Table1" cellspacing="1" cellpadding="1" width="100%" border="1">
<tr>
<td colspan="2" align="center">
<b>Base Case</b>
</td>
</tr>
<tr>
<td width="50%">
<asp:LinkButton ID="btnSortByCountry" Text="BCCapacity" Title="Sort by BCCapacity"
CommandName='Sort' CommandArgument='BCCapacity' runat="server" Width="100%" />
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table id="Table2" cellspacing="1" cellpadding="1" width="100%" border="1">
<tr>
<td width="50%">
<%# DataBinder.Eval(Container.DataItem, "BCCapacity")%>
</td>
</tr>
</table>
</ItemTemplate>
</custom:MyCustomFilteringColumn>
<custom:MyCustomFilteringColumn DataField1="BCCapacity" HeaderText="Case1" UniqueName="MyCustomTemplateColumn1">
<HeaderTemplate>
<table id="Table1" cellspacing="1" cellpadding="1" width="100%" border="1">
<tr>
<td colspan="2" align="center">
<b>Case1</b>
</td>
</tr>
<tr>
<td width="50%">
<asp:LinkButton ID="btnSortByCity" Text="NMCapactiy" Title="Sort by NMCapactiy" CommandName='Sort'
CommandArgument='NMCapactiy' runat="server" Width="100%" />
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table id="Table2" cellspacing="1" cellpadding="1" width="100%" border="1">
<tr>
<td width="50%">
<%# DataBinder.Eval(Container.DataItem, "NMCapactiy")%>
</td>
</tr>
</table>
</ItemTemplate>
</custom:MyCustomFilteringColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</td>
</tr>
</table>
CS Page:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
// RadGrid1.DataSource = GetCapacities(); Using web service
RadGrid1.DataBind();
if (((Session["filterArgs"] != null)))
{
string[] args = Session["filterArgs"].ToString().Split(',');
if ((args.Length == 4))
{
RadGrid1.MasterTableView.FilterExpression = "([" + args[0] + "] LIKE '%" + args[2] + "%' AND [" + args[1] + "] LIKE '%" + args[3] + "%')";
}
else if ((args.Length == 3))
{
RadGrid1.MasterTableView.FilterExpression = "([" + args[0] + "] LIKE '%" + args[2] + "%' OR [" + args[1] + "] LIKE '%" + args[2] + "%')";
}
RadGrid1.Controls.Add(new LiteralControl(RadGrid1.MasterTableView.FilterExpression));
}
else
{
RadGrid1.MasterTableView.FilterExpression = string.Empty;
}
}
}
public void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
if ((e.CommandName == RadGrid.FilterCommandName))
{
Pair filterPair = (Pair)e.CommandArgument;
if ((filterPair.First == "NoFilter"))
{
Session["filterArgs"] = null;
RadGrid1.MasterTableView.Rebind();
}
}
else if ((e.CommandName == RadGrid.SortCommandName))
{
Session["filterArgs"] = null;
GridTemplateColumn templateColumn = (GridTemplateColumn)e.Item.OwnerTableView.GetColumnSafe("MyCustomTemplateColumn");
templateColumn.SortExpression = e.CommandArgument.ToString();
}
}
Custom Template Class:
namespace RadGridCTPOC
{
public class MyCustomFilteringColumn : GridTemplateColumn
{
private TableCell filterCell;
public string DataField1
{
get
{
object MyRes = this.ViewState["_df1"];
if (((MyRes != null)))
{
return (string)MyRes;
}
return string.Empty;
}
set { this.ViewState["_df1"] = value; }
}
public string DataField2
{
get
{
object MyRes = this.ViewState["_df2"];
if (((MyRes != null)))
{
return (string)MyRes;
}
return string.Empty;
}
set { this.ViewState["_df2"] = value; }
}
protected override void SetupFilterControls(TableCell cell)
{
base.SetupFilterControls(cell);
cell.Controls.RemoveAt(0);
cell.Controls.AddAt(0, new TextBox());
filterCell = cell;
}
public override GridColumn Clone()
{
return base.Clone();
}
protected override string GetFilterDataField()
{
HttpContext.Current.Session["filterArgs"] = this.DataField1 + "," + this.DataField2 + "," + GetCurrentFilterValueFromControl(filterCell);
return HttpContext.Current.Session["filterArgs"].ToString();
}
protected override void SetCurrentFilterValueToControl(TableCell cell)
{
base.SetCurrentFilterValueToControl(cell);
if ((!object.ReferenceEquals(this.CurrentFilterValue, string.Empty)))
{
((TextBox)cell.Controls[0]).Text = this.CurrentFilterValue;
}
}
protected override string GetCurrentFilterValueFromControl(TableCell cell)
{
return ((TextBox)cell.Controls[0]).Text;
}
public override bool SupportsFiltering()
{
return true;
}
}
}
Thanks,
BHASKAR.
I am sending you a simple working application which handles the desired functionality. Please check it out and let me know if you need additional assistance.
All the best,
Pavlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Rank 1
Recently I had the same problem with telerik grid. I solved it.
Read this article and do in similar way
My example
| <telerik:RadGrid runat="server" id="weldsGrid" AllowPaging="True" AllowSorting="True" |
| PageSize="20" GridLines="None" Skin="WebBlue"> |
| <MasterTableView AllowMultiColumnSorting="True" AutoGenerateColumns="True"> |
| <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" /> |
| </MasterTableView> |
| <ClientSettings> |
| <Selecting AllowRowSelect="True" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| Private Sub weldsGrid_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles weldsGrid.NeedDataSource |
| Dim dm As New DataManager() |
| Dim bsw = dm.CollectWelds() |
| For Each grp As IGrouping(Of String, DSBiasStep.BiasStepOptionRow) In dm.CollectStepTypeOptions() |
| 'you can set here your groups |
| MergedHeaders.AddMergedColumns(New Integer() {1,2}, grp.Key) |
| Next |
| weldsGrid.DataSource = bsw |
| End Sub |
| #Region "Columns" |
| #Region "Merged Columns Implementation" |
| Public ReadOnly Property MergedHeaders() As MergedColumnsInfo |
| Get |
| If ViewState("MergedColumns") Is Nothing Then |
| ViewState("MergedColumns") = New MergedColumnsInfo() |
| End If |
| Return CType(ViewState("MergedColumns"), MergedColumnsInfo) |
| End Get |
| End Property |
| 'register handler |
| Private Sub weldsGrid_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles weldsGrid.ItemCreated |
| If e.Item.ItemType = GridItemType.Header Then |
| e.Item.SetRenderMethodDelegate(AddressOf RenderHeaderDelegate) |
| End If |
| End Sub |
| ''' <summary> |
| ''' method for rendering of columns's headers |
| ''' </summary> |
| ''' <param name="output"></param> |
| ''' <param name="container"></param> |
| ''' <remarks></remarks> |
| Private Sub RenderHeaderDelegate(ByVal output As HtmlTextWriter, ByVal container As Control) |
| For i As Integer = 0 To container.Controls.Count - 1 |
| Dim cell = TryCast(container.Controls(i), Telerik.Web.UI.GridTableHeaderCell) |
| If cell IsNot Nothing Then |
| 'stretch non merged columns for two rows |
| If Not MergedHeaders.MergedColumns.Contains(i) Then |
| 'cell.Attributes |
| cell.Attributes("rowspan") = "2" |
| cell.RenderControl(output) |
| ElseIf MergedHeaders.StartColumns.ContainsKey(i) Then |
| 'render merged columns's common title |
| output.Write(String.Format("<th scope='col' style='text-align:center;' colspan='{0}' class='rgHeader'>{1}</th>", _ |
| MergedHeaders.StartColumns(i), MergedHeaders.Titles(i))) |
| End If |
| End If |
| Next |
| 'close first row |
| output.RenderEndTag() |
| 'start second row |
| output.RenderBeginTag("tr") |
| 'render second row (only merged columns) |
| For i As Integer = 0 To container.Controls.Count - 1 |
| If MergedHeaders.MergedColumns.Contains(i) Then |
| Dim cell = CType(container.Controls(i), Telerik.Web.UI.GridTableHeaderCell) |
| cell.RenderControl(output) |
| End If |
| Next |
| End Sub |
| #End Region |
and finally
| <Serializable()> _ |
| Public Class MergedColumnsInfo |
| ''' <summary> |
| ''' indexes of merged columns |
| ''' </summary> |
| ''' <remarks></remarks> |
| Public MergedColumns As New List(Of Integer)() |
| ''' <summary> |
| ''' key-value pairs: key = first column index, value = number of merged columns |
| ''' </summary> |
| ''' <remarks></remarks> |
| Public StartColumns As New Dictionary(Of Integer, Integer) |
| ''' <summary> |
| ''' key-value pairs: key = first column index, value = common title of merged columns |
| ''' </summary> |
| ''' <remarks></remarks> |
| Public Titles As New Dictionary(Of Integer, String) |
| ''' <summary> |
| ''' Add new merged section |
| ''' </summary> |
| ''' <param name="columnsIndexes">merged columns' indexes</param> |
| ''' <param name="title">common title of merged columns</param> |
| ''' <remarks></remarks> |
| Public Sub AddMergedColumns(ByVal columnsIndexes As IEnumerable(Of Integer), ByVal title As String) |
| Dim firstIndex = columnsIndexes(0) |
| If Not Titles.ContainsKey(firstIndex) Then |
| Titles.Add(firstIndex, title) |
| MergedColumns.AddRange(columnsIndexes) |
| StartColumns.Add(firstIndex, columnsIndexes.Count) |
| End If |
| End Sub |
| End Class |
Hope this help