问题
I've been trying to implement Edit scenario with Kendo UI MultiSelect bound to remote data source, with pre-selected values. When set to local data source, it works fine, although very slow on a list with 2k options (main reason that i'm using remote data source). How can i add selected values to MultiSelect when it is bound to remote data source? How can i add new items added through modal to MultiSelect selected values? Here's my 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>
I'm using this modal to add new person to the list, which i'm also failing to set the new value to the selected list, works just fine with local data. (See this for local data Kendo ui Multi Select Remove Selected element using value)
<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>
Here's my script, basically defining kendo data source, and using it in MultiSelect, and some code that handles modal 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>
来源:https://stackoverflow.com/questions/23132182/how-to-set-initial-values-to-kendo-ui-multiselect-with-remote-data-source