DHTMLX Docs & Samples Explorer

### Setting cells and column properties

Using eXcell technology (extended cells) you can define the formating for each column of the javascript grid and the editor to edit it.
For more details and the list of available cell types see "Column Types" and "Using eXcell" chapters of Documentation Guide.
During grid initialization you also can define:

- column alignment - `setColAlign`
- header labels - `setHeader`
- sorting type - `setColSorting`
- column initial width - `setInitWidths`

Source

    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
    <script  src="../../codebase/dhtmlxcommon.js"></script>
    <script  src="../../codebase/dhtmlxgrid.js"></script>
    <script  src="../../codebase/dhtmlxgridcell.js"></script>

        <div id="gridbox" style="width:600px;height:270px;background-color:white;"></div>
    <br />
    <script>mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price,In Store,Shipping,Bestseller,Date of Publication");
    mygrid.setInitWidths("50,150,120,80,80,80,80,200");
    mygrid.setColAlign("right,left,left,right,center,left,center,center");
    mygrid.setColTypes("dyn,ed,txt,price,ch,coro,ra,ro");
    mygrid.setColSorting("int,str,str,int,str,str,str,date");
    mygrid.getCombo(5).put(2, 2);
    mygrid.setSkin("dhx_skyblue");
    mygrid.init();
    mygrid.loadXML("../common/grid.xml");</script>