This article is an attempt to learn Infragistics Ignite UI [which itself built on jQuery], How powerful features it has and how easily it can be used to achieve many of our UI requirements. Best part of Ignite UI Grid is that it has built in support for Filtering, Column Hiding, Sorting, Column Rearrange, etc with just few lines of code. Including pagination!
Infragistics Ignite UI (formerly Net Advantage for jQuery) includes high-performance ASP.NET MVC and jQuery controls based on CSS3 and HTML5 for Web Developers who need to deliver the best cross-platform user experiences.
The below sample code is to demonstrate few of features and properties:
Infragistics Ignite UI (formerly Net Advantage for jQuery) includes high-performance ASP.NET MVC and jQuery controls based on CSS3 and HTML5 for Web Developers who need to deliver the best cross-platform user experiences.
The below sample code is to demonstrate few of features and properties:
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title>Ignite Grid Sample</title>
5: <!-- Ignite UI Required Combined CSS Files -->
6: <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
7: <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet" />
8: <script src="http://modernizr.com/igsb-highlights/modernizr-latest.js"></script>
9: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
10: <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
11:
12: <!-- Ignite UI Required Combined JavaScript Files -->
13: <script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.core.js"></script>
14: <script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js"></script>
15: </head>
16:
17: <body>
18: <div class="content-wrapper">
19: <!-- the igGrid target element-->
20: <table id="grdIgnite" style="width: auto;"></table>
21: </div>
22: <script type="text/javascript">
23: $(function () {
24: var data = [
25: { "Charactor": "Rajesh koothrappali", "Portrayed by": "Kunal Nayyar", "TV series": "Big Bang Theory" },
26: { "Charactor": "Leonard Hofstadter", "Portrayed by": "Johnny Galecki", "TV series": "Big Bang Theory" },
27: { "Charactor": "Sheldon Cooper", "Portrayed by": "Jim Parsons", "TV series": "Big Bang Theory" },
28: { "Charactor": "Neal Caffrey", "Portrayed by": "Matt Bomer", "TV series": "White Collar" },
29: { "Charactor": "Peater Burke", "Portrayed by": "Tim DeKay", "TV series": "White Collar"},
30: { "Charactor": "Seeley Booth", "Portrayed by": "David Boreanaz", "TV series": "Bones"},
31: { "Charactor": "Brennan Bones", "Portrayed by": "Emily Deschanel", "TV series": "Bones"},
32: { "Charactor": "Ted Mosby", "Portrayed by": "Josh Radnor", "TV series": "How I Met Your Mother" },
33: { "Charactor": "Barney Stinson", "Portrayed by": "Neil Patrick Harris ", "TV series":"How I Met Your Mother" },
34: { "Charactor": "Jake Peralta", "Portrayed by": "Andy Samberg", "TV series": "Brooklyn Nine-Nine" },
35: { "Charactor": "Jessica ", "Portrayed by": "Zooey Deschanel ", "TV series": "New Girl"},
36: { "Charactor": "Nicholas Miller", "Portrayed by": "Jake Johnson", "TV series": "New Girl" },
37: { "Charactor": "Leslie Knope", "Portrayed by": "Amy Poehler", "TV series": "Parks and Recreation" },
38: { "Charactor": "Tom Haverford", "Portrayed by": "Aziz Ansari", "TV series": "Parks and Recreation" },
39: { "Charactor": "Andy Dwyer", "Portrayed by": "Chris Pratt", "TV series": "Parks and Recreation" },
40: { "Charactor": "Ron Swanson", "Portrayed by": "Nick Offerman", "TV series": "Parks and Recreation" }
41: ];
42: $("#grdIgnite").igGrid({
43: caption: 'TV Shows',
44: height: "550px",
45: width: "900px",
46: dataSource: data, //JSON Array
47: features: [
48: {
49: name: 'Filtering'
50: },
51: {
52: name: 'GroupBy'
53: },
54: {
55: name: 'Hiding'
56: },
57: {
58: name: 'Paging',
59: type: 'local',
60: pageSize: 6
61: },
62: {
63: name: "ColumnMoving",
64: mode: "immediate",
65: addMovingDropdown: true,
66: mode: "deferred",
67: type: "render"
68: }
69: ]
70:
71: });
72: });
73: </script>
74: </body>
75: </html>
