EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: galcott on March 06, 2022, 12:29:25 PM



Title: Validation in editable datagrid
Post by: galcott on March 06, 2022, 12:29:25 PM
I am using the datagrid with the cell editing extension. Initially the grid is empty and I append a bunch of blank rows for the user to enter data. There are 2 columns, and when the user enters data in the first column I need to validate it against a database. The problem is that I can't find any event that's triggered when the user leaves a cell. The extension has an onCellEdit event but that is triggered while the cell is being edited. I need an event that's triggered when the edit is done and returns the value entered. Is there a way to do that?


Title: Re: Validation in editable datagrid
Post by: jarry on March 09, 2022, 12:22:20 AM
Please assign a validation type to the cell editor.
Code:
$.extend($.fn.validatebox.defaults.rules, {
    // custom your validation type
    myValidation: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Invalid value.'
    }
});
$(function(){
    $('#dg').datagrid({
        columns: [[
            {field:'itemid',title:'Item',width:100,
                editor: {
                    type: 'textbox',
                    options: {
                        required: true,
                        validType: {
                            myValidation: [5]
                        }
                    }
                }
            },
            {field:'productid',title:'Product',width:100,editor:'textbox'}
        ]],
        data: data
    }).datagrid('enableCellEditing').datagrid('gotoCell', {
        index: 0,
        field: 'productid'
    });
});