This is a migrated thread and some comments may be shown as answers.

Styling radgrids with a large number of columns.

3 Answers 52 Views

Grid

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.

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