<div style="width:100%;">
    <div style="margin:10px 30px; text-align:left;">
        <a class="button" href="javascript: void(0);" onclick="addCategory();"> Add Category </a>

    </div>

    <div id="catgridbox" style="margin:15px auto; background-color:white; overflow:hidden; white-space:normal; width:40%; align:left;">
    <div id="allowancegridbox" style="margin:15px auto; background-color:white; overflow:hidden; white-space:normal; width:40%; align:right;">
    </div>
</div>

<script>
//Departments grid

categoriesGrid = new dhtmlXGridObject({
    parent: 'catgridbox',
    image_path: "/libraries/dhtmlx/grid/codebase/imgs/",
    skin: "dhx_skyblue",
    editable: true,
    columns: [ {
        label: "Category Name",
        width: 250,
        type: "ro",
        sort: "str",
        align: "left"
    }]
});

allowancesGrid = new dhtmlXGridObject({
    parent: 'allowancegridbox',
    image_path: "/libraries/dhtmlx/grid/codebase/imgs/",
    skin: "dhx_skyblue",
    editable: true,
    columns: [ {
        label: "Category Name",
        width: 250,
        type: "ro",
        sort: "str",
        align: "left"
    }]
});

categoriesGrid.enableMultiline(true);
categoriesGrid.attachHeader("#text_filter");
categoriesGrid.enableAutoHeight(true,'500');

categoriesGrid.attachEvent('onXLE', function() {
    $('#bt_show').val('Show');
});

categoriesGrid.setEditable(true);
categoriesGrid.attachEvent("onEditCell", function(stage,rId,cInd,nValue,oValue){ updateDepartment(stage,rId, cInd, nValue, oValue); return true;});

// allowancesGrid.enableMultiline(true);
// allowancesGrid.attachHeader("#text_filter");
// allowancesGrid.enableAutoHeight(true,'500');

// allowancesGrid.attachEvent('onXLE', function() {
    // $('#bt_show').val('Show');
// });

// allowancesGrid.setEditable(true);
// allowancesGrid.attachEvent("onEditCell", function(stage,rId,cInd,nValue,oValue){ updateDepartment(stage,rId, cInd, nValue, oValue); return true;});

loadCategories();
$('.button').button();
</script>