CSS and the Data grid control....

  • Thread starter Thread starter Ram
  • Start date Start date
R

Ram

Is it possible to control the appearence of data grid control using external
style sheets ?
If so, what should be the syntax ?
Thanks,
Ram
 
You can't really change the display of the DataGrid without some programming (especially if you've
done any styling of the control) and achieve the same results using CSS tags vs. styling it
yourself.

What we do is to create our own derived class from DataGrid and override the the OnItemCreated
method to attach a css classes to the various bits of the DataGrid (if you really want to do a
strict job of this, then you have to "remove" any programmer styling). It's not perfect but it works
most of the time.

In OnItemCreated, assuming that you've already assigned a css class to the DataGrid using the
CssClass property; we do something like the following:

OnItemCreated(object sender, DataGridEventArgs e)
ListItemType t = e.Item.ItemType;
DataGridItem r = e.Item.Controls[0].Parent as DataGridItem;

if (t == ListItem.Item)
r.CssClass = this.CssClass + "Itm";
else if (t == ListItem.AlternatingItm)
r.CssClass = this.CssClass + "AltItm";
// do the same for the rest of the types


In your Css file you could have something like

..DataGrid {
}

..DataGridItm {
}

..DataGridAltItm {
}
 
You can't really change the display of the DataGrid without some
programming (especially if you've
done any styling of the control) and achieve the same results using CSS tags vs. styling it
yourself.
Click to expand...

I'm afraid I have to take issue with this statement. It is certainly
possible to assign a single CSS Class to a Data Grid, and define completely
the styles that each HTML element in the DataGrid should have.

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

Scott said:
You can't really change the display of the DataGrid without some
Click to expand...
programming (especially if you've
done any styling of the control) and achieve the same results using CSS tags vs. styling it
yourself.

What we do is to create our own derived class from DataGrid and override the the OnItemCreated
method to attach a css classes to the various bits of the DataGrid (if you really want to do a
strict job of this, then you have to "remove" any programmer styling). It's not perfect but it works
most of the time.

In OnItemCreated, assuming that you've already assigned a css class to the DataGrid using the
CssClass property; we do something like the following:

OnItemCreated(object sender, DataGridEventArgs e)
ListItemType t = e.Item.ItemType;
DataGridItem r = e.Item.Controls[0].Parent as DataGridItem;

if (t == ListItem.Item)
r.CssClass = this.CssClass + "Itm";
else if (t == ListItem.AlternatingItm)
r.CssClass = this.CssClass + "AltItm";
// do the same for the rest of the types


In your Css file you could have something like

.DataGrid {
}

.DataGridItm {
}

.DataGridAltItm {
}

Is it possible to control the appearence of data grid control using external
style sheets ?
If so, what should be the syntax ?
Thanks,
Ram
Click to expand...
Click to expand...
 
Then how do you style normal items vs. alternating items? If you don't provide styles on the
control for normal vs. alternating items they both come out as normal <tr>... I believe the same is
true of the selected items in the DataGrid. You can do a lot with a single CSS but if you want the
kind of styling that the control has built-in you have to "classify" the tags of the underling
table.

Though, if you have some way to do this in a single CSS class, I love to see it.

Scott


Kevin Spencer said:
You can't really change the display of the DataGrid without some
Click to expand...
programming (especially if you've
done any styling of the control) and achieve the same results using CSS tags vs. styling it
yourself.
Click to expand...

I'm afraid I have to take issue with this statement. It is certainly
possible to assign a single CSS Class to a Data Grid, and define completely
the styles that each HTML element in the DataGrid should have.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

Scott said:
You can't really change the display of the DataGrid without some
Click to expand...
programming (especially if you've
done any styling of the control) and achieve the same results using CSS tags vs. styling it
yourself.

What we do is to create our own derived class from DataGrid and override the the OnItemCreated
method to attach a css classes to the various bits of the DataGrid (if you really want to do a
strict job of this, then you have to "remove" any programmer styling). It's not perfect but it works
most of the time.

In OnItemCreated, assuming that you've already assigned a css class to the DataGrid using the
CssClass property; we do something like the following:

OnItemCreated(object sender, DataGridEventArgs e)
ListItemType t = e.Item.ItemType;
DataGridItem r = e.Item.Controls[0].Parent as DataGridItem;

if (t == ListItem.Item)
r.CssClass = this.CssClass + "Itm";
else if (t == ListItem.AlternatingItm)
r.CssClass = this.CssClass + "AltItm";
// do the same for the rest of the types


In your Css file you could have something like

.DataGrid {
}

.DataGridItm {
}

.DataGridAltItm {
}

