CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-grid
Haythem Belhadj
Haythem Belhadj

Reputation: 35

Non editable kendo grid ID

I'm new using kendo grid UI, i'm trying to make a non editable column (when updating) using a simple code : 

schema: {
   id: 'ID', 
   fields: {
     id: { editable: false }
   }
}

This default schema, makes by default non editable id column, and i can't even create a new row with id . I want to make it non editable (when updating) but i want the possibility to create a row and assign an id from user (when creating).

Any ideas ?

Edit :

PS : the proprety is not related to only id, it can be on every column (can't update but can create)

Upvotes: 0

Views: 1171

Answers (3)

Rahima Akter
Rahima Akter

Reputation: 11

The editable required a function instead of a value.

columns: [
    { field: 'value', editable: function () { return false; } }
],

Checkout here: https://dojo.telerik.com/oROJayAd

Upvotes: 1

Stamos
Stamos

Reputation: 3998

This is how I just did it, though there are other ways.

In columns option if you remove the field option from a column it doesn't know from where to bind it.

Then use the template option to show(bind) the id. Thus making it readonly

columns: [
    {
        title: 'Id', width: "40px",
        template: "#= id #",
    },
    ...]

Upvotes: 0

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

I always doubt about that model editable option. It never really worked for me. It should have something very deep in the setup to make it work which I never realized what it. So this is a way to acomplish what you need that I know it indeed works: To cancel the edit event. Check it out:

edit: function(e) {
    // Cancels a new row
    if (arguments, e.model.isNew()) {
        this.cancelRow(e.container.parent());
    }
    else { // Cancels a cell editing
        this.closeCell(e.container);
    }
}

Demo

Now, if you like to add a condition in that event based on what you have set in your model, you can access it within event as well:

edit: function(e) {
    let currentColumn = this.options.columns[e.container.index()].field,
        model = this.dataSource.options.schema.model.fields[currentColumn];

    if (model.editable === false) {
        // Cancels a new row
        if (arguments, e.model.isNew()) {
            this.cancelRow(e.container.parent());
        }
        else { // Cancels a cell editing
            this.closeCell(e.container);
        }
    }
}

Demo

You can add an option yourself in the model to set if the column can be updated or only created, and handle that information inside the event, canceling the editing whenever you like.

Upvotes: 0

Related Questions