EditorGrid validation plugin

[jsakalos]

Hi folks,

I've just finished coding of an EditorGrid validation plugin and I decided to give it some lifetime on this forum before I'll post it to Ext wiki.

Test and comment it please. Thanks.

Code:

Ext.namespace('Ext.ux', 'Ext.ux.plugins');

/**
 * EditorGrid validation plugin
 * Adds validation functions to the grid
 *
 * @author  Jozef Sakalos, aka Saki
 * @version 0.1
 *
 * Usage: 
 * grid = new Ext.grid.EditorGrid({plugins:new Ext.ux.plugins.GridValidator(), ...})
 */
Ext.ux.plugins.GridValidator = function(config) {

    // initialize plugin
    this.init = function(grid) {
        Ext.apply(grid, {
            /**
             * Checks if a grid cell is valid
             * @param {Integer} col Cell column index
             * @param {Integer} row Cell row index
             * @return {Boolean} true = valid, false = invalid
             */
            isCellValid:function(col, row) {
                if(!this.colModel.isCellEditable(col, row)) {
                    return true;
                }
                var ed = this.colModel.getCellEditor(col, row);
                if(!ed) {
                    return true;
                }
                var record = this.store.getAt(row);
                if(!record) {
                    return true;
                }
                var field = this.colModel.getDataIndex(col);
                ed.field.setValue(record.data[field]);
                return ed.field.isValid(true);
            } // end of function isCellValid

            /**
             * Checks if grid has valid data
             * @param {Boolean} editInvalid true to automatically start editing of the first invalid cell
             * @return {Boolean} true = valid, false = invalid
             */
            ,isValid:function(editInvalid) {
                var cols = this.colModel.getColumnCount();
                var rows = this.store.getCount();
                var r, c;
                var valid = true;
                for(r = 0; r < rows; r++) {
                    for(c = 0; c < cols; c++) {
                        valid = this.isCellValid(c, r);
                        if(!valid) {
                            break;
                        }
                    }
                    if(!valid) {
                        break;
                    }
                }
                if(editInvalid && !valid) {
                    this.startEditing(r, c);
                }
                return valid;
            } // end of function isValid
        });
    }; // end of function init
}; // GridValidator plugin end 

[wanclark]

nice!

[shane.fox]

Thanks, this was useful.

[linizou]

useful

[cassioam]

Thank you!

[jschick]

This plugin is just what I was looking for. Thanks!

Because I only allow editing of one row at a time I added the following function to the plugin.

            /**
             * Checks if row has valid data
             * @param {Integer} row index
             * @param {Boolean} editInvalid true to automatically start editing of the first invalid cell
             * @return {Boolean} true = valid, false = invalid
             */
            ,isRowValid:function(row, editInvalid) {
                var cols = this.colModel.getColumnCount();
                var c;
                var valid = true;
                for(c = 0; c < cols; c++) {
                    valid = this.isCellValid(c, row);
                    if(!valid) {
                        break;
                    }
                }
                if(editInvalid && !valid) {
                    this.startEditing(row, c);
                }
                return valid;
            } // end of function isRowValid

[spectrus]

Thanks a lot, looks like a very useful plugin!

Tried to get it working, but can't quite get it yet. My invalid test cell is not getting assigned the 'invalid' CSS class because its preventMark value is being set to 'true'. What is this parameter and where can I control it in the grid config (if anywhere)?

markInvalid : function(msg){
    if(!this.rendered || this.preventMark){ return; }
...
} 

Edit: Never mind, it's me. It's not the this.preventMark (which I see you're just passing in as 'true' - stupid me!), it's the !this.rendered check. I'm running the check at grid's 'show' event. Are the cells still not rendered at that point?

And one more: when the plugin's working (hope to see it myself), after it's done then all the invalid cells on the grid are being displayed as invalid (i.e. with red border) without being clicked on, correct?

Thanks!

[jsakalos]

Cells will be marked invalid only if you start editing. To tell truth, I've more-the-less temporarily abandoned devel of this plugin as it was not the most important part of my project. There is still a lot of space for improvement...

[spectrus]

I see. But wouldn't that be taken care of by the grid anyway? For example an empty mandatory cell is being marked as invalid when clicked even without running the plugin. The usefullness of the plugin escapes me then, and please correct me if I'm wrong. Or will the plugin prove to be more useful for more complex cell editors/column model definitions?

Thank you for a quick response!

[jsakalos]

The original idea was to prevent submit of invalid grid to server and/or forcing user to edit the invalid fields. Of course, if invalid cells were visually marked it would add a lot of value...