JQGrid Dynamic Row Editable

Question

I have created a JqGrid with my custom data and using formatters.

where if i click on some text(ex: "D") i have to change the text some other text (ex: "R"). as well as the background colors.

scenario is like this :

• user clicks the A, cell changes to a C
• user clicks the D, cell changes to an R
• user clicks the R, cell changes to a D
• user clicks the C, cell changes to an A

JS CODE :

    function SalesOptimizationGridData() {
    var mydata =[ { size: "S1", op: "170", OPStatus: "X", s1: "-170", S1Status: "C", s2: "170", S2Status: "D", s3: "170", S3Status: "A", s4: "170", S4Status: "C", s5: "170", S5Status: "C" },
{ size: "S2", op: "-170", OPStatus: "D", s1: "-170", S1Status: "C", s2: "-170", S2Status: "X", s3: "-170", S3Status: "D", s4: "-170", S4Status: "C", s5: "-170", S5Status: "D" },
{ size: "S3", op: "370", OPStatus: "X", s1: "370", S1Status: "C", s2: "-370", S2Status: "A", s3: "-370", S3Status: "C", s4: "370", S4Status: "C", s5: "-370", S5Status: "A" },
{ size: "S4", op: "-270", OPStatus: "D", s1: "-170", S1Status: "D", s2: "-170", S2Status: "R", s3: "170", S3Status: "C", s4: "170", S4Status: "A", s5: "170", S5Status: "R" },
{ size: "S5", op: "-340", OPStatus: "X", s1: "170", S1Status: "R", s2: "270", S2Status: "A", s3: "-170", S3Status: "D", s4: "340", S4Status: "D", s5: "-170", S5Status: "A" },
{ size: "S6", op: "-140", OPStatus: "A", s1: "-270", S1Status: "R", s2: "170", S2Status: "A", s3: "170", S3Status: "C", s4: "170", S4Status: "R", s5: "170", S5Status: "C" },
{ size: "S7", op: "-140", OPStatus: "C", s1: "-170", S1Status: "D", s2: "170", S2Status: "D", s3: "-170", S3Status: "R", s4: "240", S4Status: "X", s5: "170", S5Status: "C" },
{ size: "S8", op: "0", OPStatus: "X", s1: "-0", S1Status: " ", s2: "0", S2Status: "D", s3: "0", s4: "0", S3Status: "C", S4Status: "A", s5: "0", S5Status: "X" },
{ size: "S9", op: "170", OPStatus: "R", s1: "170", S1Status: "X", s2: "170", S2Status: "D", s3: "170", S3Status: "A", S4Status: "C", s4: "170", s5: "-170", S5Status: "D" },


    ];
    return mydata;
} 
function AssortmentDetailsGrid() {
    $("#ao-salesoptimization-grid").jqGrid({
        data: SalesOptimizationGridData(),
        datatype: "local",
        autowidth: false,
        //shrinkToFit: true,
        rowNum: 15,
        rowList: [15, 30, 45],
        colNames: ['SIZE', 'OP', 'S1', 'S2',  'S3',  'S4', 'S5'],
        colModel: [
            {
              name: 'size', index: 'id', sortable: true, sorttype: 'int', resizable: true},
            { name: 'op', index: 'op', sortable: true, sorttype: 'int', resizable: true, formatter: opformatter },
            { name: 's1', index: 's1', sortable: true, sorttype: 'int', resizable: true, formatter: s1formatter },
            { name: 's2', index: 's2', sortable: true, sorttype: 'string', resizable: true, formatter: s2formatter },
            { name: 's3', index: 's3', sortable: true, sorttype: 'string', resizable: true, formatter: s3formatter },
            { name: 's4', index: 's4', sortable: true, sorttype: 'int', resizable: true, formatter: s4formatter },
            { name: 's5', index: 's5', formatter: s5formatter }
        ],
        sortname: 'id',
        sortorder: 'desc',
        loadOnce: true,
        gridview: true,
        loadComplete: function () {
            if ($("#ao-salesoptimization-grid-container").width() !== 0)
                $('#ao-assortmentdetails-grid').setGridWidth($("#ao-salesoptimization-grid-container").width());
            InitjQueryScroll();
            $("#gview_ao-salesoptimization-grid").find('.ui-jqgrid-bdiv').mCustomScrollbar({ theme: "rounded" });


            if ($(".ao-op-grid-formatter:first-child > p").text() === "D") {
                $(".ao-op-grid-formatter").addClass("statusD");
            }
        }


    });
    function opformatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.OPStatus + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }

    function s1formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S1Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }

    function s2formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S2Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }
    function s3formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S3Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }
    function s4formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S4Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }
    function s5formatter(cellvalue, options, rowObject) {
        return '<div class="ao-op-grid-formatter"><p>' + rowObject.S5Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
        //return cellvalue;
    }


}

Working JSFIDDLE is here

Kindy help me if you have any idea!! thanks in advance!

Answer 1

First of all, I'd recommend you to simplify colModel and to use one formatter for all columns:

colModel: [
    { name: 'size', key: true }, // ??? sorttype: 'int' - see non int values "S8", "S1", ...
    { name: 'op', sorttype: 'int', formatter: statusFormatter },
    { name: 's1', sorttype: 'int', formatter: statusFormatter },
    { name: 's2', formatter: statusFormatter },
    { name: 's3', formatter: statusFormatter },
    { name: 's4', sorttype: 'int', formatter: statusFormatter },
    { name: 's5', formatter: statusFormatter }
]

where statusFormatter could be defined like

function statusFormatter(cellvalue, options, rowObject) {
    var status = rowObject[options.colModel.name.toUpperCase() + "Status"] || " ";
    return '<div class="ao-op-grid-formatter' + (status === "D" ? ' statusD"' : '"') +
         '><p>' + status +
        '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
}

The statement $(".ao-op-grid-formatter").addClass("statusD"); can be removed from loadComplete.

To change the status of the data and the corresponding content in the grid you can use beforeSelectRow callback. The corresponding code could be about the following

beforeSelectRow: function (rowid, e) {
    var $self = $(this), cmName, status,
        item = $self.jqGrid("getLocalRow", rowid),
        $td = $(e.target).closest("tr.jqgrow>td"),
        iCol = $td.length > 0 ? $td[0].cellIndex : -1,
        p = $self.jqGrid("getGridParam");
    if ($(e.target).is(".ao-op-grid-formatter>p") && iCol>0 && p.colModel[iCol]!=null) {
        cmName = p.colModel[iCol].name;
        status = item[cmName.toUpperCase() + "Status"];
        switch (status) {
            case "A":
                status = "C";
                break;
            case "D":
                status = "R";
                break;
            case "R":
                status = "D";
                break;
            case "C":
                status = "A";
                break;
            default:
                //status = " ";
                break;
        }
        item[cmName.toUpperCase() + "Status"] = status;
        $(e.target).text(status);
        if (status === "D") {
            $(e.target).parent().addClass("statusD");
        } else {
            $(e.target).parent().removeClass("statusD");
        }
    }
},

See http://jsfiddle.net/OlegKi/bngscfmv/4/