Attaching dhtmlx grid with paging

Hi,

I’m attempting to add a DHTMLX Grid with paging to a Tabbar. I’ve been able to successfully attaching the grid without paging. However, I’ve looked over the documentation several times but have run into a script error that I haven’t been able to find a solution for when adding the paging element to the Tabbar.

Below is some of my code:

<link rel="STYLESHEET" type="text/css" href="../dhtmlx/dhtmlxTabbar/codebase/dhtmlxtabbar.css">
<script src="../dhtmlx/dhtmlxTabbar/codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="../dhtmlx/dhtmlxTabbar/codebase/dhtmlxtabbar.js" type="text/javascript"></script>
<script src="../dhtmlx/dhtmlxTabbar/codebase/dhtmlxtabbar_start.js" type="text/javascript"></script>
<script src="../dhtmlx/dhtmlxTabbar/codebase/dhtmlxcontainer.js" type="text/javascript"></script>
<!-- DHTMLX GRID -->
<link rel="STYLESHEET" type="text/css" href="../dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="../dhtmlx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_blue.css">
<link rel="STYLESHEET" type="text/css" href="../dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn_bricks.css">
<script src="../dhtmlx/dhtmlxGrid/codebase/dhtmlxcommon.js" type="text/javascript"></script>
<script src="../dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.js?ver=3.6" type="text/javascript"></script>
<script src="../dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn.js?ver=3.6" type="text/javascript"></script>
<script src="../dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_splt.js?ver=3.6"></script>
<script src="../dhtmlx/dhtmlxGrid/codebase/dhtmlxgridcell.js?ver=3.6" type="text/javascript"></script>

function loadDOITabbar()
{
tabbar = new dhtmlXTabBar(“doi_tabbar”, “top”);

	tabbar.setSkin("modern");
	tabbar.setImagePath("../dhtmlx/dhtmlxTabbar/codebase/imgs/");
	tabbar.setAlign("left");
	
	tabbar.addTab("ldo", "LDO", "200px");
	tabbar.setContent("ldo","pagingArea");
	
	tabbar.setTabActive('ldo');
	
	//attach ldo DHTMLX grid
	ldoGrid = tabbar.cells("ldo").attachGrid();
	ldoGrid.setImagePath("../dhtmlx/dhtmlxGrid/codebase/imgs/");
	ldoGrid.setHeader("Agreement ID,Tract.Depth,DOI ID");
	ldoGrid.setInitWidths("300,300,350");   
	ldoGrid.setColAlign("left,left,left")
        ldoGrid.setColTypes("ron,ron,ron");
	ldoGrid.setColSorting("str,str,str");
	ldoGrid.setSkin("modern");
	ldoGrid.enablePaging(true, 5, 10, "pagingArea", true, "infoArea");
	ldoGrid.init();
	ldoGrid.setPagingSkin("bricks");
	
	ldoGrid.loadXML("ldodois.xml");
}
<table width="100%" align="center" border="0"
 

My script errors are

  1. dhtmlXGridObject.prototype.i18n is undefined --> line 36 in dhtmlxgrid_pgn.js
  2. Object doesn’t support this property or method --> line 10 in dhtmlxgrid_pgn.js

It appears on the 1st error it is looking for “dhtmlXGridObject.prototype.i18n.paging={results:“Results”,…” However, it appeared in the doc that this was used to customize the “default” page skin and not the “bricks” page skin. Is that incorrect?

It appears that on the 2nd error the line in the js file is looking for a defined function of “._reset_view”. I didn’t see any functions in the docs that had this as part of the paging functionality of the grid.

Is the “.reset_view” a function that is needed?
Do I have my includes in the right order for this paging functionality to work?

Please let me know if you need any further information.

Please, refer to the following tutorial about attaching grid with paging to other (dhtmlx) components:
docs.dhtmlx.com/doku.php?id=dhtm … components