How to use ComboBox as Kendo UI grid column?

Question

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 na

Answer 1

What version of KendoUI are you using? Only the recent SP1 and March beta have custom editor support: http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js

Additionally, I

1. replaced < and > 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:

Answer 2

For those who "desperately" need a custom editor now and can't wait for next release, just like me... :-)

...here 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 http://www.kendoui.com/forums/ui/grid/how-to-define-memo-style-editor-for-grid-cells.aspx#1938316

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

Answer 3

I am using MVC4
In grid:

columns.Bound("Productname").Title("Productname")                    
   .Width(200)                                           
   .EditorTemplateName(Productname);

Create EditorTemplateName = Productname.
In view share:

@(Html.Kendo().ComboBox()
             .Name("Ten_dvt")
             .DataValueField("Ten_dvt")
       .DataTextField("Ten_dvt")
       .Filter(FilterType.Contains)
        .HighlightFirst(true)
       .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(grid.select());
                              _dataItem.set("Ten_dvt", "");
                              _dataItem.set("Ma_dvt", "");
                          } }

and

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

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

Answer 4

We have published an example showing how to do that.