In this blog entry, we look at setting up the ShieldUI Grid component.
In order to take advantage of the functionalities offered by this grid component, you will need to:
1. Include references to all required scripts.
1. Include references to all required scripts.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html><html><head><title>Shield Grid</title><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="css/shieldui-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> |
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:
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:
1
2
3
4
5
6
7
8
| $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products } }); }); |
The grid supports build in sorting, paging, selection, etc. which can be configured via corresponding properties:
1
2
3
4
5
6
7
8
9
| $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products }, paging: true }); }); |
1
2
3
4
5
6
7
8
9
| $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products }, sorting: true }); }); |
1
2
3
4
5
6
7
8
| $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products }, selection: true }); }); |
Accessing the grid
The code snippet below demonstrates how to get a reference to the client-side grid object:
1
2
3
4
5
6
7
8
9
10
11
12
| $(document).ready(function(){ $("#grid1").shieldGrid({ dataSource: { data: products } }); });function getGrid() { var grid = $("#grid").swidget(); return grid;} |
The following example demonstrates the control in action.
Няма коментари:
Публикуване на коментар