RadGrid Custom Header with tow rows

[Mike]

Hi,
I'm using the RadGrid from prometheus Q3 2007. What I want to do is to add a row in the header of the grid to group the colomuns. Exemple:

<table>
<tr>
    <td colspan="2">group1</td>
    <td colspan="2">group2</td>
</tr>
... Followed by the standart header, assuming that my grid has 4 columns...

I'm creating my grid programmatically and adding it to a placeholder like the exemple showed here in the section "Creating ItemTemplate/EditItemTemplate of GridTemplateColumn programmatically".

I' using visual studio 2008, framework 3.5.

Iv'e looked at http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/GroupB but this is just for grouping. All I want to do is just add a customer header that show two or more column headers grouped togeather. I don't need to group any data.

Thanks,
Michael

[Shinu]

Hi Mike,

Go through the following help article and see whether it helps.
Customizing with GridTemplateColumn

Thanks
Shinu.

[Mike]

Yes I looked at this. Problem is it works fine when you can define the widths of the columns but in my case I can’t. It you use this method without defining the widths then the sub headers don’t line up with the data line columns.

 In GridView there is something called GridViewRow. This allows you to add header rows at render time with RowSpan and ColumnSpan attributes.

 Does RadGrid have anything like this?

[Sebastian]

Hello Mike,

For more custom and flexible layout of your RadGrid for ASP.NET AJAX, you may consider taking advantage of the global item template feature introduced in the Q1 2008 release (2008.1.415) of the control. Here are more details on this subject:

http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/GeneralFeatures/CardView/DefaultCS.aspx
http://www.telerik.com/help/aspnet-ajax/grdcardview.html

I also recommend you migrate to the Q2 2008 release of the control as there are several other new major features that you may find useful:

http://www.telerik.com/help/aspnet-ajax/grdwhatsnew.html

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Markus]

I've got exactly the same problem now. I want to add another row in the header that spans over some of the existing header cells.
The columns are created programmatically.

Why isn't it possible to just add another row in the ItemCreated Event of the GridHeaderItem? Whenever I change the CellsCollection of the header there I end up with no header row at all. When I just change the text property of the existing cells it works.

I already checked out the new CardView and ItemTemplate demos but that's not what I am looking for. Using TemplateColumns with an additional table in the header is't possible either because as Mike already pointed out you have to define the width to get it aligned right.

I'm at a dead end there. If I can't get this done I'll have to change a lot of code and stick to a simple repeater...

Best regards
Sebastian

[Markus]

I've found an workaround for this problem.
In my case I don't need the command item in the header. So I am using it for the second header row.

But maybe it will be possible to add more rows to the GridHeaderItem in future releases!?!? Would be nice.

Best regards
Sebastian

[senthil]

  <MasterTableView GridLines="vertical" CommandItemDisplay="Top">
                                    <CommandItemTemplate>
                                        <table width="100%" style="height: 20px; background-color: #F5F5F5; border-color: Gray;
                                            border-style: ridge;" rules="cols" cellpadding="1">
                                            <tr>
                                                <td colspan="2" class="MasterTable_Default" style="width: 59px">
                                                    &nbsp;
                                                </td>
                                                <td colspan="3" class="MasterTable_Default" style="width: 65px; padding-left: 3px;"
                                                    align="left">
                                                  
                                                </td>
                                                <td colspan="3" class="MasterTable_Default" align="left">
                                                
                                                </td>
                                            </tr>
                                        </table>
                                    </CommandItemTemplate>


better u use this for the header .I used this type of header for achieving two header.

[bhaskar]

this works fine while rendering the HTML on the page. However If I try to export to PDF, the styles in header template are wrapped into one single line.

Could you please suggest the correct method/work around for PDF export in the same format as it gets rendered on the web.

Below is the code that I am using :

 

 

 

<Columns>

 

<telerik:GridTemplateColumn HeaderText="Products" >

 

 

 

<HeaderTemplate>

 

 

 

<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">

 

 

 

<TR>

 

 

 

<TD colspan="2" align="center"><b>Address</b></TD>

 

 

 

</TR>

 

 

 

<TR>

 

 

 

<TD align="center" colspan="2"><b>City</b></TD>

 

 

 

<TD width="50%"><b>Postal code</b></TD>

 

 

 

</TR>

 

 

 

</TABLE>

 

 

 

</HeaderTemplate>

 

 

 

