Question

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

Answer 1

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

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

Answer 2

我们假设您希望将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

    }
}

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

如何使用双列表框与Kendo UI

3 个答案: