How to set initial values to Kendo UI MultiSelect with Remote Data Source

ⅰ亾dé卋堺 提交于 2019-12-13 19:17:23

问题


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

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!