<ItemTemplate>

 

 

 

<asp:Image ID="Image1" Width="200px" Height="150px" ImageUrl="Img/stock.jpg"  runat="server" AlternateText="Stock Image" />

 

 

 

<br />

 

 

 

<span style="font-weight:bold;font-family:Arial Black;">Price:</span>

 

 

 

24242

 

 

<br />

 

 

 

<br />

 

 

 

 

 

<span style="font-weight:bold;">Condition:</span>

 

test test tsest

 

 <

br />

 

 

 

<br />

 

 

 

<span style="font-weight:bold;">Quantity:</span>

 

 

 l

arge Quantity

 

 

<br />

 

 

 

<br />

 

 

 

<span style="font-weight:bold;">Shipping:</span> This item ships UPS ground. Please allow min 4 production and delivery

 

 

 time from verified / cleared check payment.

 

<br />

 

 

 

<br />  &nbsp;  

 

 

<span style="font-weight:bold;">Description:</span> Custom Made with Your fabric choice - allow time for production &amp; 

 

delivery. Back Orders can Occur. DF Boutique will notify you of any such changes. 

</ItemTemplate>  

 

</telerik:GridTemplateColumn>

 

</Columns>

 

 

[Daniel]

Hello Bhaskar,

Try the following approach and let me know whether this helps:

<telerik:GridTemplateColumn>
    <HeaderTemplate>
        <table width="150px">
            <colgroup>
                <col />
                <col />
            </colgroup>
            <tr>
                <td>
                    LEFT
                </td>
                <td>
                    RIGHT
                </td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        Test
    </ItemTemplate>
</telerik:GridTemplateColumn>

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Artem L]

Hello guys,

