Home | Contact | About Me

 

MyTableGrid is a JavaScript based DataGrid control built on the Prototype library. It allows you to display your data in a simple and flexible way.

HTML Sample

First in your html page you have to include the following javascript libraries

                    <script type="text/javascript" src="scripts/lib/prototype.js"></script>
                    <script type="text/javascript" src="scripts/lib/scriptaculous.js"></script>
                    <script type="text/javascript" src="scripts/mtg/myui.js"></script>
                

Tip: don't forget to put the doctype declaration at the begining of the page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                

Then you define the table model.

                    var countryList = [
                        {value: 'UK', text: 'United Kingdon'},
                        {value: 'US', text: 'United States'},
                        {value: 'CL', text: 'Chile'}
                    ];

                    var tableModel = {
                        options : {
                            width: '640px',
                            title: 'CD Catalog',
                            pager: {
                                total: 55,
                                pages: 5,
                                currentPage: 1,
                                from: 1,
                                to: 10
                            }
                        },
                        columnModel : [
                            {
                                id : 'id',
                                title : 'Id',
                                width : 30,
                                editable: true,
                                editor: 'checkbox'
                            },
                            {
                                id : 'title',
                                title : 'Title',
                                width : 200,
                                editable: true
                            },
                            {
                                id : 'artist',
                                title : 'Artist',
                                width : 140,
                                editable: true
                            },
                            {
                                id : 'country',
                                title : 'Country',
                                width : 200,
                                editable: true,
                                editor: new MY.ComboBox({
                                    items: countryList
                                })
                            },
                            {
                                id : 'company',
                                title : 'Company',
                                width : 130
                            },
                            {
                                id : 'price',
                                title : 'Price',
                                type: 'number',
                                width : 130,
                                editable: true
                            },
                            {
                                id : 'year',
                                title : 'Year',
                                width : 130,
                                editable: true
                            }
                        ],

                        rows : [
                            {id: '1', title: 'Empire Burlesque', artist: 'Bob Dylan', country: 'US', company: 'Columbia', price: '10.90', year: '1985'},
                            {id: '2', title: 'Hide your heart', artist: 'Bonnie Tyler', country: 'UK', company: 'CBS Records', price: '9.90', year: '1988'},
                            {id: '3', title: 'One night only', artist: 'Bee Gees', country: 'UK', company: 'Polydor', price: '10.90', year: '1998'},
                            {id: '4', title: 'Romanza', artist: 'Andrea Bocelli', country: 'US', company: 'Polydor', price: '10.80', year: '1996'},
                            {id: '5', title: 'Pavarotti Gala Concert', artist: 'Luciano Pavarotti', country: 'US', company: 'DECCA', price: '9.90', year: '1991'},
                            {id: '6', title: 'Picture book', artist: 'Simply Red', country: 'US', company: 'Elektra', price: '7.90', year: '1985'},
                            {id: '7', title: 'Eros', artist: 'Eros Ramazzotti', country: 'US', company: 'BMG', price: '9.90', year: '1997'},
                            {id: '8', title: 'Black angel', artist: 'Savage Rose', country: 'US', company: 'Mega', price: '10.90', year: '1995'},
                            {id: '9', title: 'For the good times', artist: 'Kenny Rogers', country: 'UK', company: 'Mucik Master', price: '8.70', year: '1995'},
                            {id: '10',title: 'Big Willie style', artist: 'Will Smith', country: 'US', company: 'Columbia', price: '9.90', year: '1997'}
                        ]
                    };
                

Also you have to define where the table grid will get rendered, for example in your html page you can include the following

                    <div id="mytable" style="position:relative; width: 640px; height: 300px"></div>
                

Then you create an instance of MY.TableGrid object and call the render method.

        var tableGrid = null;
        Event.observe(document, 'dom:loaded', function() {
            tableGrid = new MY.TableGrid(tableModel);
            tableGrid.show('mytable');
        });            

As you see the complex part is defining the column model. For example the definition of a column element is as follow:

                {
                    id : 'available',
                    title : 'Available',
                    width : 30,
                    editable: true,
                    editor: 'input',
                    renderer: function(value) {
                        if (value == 'N') return 'Not';
                        return 'Yes';
                    }
                }
                

These are the properties you have to define:

You can choose between many types of editors, for example:

Text Field editor
                {
                    id : 'title',
                    title : 'Title',
                    width : 120,
                    editable: true,
                    editor: new MY.TextField({
                        validate: function(value, errors) {
                            return true;
                        }
                    })
                }
                
ComboBox input editor
                {
                    id : 'country',
                    title : 'Country',
                    width : 134,
                    editable: true,
                    editor: new MY.ComboBox({
                        items: countryList,
                        afterUpdate : function(input, selectedItem) {
                            alert(input.value + ' ' + selectedItem.id);
                        }
                    })
                }
                

As you see you have to define a countryList array containing the countries you want to display, for example

                var countryList = [
                    {value: 'UK', text: 'United Kingdon'},
                    {value: 'US', text: 'United States'},
                    {value: 'CL', text: 'Chile'}
                ];
                

You also can define an "afterUpdate" callback, which will be called every time you select an item from the list. Other options as you see in the following sample, the url parameter and the getParameters method

                {
                    id: 'tariffRate',
                    title: 'Tariff Rate',
                    width: 90,
                    editable: true,
                    editor: new MY.ComboBox({
                        url: '/samples/getTariffRates.do',
                        getParameters : function() {
                            var coords = tableGrid.getCurrentPosition();
                            var index = tableGrid.getColumnIndex('tariffRateTypeCd');
                            var tariffRateTypeCd = tableGrid.getValueAt(index, coords[1]);
                            var request = {};
                            request['tariffRateTypeCd'] = tariffRateTypeCd;
                            return request;
                        }
                    })
                }
                

The getParameters method allows you to generate the http request parameters dynamically.

Checkbox
                {
                    id : 'available',
                    title : 'Available',
                    width : 134,
                    editable: true,
                    editor: new MY.TableGrid.CellCheckbox({
                        onClick: function(value, checked) {
                           //you can include some code here
                        }
                    })
                }
                

When you define a checkbox editor you can include an "onclick" callback, which will be executed every time you click on the checkbox.

Radio button
                {
                    id : 'available',
                    title : 'Available',
                    width : 134,
                    editable: true,
                    editor: new MY.TableGrid.CellRadioButton({
                        onClick: function(value, checked) {
                           //you can include some code here
                        }
                    })
                }
                

The radio button editor is very similar to the checkbox editor and includes the same properties and handlers.

Date Picker
                            {
                                id : 'dateAcquired',
                                title : 'Date acquired',
                                width : 120,
                                editable: true,
                                editor: new MY.DatePicker({
                                    format : 'dd/MM/yy',
                                    validate : function(value, errors) {
                                        if (value != null && value.isAfter(new Date())) {
                                            errors.push('Selected date is after current date');
                                            return false;
                                        }
                                        return true;
                                    }
                                })
                             },
                

When you define a MY.DatePicker editor you can include a "validate" callback method, which will be executed every time you update that field