Jsgrid: Disable or Readonly Field

[teguh87]

Hi
Is there js-grid options to disable or readonly fields

[tabalinas]

You can turn off editing or inserting of fields. I guess this is what you need.
If you wish to use just readonly field, use a field without type specified, it's a basic readonly field.

[teguh87]

OK Thank's

[SandySindhu]

Can we make a cell readonly on jsgrid?

[tabalinas]

Yes, don't specify the type option of the fields and set editing: false.

[mattquest]

can you still use a column to filter results when it's either "type not defined" or set to readOnly: true?

[drakans]

Hi , is it possible to get a column editable and for a row having cell01 non editable/editable according to another cell02 value ?
BR,
Steph

[tabalinas]

@drakans: could you open another issue for you question?
Also please provide more details to it, since I'm not sure it's clear what you mean.

[koni1225]

Can we make a row readonly based on conditions can you please give me some example on jsgrid?

[andre-jr]

if use editing: false.... i cant get value for Validation..
can help me please...

[subairka]

You can create custom field as below

        var NumberField3 = jsGrid.NumberField;

        function DisabledField(config) {
            NumberField3.call(this, config);
        }

        DisabledField.prototype = new NumberField3({
            min: 0,
            _createTextBox: function () {
                return $("<input>").attr({
                    type: "text",
                    min: this.min, disabled: true
                });
            }
        });

        jsGrid.fields.disabled = jsGrid.DisabledField = DisabledField;

and use it as {title: "Total", name: "total_amount", type: "disabled",

[andre-jr]

awesome...
thanks,,, it works

[ddana0909]

Can you disable editing on a column, but still have the possibility to define the type in insert view?

[anhhai680]

Can you disable editing on a column, but still have the possibility to define the type in insert view?

Of course. You can easily disable editing on a cell by put editing: false code to it. For example:

{ name: "CusId", type: "text", width: 150, title: "Customer Id", editing: false }

This code above will help you disable editing Customer Id column but you can sort or filter on it.

[susanthas]

Not sure if this is any better, But I found it's much easier to control editing feature this way.

I updated the jsgrid.js code as follows:

    editTemplate: function (value) {
        // ------ Susantha's hack, allow dynamic editing of cell content based on data
        var fe = this.editing; // store field value
        if ($.isFunction(fe)) // eval is it's a function
            fe = fe(arguments[1]);// send back the item with data, so the user can decide on the fly

        if (!fe)
            return this.itemTemplate.apply(this, arguments);
        // ------ end Susantha's hack

        // Original 
        //if (!this.editing)
        //    return this.itemTemplate.apply(this, arguments);

        var $result = this.editControl = this._createTextBox();
        $result.val(value);
        return $result;
    },

Now I can enable or disable editing based on the data in the row or external fields as follows by using editing property of the grid field:

    fields: [{ name: "ContactId" },
            { name: "Firstname", 
              type: "text", 
              editing: function(item){
                return item.Age > 18; // allow editing the Firstname if age is over 18
              }
            },
            ...
    ]

----- EDITED 29/01/2021
Above solution required me to apply the change for each Field. To make things easier, I updated the _createEditRow function as follows:

    _createEditRow: function (item) {
        if ($.isFunction(this.editRowRenderer)) {
            return $(this.renderTemplate(this.editRowRenderer, this, { item: item, itemIndex: this._itemIndex(item) }));
        }

        var $result = $("<tr>").addClass(this.editRowClass);

        this._eachField(function (field) {
            var fieldValue = this._getItemFieldValue(item, field);

            // **ss change**
            if ($.isFunction(field.editing)) {
                field.editingFnc = field.editing; // store the original function
            }
            field.editing = field.editingFnc ? field.editingFnc(item) : field.editing;
            // **end ss change**

            this._prepareCell("<td>", field, "editcss")
                .append(this.renderTemplate(field.editTemplate || "", field, { value: fieldValue, item: item })) 
                .appendTo($result);
        });

        return $result;
    },

With this change, I can now enable conditional editing on any field.

    $(".grid").jsGrid({
        editing: true,
        width: "100%",
        data: [{ name: "Name 1", age: 16 }, { name: "Name 2", age: 23 }, { name: "Name 3", age: 32 }, { name: "Name 4", age: 56 }],
        fields: [
            { name: "name", type: "text" },
            { name: "age", type: "number", editing: function (item) { return item.age > 30; } },
            { type: "control" }
        ] 
    });

[sskwodgik]

Not sure if this is any better, But I found it's much easier to control editing feature this way.

I updated the jsgrid.js code as follows:

    editTemplate: function (value) {
        // ------ Susantha's hack, allow dynamic editing of cell content based on data
        var fe = this.editing; // store field value
        if ($.isFunction(fe)) // eval is it's a function
            fe = fe(arguments[1]);// send back the item with data, so the user can decide on the fly

        if (!fe)
            return this.itemTemplate.apply(this, arguments);
        // ------ end Susantha's hack

        // Original 
        //if (!this.editing)
        //    return this.itemTemplate.apply(this, arguments);

        var $result = this.editControl = this._createTextBox();
        $result.val(value);
        return $result;
    },

Now I can enable or disable editing based on the data in the row or external fields as follows by using editing property of the grid field:

    fields: [{ name: "ContactId" },
            { name: "Firstname", 
              type: "text", 
              editing: function(item){
                return item.Age > 18; // allow editing the Firstname if age is over 18
              }
            },
            ...
    ]

Great solution!
It works 90% for me. Locks work but when I try to save the edited row I get "Uncaught TypeError: this.editControl is undefined" ;(
Can you help?

When i paste YoureditTemplate out of the fielsds, script doesn't work.