如何初始值设定为剑道UI多选与远程数据源(How to set initial values to

2019-09-30 08:13发布

我一直在努力执行编辑的场景与剑道UI多选绑定到远程数据源,以预先选定的值。 当设置为本地数据源,它工作得很好,虽然很慢与2K选项(即我使用远程数据源主要原因)名单上。 如何可以选择值添加到多选时,它被绑定到远程数据源? 如何添加新的项目通过添加模态转为多选选择的值? 这里是我的HTML

<div class="form-group">
    @Html.LabelFor(model => model.People, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @*@Html.DropDownListFor(model => model.People, Model.PeopleDropDown, new { multiple = "multiple", data_multiselect = "true", data_charges = "true" })*@
        <select id="People" multiple="multiple" name="People">

            @foreach (var c in Model.Involvement.InvolvementCharges)
            {
                <option value="@c.ChargeId">@c.Charge.Description</option>
            }

        </select>
        @Html.ValidationMessageFor(model => model.People)
    </div>
</div>

我使用这个模式的新的人添加到列表中,这我也没有新的值设置为选定的名单,工作只是与本地数据的罚款。 (见本本地数据剑道UI多选删除所选元素使用值 )

<div id="modifyModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="submitForm" type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

这里是我的脚本,基本上剑道定义数据源,并在多选使用它,以及一个处理模式DIV一些代码。

<script>
    $(function () {

        var peopleUrl = '@Url.Action("PeopleJson", "DropDowns")';

        var peopleDataSource = new kendo.data.DataSource({
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            transport: {
                read: {
                    type: 'post',
                    dataType: 'json',
                    url: peopleUrl
                }
            },
            schema: {
                data: 'Data'
            }
        });

        $('#People').kendoMultiSelect({
            minLength: 3,
            filter: 'contains',
            placeholder: 'Start typing charge...',
            dataValueField: "Key",
            dataTextField: "Value",
            autoBind: false,
            dataSource: peopleDataSource
        });

        $('#submitForm').click(function (e) {
            e.preventDefault();
            $.post('@Url.Action("Create", "People")', $('#CreatePersonForm').serialize(),
                function (data, status, xhr) {
                    if (status) {
                        $("#modifyModal").modal("hide");
                        //var multiSelect = $('#People');
                        //multiSelect.data("kendoMultiSelect").dataSource.add({ value: data.PersonId, text: data.Name });
                        //multiSelect.data("kendoMultiSelect").dataSource.sort({ field: "text", dir: "asc" });
                        //var add = [data.PersonId];
                        //var values = multiSelect.data("kendoMultiSelect").value().slice();
                        //var merge = $.merge(values, add);
                        //multiSelect.data("kendoMultiSelect").dataSource.filter({});
                        //multiSelect.data("kendoMultiSelect").value($.unique(merge));
                    }
                });
        });

    });
</script>
文章来源: How to set initial values to Kendo UI MultiSelect with Remote Data Source