Dropdownlist in text column.

2 posts, 0 answers
  1. Pinaki
    Pinaki avatar
    6 posts
    Member since:
    May 2012

    Posted 27 Feb 2013 Link to this post

    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()
                )
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 01 Mar 2013 Link to this post

    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!
Back to Top