|
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 NetAdvantage 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 some data to display in the table. and for the sake of an example let's just create it using another script:
<script type="text/javascript">
var somedata=[];
somedata[0] = {"Name":"mike","Age":25};
somedata[1] = {"Name":"lucy","Age":20};
somedata[2] = {"Name":"sue","Age":23};
</script>
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
<script type="text/javascript">
$("#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:
Your next step is to improve the format using a suitable style sheet. If you add:
<link href="/themes/base/ig.ui.css"
rel="stylesheet" type="text/css" />
<link href="/themes/min/ig/
jquery.ui.custom.min.css"
rel="stylesheet" type="text/css" />
To the start of the page you will see a reasonable layout. Notice that you can use the jQuery ThemeRoller to create style sheets interactively and then load them into your page to customize the way things look. It is easy when you know it exists.
The complete web page is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="/themes/base/ig.ui.css"
rel="stylesheet" type="text/css" />
<link href="/themes/min/ig/
jquery.ui.custom.min.css"
rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/
ajax/libs/jquery/1.4.4/jquery.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/
ajax/libs/jqueryui/1.8.13/
jquery-ui.min.js"
type="text/javascript"></script>
<script src="/Scripts/ig.ui.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#grid1").igGrid({
columns: [
{headerText:"Name of Employee",
key: "Name",
dataType: "string" },
{headerText:"Age in years",
key: "Age",
dataType: "number" },
],
width: '500px',
dataSource: somedata
});
});
</script>
<title></title>
</head>
<body>
<table id="grid1"></table>
<script type="text/javascript">
var somedata=[];
somedata[0] = {
"Name": "mike",
"Age": 25};
somedata[1] = {
"Name": "lucy",
"Age": 20};
somedata[2] = {
"Name": "sue",
"Age": 23};
</script>
</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:
Download a trial from: the Product Downloads page of the Infragistics website.
|
