DHTML/AJAX grid control

• Download source code - 3 KB

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:

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.