Getting Started with NetAdvantage Ignite UI jQuery Controls
Written by Ian Elliot   
Wednesday, 03 July 2013
Article Index
Getting Started with NetAdvantage Ignite UI jQuery Controls
Option parameters
A clientside data grid
Page 3 of 3

A clientside data grid

As a final example and to give you some idea of what sorts of things are waiting to be discovered in the Ignite UI library let's create something a bit more advanced - a clientside data grid.

Add a new HTML file to the project can call it DataGrid. Next add the script tags as usual and a pair of table tags that we are going to use as the basis for the grid control:

<table id="grid1"></table>

Next we need some data to display in the table and, for the sake of an example, let's just create it using another script:

var somedata=[];
somedata[0] = {"Name":"mike","Age":25}; somedata[1] = {"Name":"lucy","Age":20}; somedata[2] = {"Name":"sue","Age":23};

In general you could have as many fields and rows as you need. In a real example the data would probably be derived as a JSON format file but the principle is exactly the same.

Finally we augment the table in the usual way

$("#grid1").igGrid({

the option parameters are simple enough:

 columns: [
  {headerText: "Name of Employee",
   key:"Name",
   dataType: "string" },
  {headerText: "Age in years",
   key: "Age",
   dataType: "number" }
  ],
 width: '500px',
 dataSource: somedata
});

Notice that we define the data and how it is to be treated and then bind the grid to the JSON dataSource.

If you now launch the page you will see the data table as promised, but not very well formatted:

grid1

Your next step is to improve the format using a suitable style sheet. If you add:

<link href="/css/themes/infragistics/
                       infragistics.theme.css"
             rel="stylesheet" type="text/css" />
<link href="/css/structure/infragistics.css" 
     rel="stylesheet" type="text/css" />

To the start of the page you will see a reasonable layout. Notice that you can use the ThemeRoller to create style sheets interactively and then load them into your page to customize the way things look. All you have to do is select the styles you want to apply and a style sheet is generated. 

 

grid2

The complete web page is:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type"
             content="text/html; charset=UTF-8">
<link href="/css/themes/infragistics/
                    infragistics.theme.css"
             rel="stylesheet" type="text/css" />
<link href="/css/structure/infragistics.css"
     rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/
                libs/jquery/1.7.1/jquery.min.js"
                type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/
    libs/jqueryui/1.8.21/jquery-ui.min.js"
                type="text/javascript"></script>
<script src="/js/infragistics.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
 var somedata = [];
 somedata[0] = {"Name": "mike", "Age": 25};
 somedata[1] = {"Name": "lucy", "Age": 20};
 somedata[2] = {"Name": "sue", "Age": 23};
 $("#grid1").igGrid({
   columns: [
             {headerText: "Name of Employee",
              key: "Name",
              dataType: "string"},
             {headerText: "Age in years",
              key: "Age",
              dataType: "number"}
            ],
   width: '500px',
   dataSource: somedata
  });
});
</script></head>
<body>
 <table id="grid1"></table>
</body>
</html>

There is so much more to explore.

For example, notice how the data grid is fully interactive and allows the user to edit the data and how it can present multiple pages. Using jQuery's Ajax method it is fairly easy to send and receive JSON-formatted data.

Now you know how the basics work you can explore the other controls, The basic controls include:

  • Grid with Selection, Sorting, Filtering, and Paging

  • Hierarchical GridCharts

  • Text Editor

  • Mask Editor

  • Date Editor

  • Numeric Editor

  • Percent Editor

  • Currency Editor

  • Date Picker

  • File Upload

  • Combo box

  • Dialog

  • Video Player

  • Rating

  • Maps

  • Tree menu

All the controls are touch enabled and a layout manager can be used to provide responsive layouts that should work well on any size of device. 

In addition there are also some frameworks that enable you to organize larger parts of you application. The Word, Excel and Documents engines only wok in ASP.NET but give you the ability to give the user complete document processing facilities. The templating engine lets you build grids and tree menus. There is a data source which can handle data from  oData, WCF, RESTful Domain Data Sources, JSON, XML, local arrays and static HTML tables.

Of course, in addition to all of this, there is a complete set of controls that work with jQuery Mobile. jQuery Mobile has some basic controls but Ignite UI extends these to the sort of sophisticated controls that make creating apps easier -  ListView, Pivot Grid, NavBar and so on. 

Infragistics is well known for "polishing" the UI provided by .NET and ASP.NET now it has provided the polish to the HTML/JavaScript UI that can be used no matter how you serve the pages. 

 

Download a trial from the Product Downloads page of the Infragistics website.

 

Related Articles

Getting Started With jQuery UI

jQuery UI Custom Control - Widget Factory

Getting Started With jQuery - The DOM

Getting Started With jQuery - CSS Selectors     

Getting Started With JQuery - Manipulating The DOM

 

{loadposition signup)

 

espbook

 

Comments




or email your comment to: comments@i-programmer.info

 


<< Prev - Next
Last Updated ( Tuesday, 08 September 2020 )