DHTMLX Docs & Samples Explorer

### Initialize object on page, through object based API - complex header

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/ext/dhtmlxgrid_srnd.js"></script>
    <script  src="../../codebase/ext/dhtmlxgrid_filter.js"></script>
    <script  src="../../codebase/dhtmlxgridcell.js"></script>

        <div id="gridbox" style="width:650px;height:270px;background-color:white;overflow:hidden"></div>
    <script>mygrid = new dhtmlXGridObject({
        parent: 'gridbox',
        image_path: "../../codebase/imgs/",
        smart_rendering: true,
        auto_width: true,
        skin: "dhx_skyblue",
        columns: [{
            label: {
                text: "Sales",
                rowspan: 2
            },
            width: 50,
            type: "ed"
        }, {
            label: ["Book title", "#text_filter"],
            width: 150,
            type: "ed"
        }, {
            label: ["Author", "#select_filter"],
            width: 150,
            type: "ed"
        }, {
            label: ["Price", {
                colspan: 5
            }],
            width: 50,
            type: "ed"
        }, {
            label: "In store",
            width: 80,
            type: "ch"
        }, {
            label: "Shipping",
            width: 50,
            type: "ed"
        }, {
            label: "Bestseller",
            width: 50,
            type: "ed"
        }, {
            label: "Date",
            width: 50,
            type: "ed"
        }],
        xml: "../common/500.xml";
    });</script>