Start Building Professional
Web Apps Today

Trying to get modern look for toolbar with grid

I have finally made the toolbar load and control the grid in paging mode, but I want to implement the modern skin for it.

I cannot seem to get any of the skins to load for toolbar.

How do I do this?

Pertinent code:

<link rel="stylesheet" type="text/css" href="../../Vendors/dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../Vendors/dhtmlx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_standard.css">
<link rel="stylesheet" type="text/css" href="../../Vendors/dhtmlx/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_modernblue.css">
<script type="text/javascript" src="../../Vendors/dhtmlx/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
<script type="text/javascript" src="../../Vendors/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_json.js"></script>
<script type="text/javascript" src="../../Vendors/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
<script type="text/javascript" src="../../Vendors/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>

function buildTableX() {
    var srcURL = "../../agents/c2/agent_c2picklist_json.php?";
    var pageSize = 5;
    mygrid = new dhtmlXGridObject('div_gridbox');
    mygrid.imgURL = js_dhtmlxGridImgs;
    mygrid.setHeader("Site, ID, Switch, Unid");
    mygrid.setInitWidths("200,80,200,200");
    mygrid.setColAlign("left,center,center,left");
    mygrid.setColTypes("ro,ro,ro,ro");
    mygrid.setColSorting("str,str,str,str");
    mygrid.setSkin("modern");
    mygrid.enablePaging(true,pageSize,3,"div_pagingArea");
    mygrid.setPagingSkin("toolbar");
    mygrid.init();
    mygrid.load(srcURL, "json");
}

Can be done only by code modification

dhtmlxgrid_pgn.js , line 378
this.aToolBar = new dhtmlXToolbarObject(this._pgn_parentObj,"dhx_blue");
can be chaged to any different skin