Grid paging within a form

Suite and Optimus Suite 5
#1

(Also posted in the Grid forum…)

I am trying to add paging to a grid which is already within a form container.

How do I define the additional paging container on the form? I cannot change the parent html and want to define the paging container through the form structure data

I tried the following which generates an error this.cont is null:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test paging</title>
<?php include "../util/head.html";?>
</head>
<body>
<script>
process();

function process()
{
   dhxLayout = new dhtmlXLayoutObject("parentId", "1C");
   dhxLayoutMain = dhxLayout.cells("a");
   dhxLayoutMain.hideHeader();

   dhxFormMain = dhxLayoutMain.attachForm();
   var formMain =
      '<items>' +
      '<item type="settings" labelWidth="120" labelAlign="left"/>' +
      '<item type="block" width="200" offsetTop="50" offsetLeft="20">' +
      '<item type="newcolumn"/>' +
      '<item type="label" name="search_label" label="search" labelWidth="200"/>' +
      '<item type="newcolumn"/>' +
      '<item type="input" name="search" label="" inputWidth="100" />' +
      '</item>' +
      '<item type="block" width="600" offsetTop="50" offsetLeft="20">' +
      '<item type="newcolumn"/>' +
      '<item type="radio" name="set" value="all" label="Show all" position="label-right" labelWidth="100" checked="true"/>' +
      '<item type="newcolumn"/>' +
      '<item type="radio" name="set" value="selected" label="Show selected" position="label-right" labelWidth="100" disabled="true" />' +
      '<item type="newcolumn"/>' +
      '<item type="input" name="count" label="count" value="0" labelWidth="50" inputWidth="31" readonly="true"/>' +
      '</item>' +
      '<item type="container" name="container" label="" inputWidth="550" inputHeight="560" offsetLeft="50" />'+
      '<item type="container" name="container2" label="" inputWidth="550" inputHeight="560" offsetLeft="50" />'+
      '<item type="newcolumn" />' + 
      '<item type="label" name="attribute_label" label="Select Attributes" offsetTop="50" offsetLeft="50" labelWidth="200" />' +
      '<item type="checkbox" name="check1" label="Check 1" position="label-right" labelWidth="350" offsetTop="50" offsetLeft="50" />' +
      '<item type="checkbox" name="check2" label="Check 2" position="label-right" labelWidth="350" offsetLeft="50" />' +
      '<item type="checkbox" name="check3" label="Check 3" position="label-right" labelWidth="350" offsetLeft="50" />' +
      '</items>';

   dhxFormMain.loadStructString(formMain);

   dhxContainerPlate = dhxFormMain.getContainer("container");
   dhxGrid = new dhtmlXGridObject(dhxContainerPlate);
   dhxGrid.setSkin("dhx_skyblue");
   setGridImagePath(dhxGrid); 
   dhxGrid.setHeader("Name,Company,Project,Date,key,Equipment");
   dhxGrid.setInitWidths("100,222,112,110,50,100");
   dhxGrid.setColAlign("left,left,left,center,left,left");
   dhxGrid.setColTypes("ro,ro,ro,ro,ro,coro");
   dhxGrid.setColSorting("str,str,str,str,int,str");
   dhxGrid.enableTooltips("false,false,false,false,false,false");
   dhxGrid.hasFilterHeader = false;
   dhxGrid.init();
   dhxGrid.enablePaging(true,20,5,"container2",true);
   dhxGrid.setPagingSkin("toolbar", "dhx_skyblue");

   var json = ajaxGetSync("../server/getData.php", {});
   dhxGrid.parse(json, "json");
}
</script>
</body>
</html>
#2

Hello
What dhtmlx version do you use?
Method loadStructString is quite old

#3

We are using dhtmlxSuite 2013 Rel.1 (DHTMLX 3.6) Professional edition build 130619

#4

Hi

Container’s name for form which is “container2” is inner name for form, not ID used in browser’s DOM. so you need to update your code:

dhxGrid.enablePaging(true,20,5,dhxFormMain.getContainer("container2"),true);

Also change height for paging container a bit:

'<item type="container" name="container2" label="" inputWidth="550" inputHeight="27" offsetLeft="50" />'+
#5

Thank you!!! It works great now