How to use ComboBox as Kendo UI grid column?

I'm working with a kendo grid and I'm trying to make Name field a combobox that has it's own datasource. I'm not getting a javascript error, but when I go to edit the name field in the grid, it is not showing a ComboBox. It still shows an input field.

$(function () {


    var datasource = new{
        transport: {
            read: {
                url: "", // Returns all items
                dataType: "json"
        pageSize: 10,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { type: "number", editable: false, nullable: false, visible: false },
                    Name: { type: "string", editable: true, nullable: false, validation: { required: true} },
                    Description: { type: "string", editable: true, validation: { required: true} }                        

    var grid = $("#grid").kendoGrid({
        dataSource: datasource,
        editable: true,
        height: 400,
        columns: [
            { field: "Id", width: 200 },
                field: "Name",
                editor: function (container, options) {     // This is where you can set other control types for the field.                                                                   
                    $('< input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
                        dataSouce: [{ Id: "1", Name: "MaryMaryMary" }, { Id: "2", Name: "John"}],
                        dataValueField: "Id",
                        dataTextField: "Name",                            
        dataBound: function (e) {


I'm not getting any javascript errors.



For those who "desperately" need a custom editor now and can't wait for next release, just like me... :-) is my workaround... change line #12320 of kendo.all.js to this:

fields: { field: column.field, format: column.format, editor: column.editor },

...and voilà! Now the "editor" setting for the column makes effect!

I wrote the above message at

It was January 6 2012, and the current release was v2011.3.1129


What version of KendoUI are you using? Only the recent SP1 and March beta have custom editor support:

Additionally, I

  1. replaced &lt; and &gt; with < and >;
  2. corrected the misspelled "dataSouce" property created for the KendoComboBox.

Here's a sample that I created that should get you going in the right direction:


We have published an example showing how to do that.


I am using MVC4
In grid:


Create EditorTemplateName = Productname.
In view share:

       .DataSource(source =>
           source.Read(read =>
               read.Action("Dm_dvt", "Combo");
       })   .Events(e => e.Select("Select_Ma_dvt").Change("Change_Ma_dvt"))
   .HeaderTemplate("<table style=\"width:100%\"><tr><td  align=\"left\"
   style=\"width:30%\">" + @Tcommont("Ma") + "</td><td align=\"left\"
   style=\"width:70%\">" + @Tcommont("Ten") + "</td></tr></table>")
        .Template("<table style=\"width:100%\"><tr><td  align=\"left\" style=\"width:30%\">" + "#: data.Ma_dvt #" + "</td><td align=\"left\"
   style=\"width:70%\">" + "#: data.Ten_dvt #" + "</td></tr></table>" +
   "<div style='width:0px; height:0px;
   overflow:hidden'>;#:data.Ma_dvt#;#:data.Ten_dvt#;</div>") )

Then form edit using:

function Change_Ma_dvt(e) {  if (this.selectedIndex == -1) {
                              var grid = $("#gridItem2").data("kendoGrid");
                              var _dataItem = grid.dataItem(;
                              _dataItem.set("Ten_dvt", "");
                              _dataItem.set("Ma_dvt", "");
                          } }


function Select_Ma_dvt(e) {    var _Arr = e.item.text().split(";");
                          var grid = $("#gridItem2").data("kendoGrid");
                          var _dataItem = grid.dataItem(;
                          _dataItem.set("Ma_dvt", _Arr[1]);
                          break; }

last grid show name and you choose then Id or Ma will be choose hide


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.