[Solved] Dropdownlist in text column.

[Pinaki]

Hello all.
I'm wondering if someone can help me.
I have a MVC Kendo grid, that has AJAX binding. Within the grid, I have some TEXT coulmns. So on edit, it is a plain editbox.
But for some rows, I want the template to be a dropdown or a combobox.
I need this, because I want the user to select a restriced choise list.

I have varios reasonsfor this. But overall what I need is have a dropdown/combox on edit template on a TEXT based column of a data grid.

My current code looks like this:

--cshtml---

@(Html.Kendo()

                  .Grid<Shell.UI.UGOBooks.Models.GetAcreageData_Result>()

                  .Name("AcreageGrid")

                  .HtmlAttributes(new { style="height: 650px" })

                  .Columns(columns =>

                  {

                      columns.Bound(a => a.DataFieldText);

                      columns.Bound(a => a.UOMText)

                             .HeaderHtmlAttributes(new { style="text-align:center" })

                             .HtmlAttributes(new { style="text-align:center" })

                             .Width(100);

                      columns.Bound(a => a.DataFieldValue)

                             .HeaderHtmlAttributes(new { style="text-align:right" })

                             .HtmlAttributes(new { title="#= TooltipText#", style="text-align:right" })

                             .Width(100);

                      columns.Bound(a => a.DataFieldTextValue)

                             .HtmlAttributes(new { title="#= TooltipText#" })

                             .Width(200);

                      columns.Bound(a => a.Comments);

                  })

                  .ToolBar(toolbar =>

                  {

                      toolbar.Save();

                  })

                  .Events(e =>

                  {

                      e.Edit("onAcreageEdit");

                      e.DataBound("onGridDataBound");

                      e.SaveChanges("acreageSaveChanges");

                  })

 

                  .Editable(editable => editable.Mode(GridEditMode.InCell))

                  .DataSource(dataSource => dataSource

                                                      .Ajax()

                                                      .Batch(true)

                                                      .PageSize(20)

                                                      .ServerOperation(false)

                                                      .Model(model =>

                                                      {

                                                          model.Id(a => a.AcreageDataId);

                                                      })

                                                      .Read(read => read.Action("AcreageRead", "Databooks").Data("gridReadParams"))

                                                      .Update(update => update.Action("AcreageUpdate", "Databooks")))

                  .Pageable()

            )

[Vladimir Iliev]

Hi Pinaki,


Basically this feature is not supported out-of-the-box, however it's possible to replace the default editor for given column of the grid after it's initialization with function which returns different editor templates based on current row model - please check the example below:

$(function () {
    var grid = $("#grid").data("kendoGrid");
    //change the index of the column with required column index
    grid.columns[2].editor = function (container, options) {
        //example logic to switch between two editors
        if (options.model.id % 2 == 0) {
            //first editor is the default editor
            $("<input data-bind='value:" + options.field + "' class='k-input k-textbox'/>").appendTo(container);
        } else {
            //second editor is drowpDownList
            $("<input data-bind='value:" + options.field + "'/>").appendTo(container).kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: [
                    { text: "Order Food", value: "Order Food" },
                    { text: "Order Office Materials" , value: "Order Office Materials"},
                    { text: "Order Production Materials", value: "Order Production Materials" }
                ],
            });
        }
    }
})

 Kind Regards,
Vladimir Iliev
the Telerik team