HTML 5 <datagrid> Tag
The HTML <datagrid> tag is used for specifying a datagrid.
A datagrid represents an interactive representation of tree, list, or tabular data. The data being presented can come from one of the following:
- Its own content (as elements given as children of the datagrid element). The
<datagrid>element can contain other HTML elements. These elements are its children. The contents of its children is the data that is being presented. - From a scripted data provider given by the
dataDOM attribute.
The <datagrid> tag was introduced in HTML 5.
Data Model Structure
In a datagrid, data is structured as a set of rows representing a tree, each row being split into a number of columns.
Each row can have child rows. Child rows may be hidden or shown, by closing or opening (respectively) the parent row.
Each column can have a caption (which are not considered rows in their own right).
Rows are referred to by zero-based indices - meaning item positions are counted as 0,1,2,3... etc, (NOT as 1,2,3,4... etc).
Example
In this example, the datagrid's content is an ordered list. Because <datagrid> uses zero-based indices, the first row is row 0 and the next row is row 1. Row 1 has a child, which is referred to as row 1,0.
Note: At the time of writing, the <datagrid> element has limited (if any) browser support. This example is based on the W3C HTML 5 Working Draft, and is solely to demonstrate the context of this tag.
Attributes
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The attributes that you can add to this tag are listed below.
Element-Specific Attributes
The following table shows the attributes that are specific to this tag/element.
| Attribute | Description |
|---|---|
| disabled | Specifies if the datagrid is disabled or not.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
| multiple | Indicates whether the user can select multiple rows at once.
This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either Possible values:
|
Global Attributes
The following attributes are standard across all HTML 5 tags.
| accesskey | draggable | style |
| class | hidden | tabindex |
| contenteditable | id | title |
| contextmenu | lang | |
| dir | spellcheck |
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handler Content Attributes
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
Here are the standard HTML 5 event handler content attributes.
| onabort | onerror* | onmousewheel |
| onblur* | onfocus* | onpause |
| oncanplay | onformchange | onplay |
| oncanplaythrough | onforminput | onplaying |
| onchange | oninput | onprogress |
| onclick | oninvalid | onratechange |
| oncontextmenu | onkeydown | onreadystatechange |
| ondblclick | onkeypress | onscroll |
| ondrag | onkeyup | onseeked |
| ondragend | onload* | onseeking |
| ondragenter | onloadeddata | onselect |
| ondragleave | onloadedmetadata | onshow |
| ondragover | onloadstart | onstalled |
| ondragstart | onmousedown | onsubmit |
| ondrop | onmousemove | onsuspend |
| ondurationchange | onmouseout | ontimeupdate |
| onemptied | onmouseover | onvolumechange |
| onended | onmouseup | onwaiting |
For a full explanation of these attributes, see HTML 5 event handler content attributes.
