How to convert Kendo dropdownlist into Kendo multi

问题:

I am converting Kendo dropdownlist from the existing code into Kendo multiselect.

Role Code: Currently Dropdownlist (converting to Kendo multiselect).

I am not getting the correct output.

I have the following code:

<div class="col-md-4 form-group">
                @Html.LabelFor(model => model.RoleCode, htmlAttributes: new { }) <span style="color: Red">*</span>
                <select id="DDRolecode" multiple="multiple" data-placeholder="Select attendees...">

        </select>


</div>
...
...
var url = '@Url.Action("GetRoleCode", "FlowGenerator")';
            url = url + '?FlowID=' + flowid + '&RegID=' + RegId;
            $.ajax({


                url: url,
                dataType: 'json',
                type: 'POST',

                success: function (result) {

                    debugger;

                    //$("#DDRolecode").kendoDropDownList({
                    //    dataTextField: "Name",
                    //    dataValueField: "ID",
                    //    optionLabel: "Select",
                    //    dataSource: result

                    //});

                    $("#DDRolecode").kendoMultiSelect({
                        dataTextField: "Name",
                        dataValueField: "ID",                       
                        dataSource: result,
                    });

                     var selectedData = [];
                    for (var i = 0; i < result.length; i++) {


                        selectedData.push({
                            text: result[i].Name,
                            value: result[i].ID
                        })

                    }

                    DDRoleCode.dataSource.data(selectedData);
                    //DDRoleCode.setDataSource(selectedData);
                    DDRoleCode.value('');
                    DDRoleCode.enable(true);

                },
                error: function (data) {
                    debugger;
                    var itemRow = "<ul id='listError'><li>" + "Data Not Bind" + "</li></ul>";
                    FUNMessageBox(itemRow, "E", 0, 0, "", "");
                    // alert("error");
                }
            });

The below is the controller code where I am getting the role codes:

 public JsonResult GetRoleCode(int FlowID,int RegID)
        {
            IEnumerable<GenericValues1> RoleCode = _repository.Context.Database.SqlQuery<GenericValues1>("PROC_GET_ROLECODE @DATA_FLOW_ID={0},@REG_ID={1}", FlowID, RegID).ToList().AsQueryable();

           // ViewBag.Tariffs = RoleCode;
            return Json(RoleCode, JsonRequestBehavior.AllowGet);


        }

As you can see, I tried using the multiselect functionality in the above code. But it didn't work.

回答1:

To avoid the long comment chain.

From the second image you have provided it looks like the issue of multiple multiselects being added to the same item. This is due to you attaching a a new multiselect control to the same input.

this is a simple fix really. There are two ways to fix it. 1) Destroy the kendo widget and recreate it 2) Assuming the same structure is used in the underlying datasource and other settings just apply the new datasource data to the widget.

Here is a dojo showing you both examples:

https://dojo.telerik.com/UxetijUy/2

Personally I would go with option 2 as it is a cleaner solution and avoids having to constantly destroy and recreate widgets.

So if you change the required person in the second example it will take a random number of people from the data array for the multiselect and then rebind those options to that control.

So that is all you would have to do with your ajax call is once you have the result just apply the new data to the datasource and then you don't need to keep recreating the widget as you are currently doing. So in your example:

       $("#DDRolecode").data('kendoMultiSelect').value(null);
       $("#DDRolecode").data('kendoMultiSelect').dataSource.data(selectedData);

This ensures you have cleared off any selected items before you have attached the new data source.

If you need more info on what is happening. Please ask and I will update my answer accordingly.

回答2:

The below code worked for me:

 $(document).ready(function () {
        debugger;

        $("#DDRolecode").kendoMultiSelect({
            dataTextField: "Name",
            dataValueField: "ID",
        });

        ....
        ....

//go to controller and call Sp and get the result
success: function (result) {

                    debugger;

                    var multiSelect = $('#DDRolecode').data("kendoMultiSelect");
                    multiSelect.value([]);

                    $("#DDRolecode").data("kendoMultiSelect").setDataSource(new kendo.data.DataSource({ data: result }));                                    
                    var selectedData = [];
                    for (var i = 0; i < result.length; i++) {


                        selectedData.push({
                            Text: result[i].Name,
                            Value: result[i].ID
                        })

                    }