Adding a Dropdown inside Kendo Grid

Question

I'm trying to add a DropDown inside kendo grid but it displays a TextBox

 @(Html.Kendo().Grid((IEnumerable<Doc.Web.Models.Vendor.DocumentsDetails>)Model.documents_lst)
    .Name("grid").Scrollable()

    .Columns(columns =>
    {

        columns.Bound(o => o.DocumentRevisionID).Visible(false);
        columns.Bound(o => o.Documentnumber).Title("Document #").Width(150);
        columns.Bound(o => o.Revision).Title("Revision").Width(80);
        columns.Bound(o => o.RevisionDate).Format("{0:dd/MM/yyyy}").Title("Rev Date").Width(85);
        columns.Bound(o => o.RevisionStatus).Title("Revision</br> Status").Width(100);
        columns.Bound(s => s.DocNumberPurpose).ClientTemplate((@Html.Kendo().DropDownList()
     .BindTo((System.Collections.IEnumerable)ViewData["Purpose"])
      .Name("DocNumberPurpose")
       .DataTextField("Text")
          .DataValueField("Value")
          .ToClientTemplate()).ToHtmlString());

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(o => o.DocumentRevisionID))
        .Model(model=>model.Field(o=>o.DocNumberPurpose).Editable(false))
    )

    .Events(ev=>ev.DataBound("onGridDataBound"))
    .Pageable()
    .Sortable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.DocumentRevisionID))
        .Read(read => read.Action("EditingInline_Read", "DesignCoverSheet").Data("additionalInfo"))

    )

     )

 <script>

         function onGridDataBound(e) {
             $('#grid script').appendTo(document.body);
         }

 </script>  

Answer 1

Check this article for a detailed example of exactly what you are trying to do, specifically in step 3

Step 3 – Embedding the Kendo Drop-down List

Basically you can do that in the following manner:

1. Inside the Kendo grid the property foreign key of your model must be linked to a EditorTemplateName that accepts a template name. As an example:

    columns.Bound(e => e.CompanyId).EditorTemplateName("CompaniesList").Title("Company").ClientTemplate("#:CompanyName#");
   

The template name in the above example is "CompaniesList" which will be a cshtml view file inside EditorTemplates folder.

As per the above article:

The EditorTemplateName specifies to the grid that when either in Create or Edit modes, the template should be placed in the data file named "CompaniesList" that is found in the directory by name of EditorTemplates directory. The subsequent step therefore involves the creation of a folder by name of "EditorTemplates" and place an empty view in it by name of "CompaniesList". The code bit "ClientTemplate(“#:CompanyName#”)" means that when display is in the view mode, (that is, not creating or editing) CompanyName has to be displayed (in this case, it is "Microsoft"). Once this is complete, all what remains to be done is the creation of drop-down list which will be used in the view.

After you create the "CompaniesList" editor template file, you define the Kendo drop down list inside it as follows:

@using System.Collections

@model System.Int32

@(Html.Kendo().DropDownList()

.BindTo((IEnumerable)ViewBag.Companies)

.OptionLabel("- Select Company - ")

.DataValueField("Id")

.DataTextField("Name")

.Name("CompanyId")

)

Note that the drop down Name must be exactly as the column property in the grid which is "CompanyId"

Answer 2

You might look into Kendo Grid ForeignKey Column concept. It can be used as

columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(150);

Detail can be found here http://demos.telerik.com/kendo-ui/web/grid/foreignkeycolumn.html

Answer 3

You're very close actually:

columns.Bound(property => property.neatProperty).Width(38).EditorTemplateName("neatPropertyDropDownList").Title("NeatProperty")

And then in a separate view called "neatPropertyDropDownList.cshtml"

@using System.Collections;

@(Html.Kendo().DropDownList()
            .Name("NeatProperty")       
            .DataTextField("Value")
            .DataValueField("Text")
            .BindTo("don't forget to bind!")
 )