Question

我有一个网格，它使用自定义模板在弹出窗口内编辑。

                .Editable(editable => editable.Mode(GridEditMode.PopUp)
                    .TemplateName("EditForm")
                    .Window(wnd => wnd.Title("New form")
                       .Name("EditFormWindow")
                    .Draggable(true)
                    .Modal(true)

该模板包含多个Kendo下拉列表，这些下拉列表相互级联。

<div class="editor-field">
    @(Html.Kendo().DropDownList()
          .Name("FormGroupId")
          .HtmlAttributes(new { style = "width:250px" })
          .OptionLabel("Select form group...")
          .DataTextField("Name")
          .DataValueField("Id")
          .DataSource(source => source.Read(read => read.Route(RouteConfig.GetFormGroupNames.Name)).ServerFiltering(true))
                          .Events(events =>
                              {
                                  events.Cascade("onFormGroupChange");
                                  events.Change("onFormGroupChange");
                              })
          )
</div>

<div class="editor-field">
    @(Html.Kendo().DropDownList()
          .Name("Schema")
          .HtmlAttributes(new { style = "width:250px" })
          .OptionLabel("Select schema...")
          .DataTextField("SchemaName")
          .DataValueField("SchemaName")
          .DataSource(source => source.Read(read => read.Route(RouteConfig.FilterFormSchemas.Name).Data("filterSchemas")).ServerFiltering(true))
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("FormGroupId")
          )
</div>

它们工作正常，但是现在我需要将MultiSelect小部件添加到此模板中，该模板不支持开箱即用的级联。

所以我添加了这样的代码：

<input id="Sectors" name="Sectors" disabled="disabled" />

    var sectors;
    var formGroupParametersDataSource;

    var sectorsDataSource = new kendo.data.DataSource({
        data: []
    });

    $(document).ready(function() {

        formGroupParametersDataSource = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            serverFiltering: true,
            transport: {
                read: "@Url.RouteUrl(RouteConfig.GetFormGroupParameters.Name)"
            },
            change: function() {
                var data = this.data()[0].Sectors.toJSON();
                sectorsDataSource.data(data);
            }
        });

        sectors = $("#Sectors").kendoMultiSelect({
            autoBind: false,
            dataTextField: "Key",
            dataValueField: "Value",
            optionLabel: "Select form sectors...",
            dataSource: sectorsDataSource,
        }).data("kendoMultiSelect");

    });

    function onFormGroupChange(e) {        
        var value = this.value();
        if (value) {
            formGroupParametersDataSource.one("change", function () {
                sectors.current(null);
            }).filter({
                field: "Id",
                operator: "eq",
                value: value
            });

            sectors.enable();
            sectors.refresh();
        } else {
            sectors.enable(false);
        }
    }

如您所见，我每次更改FormGroupId下拉列表时都会过滤数据源，将视图模型中Sectors属性的数据设置为新创建的sectorDataSource。

适用于网格中的新行。当我尝试编辑行时出现问题，那么即使viewmodel中的Sectors属性具有值，它们也不会绑定到多选小部件。

有任何建议或帮助吗？

使用MultiSelect小部件在Kendo网格弹出窗口中进行数据绑定

0 个答案: