It really surprises me how effortlessly Kendo UI Grid works with data that needs to be displayed or edited in a tabular format. This is due to the efficient edit functionality built into Kendo Grid (you can refer to Kendo Grid Documentation for more information).

Generally, Kendo Grid provides edit control for editable columns depending on data type that exists in the data source model.

Furthermore, the Kendo UI Grid uses a combination of methods for manipulating columnar data. This is a default Kendo Grid behavior. In this blog I will demonstrate a simple example that will show you how to use a custom editor for a grid column.

In this example you can see how to bind an Employee List with the Kendo Grid. For this, I have created a Kendo Model that is dependent on the database table structure as below:

The Database Table Structure: 

EmployeeID (int) (PK)
        FirstName(varchar)
        LastName(varchar)
StateId (int) (FK)
CityId (int) (FK)
DOB (date)
Age (int)

Kendo Model

var Model = kendo.data.Model.define({
    id: "EmployeeID",
    fields: {
       EmployeeID:{editable: false, nullable: false},
       FirstName: {type: "string"},
       LastName: {type: "string"},
       StateId: {type: "number"},
       CityId: {type: "number"},
       DOB:{type: "date"},
       Age:{type:"number"}
    }
});

Below, you will find the static JSON Data which we want to bind with the Kendo Grid:

JSON Data

var employees = [{ EmployeeID: 1, FirstName: "Keyur", LastName: "Patel", StateId: 1, CityId: 1, DOB:"03/22/1983",Age:31 },

{ EmployeeID: 2, FirstName: "Prasanjeet", LastName: "Debnath", StateId: 2, CityId: 2, DOB:"08/15/1987",Age:27 },

{ EmployeeID: 3, FirstName: "Namrata", LastName: "Patel", StateId: 2, CityId: 4, DOB:"09/10/1983",Age:30 }];

Create DataSource using above static JSON Data:

Data Source

var employeeDataSource = new kendo.data.DataSource({
    data: employees,
    schema:{
                model:Model
    },
    transport: {

read: function (o) {o.success(employees);},
create: function (o) {o.success(o.data);},
update: function (o) { o.success(); },
destroy: function (o) { o.success(); }
     },
  });

Create grid and bind the Data Source with it using the following code:

Create and Bind Grid

$("#EmployeeList").kendoGrid({
    dataSource: employeeDataSource,
    columns:[
       {
               field:"FirstName",
               title:"First Name"
       },
       {
               field:"LastName",
               title:"Last Name"
       },
       {
               field:"StateId",
               title:"State"
       },
       {
               field:"CityId",
               title:"City"
       },
       {
               field:"DOB",
               title:"DOB",template:"#=kendo.toString(DOB,'d')#"
       },
       {
               field:"Age",
               title:"Age"
      },
       {
               command: ]"edit"[
       }
    ],
    editable:"inline"
});

As you have seen in the above demo, Kendo UI Grid provides column editor depending on the datatype which we have mentioned in the model, like textbox for string datatype, datepicker for date datatype and numeric textbox for number datatype.

Thankfully, you now know more about how Kendo Grid Default Edit functionality works. You can check on the link below for more related information:
http://jsfiddle.net/nKRzh/8/

Now if we want to provide dropdown control for State and City column, we will need to create custom editable template for both the columns.

I will now show you step-by-step how you can go about fulfilling this requirement. It’s really easy - you just have to add 2 more fields in the models StateName and CityName (this is for display purpose only). Our model will look more or less as shown below:

Model

var Model = kendo.data.Model.define({
   id: "EmployeeID",
   fields: {
       EmployeeID:{editable: false, nullable: false},
       FirstName: {type: "string"},
       LastName: {type: "string"},
       StateId: {type: "number"},
       CityId: {type: "number"},
       StateName:{type:"string"},
       CityName:{type:"string"},
       DOB:{type: "date"},
       Age:{type:"number"}
    }
});
   
Below are the static JSON Data for states, cities and employees:

Data

var states = [{ Id: 1, Name: "Gujarat" }, { Id: 2, Name: "Maharastra" }, { Id: 3, Name: "MP" }, { Id: 4, Name: "UP" }];