I faced similar issue with the RadGrid. I found no feasible legal ways to do that rather then intrude a little bit into RadGrid controls. I created RadGridEx class that facilitates my needs (see code below). Also, after the RadGridEx class I put some examples on how to use it. I spent not much time on that and I didnt try to make super universal, so in some cases it might need adjustments (e.g. ig you have grid with "New record" command on the top it wont look correct, however its easy to fix thing I just didnt need it.

 

 

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace gridTest
{
    public class RadGridEx : RadGrid
    {
        protected override void ControlPreRender()
        {
            EnsureColumnsOrder();
            base.ControlPreRender();
        }

        /// <summary>
        /// Method checks columns sequence and re-orders columns if needed to make them
        /// all appear within the group they belong. This required in case columns order does not
        /// much their groupping
        /// </summary>
        private void EnsureColumnsOrder()
        {
            var groupingColumns = GetGroupingColumns();
            foreach (var groupColumn in groupingColumns)
            {
                List<GridColumn> columns = new List<GridColumn>(groupColumn.ColumnNames.Length);
                foreach (string column in groupColumn.ColumnNames)
                    columns.Add(MasterTableView.Columns.FindByDataField(column));
                columns.Sort((x, y) => x.OrderIndex.CompareTo(y.OrderIndex));
                int minOrder = columns.Min(x => x.OrderIndex);
                for (int i = 0; i < columns.Count; ++i)
                {
                    int newIndex = minOrder + i;
                    if (columns[i].OrderIndex != newIndex)
                    {
                        // To change column's order we need to increment order of
                        // following columns
                        Array.ForEach(
                            Array.FindAll(MasterTableView.RenderColumns, x => x != columns[i] && x.OrderIndex >= newIndex),
                            x => ++x.OrderIndex);
                        columns[i].OrderIndex = newIndex;
                    }
                }
            }
            // Apply re-ordering
            MasterTableView.SetLevelRequiresBinding();
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            if (ContainsGroupingColumn())
                AddGroupingRow();
            base.RenderContents(writer);
        }

        private bool ContainsGroupingColumn()
        {
            return MasterTableView.RenderColumns.Any(x => x is GridGroupingColumn);
        }

        /// <summary>
        /// Addds an additional row from the top for grouping columns
        /// </summary>
        private void AddGroupingRow()
        {
            var groupingColumns = GetGroupingColumns();
            var renderColumns = MasterTableView.RenderColumns;
            var columnGroupsMapping = new Dictionary<string, GridGroupingColumn>(renderColumns.Length);
            //Map columns to their groups
            foreach (var groupColumn in groupingColumns)
            {
                foreach (string column in groupColumn.ColumnNames)
                {
                    Debug.Assert(!columnGroupsMapping.ContainsKey(column),
                        string.Format("Column '{0}' alredy belons to another group'", column));
                    columnGroupsMapping[column] = groupColumn;
                }
                groupColumn.ColSpan = groupColumn.ColumnNames.Length;
            }

            // Now every ungrouped column will belong to an "empty" group
            // which will gather sequence of such columns. For the columns with groups
            // appropriate group columns will be added to the table head
            List<GridGroupingColumn> headGroupingColumns = new List<GridGroupingColumn>();
            int ungroupedCount = 0;
            GridGroupingColumn currentGroup = null;
            foreach (var column in renderColumns)
            {
                if (!column.Visible)
                    continue;
                string columnName = GetColumnName(column);
                if (!columnGroupsMapping.ContainsKey(columnName))
                {
                    //Count number of ungrouped columns in a sequence
                    // this is needed to assign ColSpan to the empty group column
                    ++ungroupedCount;

                    if (currentGroup != null)
                    {
                        headGroupingColumns.Add(currentGroup);
                        currentGroup = null;
                    }

                }
                else
                {
                    if (ungroupedCount > 0)
                    {
                        // Create "dummy" group for ungrouped sequence of columns
                        GridGroupingColumn empty = new GridGroupingColumn();
                        empty.ColSpan = ungroupedCount;
                        headGroupingColumns.Add(empty);
                        ungroupedCount = 0;
                    }

                    if (currentGroup != columnGroupsMapping[columnName])
                    {
                        if (currentGroup != null)
                            headGroupingColumns.Add(currentGroup);
                        currentGroup = columnGroupsMapping[columnName];
                    }
                }
            }
            // Ensure we finilize all groups
            if (ungroupedCount > 0)
            {
                GridGroupingColumn empty = new GridGroupingColumn();
                empty.ColSpan = ungroupedCount;
                headGroupingColumns.Add(empty);
            }
            else if (currentGroup != null)
            {
                if (headGroupingColumns.Count == 0 || currentGroup != headGroupingColumns[headGroupingColumns.Count - 1])
                    headGroupingColumns.Add(currentGroup);
            }

            //Insert grouping item to the grid root
            // Note: this is a little bit of "hack" because we are
            // intruding into RadGrid controls structure which
            // may be changed in farther releases
            var table = (Table)MasterTableView.Controls[0];
            var tHead = (GridTHead)table.Rows[0];
            var headerItem = new GridHeaderItem(MasterTableView, 0, 0);
            headerItem.Initialize(headGroupingColumns.ToArray());
            tHead.Controls.AddAt(0, headerItem);
        }

        /// <summary>
        /// Returns column name which can be used to identify column.
        /// If UniqueName is not specified then function checks column type
        /// and gets most allowable uniq name equivalent
        /// </summary>
        /// <param name="column">Grid column</param>
        /// <returns>Uniq name</returns>
        private string GetColumnName(GridColumn column)
        {
            if (!string.IsNullOrEmpty(column.UniqueName))
                return column.UniqueName;
            if (column is GridBoundColumn)
                return ((GridBoundColumn)column).DataField;
            if (column is GridButtonColumn)
                return ((GridButtonColumn)column).CommandName;
            if (column is GridTemplateColumn)
                return ((GridTemplateColumn)column).DataField;
            return string.Empty;
        }

        private GridGroupingColumn[] GetGroupingColumns()
        {
            List<GridGroupingColumn> cols = new List<GridGroupingColumn>();
            foreach (var col in MasterTableView.Columns)
                if (col is GridGroupingColumn)
                    cols.Add((GridGroupingColumn)col);
            return cols.ToArray();
        }

    }
    public class GridGroupingColumn : GridColumn
    {
        private string[] columnNames;
        private string groupingColumns;
        internal int ColSpan { get; set; }

        public override bool Visible
        {
            get { return false; }
        }
        public string[] ColumnNames
        {
            get { return columnNames; }
        }

        public string GroupingColumns
        {
            get { return groupingColumns; }
            set
            {
                groupingColumns = value;
                columnNames = value.Split(',');
                for (int i = 0; i < columnNames.Length; ++i)
                    columnNames[i] = columnNames[i].Trim();
            }
        }

        public override void InitializeCell(TableCell cell, int columnIndex, GridItem inItem)
        {
            if (Owner != null)
            {
                base.InitializeCell(cell, columnIndex, inItem);
                //This is just to make sure column is formed well
                cell.Style.Add(HtmlTextWriterStyle.BorderColor, "#000000");
                cell.Style.Add(HtmlTextWriterStyle.BorderWidth, "1px");
                cell.Style.Add(HtmlTextWriterStyle.BorderStyle, "solid");
            }

            cell.CssClass = "rgHeader";
            cell.Text = HeaderText;
            cell.Controls.Add(new LiteralControl(HeaderText));

            cell.ColumnSpan = ColSpan;
            cell.HorizontalAlign = HorizontalAlign.Center;
        }


        public override GridColumn Clone()
        {
            var c = new GridGroupingColumn();
            c.CopyBaseProperties(this);
            return c;
        }
    }
}

Examples:

.aspx code

<%@ Register Assembly="Telerik.Web.UI" TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
<%@ Register Assembly="gridTest" Namespace="gridTest" TagPrefix="test" %>

        <test:RadGridEx runat=server ID="grdData1" GridLines="None">
            <MasterTableView AllowFilteringByColumn="True" AllowPaging="True"
                AllowSorting="True" AutoGenerateColumns=false >
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType=PushButton UniqueName="edit1"></telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Desc" HeaderText="Desc"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Desc2" HeaderText="Desc2"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Desc3" HeaderText="Desc3"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name"></telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn  HeaderText="Template"><ItemTemplate>Text</ItemTemplate></telerik:GridTemplateColumn>
                    <test:GridGroupingColumn GroupingColumns="Name,ID" HeaderText="Group"></test:GridGroupingColumn>
                    <test:GridGroupingColumn GroupingColumns="Desc, Desc3" HeaderText="Group2"></test:GridGroupingColumn>
                </Columns>
            </MasterTableView>
        </test:RadGridEx>

Code behind .cs (just fill grid with some dummy data)

protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            grdData1.NeedDataSource += grdData1_NeedDataSource;
        }


        void grdData1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            var table = new DataTable();
            table.Columns.Add("ID");
            table.Columns.Add("Name");
            table.Columns.Add("Desc");
            table.Columns.Add("Desc2");
            table.Columns.Add("Desc3");
            table.Rows.Add("1", "test", "Desc");
            table.Rows.Add("1", "abc");
            table.Rows.Add("1", "abc");
            table.Rows.Add("1", "abc");
            table.Rows.Add("1", "abc");
            table.Rows.Add("1", "abc");

            grdData1.DataSource = table;
        }

