HTML 5 <datagrid> Tag
This tag has now been removed from the HTML5 specification (which is still in draft status at time of writing). Rather than remove this article altogether, I have decided to keep it here for reference.
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).
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 (although the tabindex attribute does not apply to dialog elements).
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
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.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
For a full list of event handlers, see HTML 5 event handler content attributes.