Unable to use ComboBox with Inline edit for Kendo MVC Grid

Question

I have a basic grid that utilizes the inline edit feature. My goal is to use a combo box to enforce a specific value that can be saved. However, I'm not sure what I'm missing, as the edit still appears as a text box instead of the combo box, and there are no console errors to indicate any issues.

Here is the cshtml

    <div id="datagrid">
            @(Html.Kendo().ComboBox()
.Name("DepartmentComboBox")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new[]
{
new { Text = "Sales", Value = "Sales" },
new { Text = "Marketing", Value = "Marketing" },
new { Text = "Development", Value = "Development" },
new { Text = "HR", Value = "HR" }
})
.HtmlAttributes(new { style = "width: 100%" }))
            @(Html.Kendo().Grid<MVCSite.Model.ProspectSearchModel>
()
.Name("ProspectSourceGrid")
.Columns(columns =>
{
    columns.Bound(p => p.Id).Title("Id").Filterable(false).Visible(false);
    columns.Command(command => { command.Edit(); }).Width(200).Title("Change<br>Status").Width(100);
    columns.Bound(p => p.Status).EditorTemplateName("DepartmentComboBox").Title("Status").Width(100).Filterable(false);
    columns.Bound(p => p.DaysOnMarket).Title("Days On Market").Width(150).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
    columns.Bound(p => p.USState).Title("State").Width(100).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
    columns.Bound(p => p.FormattedAddress).Title("Address").HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).Filterable(false);

})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable()
.Pageable(pageable => pageable
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(false)
.PageSizes(true)
.ButtonCount(50))
.Sortable()
.Selectable(s=> s.Mode(GridSelectionMode.Single))
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Ajax()
 .Model(model =>
 {
     model.Id(p => p.Id);
     // Declare a model field and make it readonly
     model.Field(p => p.DaysOnMarket).Editable(false);
     model.Field(p => p.USState).Editable(false);
     model.Field(p => p.FormattedAddress).Editable(false);
 })
.Read(read => read.Action("ProspectSourceGridData", "DataSource"))
.Destroy(update => update.Action("OptionGridInline_Destroy", "DataSource"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.PageSize(15))
.Events(events => events.DataBound("Autocolumnwidth")
)

)
        </div>

here is the model

public class ProspectSearchModel
{
    public int Id { get; set; }
    public int? DaysOnMarket { get; set; }
    public string FormattedAddress { get; set; }
    public string Status { get; set; }
    public string USState { get; set; }
}

and here is the controller

public ActionResult ProspectSourceGridData([DataSourceRequest] DataSourceRequest dataSourceRequest)
{

    IEnumerable<ProspectSearchModel> prospects = GetSampleProspects();

    return Json(prospects.ToDataSourceResult(dataSourceRequest), JsonRequestBehavior.AllowGet);
    // Returning as a DataSourceResult (using Kendo.Mvc.Extensions)
}

private IEnumerable<ProspectSearchModel> GetSampleProspects()
{
    var prospects = new List<ProspectSearchModel>();
    var random = new Random();

    // Sample data for randomization
    var states = new[] { "CA", "NY", "TX", "FL", "NV", "WA", "CO", "AZ", "NC", "PA" };
    var statuses = new[] { "Active", "Pending", "Sold", "Expired" };

    // Generating 30 sample prospect data
    for (int i = 0; i < 30; i++)
    {
        prospects.Add(new ProspectSearchModel
        {
            Id = i + 1,
            DaysOnMarket = random.Next(1, 301),  // Random days on market between 1 and 300
            FormattedAddress = $"123 {random.Next(1, 100)} St, Sample City, {states[random.Next(states.Length)]} {random.Next(10000, 99999)}",
            Status = statuses[random.Next(statuses.Length)],
            USState = states[random.Next(states.Length)]
        });
    }

    return prospects;  // Returning the list as an IEnumerable
}

Here is the javascript autocolumnwidth function

 function Autocolumnwidth(e) {
        //var grid = e.sender;
        //for (var i = 0; i < grid.columns.length; i++) {
          // grid.autoFitColumn(i);
        //}
        $("#datagrid .k-grid-content").attr("style", "height: auto");
    }

Example of the result

Answer 1

After hours of trying to use inline, I switched to exactly how this demo works. https://demos.telerik.com/aspnet-mvc/grid/editing-custom?_gl=1*4rmtvr*_gcl_au*MzM0MzgzMzQxLjE3Mzk2NTQ5MTg.*_ga*NzAyNTMxODYzLjE3Mzk2NTQ5MTg.*_ga_9JSNBCSF54*MTczOTcyNDMxOS4yLjEuMTczOTc1Njg5My41NC4wLjA.