I attached groupedgrid.png of how it looks at runtime

 

 

 

 

[Eliza Sahoo]

By default RadGrid has a Property to add New Records. It's style depends upon the inbuilt Skin you apply in your RadGrid. Sometimes you may want to diaplay Custom image instad of the default one. Following code helps you to add Custom image. Here i added a Custom image for "Add New Records" in RadGrid.

<  <     <CommandItemTemplate>         <asp:ImageButton ID ="imgInsert" runat = "server" ImageUrl="~/Image/icons_add.jpg" CommandName = "InitInsert" ToolTip ="Insert New Record" />   </CommandItemTemplate>MasterTableView> </ Telerik:RadGrid>     </ Telerik:RadGrid....> MasterTableView.....> custom image in radgrid

[kishore garikapati]

I have used the custom rad grid code provided by one of the person, but still i am getting errors when i am trying to use the custom grid. the error is like object reference not set to an object.

the setps are :
created a class with the given code in the .cs
and loaded the same in the new aspx page and when i am trying to add data source to the custom control which is created by the class then it is throughing an error called as object refernce not set to object

[santosh]

Hello,


I can able to use the above given code, but not able to implement the same  type of grouping for template columns. please suggest us how can we able to get grouping of columns for template type of columns.


Regards,
Santosh

[Mira]

Hello Kishore,

In order to implement grouping for a template column, you should set its GroupByExpression property manually.
Please refer to the Template columns section of this help topic for additional information.

I hope this helps.

All the best,
Mira
the Telerik team

[CT]

Thanks so much for sharing your code and knowledge. I have similar need too.
I don't see the groupedgrid.png you intended to attached though. Seeing the result is very helpful. Thanks

[Mira]

Hello CW,

Could you please provide a little bit more information on your scenario, so that we can assist you further?

Greetings,
Mira
the Telerik team