I have a C# ASP.NET MVC application where I populate a Kendo grid with data from an Ajax call. I need to have one of the grid columns displayed with a dropdown list. I also need to set the selected value of the dropdown list.
This is the code for the grid:
@(Html.Kendo().Grid<TaxCertApp.ViewModels.ParcelViewModel>()
.Name("DetailedParcelGrid")
.AutoBind(true)
.Columns(columns =>
{
columns.Bound(parcel => parcel.ParcelKey)
.ClientTemplate("<button type='button' class='btn btn-taxapp btn-primary assesment-taxyear-add' id='btnAddTaxYear'><b>Add Tax Year</b></button>")
.Title("")
.Width(200);
columns.Bound(parcel => parcel.ParcelKey)
.ClientTemplate("<span class=\"assesment-parcel-edit glyphicon glyphicon-edit\" style=\"color: rgb(40, 96, 144)\"></span></a>")
.Title("")
.Width(30);
columns.Bound(parcel => parcel.LotNo).Title("Lot #").Width(50);
columns.Bound(parcel => parcel.AssembledTaxDescription).Title("Tax Description").Width(140);
columns.Bound(parcel => parcel.SchoolDistrict).Title("School District").Width(120);
columns.Bound(parcel => parcel.ParcelStreetNo).Title("Street Number").Width(110);
columns.Bound(parcel => parcel.ItemNo).Title("Item").Width(50);
columns.Bound(parcel => parcel.Class).Width(50);
columns.Bound(parcel => parcel.ParcelStatusList)
.Title("Parcel Status")
.Width(150)
// .ClientTemplate("#=SeeList(ParcelStatusList)#");
.EditorTemplateName("DropDownEditor");
columns.Bound(parcel => parcel.ParcelNotes).Title("Parcel Notes");
})
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(n => n.CaseKey))
.Read(read => { read.Action("GetDetailedParcelDetails", "Parcel").Data("{ CaseKey: " + @Model.CaseKey + "}"); }))
.Events(events => events.DataBound("dataBound"))
)
This is the code in the DropDownEditor.cshtml:
@using System.Collections
@model System.String
@(Html.Kendo().DropDownListFor(m => m)
.BindTo((IEnumerable)ViewData["ParcelStatusList"])
.OptionLabel("- Select Parcel Status -")
)
I included an image of the grid that gets generated. I also included an image of the console.log when the code executed the .ClientTemplate code which looks like this:
function SeeList(parcelStatusList) {
console.log(parcelStatusList);
var obj = JSON.stringify(parcelStatusList);
console.log(obj);
return parcelStatusList;
}
Any suggestions on what is preventing the dropdown from displaying properly?
Thank you.