I've seen a few threads but nothing specific, so I will ask again: I am using the WebDataGrid and the RubberBlack style. In addition to using this style, I also want to CENTER my data columns. There should be an align property for a column but obviously there isn't.
So... when using a theme how can I center or otherwise manipulate the style (such as setting a column bold or setting a column to center-align)?
/Tom
Hey Tom,
This should be possible by setting the CssClass property of the column in question. You'll want to define your custom class like follows. It needs the selectors in order to override what is set in the classes of the StyleSet.
tbody > tr > td.custom { font-weight: bold; text-align: center; color : Blue; }
.customHeader
{ font-weight: bold; text-align: center;
}
This will only affect the cells. To affect the footer and header, the css class for those parts of the column will need to be set.
<ig:BoundDataField DataFieldName="Name" Key="Name" CssClass="custom"> <Header Text="Name" CssClass="customHeader" /> </ig:BoundDataField>
The customHeader class doesn't need selectors since our .igg_HeaderCaption doesn't use them. Hopefully, this gets you rolling with styling your columns.
regards,
David Young
But this is also aligning my filter row (if filter is applied in grid).
I want to stay my filter alignment whatever it is. Is there any idea how to do that?
Hi,
So, I have three solutions for you, which depends upon where you want the centering. If you want the centering on just a column header (not the cells), it can be done with custom css. If you want all column headers and cells, it can be done by modifying the style. If you want one column header and column's cells, then you will also need an event.
1. Just set the custom css class for the header and you will be fine.
.customHeader{ font-weight: bold; text-align: center;}
2. In the styleset css class, change" tbody.igg_Item > tr > td" and "tbody.igg_Alt > tr > td" and .igg_HeaderCaption to have "text-align : left;" This will center all columns' header and cell data, but leave the filter row button on the left.
3. If you want one column's data and header centered, then you will have to handle the initialize event for the grid. In there, you will need to set the style of the filter cell to have text-align left. I am using index 1 as an example. You will also set the custom css class for the cells and the header as explained in the previous post.
function init(grid, args) { var cellEl = grid.get_behaviors().get_filtering()._row.get_cell(1).get_element(); cellEl.style.textAlign = "left"; }
Hope this helps.