An Extensive Examination of the PHP:DataGrid Component: Part 2
(Page 1 out of 2)Welcome to Part 2 of the PHP:DataGrid Examination Series. In the previous part I gave you an introduction to the PHP:DataGrid component, and what it exactly is. I also showed you a small example, demonstrating the component at its simplest.
In this part we're going to have a look at DataGrid styles, and how to customize your datagrids. I am also going to show you how to specify the columns you want to show, using the AutoGenerateColumns property. And finally, at the end of this article I will have another (simple) example, but this time it will also include the things we've learned in this part.
Customizing PHP:DataGrid - Using Styles
To change the appearance of your datagrid, you can use a thing called "Styles". These styles are used to set certain properties, e.g. background color, text color, alignment, etc. There five different kinds of styles:
- Style: this style is used for the main datagrid table
- HeaderStyle: this style is used for the headers
- FooterStyle: this style is used for the footers
- ItemStyle: this style is used for the items
- AlternateItemStyle: this style is used for the alternate items
With these styles you have quite a lot control on how your datagrid should look. An example of using styles to create a better-looking datagrid can be seen below:
Looks a lot better doesn't it? And that's only a few properties, a lot more can be done. Below is a full list of all the available properties:
- text-align: specifies the text alignment: left, center or right
- text-color: specifies the text color (can be a color name, e.g red, or a color code, e.g. #000)
- background-color: specifies a background color (can be a color name or code)
- font-size: specifies a font size (can be a percentage, pixel, em's or points)
- font-family: specifies a font family, e.g. Arial, or Times New Roman, or multiple
- font-weight: specifies a custom font weight
- vertical-align: specifies the vertical alignment for a cell: top, middle or bottom
- bold: true/false to make text bold or not
- italic: true/false to make text italics or not
- underline: true/false to make text underlined or not
- font: can be used to specify all the font properties in one go
- background: can be used to specify different background properties in one go
You can also use styles, without having to use separate tags, by using short-hand attributes in the php:datagrid tag. For example, this produces the exact same result as the above example:
There are no style tags, but there are a lot of style attributes. In this case, there isn't any real advantage, and it just looks messier and much harder to read. But if you only need to set one style property, using style attributes can be a lot easier. Just another little hack PHP:DataGrid has that really saves time.
Now that we're able to use global styles, let's have a look at displaying custom columns, AND creating different styles for each column.
