Hi dhtmlx Team,
Big Fan of your products, I am using a paid version which is given by the client.
Currently My Requirement is to attach grids to tabs and based on the tab id i should populate the Grid. with the respective data.
My Current approach is given below, which i made in dhmtmlx snippets due to compliance issue.
Kindly tell me is there a better way of doing this :
var layout = new dhtmlXLayoutObject(document.body, “2U”);
var GridTabs = layout.cells(“b”).attachTabbar();
var right = layout.cells(“b”).attachLayout(“2E”);
var filterForm =right.cells(“a”).setText(“Filters”);
var gridTabbar = right.cells(“b”).attachTabbar(GridTabs);
right.cells(“a”).setHeight(125);
gridTabbar.addTab(“a1”, “Measure 68”, null, null, true);
gridTabbar.addTab(“a2”, “Measure 128”);
gridTabbar.addTab(“a3”, “Measure 158”);
gridTabbar.addTab(“a4”, “Measure 228”);
gridTabbar.addTab(“a5”, “Measure 318”);
gridTabbar.addTab(“a6”, “Tab 10”);
gridTabbar.addTab(“a7”, “Tab 15”);
var attachedPopulationLayout;
var attachedPopulationLayoutArray=[];
var attachedExclusionLayoutArray=[];
var attachedPopulationLayout;
var populationGridArray=[];
var ids = gridTabbar.getAllTabs();
//attach Layouts to tabs
for (var q=0; q<ids.length; q++)
{
attachedPopulationLayout =gridTabbar.tabs(ids[q]).attachLayout(“2E”);
attachedPopulationLayoutArray.push(attachedPopulationLayout.cells(“a”));
attachedExclusionLayoutArray.push(attachedPopulationLayout.cells(“b”))
}
// Create a Grid Array
for (var i=0; i<ids.length; i++)
{
PopulationGridInstance = attachedPopulationLayoutArray[i].attachGrid();
populationGridArray.push(PopulationGridInstance);
}
//Set Text For Layouts.
for (var q=0; q<ids.length; q++)
{
attachedPopulationLayoutArray[q].setText(“Population Grid”);
attachedExclusionLayoutArray[q].setText(“Exclusion Grid”);
}
var attachedExclusionLayout = attachedExclusionLayoutArray[0];
var myGrid = populationGridArray[2];
myGrid.setSkin(“material”);
myGrid.setImagePath(“//dhtmlx.com/cdn/edge/imgs/”);
myGrid.setHeader(“Case No,Last Name First Name,Gender,Birthdate,Measures”);
myGrid.setInitWidths(“80,150,120,100,55”);
myGrid.setColAlign(“right,left,left,left,center”);
myGrid.setColTypes(“dyn,ed,ed,price,ch”);
myGrid.setColumnIds(“sales,title,author,price,instore”);
myGrid.enableAutoHeight(true);
myGrid.init();
myGrid.parse([{
id:1001,
sales:“100”,
title:“John “,
author:“John”,
price:“12.99”,
instore:“1”
},
{
id:1002,
sales:“1000”,
title:“Stephen King”,
author:“Stephen King”,
price:“0”,
instore:“1”
},
{
id:1003,
sales:”-200”,
title:“Stephen King”,
author:“John Grisham”,
price:“7.99”,
instore:“0”
}], “js”);
var myEGrid = attachedExclusionLayout.attachGrid();
myEGrid.setSkin(“material”);
myEGrid.setImagePath(“//dhtmlx.com/cdn/edge/imgs/”);
myEGrid.setHeader(“Case No,Last Name First Name,Gender,Birthdate,Measures”);
myEGrid.setInitWidths(“80,150,120,100,55”);
myEGrid.setColAlign(“right,left,left,left,center”);
myEGrid.setColTypes(“dyn,ed,ed,price,ch”);
myEGrid.setColumnIds(“sales,title,author,price,instore”);
myEGrid.enableAutoHeight(true);
myEGrid.init();
myEGrid.parse([{
id:1001,
sales:“100”,
title:“John “,
author:“John”,
price:“12.99”,
instore:“1”
},
{
id:1002,
sales:“1000”,
title:“Stephen King”,
author:“Stephen King”,
price:“0”,
instore:“1”
},
{
id:1003,
sales:”-200”,
title:“Stephen King”,
author:“John Grisham”,
price:“7.99”,
instore:“0”
}], “js”);