Usage example
index.html
<!DOCTYPE HTML> <html> <head> <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxgrid.css"> <link rel="stylesheet" type="text/css" href="../codebase/dhtmlxgrid_dhx_skyblue.css"> <link rel="stylesheet" type="text/css" href="../codebase/dhtmlxlayout.css"> <link rel="stylesheet" type="text/css" href="../codebase/dhtmlxlayout_dhx_skyblue.css"> <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxcombo.css"> <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxform_dhx_skyblue.css"> <script src="../codebase/dhtmlxlayout.js"></script> <script src="../codebase/dhtmlxcontainer.js"></script> <script src="../codebase/dhtmlxcommon.js"></script> <script src="../codebase/dhtmlxgrid.js"></script> <script src="../codebase/dhtmlxgrid_filter.js"></script> <script src="../codebase/dhtmlxgridcell.js"></script> <script src="../codebase/dhtmlxcombo.js"></script> <script src="../codebase/dhtmlxform.js"></script> <script type="text/javascript" src="./codebase/datastore.js"></script> <script> window.dhx_globalImgPath="../codebase/imgs/"; </script> </head> <body> <div id="box" style="width:550px; height:350px; background-color:white;"></div> <div id="box2" style="width:600px; height:50px; background-color:white;"></div> <script> var employees = new dhtmlXDataStore({ url:"data/employees.json", datatype:"json" }); var departments = new dhtmlXDataStore(); departments.data.scheme({ $init:function(obj){ obj.value = obj.name; obj.text = obj.name; } }); departments.parse([ {name:"Accounts Department"}, {name:"Customer Service"}, {name:"Developing Department"}, {name:"Human Resources"}, {name:"Legal Department"}, {name:"Marketing Department"}, {name:"Production Department"}, {name:"Quality Department"}, {name:"Research and Development"}, {name:"Testing Department"} ]); var layout = new dhtmlXLayoutObject("box","3J"); layout.cells("a").setText("Departments"); layout.cells("c").setText("Employees"); layout.cells("b").setText("General Information"); layout.cells("a").setWidth(300); layout.cells("a").setHeight(50); layout.cells("a").attachObject("box2"); var myCombo = new dhtmlXCombo("box2","combo1",295); myCombo.sync(departments); myCombo.setComboText("Filter by department"); myGrid = layout.cells("c").attachGrid(); myGrid.setImagePath("../../codebase/imgs/"); myGrid.setSkin("dhx_skyblue"); myGrid.setHeader("Name,#cspan,Department"); myGrid.setInitWidths("65,80"); myGrid.setColumnIds("FirstName,LastName,Department,Gender,Email"); myGrid.init(); myGrid.sync(employees); myGrid.bind(myCombo, function(data, filter){ return myGrid.cells(data, 2).getValue() == filter.text; }); var formData = [ {type: "settings", position: "label-top"}, {type: "label", label: "Gender"}, {type: "block", name:"Gender", list:[ {type: "radio", name:"Gender", value:"Male", label: "Male", position:"label-right"}, {type: "newcolumn"}, {type: "radio", name:"Gender", value:"Female", label: "Female", offsetLeft:15, position:"label-right"}, ]}, {type: "block", list:[ {type: "label", offsetTop:10, label: "First Name"}, {type: "input", name:"FirstName", inputWidth:120}, {type: "label", offsetTop:10, label: "Last Name"}, {type: "input", name:"LastName", inputWidth:120} ]}, {type: "block", list:[ {type: "label", offsetTop:10, label: "Department"}, {type: "input", name:"Department", inputWidth: 160} ]}, {type: "block", list:[ {type: "label", offsetTop:10, label: "E-mail Address"}, {type: "input", inputWidth:160, name:"Email",} ]} ]; myForm = layout.cells("b").attachForm(formData); myForm.bind(myGrid); </script> </body> </html>
employees.json
[{ "id":"1", "FirstName":"Sprenger", "LastName":"Dondon", "Department":"Accounts Department", "Gender":"Male", "Email":"Dondon_Sprenger@qzqjfpuxkal.org" },{ "id":"2", "FirstName":"Barby", "LastName":"Addinall", "Department":"Human Resources", "Gender":"Female", "Email":"Addinall@ywvl.net" },{ "id":"3", "FirstName":"Ehle", "LastName":"Le-good", "Department":"Accounts Department", "Gender":"Female", "Email":"Ehle_Le-good@yam.net" } ... ]