How to make a cell in a jqxGrid dynamically editable depending on the content of the row

Question

I am trying to make a cell in a jqxGrid editable depending on the value of another column in the row (with the name Editable).

{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
  editable: function (index, datafield, value, defaultvalue, column, rowdata) {
               return rowdata.Editable;
            }
 },

This does not work. The cell is always editable regardless of the value of rowdata.Editable.

Replacing return rowData.Editable; with return false; does not work either.

I am using jqWidgets 3.9.0 in combination with JQuery 1.7.1.

Can anybody explain why this does not work and how to get it to work?

Answer 1

I got this to work by doing the following:

Replacing the url in the data source with localdata which references a local array called "data".

This array is filled using the original source url.

        var data = [{}];
        var source =
        {
            datatype: "json",
            datafields: [
                 { name: 'Id', type: 'number' },
                 { name: 'Name', type: 'string' },
                 { name: 'Percentage', type: 'string' },
                 { name: 'Editable', type: 'bool' }
            ],
            localdata: data
        }

Using the cellbeginedit property instead of the editable property when defining the columns in the jqxGrid:

        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#myGrid").jqxGrid(
        {
            width: 800,
            source: dataAdapter,
            editable: true,
            editmode: 'click',
            selectionmode: 'singlecell',
            columns: [
                { text: "Id", datafield: "Id", columntype: 'textbox', editable: false, hidden: true },
                { text: "Name", datafield: "Name", columntype: 'textbox', width: 400, editable: false },
                { text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
                    cellbeginedit: function (row) {
                        return data[row].Editable;
                    }
                },
            ]
        });

Answer 2

I was using the cellclick to do this kind of control.

$("#jqxGrid").on('cellclick', function (event) {
    var args = event.args;
    var datafield = event.args.datafield;
    var rowIndex = args.rowindex;
    var data = $('#jqxGrid').jqxGrid('getrowdata', rowIndex);
    if(datafield == 'assign'){
        if(data.assign){
            $('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', true);
        }else{
            $('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', false);
        }
    }
});