The Grid – Getting Started
I would suggest downloading the code used for this example here so you have something to work with. A working example can be found here.
Step 1, Data Definition
First we need to tell the grid what XML element defines each row of data, in this case its named 'Item' as you can see from the sample XML below.
Single Row of XML Sample Data
Set the record in your schema definition (line 8 of the sample code below) to 'Item' so it coresponds to a row in our XML data.
Then we need to define which collumn contains the unique identifier by setting the 'id' (line 9 of the sample code below). In our sample data this is the 'ASIN' collumn.
The last part of our data definition are the fields you want to display (line 11 of our sample code). This is just an array with the field names. Make sure these correspond with the element names in your XML data and place them in the order you want the collumns displayed in your grid, they dont need to be in the same order they are found in the XML file.
Step 2, Collumn Model
The next step would be defining the Collumn Model, which simply means setting up some properties for the collumns that determine how they are displayed and treated. This is an array containing configuration parameters for each collumn given in the order of the collumns as defined in the data definitions "fields" array from the previous step.
Probably the most common configuration variables are going to be header and width, so you will want to make sure to declare atleast those two, however width is not required and can be taken care of using the autoWidth/Height functions later on.
Sample Collumn Model
The last thing we do is to pass the Grid the data store and collumn model (lines 22-25), render the grid, then load in the data from our data store. Thats really all you need to get your grid up and working.
Render it!
The Final Product
grid-getting-started.js
grid-getting-started-working.php
