Important: These demonstrations should be run from a webserver (i.e. using the http:// protocol, not the file:// protocol). When started from a file:// url, charts will not work and the grid won't load at all in Google Chrome.
This is the minimal demo: see how easy it is to create an EditableGrid. Only 3 lines of Javascript code, some minimal inline CSS, and here you go! In this demo, the grid structure and data are obtained from an XML URL. Of course, you don't have to write this file by hand... Features: various built-in data types with built-in validation, edition, sorting
This is the exact same minimal demo, but this time the grid structure and data are obtained from a JSON URL.
Still the same demo, but this time the grid structure and data are created dynamically in Javascript.
Still the same demo, but this time the grid structure is created dynamically in Javascript and the grid data is loaded from an XML url. Other combinations are of course possible: the point is that metadata (i.e. the definition of columns) can be loaded apart from the data itself.
Attaching grid to an HTML table
This is again the exact same minimal demo, but this time the grid data are declared in the HTML file through a classic HTML table. Extra column information (mainly the data type) are given using Javascript.
Here we come back to the first minimal demo and go one little step further. We have externalized the CSS and Javascript code and used the "modelChanged" callback to display a message. A button in each row allows removing the row. We have also included the jQuery and jQuery UI libraries in order to benefit from the date picker for the date column (without any additional code).
Features: