如何在 Kendo UI 中使用双列表框

Posted 2023-05-07

【中文标题】如何在 Kendo UI 中使用双列表框

【英文标题】：How to use Dual Listbox with Kendo UI

【发布时间】：2014-05-10 20:24:39

【问题描述】：

如何在 Kendo UI 中创建 Dual Listbox 自定义小部件？

【参考方案1】：

假设您想将Bootstrap Dual Listbox 与 ASP.NET MVC 4 和 Kendo 框架结合使用。

我们将使用 Razor 语法和 C#。

首先，我们在视图中编写代码的占位符。我们将链接一个剑道控件和Bootstrap Dual Listbox

<script>
    var urlGetCascadeMultiSelectBrandTypeByBrand = "@(Url.Action("GetCascadeMultiSelectBrandTypeByBrand", "DropDownList"))";
</script>

<div class="col-md-12 col-sm-12 col-xs-12 padding-0 ">
    <div class="col-md-6 col-sm-6 col-xs-12">
        @html.LabelFor(m => m.BrandId)<br />
        @(Html.Kendo().DropDownListFor(m => m.BrandId)
    .DataSource(source =>
    
        source.Read(read =>
        
            read.Action("GetCascadeDdlBrandBySegment", "DropDownList")
                .Data("filterSegments");
        )
        .ServerFiltering(true);
    )
    .DataTextField("BrandName")
    .DataValueField("BrandId")
    .Filter(FilterType.Contains)
    .CascadeFrom("SegmentId")
    .OptionLabel("Select brand")
    .Events(evt => evt.Change("onBrandIdDdlChange"))
    .HtmlAttributes(new  @style = "width: 100%;" ))
        @Html.ValidationMessageFor(m => m.BrandId)
    </div>
    <div class="col-md-6 col-sm-6 col-xs-12">
        &nbsp;
    </div>
</div>

<div class="clear height10"></div>

<div class="col-md-12 col-sm-12 col-xs-12 padding-0 ">
    <div class="col-md-12 col-sm-12 col-xs-12">

        @Html.LabelFor(m => m.BrandTypeIdList)<br />
        @if (Model.IsEdit)
        
            @Html.ListBoxFor(m => m.BrandTypeIdList, Html.GetBrandTypeByBrandIdSelectListItemsList(Model.BrandId))

        
        else
        
            @Html.ListBoxFor(m => m.BrandTypeIdList, new List<SelectListItem>())
        

        @Html.ValidationMessageFor(m => m.BrandTypeIdList)
    </div>
</div>

然后，我们创建 C# 帮助代码来配合它。

public static IEnumerable<SelectListItem> GetBrandTypeByBrandIdSelectListItemsList(this HtmlHelper htmlHelper, int brandId)

    using (var dbContext = new Entities())
    
        return dbContext.BrandType.Where(x => x.Active == true && x.BrandId == brandId).Select(BrandTypeToDdlSelector).ToList();
    


public static Func<BrandType, SelectListItem> BrandTypeToDdlSelector

    get
    
        return (x => new SelectListItem()
        
            Value = x.BrandTypeId.ToString(),
            Text = x.Name
        );
    


public JsonResult GetCascadeMultiSelectBrandTypeByBrand(int? brandId)

    var brandTypesList = DbContext.BrandType.Where(p => p.Active == true);

    if (brandId != null)
    
        brandTypesList = brandTypesList.Where(p => p.BrandId == brandId);
    

    return Json(brandTypesList.Select(x => new  BrandTypeId = x.BrandTypeId, BrandTypeName = x.Name ), JsonRequestBehavior.AllowGet);

然后我们创建 JS 代码来在运行时操作 HTML 并将选定的值绑定到 MVC 模型。

var brandTypeIdDualListbox = new Object();

$(document).ready(function ()
   
    //we create the dual list control
    brandTypeIdDualListbox = $('select[name="BrandTypeIdList"]').bootstrapDualListbox(
    nonSelectedListLabel: 'Non-selected',
    selectedListLabel: 'Selected',
    preserveSelectionOnMove: 'moved',
    moveOnSelect: false,    
    );

    //we setup the change event for the control
    $('select[name="BrandTypeIdList').on('change', function (args)
    
        //we traverse every option
        $("#BrandTypeIdList option").each(function (index,element)
        
            //we check if the element has the `data-sortindex` attribute
            if (!!$(element).attr('data-sortindex'))
                $(element).attr('selected', 'selected');
            else
                $(element).removeAttr('selected');
        );
    )
);


function filterBrands()

    var brandId = $("#BrandId").val();
    if (brandId == "")
        brandId = "-1";
    return 
        BrandId: brandId
    ;


function populateBrandTypeIdDualListbox()

    $.getJSON(urlGetCascadeMultiSelectBrandTypeByBrand, filterBrands(), function (data)
    
        var items;
        $.each(data, function (i, item)
        
            brandTypeIdDualListbox.append("<option value=" + item.BrandTypeId/*Value*/ + ">" + item.BrandTypeName/*Key or Text*/ + "</option>");
        );
        brandTypeIdDualListbox.trigger('bootstrapDualListbox.refresh', true); // we refresh the control
    );


function onBrandIdDdlChange(evt)

    var brandIdDropDownList = $("#BrandId").data("kendoDropDownList");

    $('#BrandTypeIdList').empty();
    brandTypeIdDualListbox.trigger('bootstrapDualListbox.refresh', true);
    if ($("#BrandId").val() == "" || $("#BrandId").val() == "-1")
    
        //if no value is selected we disable the control
        $(".bootstrap-duallistbox-container").find("*").prop("disabled", true);
    
    else
    
        populateBrandTypeIdDualListbox();
        $(".bootstrap-duallistbox-container").find("*").prop("disabled", false); // we enable the control

    

【参考方案2】：

This article 展示了如何在 Kendo-UI 框架中创建自定义小部件。它还演示了如何将数据绑定到您的自定义小部件。

您可以动态创建小部件的各种组件（ListView、按钮等）并在自定义小部件的 init 方法中连接事件处理程序。也就是说，您不需要将 HTML 与所有组件混在一起（除非您愿意）。

【参考方案3】：

双列表框现在是 jquery 的默认 kendo Ui 的一部分

 $(document).ready(function () 
            $("#optional").kendoListBox(
                connectWith: "selected",
                toolbar: 
                    tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
                
            );

            $("#selected").kendoListBox();
        );

或.net mvc 版本

@(Html.Kendo().ListBox()
            .Name("optional")
            .Toolbar(toolbar =>
            
                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                toolbar.Tools(tools => tools
                    .MoveUp()
                    .MoveDown()
                    .TransferTo()
                    .TransferFrom()
                    .TransferAllTo()
                    .TransferAllFrom()
                    .Remove()
                );
            )
            .ConnectWith("selected")
            .BindTo(ViewBag.Attendees)
        )

        @(Html.Kendo().ListBox()
            .Name("selected")
            .BindTo(new List<string>())
            .Selectable(ListBoxSelectable.Multiple)
        )