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

Question

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

这是网格，非常标准：

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

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

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网格的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

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

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

c#

asp.net

kendo-ui

kendo-grid

kendo-asp.net-mvc