how to implement jqgrid inline editing and custom validation?

Question

I am new to jqGrid, an I am trying to implement the following scenarios but I am unable to get it the correct way.

This is my scenarios:

I have three rows like personal email, mobile number, and twitter url. It needs to have another column Data type, possibly values such as email, phone and url.
Now each of the rows I will enter the value for need to perform some validation like email format, or phone format.
When I press the Add button, it needs to create a new row and ask me the info for each column, like Name of column and Data type.
When I enter the value of each row, it needs to validate based on Data type column.
If I press the Edit button, the entire grid need to be editable and needs to perform validation on each cell after edit event triggers.

My code:

    $(document).ready(function () {
        //debugger;
        var val;
        var lastsel2;
        jQuery("#list").jqGrid({
            datatype: "local",
            height: 250,
            width: 770,
            colNames: ['Mechanism', 'Data Type', 'Value', 'Active Flag', 'Created'],
            colModel: [
            { name: 'Mechanism', index: 'Mechanism', width: 175, editable: true },
            { name: 'DataType', index: 'Datatype', width: 175, editable: true },
        { name: 'Value', index: 'Value', width: 105, editable: true, editrules: { custom: true, custom_func: validate} },
        {name: 'ActiveFlag', width: 112, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
        { name: 'Created', index: 'Created', width: 124}]
        });
$('#save').live('click', function () {
            var ids = $("#list").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                var val = $("#list").jqGrid('getCell', ids[i], 'Value');
                var dataType = $("#list").jqGrid('getCell', ids[i], 'DataType');
                $('#colValue').html(val + dataType);
                var va = $('#colValue').find('input[name=value]').val();
                var daT = $('#colValue').find('input[name=Datatype]').attr('value');

                switch (daT) {
                    case "Phone":
                        if (!$.jgrid.isEmpty(va)) {

                        }
                        else
                            alert("Phone Number Field is required");
                        break;
                    case "Email":
                        if (!$.jgrid.isEmpty(va)) {

                        }
                        else
                            alert("Email Field is required");
                        break;
                    case "URL":
                        if (!$.jgrid.isEmpty(va)) {
                        }
                        else
                            alert("URL Field is required")
                        break;
                    case "":
                        alert("Fields are not null")
                }
            }
        });

        $('input[value=Edit]').click(function () {
            var ids = $('#list').jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++) {
                //$('#list').jqGrid('editRow', ids[i]);
                jQuery('#list').jqGrid('editRow', ids[i], true);
            }
        });
        var data = [{ Mechanism: "Mobile Phone", DataType: "Phone" }, { Mechanism: "Personal Email", DataType: "Email" }, { Mechanism: "Facebook URL", DataType: "URL"}];
        for (var i = 0; i <= data.length; i++)
            jQuery("#list").jqGrid('addRowData', i + 1, data[i]);
        val = i;

Mark Mark · Accepted Answer · 2012-12-20T12:50:50

If I understand your question this really all boils down to validation, the add an edit functionality of can be added and then custom validation called.

Ex:

jQuery("#list").navGrid('#pager', {
    add: true,
    addtext: 'Add',
    edit: true,
    edittext: 'Edit',
    del: true,
    deltext: 'Del',
    search: true,
    searchtext: 'Find',
    refresh: true
}, //options
{
    reloadAfterSubmit: true,
    beforeSubmit: validate_edit
}, // edit options
{
    reloadAfterSubmit: true,
    beforeSubmit: validate_add
}, // add options
{}, //del options
{} //search options
);

Validation (could be different or the same based on your needs)

function validate_add(posdata, obj) {//validation code}

function validate_edit(posdata, obj) {//validation code}

Ref: jqgrid different editrules for when adding and editing

In the end it would really clean up a bunch of the code you wrote trying to interact with the grid for validation.

how to implement jqgrid inline editing and custom validation?

1 Answers