Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Styling radgrids with a large number of columns.

3 Answers 41 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 25 Aug 2010, 11:57 AM
Hello there.

I need a point/push in the right direction.

I have a radgrid that is quite wide (well, the width and number of columns is dependent upon preferences but that's another matter) i.e., it has the potential for being up to 35 columns across...phew!!

Can someone recommend how I can go about styling, amending the rad grid so that the columns are grouped. Is it even possible?

So for example, I have the t1 with the following.

Col1, Col2, Col3, Col4.

Is it possible to show the table so that Col1 & Col2 are grouped (i.e. not shown in their entirity) but still showing Col 3 & Col 4.

Any helps or pushes in the right direction, greatly appreciated.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Aug 2010, 01:32 PM
Hi Richard,

I am not sure what do you mean by "grouped columns" and how such columns should look like. Can you provide some visual representation / screenshot?

Generally, you can force some columns to be narrower than their content. Below is a simple demo. You can also add tooltips for the narrow columns, using the guidelines at

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

and

http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx?product=grid


Finally, I suppose you are aware of the RadGrid's scrolling functionality, which allows you to enclose a large table in a smaller area.


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 30;
        int rowsNum = 6;
        string colName = "Column";
 
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
 
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
 
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
 
    protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column.UniqueName == "Column2" || e.Column.UniqueName == "Column3")
        {
            e.Column.HeaderStyle.Width = Unit.Pixel(40);
            e.Column.ItemStyle.Wrap = false;
            (e.Column as GridBoundColumn).DataFormatString = "<nobr>{0}</nobr>";
        }
    }
     
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="700px"
    Skin="Office2007"
    OnNeedDataSource="RadGrid_NeedDataSource" OnColumnCreated="RadGrid1_ColumnCreated" OnItemDataBound="RadGrid1_ItemDataBound">
    <HeaderStyle Width="130px" />
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="150px" />
    </ClientSettings>
</telerik:RadGrid>
 
</form>
</body>
</html>


All the best,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Richard
Top achievements
Rank 1
answered on 25 Aug 2010, 01:43 PM
Hello Dimo - thanks for your time.

I probably didn't explain myself properly.

Ok, say in its entirity my gridview may look something along the lines of this:

Col1 Col2 Col3 Col4  Col5 Col6
a e i m q u
b f j n r v
c g k o s w
d h l p t x

Each of these columns belongs to a certain group i.e:

Grp1 Grp2 Grp3 Grp3 Grp3 Grp4
Col1 Col2 Col3 Col4  Col5 Col6
a e i m q u
b f j n r v
c g k o s w
d h l p t x

What I am trying to achieve is essentailly the ability to expand and collapse these columns based upon the group to which they belong. For example, if I collpased the above by Grp3, the radgrid would look like this:

Col1 Col2 Grp3 - Collapsed Col6
a e u
b f v
c g w
d h x

Does that make sense?! Is it even possible or have I lost the plot completely?!

Thanks for any help.
0
Dimo
Telerik team
answered on 25 Aug 2010, 02:38 PM
Hello Richard,

I am afraid we cannot offer the exact same functionality. You can use server-side or client-side column hiding:

http://www.telerik.com/help/aspnet-ajax/grdusingcolumns.html
(see Visibility and Rendering of Columns)

http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/headercontextmenu/defaultcs.aspx

Alas, in both cases the user does not have a visual clue that some columns are not displayed.

Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Richard
Top achievements
Rank 1
Share this question
or