Disable Editing of specific rows in jQuery Grid

The sample uses the jqxGrid widget by jQWidgets. It demonstrates how to disable the editing of specific grid rows.

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.edit.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqxcheckbox.js"></script>
<div id="jqxgrid"></div>

CSS

body {
    border-top: solid 15px #000;
}

JavaScript

// prepare the data
var data = generatedata(10);
var source = {
    localdata: data,
    datatype: "array",
    updaterow: function(rowid, rowdata) {
        // synchronize with the server - send update command
    }
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
// cancels the editing of desired rows
var beginedit = function(row, datafield, columntype) {
    if ((row == 1) || (row == 3) || (row == 5)) {
        return false;
    };
};

// renders the cells of the non editable rows
var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties) {
    if ((row == 1) || (row == 3) || (row == 5)) {
        var formattedValue = value;
        if (columnproperties.cellsformat == "yyyy-MM-dd" || columnproperties.columntype == 'datetimeinput') {
            formattedValue = $.jqx.dataFormat.formatdate(formattedValue, columnproperties.cellsformat);
        }
        else if (columnproperties.cellsformat != "") {
            formattedValue = $.jqx.dataFormat.formatnumber(formattedValue, columnproperties.cellsformat);
        }
        return '<div style="height: 100%; background-color: #BBBBBB;"><span style="float: ' + columnproperties.cellsalign + '; position: relative; margin: 4px;">' + formattedValue + '</span></div>';
    };
};

$("#jqxgrid").jqxGrid({
    autoheight: true,
    source: dataAdapter,
    editable: true,
    selectionmode: 'singlecell',
    columns: [
        {
        text: 'First Name',
        datafield: 'firstname',
        width: 90,
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer},
    {
        text: 'Last Name',
        datafield: 'lastname',
        width: 90,
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer},
    {
        text: 'Product',
        datafield: 'productname',
        width: 177,
        cellbeginedit: beginedit,
        cellsrenderer: cellsrenderer},
    {
        text: 'Ship Date',
        datafield: 'date',
        width: 90,
       ...