How to set value of a cell while inline editing in a Kendo MVC Grid based on a dropdownlist selection?

Question

Hope the title makes sense. So I have a grid with just three columns, the idea is that when adding a new row, the first column is a dropdown for a complex type, and I want the second column to show a value from the dropdown selection dynamically, and the third column is just a text box. I have read through a several other posts both here and Telerik's own forum, and no solution really works. Maybe it does, it just doesn't update the view. It would be nice if it was as easy as cascading multiple dropdownlists, just cascade into a textbox instead.

Here is the grid, it's pretty standard:

@model Guid 
@(Html.Kendo().Grid<ConfigurationParameterSelectorViewModel>()
    .Name("configurationParameterSelectorGrid_" + Model)
    .ToolBar(t =>
    {
        t.Create().Text(GetText(Constant.ADD, Constant.TEXT_GLOBAL));
    })
    .Columns(columns => {
        columns.Bound(c => c.Id).Visible(false);
        columns.Bound(c => c.ConfigurationKey).ClientTemplate("#=ConfigurationKey.Text#");
        columns.Bound(c => c.DefaultValue);
        columns.Bound(c => c.CurrentValue);
    })
    .DataSource(dataBinding => dataBinding
        .Ajax()
        .PageSize(20)
        .Model(model =>
        {
            model.Id(c => c.Id);
            model.Field(e => e.ConfigurationKey).DefaultValue(new CheckBoxItem());
            model.Field(f => f.DefaultValue).Editable(false);
        })
        .Read(read => read.Action("GetConfigurationParametersSelector", "ConfigurationParameter", new { OrgSiteZoneId = Model }))
        .Create(create => create.Action("AddConfigurationParameterToSite", "ConfigurationParameter", new { OrgSiteZoneId = Model }))
    )
    .Filterable()
    .Navigatable()
    .Scrollable(s => s.Height("auto"))
    .DefaultGridSettings()
)

The model used in the grid, it is the "DefaultValue" property I want to update dynamically based on a property from the dropdownlist model:

public class ConfigurationParameterSelectorViewModel
{
    public ConfigurationParameterSelectorViewModel(){ }

    [ScaffoldColumn(false)]
    public int Id { get; set; }
    [UIHint("ConfigurationParametersDropDownEditor")]
    public CheckBoxItem ConfigurationKey { get; set; } // CheckBoxItem model is just used temporarily
    //[Editable(false)]
    public string DefaultValue { get; set; }
    public string CurrentValue { get; set; }
}

The dropdownlist editor:

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("Value")
    .DataTextField("Text")
    .DataSource(source => source
        .Custom()
        .Transport(transport => transport
            .Read(read =>
            {
                read.Action("GetConfigurationParametersForDropDown", "ConfigurationParameter", new { Area = "Setup" });
            })
        )
    .ServerFiltering(true))
    .AutoWidth(true)
    .Events(e => e.Select("onConfigurationParametersEditorSelect")) )

and finally, the javascript where I try to take the value from the selected item in the dropdownlist and update the "DefualtValue" property in the model:

function onConfigurationParametersEditorSelect(e) {
            var grid = e.sender.element.closest(".k-grid").data("kendoGrid");
            var row = e.sender.element.closest("tr");
            var dataItem = grid.dataItem(row);
            dataItem.DefaultValue = "this should be a value from the dropdownlist";
        }

Any help would be greatly appreciated.

Answer 1

You can use the Set method of Kendo Grid:

function onConfigurationParametersEditorSelect(e)
{
    var dropDownDataItem = e.dataItem;
    var currentRowDataItem = $("#gridId").data("kendoGrid").dataItem(this.wrapper.parents('tr'));
    currentRowDataItem.set("DefaultValue", dropDownDataItem.Text);
    currentRowDataItem.ConfigurationKey.set("Text", dropDownDataItem.Text);                                                    
    currentRowDataItem.ConfigurationKey.set("Value", dropDownDataItem.Value);
}

Here is a sample: Sample Dojo