Как установить начальные значения Kendo UI MultiSelect с удаленным источником данных
Я пытался реализовать сценарий редактирования с Kendo UI MultiSelect, привязанным к удаленному источнику данных, с предварительно выбранными значениями. Когда установлен локальный источник данных, он работает нормально, хотя и очень медленно в списке с параметрами 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>
Я использую этот мод, чтобы добавить нового человека в список, который я также не могу установить новое значение для выбранного списка, прекрасно работает с локальными данными. (См. Это для локальных данных. Kendo ui Multi Select Удалить выбранный элемент, используя значение)
<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">×</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>
Вот мой сценарий, в основном определяющий источник данных кендо и использующий его в 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>