The application code

Now, we are going to create the user grid for the application. First, we will make the method that creates the grid and events. Then, we will add logic to the callbacks object and test the storage object code.

Create the grid

Open the app.js file and add the following code at the end:

// Grid
var appGrid;
dhtmlxEvent(window, "load", function(){
   // create grid
   appGrid = appLayout.cells("a").attachGrid();	
   appGrid.setHeader(["ID","First Name","MI",
     "Last Name","DOB","Email","Active"]);
   appGrid.setColTypes("ro,ro,ro,ro,ro,ro,ro");
   appGrid.setInitWidths("35,*,35,*,75,*,55");
   appGrid.setColAlign("center,left,center,left,center,left,center");
   appGrid.setImagePath(config.imagePath);
   appGrid.init();
        
   // attach grid events
   appGrid.attachEvent("onRowDblClicked", function(rowId){
      callbacks.editClick(rowId);	
   });
   appGrid.attachEvent("onRowSelect", function(){
      callbacks.setToolbarItemStates();	
   });
   // reset grid and...