MVC | KendoUI Grid | Not able to view the newly selected value in the dropdowlist on click of update

Question

I have a Dropdownlist inside a Kendo UI Grid the markup is as follows

The View

@(Html.Kendo().Grid<MMM.Lumos.Web.ViewModels.TestPointViewModel>()
    .Name("TestPoint")
    .DataSource(dataSource => dataSource.Ajax()

        .Model(model =>
        {
            model.Id(m => m.TestPointId);            
        })
        .Create(update => update.Action("CreateTestPoint", "TestPoint"))
        .Read(read => read.Action("ReadTestPoints", "TestPoint"))
        .Update(up => up.Action("UpdateTestPoint", "TestPoint"))
        .Destroy(update => update.Action("DeleteTestPoint", "TestPoint"))  
    )
    .Columns(columns =>
    {
        columns.Bound(c => c.TestPointId).Width(200).Visible(false);
        columns.Bound(c => c.TestPointName).Width(200);
        columns.Bound(c => c.TestPointMethodId).EditorTemplateName("TestPointMethodDDL").Title("Test Point Method").ClientTemplate("#= TestPointMethodName#"); //TestPointMethodDDL : Name of the .cshtml file placed in the '~/Views/Shared/EditorTemplate'                
        columns.Bound(c => c.PassThreshold).Width(100);
        columns.Bound(c => c.FailThreshold).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(500);        
    })

    .ToolBar(toolbar => toolbar.Create())
    .Editable(ed => ed.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
    .Sortable()    

    .Events(events =>
    {
        events.Save("TestPointGrid_Save");
    })
)

Controller

public ActionResult UpdateTestPoint([DataSourceRequest] DataSourceRequest request, TestPointViewModel TestPoint)
        {
            var TestPointToUpdate = dbContext.TestPoints.First(tp => tp.TestPointId == TestPoint.TestPointId);
            TryUpdateModel(TestPointToUpdate);
            dbContext.SaveChanges();
            return Json(ModelState.ToDataSourceResult());
        }

View for Dropdown list

@using System.Collections
@model System.String
@(Html.Kendo().DropDownList()

//This Kendo drop down list gets its data from the 'ViewBag.TestPointMethods' dynamic property, 
//so you will have to add this to the main page's action as done in the below line.
.BindTo((IEnumerable)ViewBag.TestPointMethods)

////Optional Default value to be added in the dropdown list
//.OptionLabel("- Select - ")

//The value is taken from the 'TestPointMethodID' property of TestPointMethod Model
.DataValueField("TestPointMethodId") 

//The text is taken from the 'TestPointMethodName' property of TestPointMethod Model
.DataTextField("TestPointMethodName")

//"Name("TestPointMethodId")". 
//The name helper should have a name that is exactly like the column the drop down list is bound to as shown in the grid. 
//The column is bound to "TestPointMethodId" so the drop down list should have a name "TestPointMethodId".
.Name("TestPointMethodId")

.Events(e => e.Change("onDropDownChanged"))
)

Model

namespace test.test1.Web.Models
{
    using System;
    using System.Collections.Generic;

    public partial class TestPoint
    {
        public int TestPointId { get; set; }
        public string TestPointName { get; set; }
        public Nullable<int> TestPointMethodId { get; set; }
        public Nullable<decimal> PassThreshold { get; set; }
        public Nullable<decimal> FailThreshold { get; set; }
        public Nullable<int> CreatedBy { get; set; }
        public Nullable<System.DateTime> CreatedOn { get; set; }
        public Nullable<int> ModifiedBy { get; set; }
        public Nullable<System.DateTime> ModifiedOn { get; set; }

        public virtual TestPointMethod TestPointMethod { get; set; }
    }
}

ViewModel

public class TestPointViewModel
    {
        public int TestPointId { get; set; }
        public string TestPointName { get; set; }
        public int? TestPointMethodId { get; set; }        
        public decimal PassThreshold { get; set; }
        public decimal FailThreshold { get; set; }
        public string TestPointMethodName { get; set; }
    }

In the above example i am able to save the data in the database. But after the update is clicked the text in the column Test Point Method still shows the old value selected. When refreshed the page the grid than displays the entries from the database.

Let me know if someone has the solution for this. I have being hunting for this from last 3 days.

Answer 1

Updating the text property based on the selection in the dropdownlist can be achieved by using one of the following approaches: Use the save event to update the model text value:

function TestPointGrid_Save(e) {
    var dropdownlist = $("#TestPointMethodId").data("kendoDropDownList");
    e.model.TestPointMethodName = dropdownlist.text();
}

or

public ActionResult UpdateTestPoint([DataSourceRequest] DataSourceRequest request, TestPointViewModel TestPoint)
{
    ...

    TestPoint.TestPointMethodName = UpdatedName;
    return Json(new[] { TestPoint }.ToDataSourceResult(request, ModelState));
}

Alternative approaches to update the value and show correct the text are to use a ForeignKey column or an object as demonstrated in the custom editor demo.