PHP:DataGrid uses a special HTML syntax to create datagrids. There are several different tags that are used by PHP:DataGrid. Below is a complete list of all the tags.
| Tag | Attributes | Info | Example |
|---|---|---|---|
| php:datagrid |
name id AutoGenerateColumns width cellspacing cellpadding headerclass footerclass itemclass method border ShowHeader ShowFooter AllowSorting DisableViewstate Style-Attributes |
Used as the opening and closing for a PHP:DataGrid Control. | <php:datagrid name="samplegrid"> ... datagrid html goes here ... </php:datagrid> |
| *Style |
bold italic underline text-align text-color background-color font-size font-family font-weight vertical-align font background |
Used to style your datagrid or column, valid style tags are HeaderStyle, FooterStyle, ItemStyle, Style and AlternateItemStyle.
Style-attributes can also be used in other tags, e.g. in the |
<HeaderStyle bold="true" /> |
| Column |
datafield width headerclass itemclass footerclass headertext footertext readonly |
Used to display a column, when AutoGenerateColumns is set to false. | <Column datafield="faqid" text="FAQID" /> |
| Link/Button |
width headerclass itemclass footerclass headertext footertext action value callback text confirm updatetext canceltext onclick |
Used to display a link or button, that does a certain action |
<Link name="dosomething" text="Do Something" action="dosomething" /> OR <Button name="dosomething" text="Do Something" action="dosomething" /> |
| *Template | Used to change the output of a column. Valid templates are HeaderTemplate, FooterTemplate, ItemTemplate and EditItemTemplate. |
<ItemTemplate> This gets displayed </ItemTemplate> |
|
| DataFormat |
function arg1 arg2 etc.. |
Used to format the data of a certain column. Must always be used in Column tags. Function must be a valid callback, either a function name, a static reference (e.g. class::func) or a object reference (e.g. obj->func). |
<DataFormat function="test" arg1="{item:faqid}" /> |
The php:datagrid tag is used to create a new PHP:DataGrid. You must specify a name or the datagrid won't be displayed.
The datagrid tag accepts most of the common table attributes (cellpadding, cellspacing, border, etc) and a few custom attributes. The AutoGenerateColumns attribute is used to turn automatic columns on or off. If you want to shown only certain columns, or specify specific formats, then you must turn off AutoGenerateColumns (by setting its value to false), and use the Column tag to specify which columns you want to show.
Example:
<php:datagrid name="demo" ItemStyle-bold="true" />
The column is used to display custom columns. Each column must have a datafield or a name. If you don't specify either, the column won't be shown.
To display a certain column, all you need to set is the datafield attribute, e.g if your data has a faqid, and you want to display it, then you need to set the datafield to faqid: <Column datafield="faqid" />.
Example:
<Column datafield="title" HeaderText="Title" ItemStyle-bold="true" />
The dataformat tag is used to specify how the output of a column should look like. DataFormat tags can only be used within column tags.
The dataformat has a very simply syntax, and needs only two attributes: function and arg1, however you may use additional arg attributes (arg2, arg3, arg4, etc). The function attribute must contain the function that should be used to format the data. This can be either a static reference (class::method), an object reference (obj->method) or a simple function. In the arguments you can use the {item:*} variables (see the variables section).
Example:
<Column datafield="date">
<DataFormat function="date" arg1="d/m/y" arg2="{item:date}" />
</Column>
The link or button tag is used to display a column with a link or button. These are used to execute certain actions or callbacks. Each tag is exactly the same in attributes, and usage, except the link tag creates a link, and the button tag a button. They must have a name attribute. If you do not set a name, they won't be displayed.
Other attributes that this tag can use are callback, action, value, confirm, onclick, text, updatetext, and canceltext (plus the regular column attributes. See full attribute list above). The callback attribute is used to set a function that needs to be executed on the server side. This can only be a static reference (class::method) or a simple function. Object references do NOT work.
The action attribute isn't really used for anything, except for in-built commands. Of course, you can set the action attribute yourself, and then in your PHP script check for that action (using the DG_ACTION constant, see the constants below). The value attribute is used to pass an additional value.
The confirm and onclick attributes are used for the client-side. If you want to display a confirmation message, when the button or link is clicked, then set the confirm to your message, and it will be displayed on the client-side (using JavaScript). The onclick attribute can be used to set a JavaScript OnClick handler. Works just like the regular HTML OnClick attribute.
Finally, the text, updatetext and canceltext attributes is used to set the text of the link or button. The updatetext and canceltext are used to set the text of the update and cancel button/link (when using inline editing, see the inline editing section).
Example:
<Link name="mylink" text="Do Something" action="dosomething" />
Or:
<Button name="mybutton" text="Do Something" action="dosomething" />
The row tag is used to add something before or after the data. This can be especially useful when you want to add some text above or below. The row tag must have a name set, or it won't be displayed.
The row tag has column tags to display data for each column. For example, if you want to display something for the first column, then you have to use a column tag, with a for attribute set to 0.
<Row name="demo" type="after">
<Column for="0">This will be displayed in the first column</Column>
</Row>
The column tags accept style attributes and tags. The row also accepts style attributes and tags (only the Style style applies to the row, none of the other styles work with rows).
See demo 7 in the demos folder for a working demonstration of adding custom rows.
Below is a simple layout of a PHP:DataGrid. To see its result, check out demo 1 (in the demos folder).
<php:datagrid name="demo" width="100%"
Style-Font-Size="12px;"
cellpadding="5" Style-Font-Family="Verdana" cellspacing="0"
border="true" Style-Background-Color="#eeeeee"
AlternateItemStyle-Background-Color="#ffffff" HeaderStyle-bold="true"
HeaderStyle-Background-Color="#000" HeaderStyle-Text-Color="#fff" />
As you can see, the syntax of PHP:DataGrid is extremely easy and straight-forward. It's almost just like English, and it requires very little knowledge to create something good-looking and powerful at the same time.
The above example can also be created like this:
<php:datagrid name="demo" width="100%" cellpadding="5" cellspacing="0" border="true">
<Style font-family="Verdana" background-color="#eeeeee" font-size="12px" />
<HeaderStyle Background-Color="#000" bold="true" text-color="#fff" />
<AlternateItemStyle background-color="#fff" />
</php:datagrid>
The output will be exactly the same, but this time we used Style tags instead of Style attributes.
To display a DataGrid, you must bind the data (that you got from your SQL query) to the DataGrid. To do this, you can use the bind() method.
<?php
$_DATAGRID->bind('demo', $data);
?>
Now the data ($data) has been binded to a datagrid called 'demo'. If you do not do this, an error will be displayed.
Constants
To help you create your PHP scripts, and interact with datagrids, PHP:DataGrid will automatically set 9 constants:
| Constant | Purpose | Sample Value |
|---|---|---|
| DG_VALUE | Contains the value of the submitted button or link (they can pass values) | Any value that you set |
| DG_ACTION | Action of the submitted button or link | edit |
| DG_CALLBACK | Function/Callback that gets executed | my_obj->func |
| DG_ROW | The row that was submitted (e.g. a button for row 3 was clicked) | 3 |
| DG_DATAGRID | The datagrid that was submitted, useful for when you have multiple datagrids on one page | demo |
| DG_VIEWSTATE | A serialized array that contains the data, sort order and sort by that was assigned to the datagrid | a:3:{s:4:"data";a:0:{}s:7:"sort_by"; s:5:"title";s:10:"sort_order";s:3:"ASC";} |
| DG_SORT_BY | Sort by which column | title |
| DG_SORT_ORDER | Sort by which order (ASC or DESC) | DESC |
| DG_ORDER_BY | SORT_BY and SORT_ORDER together | title DESC |
To help you create a dynamic DataGrid, you can use certain variables in your templates. Below is a table of all the available variables.
| Variable | Usage | Purpose | Sample Value |
|---|---|---|---|
| {var:datagrid} | Global | Returns the datagrid name. | demo |
| {var:DG_VALUE} {var:DG_ACTION} {var:DG_ORDER_BY} etc |
Global | All 9 constants can be used as well, in the form of {var:CONST}. | See the constants section |
| {var:row} | Column |
Returns the current row number. | 5 |
| {var:datafield} | Column |
Returns the datafield that has been assigned to the column | title |
| {var:action} | Link |
Returns the action that has been assigned to the link/button | edit |
| {var:callback} | Link |
Returns the callback that has been assigned to the link/button | my_obj->do_something |
| {var:value} | Link |
Returns the value that has been assigned to the link/button | Some value |
| {item:*} | Column |
Returns a value of the current row, e.g. {item:title} would display the title of the current row, or {item:faqid} would display the FAQ id. | my title |
| {item:*_raw} | Column |
Same as {item:*}, except htmlentities is not applied. | my title |
| {var:item_value} | Column |
Returns the value of the current column, with htmlentities. For example, if you have a column that has its datafield set to 'title', then {var:item_value} will contain the title of the item (for that column). It is also formatted with htmlentities or according to the DataFormat. | anything |
| {var:item_value_raw} | Column |
Same as the {var:item_value}, only no formatting is applied at all. | anything |
| {var:button} | Button |
Returns the HTML for a button. If you want to change the template of a Button, you should use the button variable, e.g set the ItemTemplate to Button: {var:button}. |
... button HTML ... |
| {var:link} | Link |
Returns the HTML for a link. If you want to change the template of a Link, you should use the link variable, e.g set the ItemTemplate to Link: {var:link}. |
... link HTML ... |
| {var:header_link} | Column |
Returns a link for the header (or only the header text, depending on whether sorting is enabled). Can only be used in the HeaderTemplate | <a href="#">Header</a> |
| {var:header_text} | Column |
Returns the header text. Can only be used in the HeaderTemplate | Header |
| {var:footer_link} | Column |
Returns a link for the footer (or only the footer text, depending on whether sorting is enabled). Can only be used in the FooterTemplate | <a href="#">Footer</a> |
| {var:footer_text} | Column |
Returns the footer text. Can only be used in the FooterTemplate | Footer |
Styles can be used to give your DataGrid a different look. There are 5 types of styles:
| Style | Used as a style for the datagrid or row |
| HeaderStyle | Used as a style for the headers |
| FooterStyle | Used as a style for the footers |
| ItemStyle | Used as a style for the items |
| AlternateItemStyle | Used as a style for the alternating items |
You can use style tags (e.g. <HeaderStyle bold="true" />) or style attributes (e.g <php:datagrid HeaderStyle-bold="true" />);
Styles can be used on the php:datagrid, column and row tags. Each tag accepts style attributes, and style tags. See the sample layout for an example of styles.
Template tags can be used to give your datagrid a completely different look. There are 4 different kinds of templates.
| HeaderTemplate | Used as the template for the header. Default is {var:header_link} |
| FooterTemplate | Used as the template for the header. Default is {var:footer_link} |
| ItemTemplate | Used as the template for the item. Default is {var:item_value} |
| EditItemTemplate | Used as the template for the item, when in editing mode. Default is <textarea name="dg_update_{var:datafield}" class="dg_do_update">{var:item_value}</textarea> |
To set a template, use the template tags, e.g. <HeaderTemplate>Your new HTML goes here</HeaderTemplate>, and the same goes for the other templates.
PHP:DataGrid supports a feature called 'Inline Editing', that is also present in the ASP.NET DataGrid control. It allows you to directly edit an item from the datagrid.
To enable editing mode, all you have to do is add a link or button, and set its action attribute to 'edit'. When that button or link is clicked, edit mode will be enabled, and for each column a text box will appear where the value can be edited. If you want certain columns to be read-only, just set their readonly attributes to true, and they won't be editable.
When the update button is clicked, the updated information will be made available in $_DATAGRID->update, which you can use in your PHP script.
See demo 6 in the demos folder for an example of inline editing.
PHP:DataGrid also supports column sorting. To enable column support, set the AllowSorting attribute of the php:datagrid tag to true, and sorting will be enabled for all the columns. Or, set the AllowSorting attribute on an individual column to true, and only that column is sortable. You can then use the constants to use the sorting in your PHP script.
Sorting goes in both directions, ascending and descending. PHP:DataGrid will automatically take care of that for you.
See demo 4 in the demos folder for an example of column sorting.
PHP:DataGrid has a few inbuilt commands that can be used with links and buttons. At the moment there is only one called 'redirect', which will redirect the user to a URL. Below is an example of this command.
<Link name="do_redirect" action="redirect" value="http://www.google.com" text="Go to Google" />
ob_end_* then PHP:DataGrid will most likely not work. For any questions, problems, comments or anything else, please visit our Community Support Forums or send us an e-mail at support@pallettgroup.com