var cities = [{ Id: 1, StateId: 1, Name: "Surat" }, { Id: 2, StateId: 2, Name: "Mumbai" },

             { Id: 3, StateId: 1, Name: "Baroda" }, { Id: 4, StateId: 2, Name: "Pune" }, {Id:5,StateId:3,Name:"Ujjain"},{Id:6,StateId:4,Name:"Kanpur"}];

var employees = [{ EmployeeID: 1, FirstName: "Keyur", LastName: "Patel", StateId: 1, CityId: 1, StateName: "Gujarat", CityName: "Surat",DOB:"03/22/1983",Age:31 },

 { EmployeeID: 2, FirstName: "Prasanjeet", LastName: "Debnath", StateId: 2, CityId: 2, StateName: "Maharastra", CityName: "Mumbai",DOB:"08/15/1987",Age:27 },

{ EmployeeID: 3, FirstName: "Namrata", LastName: "Patel", StateId: 2, CityId: 4, StateName: "Maharastra", CityName: "Pune",DOB:"09/10/1983",Age:30 }];

  
Please note that the Employee Data Source will remain the same. But we need to create Data Source for State and City which you can find below:

Data Source

var stateDataSource = new kendo.data.DataSource({
data: states
});
var cityDataSource = new kendo.data.DataSource({
data: cities
});
    
Now we will create and bind Kendo UI Grid as follows:

Create and Bind

$("#EmployeeList").kendoGrid({
    dataSource: employeeDataSource,
    columns:[
       {
               field:"FirstName",
               title:"First Name"
       },
       {
               field:"StateId",
               title:"State",template:"#=StateName#"
       },
       {
               field:"CityId",
               title:"City",template:"#=CityName#"
       },
       {
               field:"DOB",
               title:"DOB",template:"#=kendo.toString(DOB,'d')#"
       },
       {
               field:"Age",
               title:"Age"
       },
       {
               command: ]"edit"[
       }
        ],
        editable:"inline"
});

We have provided template for StateId and CityId column to display the respective names.

Next, we need to create custom editor for StateId and CityId. After creating grid we need to define editor for both these columns.

To define editor for both columns, I have created one function named "defineGridColumnEditor" which is as below:
function defineGridColumnEditor()
{
    var grid = $("#EmployeeList").data("kendoGrid");
    if(grid == null)
       return;
    $.each(grid.columns,function(id,column){
       if(column.field == "StateId")
       {
               column.editor = stateEditor;  
       }
       if (column.field == "CityId") {
               column.editor = cityEditor;
       }
});
};

After creating the grid, you have to call the function named "defineGridColumnEditor".

As you can see in the above function, we now have to find both grid columns and bind their editor.

To accomplish this, we will now create editor for both columns as below:

StateId Column Editor

All of that done, we now need to append input in container and define it as Kendo Dropdown List.

• We also need to assign stateDataSource as datasource for the dropdownlist which we have created before.
• Set dropdownlist datatext and datavalue field.
• We also have to bind change event for dropdownlist because we need to update StateName and CityName depending on selected State value.
• We have to filter City datasource by selected State value.

Also, in change event, we need to set StateName and CityName by finding them in static JSON data depending on selected State value. So here we go again:

CityId column Editor

var cityEditor = function (container, options) {

cityDataSource.filter({

field: "StateId",

operator: "eq",

value:options.model.StateId

});

$("<input name='" + options.field + "'> ").appendTo(container).kendoDropDownList({

dataSource: cityDataSource,

dataTextField: "Name",

dataValueField: "Id",

change: function () {

$.each(cities, function (index) {

if (options.model.CityId == cities[index].Id) {

options.model.CityName = cities[index].Name;

return;

}

});

}

});

};

To bind datasource for dropdownlist we first need to filter cityDataSource, depending on default StateId by using Kendo datasource filter function.

We also have to set dropdownlist datatext and datavalue field.

Then, we have to bind change event for dropdownlist because we need to update CityName depending on selected City value.

And finally, in change event, we need to set CityName by finding the same in static JSON data depending on selected City value.

For your convenience, we have provided a link where you can look at the fully functional custom editor for Kendo Grid column demo. Just click on the link below: