Css changes to Grid

[SchoolMusicMember]

Hi

I am trying to make a few changes to the appearance of the grid.
1. Larger spacing between rows.
2. Bold font in header

I have added a custom css file and added the following rule to increase the spacing between rows.
.jqx-grid-cell-custom
{
background-color: #FEFCF7;
padding: 10px 0;
}
This works well for the first row, but has no effect on the remaining rows.

When making changes to the Grid header .jqx-widget-header-custom like bold font, it works well but then also affects the grid footer is there a way to apply css rules only to the grid header.

Thanks
School Music

[Peter StoevKeymaster]

Hi School Music,

The rows height is specified by the rowsheight property.
The columnsheight property specified the height of the columns header.

For more information about the available Layout properties see: jquery-grid-api.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SchoolMusicMember]

Hi Peter

Thanks for your quick reply and help rowsheight & columnsheight work well.

Is there an option to vertically align the text in the cell so that it is in the center, at the moment text is aligned along the top of the cell.

Is there and option to bold the font in the header.

Thanks
School Music

[Peter StoevKeymaster]

Hi School Music,

You can customize the cells appearance by using the cellsrenderer callback function: cellsrendering.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts