jQuery Grid Getting Started

In order to take advantage of the functionalities offered by our grid component, you will need to:
1. Include references to all required scripts and css files.

<!DOCTYPE html>
<html>
<head>
<title>Shield Grid</title>
<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>

</head>
<body>

...

</body>
</html>

Please note that the grid requires two css files, one with all base styles and one with the theme styles.

2. Add the control declaration along with the desired properties.
The grid widget display tabular data and offers rich interactivity based on built in functionalities like paging, sorting, selection, etc. You can create the grid widget from a div element with the following code:

$(document).ready(function(){
    $("#grid1").shieldGrid({
        dataSource: {
            data: products
        }
    });  
});
          

The grid supports built in sorting, paging, selection, etc. which can be configured via corresponding properties:

$(document).ready(function(){
    $("#grid1").shieldGrid({
        dataSource: {
            data: products
        },
        paging: true
    });  
});
          
$(document).ready(function(){
    $("#grid1").shieldGrid({
        dataSource: {
            data: products
        },
        sorting: true
    });  
});
   
$(document).ready(function(){
    $("#grid1").shieldGrid({
        dataSource: {
            data: products
        },
        selection: true
    });  
});

Accessing the grid

You can find the grid by its container id:


$(document).ready(function(){
    $("#grid1").shieldGrid({
        dataSource: {
            data: products
        }
    });  
});

function getGrid() {
    var grid =  $("#grid").swidget();
    return grid;
}