Kendo UI dropdown showing as textbox - asp.net-mvc

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));
}