This is a migrated thread and some comments may be shown as answers.

Dropdownlist in text column.

1 Answer 187 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pinaki
Top achievements
Rank 1
Pinaki asked on 27 Feb 2013, 01:45 PM
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()
            )

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 01 Mar 2013, 02:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Pinaki
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or