Disable Editing for a Kendo UI Grid Column

One of the oddities of the Kendo UI Grid is that the ability to edit a column is actually controlled by the backing DataSource’s Model, not the Grid itself.

For example:

var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Bob" },
    { id: 2, name: "Joe" }
  ],
  batch: true,
  schema: {
    model: {
      id: "id",
      fields: {
        id: { type: "number", editable: false, nullable: false },
        name: { type: "string", editable: true }
      }
    }
  }
});

$("#grid").kendoGrid({
  dataSource: dataSource,
  height: 200,
  toolbar: ["save", "cancel"],
  columns: [
    { field: "id", title: "Id", width: 80 },
    { field: "name", title: "Name" },
    { command: "destroy", title: " ", width: 120 }],
  editable: true
});

Clicking on a cell in the “Name” column will open an editor, because:

dataSource.schema.model.fields.name.editable === true

Well, sometimes you will find yourself in a situation where you don’t want to set this on the DataSource. For example, what if you need to programmatically decide if the cell is editable? Or, what if you have two grids sharing a DataSource, but a column is editable in one of the grids but not the other? One was to achieve this is with a custom editor for the cell (yes, really, an editor to make your data readonly!)

Using a Custom Editor

Each grid column definition has an editor property that can be set to a function that will be used to construct an editor.

Normally, you would do something like:

$("#grid").kendoGrid({
  ...,
  columns: [
    ...,
    {
      field: "name",
      editor: function(container, options) {
        var input = $("<input/>");
        input.attr("name", options.field);
        input.appendTo(container);
      }
    }
  ],
  ...
});

A Custom Readonly Editor

Since we can run actual JavaScript inside our editor, we can have the editor just close itself. So let’s make a new function to be used as our editor, named “readonlyEditor”. Readonly editor will just call .closeCell() on the Grid widget.

var gridWidget;

var readonlyEditor = function (container, options) {
  gridWidget.closeCell();
};

var dataSource = new kendo.data.DataSource({
  data: [
    { id: 1, name: "Bob" },
    { id: 2, name: "Joe" }
  ],
  batch: true,
  schema: {
    model: {
      id: "id",
      fields: {
        id: { type: "number", editable: false, nullable: false },
        name: { type: "string", editable: true }
      }
    }
  }
});

gridWidget = $("#grid").kendoGrid({
  dataSource: dataSource,
  height: 200,
  toolbar: ["save", "cancel"],
  columns: [
    { field: "id", title: "Id", width: 80 },
    { field: "name", title: "Name", editor: readonlyEditor },
    { command: "destroy", title: " ", width: 120 }],
  editable: true
}).data("kendoGrid");

Note that we also had to save off a reference to the Kendo Grid widget after creating it, so that we could call .closeCell() on it. Unfortunately there was no good way to get to the widget instance from the things passed in to the editor function.

The result of this is that now when a cell in the “name” column is clicked, it appears to be non-editable to the user. In reality, the editor was created then just closed itself!

Advertisements
Tagged with: ,
Posted in KendoUI, Programming
3 comments on “Disable Editing for a Kendo UI Grid Column
  1. Chris W says:

    Hi Spike. Is there a way of adding a custom editor to a Grid created using the MVC HTML Helpers? Thanks, Chris

  2. anonymous says:

    This is really helpful! Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

CodingWithSpike is Jeff Valore. A professional software engineer, focused on JavaScript, Web Development, C# and the Microsoft stack. Jeff is currently a Software Engineer at Virtual Hold Technologies.


I am also a Pluralsight author. Check out my courses!

%d bloggers like this: