在Kendo MVC网格中基于下拉列表选择进行内联编辑时如何设置单元格的值？

Question

希望标题有意义。所以我有一个只有三列的网格，其想法是，当添加新行时，第一列是复杂类型的下拉列表，我希望第二列动态显示下拉列表中的值，第三列列只是一个文本框。我已经在这里和Telerik自己的论坛上通读了其他几篇文章，并且没有真正有效的解决方案。也许会，但不会更新视图。如果它就像级联多个dropdownlists一样简单，而只需级联到文本框中，那就太好了。

这里是网格，很标准：

@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()
)

在网格中使用的模型，它是我要基于下拉列表模型中的属性动态更新的“ DefaultValue”属性：

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

下拉列表编辑器：

@(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")) )

最后，我尝试从下拉列表中的所选项目中获取值并更新模型中的“ DefualtValue”属性的javascript：

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

任何帮助将不胜感激。

Answer 1

您可以使用Kendo Grid的Set方法：

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

这里是示例：Sample Dojo