This simple walkthrough will show you how to put a grid on a webpage, and connect to a datasource. In this instance, the datasource is either an ASP, PHP, Java, or Coldfusion page that returns XML data.
index.html
First, you must always define the Nitobi XML namespace in the <HTML> tag.
Then, write out the head tag.
Be sure to include the CSS style sheet. We ship several different styles which you can choose from.
Then, include the JavaScript file for the Grid control and the Toolkit framework.
Next, put a grid on the page by writing out the grid tag. The tag is an XML-like declarative markup that allows you to define all the attributes of the grid all in one concise, easy to use format. Here is an example of a very basic grid that binds to an on-page XML datasource which you will see.
This example will generate a grid of width 500 pixels, and height 350 pixels. After the opening ntb:grid tag we include a <ntb:datasources> tag which can be used to define any static datasources we may be using. We call our one datasource "data". In the grid tag we link to it with the datasourceid="data" attribute.
If we run the page now, the grid will not appear. This is because we still need to initialize it. We do this with a small piece of JavaScript code. You can do this in the BODY onLoad event, or some other time. The following code will initialize the grid named "SimpleGrid". Note that this code appears in the <BODY> tag of our page so that it runs when the page loads.
In this grid tag example we do not explicitly define any columns, so the grid will infer that every column it finds in the data should be drawn and that they are all text values. If we run the page now we will see a grid like this:
Customizing the Column Definitions
Now we would like to customize this grid a little for the data. For example, it would be nice to rearange the columns and add a currency mask on the donation field. To do this, we will explicitely define columndefinitions.
Somewhere inside our <ntb:grid> tag we must define a <ntb:columns> tag with column information in it. We begin by making them all text:
This won't do anything for our Donation Amount currency mask: it will still just look like text. Let's make it a number coloumn and add a mask like so:
Notice we changed textcolumn to be numbercolumn on both the opening and closing tags (don't forget this - common mistake). We also added a width attribute to make it a bit wider than the default (100px).
Now we have a grid that is formatted the way we want.
Basic sample does not work - line 4064 exception thrown and not caught. Using trail download PHP. I have followed tutorial instructions. Sample in sample direcory works o.k, but when in my project directory it does not work ?
Knowledgebase
To be notified of new articles when they're available, subscribe to our RSS feed.
This simple walkthrough will show you how to put a grid on a webpage, and connect to a datasource. In this instance, the datasource is either an ASP, PHP, Java, or Coldfusion page that returns XML data.
