Javascript 如何使用远程数据源设置剑道UI MultiSelect的初始值

我一直在尝试使用绑定到远程数据源的KendoUIMultiselect实现编辑场景，并使用预先选择的值。当设置为本地数据源时，它运行良好，尽管在具有2k选项的列表中速度非常慢（主要原因是我使用远程数据源）。 当MultiSelect绑定到远程数据源时，如何将选定值添加到MultiSelect？ 如何将通过模式添加的新项目添加到多选选定值？ 这是我的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>

@LabelFor（model=>model.People，新的{@class=“controllabel col-md-2”}）
@*@Html.DropDownListFor（model=>model.People，model.PeopleDropDown，new{multiple=“multiple”，data\u multiselect=“true”，data\u charges=“true”}）*@
@foreach（模型中的var c.参与.参与费用）
{
@c、 费用.说明
}
@Html.ValidationMessageFor（model=>model.People）

我正在使用此模式向列表中添加新的人员，我也无法将新值设置到所选列表中，可以很好地处理本地数据。（本地数据见此）

&时代；
关
保存更改

这是我的脚本，基本上定义剑道数据源，并在MultiSelect中使用它，还有一些处理模态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>

$（函数（）{
var peopleUrl='@Url.Action（“PeopleJson”，“DropDowns”）；
var peopleDataSource=new kendo.data.DataSource({
对,，
对,，
是的，
页面大小：10，
运输：{
阅读：{
键入：“post”，
数据类型：“json”，
url:peopleUrl
}
},
模式：{
数据：“数据”
}
});
$（“#人”）.kendoMultiSelect({
最小长度：3，
筛选器：“包含”，
占位符：“开始键入费用…”，
dataValueField:“密钥”，
dataTextField:“值”，
自动绑定：错误，
数据源：peopleDataSource
});
$（“#提交表单”）。单击（函数（e）{
e、 预防默认值（）；
$.post（'@Url.Action（“创建”，“人”），$（'#CreatePersonForm'）.serialize（），
功能（数据、状态、xhr）{
如果（状态）{
$（“modifyModal”）.modal（“隐藏”）；
//var multiSelect=$（“#人”）；
//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（值，添加）；
//multiSelect.data（“kendoMultiSelect”）.dataSource.filter（{}）；
//multiSelect.data（“kendoMultiSelect”）.value（$.unique（merge））；
}
});
});
});

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