RadGrid Custom Header with tow rows

16 posts, 0 answers
  1. Mike
    Mike avatar
    3 posts
    Member since:
    Oct 2006

    Posted 29 Jul 2008 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2008 Link to this post

    Hi Mike,

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

    Thanks
    Shinu.
  3. Mike
    Mike avatar
    3 posts
    Member since:
    Oct 2006

    Posted 30 Jul 2008 Link to this post

    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?

  4. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 01 Aug 2008 Link to this post

    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.
  5. Markus
    Markus avatar
    17 posts
    Member since:
    Mar 2008

    Posted 18 Aug 2008 Link to this post

    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
  6. Markus
    Markus avatar
    17 posts
    Member since:
    Mar 2008

    Posted 20 Aug 2008 Link to this post

    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
  7. senthil
    senthil avatar
    23 posts
    Member since:
    Dec 2008

    Posted 05 Dec 2008 Link to this post

      <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.
  8. bhaskar
    bhaskar avatar
    3 posts
    Member since:
    Jun 2007

    Posted 03 Feb 2009 Link to this post

    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>

     

     

  9. Daniel
    Admin
    Daniel avatar
    4950 posts

    Posted 03 Feb 2009 Link to this post

    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.
  10. Artem L
    Artem L avatar
    1 posts
    Member since:
    Feb 2010

    Posted 11 Feb 2010 Link to this post

    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 { getset; }  
     
            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

     

     

     

     

  11. Eliza Sahoo
    Eliza Sahoo avatar
    29 posts
    Member since:
    Jan 2010

    Posted 11 May 2010 Link to this post

    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.....>
  12. kishore garikapati
    kishore garikapati avatar
    1 posts
    Member since:
    Apr 2010

    Posted 09 Mar 2011 Link to this post

    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
  13. santosh
    santosh avatar
    1 posts
    Member since:
    Mar 2011

    Posted 14 Mar 2011 Link to this post

    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
  14. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 14 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  15. CT
    CT avatar
    3 posts
    Member since:
    Dec 2009

    Posted 13 May 2011 Link to this post

    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
  16. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 18 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top