如何将 Kendo 下拉列表转换为 Kendo 多选

Posted 2023-05-07

【中文标题】如何将 Kendo 下拉列表转换为 Kendo 多选

【英文标题】：How to convert Kendo dropdownlist into Kendo multiselect

【发布时间】：2020-01-08 04:18:22

【问题描述】：

我正在将现有代码中的 Kendo 下拉列表转换为 Kendo 多选。

角色代码：当前下拉列表（转换为 Kendo 多选）。

我没有得到正确的输出。

我有以下代码：

<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");
                
            );

以下是我获取角色代码的控制器代码：

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


        

如您所见，我尝试在上述代码中使用多选功能。但它没有用。

【问题讨论】：

哪一部分不是特别有效？如数据源未绑定？您选择的值是否未预设？该代码有助于尝试和跟踪问题，但您没有说明具体问题是什么。

@DavidShorthose ibb.co/Ln6zQ4w 请检查链接。这就是我得到的。

但是你又没有说/显示实际问题是什么（你只能从图像中得到这么多）。我可以看到多选在那里，但看起来它处于禁用状态，这是问题吗？

@DavidShorthose 我认为这是一个用户界面问题。我正在得到结果。但正如你所看到的多选结构，这对我来说是个问题。

@DavidShorthose 我的多选方法是否正确？因为我第一次尝试剑道..

【参考方案1】：

为了避免冗长的评论链。

从您提供的第二张图片看来，multiple 多选问题被添加到同一项目中。这是因为您将新的multiselect control 附加到相同的输入。

这确实是一个简单的修复。 有两种方法可以修复它。 1）销毁剑道小部件并重新创建它 2）假设在底层数据源中使用相同的结构，其他设置只是将新的数据源数据应用于小部件。

这是一个向您展示两个示例的道场：

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

就我个人而言，我会选择选项 2，因为它是一个 cleaner 解决方案，并且避免了不断销毁和重新创建小部件。

因此，如果您在第二个示例中更改所需的人员，它将从数据数组中获取随机数量的人员用于多选，然后将这些选项重新绑定到该控件。

因此，您对 ajax 调用所要做的就是一旦获得结果，只需将新数据应用到数据源，然后您就不需要像当前那样继续重新创建小部件。 所以在你的例子中：

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

这可确保您在附加新数据源之前清除所有选定的项目。

如果您需要有关正在发生的事情的更多信息。请询问，我会相应地更新我的答案。

【讨论】：

感谢您的回复..赞赏...:)

【参考方案2】：

以下代码对我有用：

 $(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
                        )