Kendo UI dropdown showing as textbox

Question

Here is the code of the grid with the dropdown that I have inserted into a Kendo grid:

@model Portal.Web.Areas.Orders.Models.IngressoMerceViewModel

@(Html.Kendo().Grid<Portal.Web.Areas.Orders.Models.IngressoMerceGridViewModel>()
    .Name("grid")
    .Events(e => e.DataBound(@<text>function() {for (var i = 0; i @Html.Raw("<") this.columns.length; i++) {this.autoFitColumn(i);}}</text>))
.Columns(columns =>
{
    columns.Template("<input type='checkbox' />");
    columns.Bound(p => p.Posizione).Title("Posizione").Width(200);
    columns.Bound(p => p.Materiale).Title("Materiale").Width(200);
    columns.Bound(p => p.Description).Title("Testo breve").Width(200);
    columns.Bound(p => p.WarehouseLogicStore).Editable("false").Width(200)
               .ClientTemplate(Html.Kendo().DropDownList()
               .Name("WHLogicValue").DataTextField("Code").DataValueField("Code").DataSource(source =>
               {
                   source.Read(read =>
                   {
                       read.Action("WarehouseLogicTypes_Read", "IngressoMerce");
                   });
               }).ToClientTemplate().ToString()

               ); ;
    columns.Bound(p => p.Quantity).Title("Qta Ordine").Width(200);
    columns.Bound(p => p.UnitOfMeasure).Title("UM").Width(200);
    columns.Bound(p => p.ReceivedQty).Title("Qta già ricevute").Width(200);
    columns.Template("<input type='text' />").Title("Qta ricevute");
    columns.Bound(p => p.InProgressQtyCheck).Title("Qta da ricevere").Width(200);
    columns.Bound(p => p.ExpectedDeliveryDate).Format("{0:dd/MM/yyyy}").Title("Data consegna prevista").Width(200);
    columns.Bound(p => p.QualityCheckNeeded).Title("Check qualitativo richiesto").Width(220);
})
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
//.Read(read => read.Url("/orders/details").Type(HttpVerbs.Get))
.Read(read => read.Action("OrderDetails_Read", "IngressoMerce", Model))
)
.Deferred(!Model.IsAjax)
)

Unfortunately, the dropdown shows as textbox and the respective action in the ASP.net MVC controller is not firing. Here is the code for the action:

[AllowAnonymous]
    public async Task<JsonResult> WarehouseLogicTypes_Read()
    {
        try
        {
            var types = await gateway.GetWarehouseLogicTypes();

            return Json(types);
        }
        catch (Exception ex)
        {
            //logger.LogError(ex.Message);
            throw ex;
        }
    }

Answer 1

you can insert dropdown inside kendo grid using EditorTemplates

Your Index view code should be like this

@(Html.Kendo().Grid<DemoApplication.Models.ProductsModel>()
    .Name("CategoryGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.category).ClientTemplate("#=category.CategoryName#");
        columns.Bound(c => c.ProductName);

    })
         .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Scrollable()
            .Sortable()
            .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(x => x.Id);
            })
            .Read(read => read.Action("ListAll", "Test"))
            .PageSize(10)
            ))

Add Editor Template(_CategoryEditor.cshtml) inside Shared/EditorTemplates folder

your _CategoryEditor code should be like this

@model DemoApplication.Models.Category
@(Html.Kendo().DropDownListFor(m => m)
.Name("category")
.DataValueField("CategoryId")
.DataTextField("CategoryName")
.BindTo((System.Collections.IEnumerable)ViewData["Category"]))

Model code

public class ProductsModel
{
    public int Id { get; set; }

    [UIHint("_CategoryEditor")]
    public Category category { get; set; }
    public string ProductName { get; set; }
}
 public class Category
{
    public int CategoryId { get; set; }
    public string CategoryName { get; set; }
}

Controller Code

 public ActionResult Index()
    {
        ViewData["Category"] = GetCategories();
        return View();
    }
public List<Category> GetCategories()
    {
        List<Category> categories = new List<Category>();
        categories.Add(new Category() { CategoryId = 1, CategoryName = "Category 1" });
        categories.Add(new Category() { CategoryId = 2, CategoryName = "Category 2" });
        categories.Add(new Category() { CategoryId = 3, CategoryName = "Category 3" });
        return categories;
    }
public ActionResult ListAll([DataSourceRequest] DataSourceRequest request)
    {
        List<ProductsModel> productsList = new List<ProductsModel>();
        productsList.Add(new ProductsModel() { Id = 1, category = GetCategories().First(), ProductName = "Product 1" });
        productsList.Add(new ProductsModel() { Id = 1, category = GetCategories().First(), ProductName = "Product 1" });
        productsList.Add(new ProductsModel() { Id = 1, category = GetCategories().First(), ProductName = "Product 1" });
        return Json(productsList.ToDataSourceResult(request));
    }