Is it possible to control the appearence of data grid control using external
style sheets ?
If so, what should be the syntax ?
Thanks,
Ram
Click to expand...
Click to expand...
Click to expand...
 
See http://www.csszengarden.com

--
HTH,
Kevin Spencer
..Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

Scott said:
Then how do you style normal items vs. alternating items? If you don't provide styles on the
control for normal vs. alternating items they both come out as normal
Click to expand...
true of the selected items in the DataGrid. You can do a lot with a single CSS but if you want the
kind of styling that the control has built-in you have to "classify" the tags of the underling
table.

Though, if you have some way to do this in a single CSS class, I love to see it.

Scott


You can't really change the display of the DataGrid without some
Click to expand...
programming (especially if you've
done any styling of the control) and achieve the same results using
Click to expand...
CSS
tags vs. styling it
yourself.
Click to expand...

I'm afraid I have to take issue with this statement. It is certainly
possible to assign a single CSS Class to a Data Grid, and define completely
the styles that each HTML element in the DataGrid should have.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

Scott said:
You can't really change the display of the DataGrid without some
Click to expand...
programming (especially if you've
done any styling of the control) and achieve the same results using
Click to expand...
CSS
tags vs. styling it
yourself.

What we do is to create our own derived class from DataGrid and
Click to expand...
override
the the OnItemCreated
method to attach a css classes to the various bits of the DataGrid (if
Click to expand...
you
really want to do a
strict job of this, then you have to "remove" any programmer styling). It's not perfect but it works
most of the time.

In OnItemCreated, assuming that you've already assigned a css class
Click to expand...
to
the DataGrid using the
CssClass property; we do something like the following:

OnItemCreated(object sender, DataGridEventArgs e)
ListItemType t = e.Item.ItemType;
DataGridItem r = e.Item.Controls[0].Parent as DataGridItem;

if (t == ListItem.Item)
r.CssClass = this.CssClass + "Itm";
else if (t == ListItem.AlternatingItm)
r.CssClass = this.CssClass + "AltItm";
// do the same for the rest of the types


In your Css file you could have something like

.DataGrid {
}

.DataGridItm {
}

.DataGridAltItm {
}

Is it possible to control the appearence of data grid control using external
style sheets ?
If so, what should be the syntax ?
Thanks,
Ram
Click to expand...
Click to expand...
Click to expand...
 
Yes, well, I stand by what I said earlier -- if you want to do CSS styling of a DataGrid (with all
of the fancy stuff that the DataGrid offers as part of the control --
normal/alt/selected/header/etc.) you have to classify the table tags.

Scott

Kevin Spencer said:
See http://www.csszengarden.com

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.

Scott said:
Then how do you style normal items vs. alternating items? If you don't provide styles on the
control for normal vs. alternating items they both come out as normal
Click to expand...
true of the selected items in the DataGrid. You can do a lot with a single CSS but if you want the
kind of styling that the control has built-in you have to "classify" the tags of the underling
table.

Though, if you have some way to do this in a single CSS class, I love to see it.

Scott


You can't really change the display of the DataGrid without some
programming (especially if you've
done any styling of the control) and achieve the same results using CSS
tags vs. styling it
yourself.

I'm afraid I have to take issue with this statement. It is certainly
possible to assign a single CSS Class to a Data Grid, and define completely
the styles that each HTML element in the DataGrid should have.

--
HTH,
Kevin Spencer
.Net Developer
Microsoft MVP
Big things are made up
of lots of little things.


You can't really change the display of the DataGrid without some
programming (especially if you've
done any styling of the control) and achieve the same results using CSS
tags vs. styling it
yourself.

What we do is to create our own derived class from DataGrid and override
the the OnItemCreated
method to attach a css classes to the various bits of the DataGrid (if you
really want to do a
strict job of this, then you have to "remove" any programmer styling).
It's not perfect but it works
most of the time.

In OnItemCreated, assuming that you've already assigned a css class to
the DataGrid using the
CssClass property; we do something like the following:

OnItemCreated(object sender, DataGridEventArgs e)
ListItemType t = e.Item.ItemType;
DataGridItem r = e.Item.Controls[0].Parent as DataGridItem;

if (t == ListItem.Item)
r.CssClass = this.CssClass + "Itm";
else if (t == ListItem.AlternatingItm)
r.CssClass = this.CssClass + "AltItm";
// do the same for the rest of the types


In your Css file you could have something like

.DataGrid {
}

.DataGridItm {
}

.DataGridAltItm {
}

Is it possible to control the appearence of data grid control using
external
style sheets ?
If so, what should be the syntax ?
Thanks,
Ram
Click to expand...
Click to expand...
Click to expand...
 
Back
Top