How to use Dual Listbox with Kendo UI

Question

How can I create a Dual Listbox custom widget in Kendo UI?

Answer 1

Dual list box is now part of the default kendo Ui for jquery

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

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

Or the .net mvc version

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

Answer 2

Let's say you want to use Bootstrap Dual Listbox in conjuction with ASP.NET MVC 4 and Kendo framework.

We will use the Razor syntax and C#.

First, we write in the view the placeholder for the code. We will be linking a kendo control and the 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>

Then, we create the C# helper code to go with it.

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

Then we create the JS code to manipulate the HTML at runtime and bind the selected values to the MVC model.

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

This article shows how to create custom widgets within the Kendo-UI framework. It also demonstrates how to bind data to your custom widget.

You can dynamically create the widget's various components (ListViews, buttons, etc.) and hook up event handlers within the custom widget's init method. That is, you don't need to clutter up your HTML with all the components (unless you want to).