dojo Enhanced Grid - Simple example

A simple dojo enhanced grid with filter ang paging option enabled. In this example grid store data is hard coded, same can be retrieve from dojo xhr calls in similar format.

Prerequisite: Extract dojo lib files and keep them under js/1_8_3 folder in your web app.

HTML file:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Enhanced Grid Example</title>
<link rel="stylesheet" href="../js/1_8_3/dijit/themes/claro/claro.css">
<style type="text/css">
@import "../js/1_8_3/dojo/resources/dojo.css";
@import "../js/1_8_3/dijit/themes/claro/claro.css";
@import "../js/1_8_3/dijit/themes/claro/document.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "../js/1_8_3/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
    <script src='../js/1_8_3/dojo/dojo.js'></script>
    <script src='../js/grid.js'></script>
</head>
<body class="claro">
<div style="width:450px;height:200px;margin-left:200px;">
Simple Enhanced Grid Example<br>
<div id="gridDiv">
</div>
</div>
</body>
</html>

JS file: grid.js

var gridLayout = [[
                       {
                           'name': 'S.No',
                           'field': 'id',
                           'width': '10%'
                       },
                       {
                           'name': 'First Name',
                           'field': 'fName',
                           'width': '45%'
                          
                       },
                    {
                        'name': 'Last Name',
                        'field': 'lName',
                        'width': '45%'
                    }
                       
                    ]];

require(["dojo/ready", "dojox/grid/EnhancedGrid",
         "dojo/data/ItemFileWriteStore","dojox/grid/enhanced/plugins/Filter","dojox/grid/enhanced/plugins/Pagination"        
     ],
    
         function(ready,EnhancedGrid,ItemFileWriteStore,filter,pagination ){
             ready(function(){ 
             var grid1 = new dojox.grid.EnhancedGrid({
                      id: 'grid1',
                      columnReordering: true,
                      store:null,
                      noDataMessage: '<span class="dojoxGridNoData"> No Feature Data available </span>',
                      structure: gridLayout,
                      escapeHTMLInData: false,
                      rowSelector: '20px',                                   
                      plugins: {
                          filter: {
                              // Show the closeFilterbarButton at the filter bar
                              //closeFilterbarButton: true,
                              // Set the maximum rule count to 5
                              ruleCount: 5,
                              // Set the name of the items
                              itemsName: "items"
                              },
                       pagination: {
                       defaultPageSize: 15,
                       pageSizes: ["15", "30", "50", "All"],
                       description: true,
                       sizeSwitch: true,
                       pageStepper: true,
                       gotoButton: true,
                       maxPageStep: 4,
                       position: "bottom"
                       }
                       }
                      },dojo.byId("gridDiv"));
                 grid1.startup();
                 var tempArr = [{"id":1,"fName":"First Name","lName":"Last Name"}];
                 var taskData = {
                        identifier: 'id',
                        items: tempArr
                    };
                    var store = new dojo.data.ItemFileWriteStore({ data: taskData });
                    grid1.setStore(store);
               
                        });
                });
                 
Image: