Initializing Grid from HTML

dhtmlxGrid can be initialized from an HTML markup. This allows you to convert an existing HTML table (with the data in it) into a DHTMLX's grid.

To convert an HTML table into a DHTMLX grid:

Include the "dhtmlx.js" and "dhtmlx.css" files on the page:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Initializing a grid from HTML</title>
    <link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
    <script src="../codebase/dhtmlx.js"></script>
</head>
<body>
    <script>    // here you will place your JavaScript code
    </script>
</body>
</html>

Specify an HTML table:

<table id="books_table">     <tr> 
        <td>Book title</td>      
        <td>Author</td>       
        <td>Price</td> 
    </tr>
    <tr> 
        <td>A Time to Kill</td>  
        <td>John Grisham</td> 
        <td>12.99</td> 
    </tr>
    <tr> 
        <td>Blood and Smoke</td> 
        <td>Stephen King</td> 
        <td>10</td>  
    </tr>
</table>

Convert the HTML table into a DHTMLX grid with the dhtmlXGridFromTable() method:

var grid = dhtmlXGridFromTable("books_table");

As a parameter, the method takes the id of an HTML table.

Initialization through the "dhtmlxGrid" CSS class

The alternative way to convert an HTML table into a DHTMLX grid is to use a special CSS class with the name "dhtmlxGrid".

Note,

The initialization by a CSS class will work only for those tables that are on the page at the moment of loading.
If the page was created dynamically or loaded by some kind of AJAX, only the direct initialization method can be used.

<table id="books_table" class="dhtmlxGrid">     <tr>
        <td>Header A</td><td>Header B</td>
    </tr>
    <tr>
        <td>Data A</td><td>Data B</td>
    </tr>
    ...
</table>

Configuring the grid while loading from HTML

You can apply some attributes to define properties of the grid's columns (all of them are optional).

Note, the 1st row of the table is always used for specifying the grid's headers. There is no way to define additional lines of the header/footer in such a case (but they can be added later by JavaScript).

<table class="dhtmlxGrid">
    <tr>
        <td width="150" align="left">Book</td>
        <td type="co" sort="str">Author</td>
        <td type="edn" format="0,000.00">Price</td>
        <td>Sales</td>
    </tr>
    ...
</table>

The following configuration attributes can be specified:

width - the column's width in pixels (by default, the column's width in the source table is set)
align - the horizontal alignment in the column
sort - the type of sorting in the column
type - the type of the column's cells (i.e. the column's type)
format - the data format (can be used against edn/ron/dhxCalendar/dhxCalendarA column types - mimics setNumberFormat/setDateFormat functionality).

Global grid settings

Some grid modes can be enabled directly from the HTML table's attributes:

<table class="dhtmlxGrid" dragAndDrop="true">..</table> //enables drag-and-drop in grid 
<table class="dhtmlxGrid" imgpath="codebase/imgs">..</table>  //sets the path to images
<table class="dhtmlxGrid" multiline="true">..</table> //enables multi-line mode in grid
<table class="dhtmlxGrid" lightnavigation="true">..</table>//light mouse navigation mode
<table class="dhtmlxGrid" split="2">..</table>             //enables the split mode
<table class="dhtmlxGrid" unevenrow="someA" evenrow="someB">..</table>
//enables the alter CSS mode (equal to enableAlterCss() method)

Setting the grid's size

By default, the grid will take the same size as the HTML table that it was created from. But you can specify the grid's size with HTML table's attributes:

<table class="dhtmlxGrid" gridWidth="600" gridHeight="400">...</table>

The 'auto' value for the grid width/height can't be set with HTML attributes and you need to use usual grid's methods (enableAutoHeight and enableAutoWidth):

var mygrid=dhtmlXGridFromTable("some_table");
mygrid.enableAutoWidth(true);
mygrid.enableAutoHeight(true);
mygrid.setSizes();

Referring to the grid's object and initialization events

In case of using table-based initialization, the grid's object is returned by the dhtmlXGridFromTable method:

var grid = dhtmlXGridFromTable("books_table");

In case of initializing by a CSS class,you can specify the global name of the grid's object through the HTML's table attribute "name".

<table class="dhtmlxGrid" name="grid">...</table>

The object becomes available only after initialization (which occurs with onLoad event).

There are 2 initialization events you can use:

onbeforeinit - fires before the grid's structure and data are initialized from HTML, so you can place any global setting there.
oninit - fires when grid is being rendered on the page. It's the best place for some after-init calls - row selection, some data operation, etc.

<table name="grid" class="dhtmlxGrid" onbeforeinit="myfunc1()" oninit="myfunc2()">
    ...
<script>    function myfunc1(){
        grid.enableMultiselect(true);
    }
    function myfunc2(){
        grid.selectRow(0);
    }
</script>