Click here to Skip to main content
Click here to Skip to main content

DHTML/AJAX grid control

, 4 Feb 2008
Rate this:
Please Sign up or sign in to vote.
A DHTML/AJAX grid control.

Screenshot - grid.gif

Introduction

This is a continuation of the project I started in my previous article Tiny JavaScript tree. Here is a list of goals I tried to achieve:

  • Minimum application JavaScript. This should be an add-on to any HTML table.
  • Minimum dependency - I didn't want to use any third party JavaScript library. Ideally, this object needs to be bundled with the AJAX library, so whatever modifications done by the user can be forwarded to the back-end for server processing.
  • Application customization - The application developer should be able to customize out-of-the-box behavior without modifying library code. As such, bundling with AJAX should be easy.
  • Implement the following functionality:
    • Create an appropriate editor by clicking on the table cell (<TD>). Position this editor to cover the original cell. Once editing is complete, update <TABLE> with the appropriate value and allow the new value to be sent to the server (AJAX?).
    • Allow dynamic sorting by clicking on the table column headers (<TH>).
    • Allow dynamic column resize (to be done).

Using the Code

Below is an example of the code:

<table id="t">
    <tr><th>Hdr1</th><th>State</th><th>Price</th></tr>
    <tr><td>row 1</td><td>California</td><td>100</td></tr>
    <tr><td>row 2</td><td>Arizona</td><td>200</td></tr>
</table>
<select id="states" style="visibility:hidden">
    <option value="CA">California</option>
    <option value="AZ">Arizona</option>
</select>
<script type="text/javascript">
var combo = document.getElementById("states");
var grid = new Grid("t", {
    getEditor : function(cell, g) {
        return (g.getCellIndex(cell).col == 1) ? combo : g.defEditor;
    }
});
</script>

As you can see, there is just a plain table definition with some data.

Since this grid control provides only a plain <INPUT> editor out of the box, any other type of editor needs to be defined in the application. Hence the combo-box (<SELECT>). It needs to be defined as hidden to begin with. The grid control will make it visible once needed.

The first thing in the JavaScript code, I get a reference to the combo-box, then I create a grid object. The first argument to the object is an ID of the HTML <TABLE> element, the second is a JSON customization object. See table below for possible attributes of the second parameter:

getEditor (cell, grid) Returns an editor for the cell. Return null if no editing is allowed for that cell. In the example above, I use the grid.getCellIndex function to get the row/col location of the cell and then return the combo-box for row 1 (list of states) or the default editor for any other cell.
isSortable(cell, grid) Returns true if sorting is allowed by clicking on this cell. By default, can sort by clicking on the <TH> cells on the first row.
saveValue(cell, grid, value)

Performs validation and possibly saves value to the server using AJAX. By default, does nothing. Return OK if saving is performed/initiated, or false for any kind of validation/persistency error.

cellComp(ela, elb, col, grid, rowA, rowB) Sorting routine. By default handles dates/numerics/string sorting. If any kind of customized sorting is needed, overwrite this function. See default implementation for details.

Custom Editors

I probably didn't do enough testing with generic custom editors. I tried it with <INPUT TYPE=TEXT> and <SELECT>. Probably there will be a need to troubleshoot this control with other generic types of editors. If you choose to venture into this territory, let me know the result. Please check the source code for the configEditor function to see what needs to be done to add an editor.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

gstolarov
http://www.GaspMobileGames.com
United States United States
Writing code since 1987 using whatever language/environment you can imagine. Recently got into the mobile games. Feel free to check them out at http://www.GaspMobileGames.com

Comments and Discussions

 
QuestionAdd Rows? Pinmemberpwhe2310-Jun-08 10:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 4 Feb 2008
Article Copyright 2007 by gstolarov
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid