Hi, 
I hope someone can help me with is. I used the basic usage example (from the demo page) and built upon this to be able to read data from my database and then capture both lists in my controller. List two works as expected, however when re-ordering list one, the list item index remains the same. 

View

Controller

Task 

Any help would be greatly appreciated, Thanks 

Rich

Dear Team,

I have been using Kendo Listbox for a while now and recently, i have come accross an issue with respect to vertical scroll issue in IE. The scroll bar scrolls back to top if any item in the end of the list box is selected which is little confusing as my users are unable to know whether the item is selected or not.

So, is there any fix available for this issue. Please let me know...

Thanks

I'm trying to put a listbox in a popup editor for a grid. However, whenever I do I get an error. It works fine in forms, base indexes, etc.

Here is an example of the listbox I'm creating. It's very simple and impossible for it to have any object issues/etc. This thing literally should have zero problems.

@(Html.Kendo().ListBox()
            .Name("optional")
            .Toolbar(toolbar =>
            {
                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                toolbar.Tools(tools => tools
                    .TransferTo()
                    .TransferFrom()
                    .TransferAllTo()
                    .TransferAllFrom()
                    .Remove()
                );
            })
            .ConnectWith("selected")
            .BindTo(new List<string>() { "Test", "Test 2" })
)

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

However, when it's placed inside a template in the EditorTemplates folder I get this javascript error:

kendo.all.js:9244 Uncaught TypeError: e.value is not a function
    at init.refresh (kendo.all.js:9244)
    at init.bind (kendo.all.js:8485)
    at r.applyBinding (kendo.all.js:9486)
    at r.bind (kendo.all.js:9436)
    at s (kendo.all.js:9579)
    at s (kendo.all.js:9588)
    at s (kendo.all.js:9588)
    at s (kendo.all.js:9588)
    at Object.a [as bind] (kendo.all.js:9603)
    at init.refresh (kendo.all.js:42964)

I have absolutely no idea why. Can anyone explain to my why this happens or more importantly - how to get a listbox inside the editor popup for a grid?

Hi there, Im using MVC 5 and really battling to populate the model with what is currently in the listbox. I have done some research and can see recommendations to use Ajax but surely this should be a basic model binding?

I can pass the selected items correctly back to the controller via the event on add however Im still lost how I can assign this to the DeviceList object within the model. Am I being silly? Many thanks :)

See Model :

    public class DeviceGroupDetailModel
    {
        public int Id { get; set; }
        [Display(Name = "Name")]
        public string Name { get; set; }
        public string Company { get; set; }
        public List<DeviceModelList> DeviceList { get; set; }


        public DeviceGroupDetailModel()
        {
            DeviceList = new List<DeviceModelList>();
        }
    }

See Razor :

(In Create.cshtml)

@using (Html.BeginForm("Create", "DeviceGroups", new { area = "" }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>New group details</h5>
                    </div>
                    <div class="ibox-content">
                        @Html.Partial("_DeviceGroupDetail", Model)
                        @Html.Partial("_DeviceList", Model)
                        <div class="form-group">
                            <div class="col-sm-10">
                                <button class="btn btn-primary" type="submit">Create group</button>
                                &nbsp;|&nbsp;
                                @Html.ActionLink("Cancel", "Index", "DeviceGroups", new { area = "" }, null)
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        var dataSource;
        $(document).ready(function () {
            dataSource = new kendo.data.DataSource({
                serverFiltering: false,
                transport: {
                    read: {
                        url: '@Url.Action("DeviceList_Read", "DeviceGroups")',
                    dataType: "json"
                }
            },
            requestStart: function () {
                kendo.ui.progress($("#alldevicesid"), true);
                kendo.ui.progress($("#selectedid"), true);
            },
            requestEnd: function () {
                kendo.ui.progress($("#alldevicesid"), false);
                kendo.ui.progress($("#selectedid"), false);
            },
            batch: false
        });

        dataSource.fetch(function () {
            var data = this.data();
            var alldevices = $("#alldevices").data("kendoListBox");
            var selected = $("#selected").data("kendoListBox");
            for (var i = 0; i < data.length; i++) {
                alldevices.add(data[i]);
                selected.add(data[i]);
            }
        });
    });

        function onSelectListBoxAdd (e) {
            //debugger
            $.ajax({
                type: "POST",
                url: "/DeviceGroups/SelectedDevices",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ selectedItems: $('#selected').data('kendoListBox').dataItems() }),
                dataType: "json",
                success: function (result) {
                    alert("Successfully sent to server: " + result.map(function (x) {
                        return x.SerialNumber
                    }))
                }
            });
    }
    </script>
}

(In DeviceList partial view)

<div id="alldevicesid" class="col-sm-3">
                        <label for="alldevices" id="all">All Devices</label>
                        @(Html.Kendo().ListBox()
                            .Name("alldevices")
                            .Toolbar(toolbar =>
                            {
                                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                                toolbar.Tools(tools => tools
                                    .TransferTo()
                                    .TransferFrom()
                                    .TransferAllTo()
                                    .TransferAllFrom()
                                );
                            })
                            .DataValueField("DeviceId")
                            .DataTextField("SerialNumber")
                            .Draggable(true)
                            .DropSources("selected")
                            .ConnectWith("selected")
                            .BindTo(new List<DeviceModelList>())
                            .Selectable(ListBoxSelectable.Multiple)
                        )
                    </div>

                    <div id="selectedid" class="col-sm-3">
                        <label for="selected">Selected Devices</label>
                        @(Html.Kendo().ListBox()
                                .Name("selected")
                                .Draggable(true)
                                .DropSources("alldevices")
                                .DataValueField("DeviceId")
                                .DataTextField("SerialNumber")
                                .ConnectWith("alldevices")
                                .BindTo(new List<DeviceModelList>())
                                //.BindTo(Model.DeviceList)
                                .Selectable(ListBoxSelectable.Multiple)
                                .Events(events => events
                                .Add("onSelectListBoxAdd"))
                        )
                    </div>

In Controller:

        public ActionResult SelectedDevices(List<DeviceModelList> selectedItems)
        {
            return Json(selectedItems);
        }

        private IEnumerable<DeviceModelList> GetDeviceList()
        {
            List<Device> devices = Managers.DeviceManager.GetList(DevicePart.VCM001, PaginationOptions.NoPaging()).Take(10).ToList();
            return Mapper.Map<IEnumerable<DeviceModelList>>(devices);
        }

        public ActionResult Create()
        {
            return View(new DeviceGroupDetailModel());
        }

        [HttpPost]
        public async Task<ActionResult> Create(DeviceGroupDetailModel model)
        {

        }

I am using VS 2017 CE.

While working on a views .cshtml, typing @(Html.Kendo().List does not have Intellisense show me a ListBox method.

There is documentation at http://docs.telerik.com/aspnet-mvc/helpers/listbox/overview, but no mention of 'newness'

Has it been added recently ? Might I have a broken installation ?

Hi,

I'm a beginner in the use of your framework.

I'm trying to use a listboxcontrol containing hours that I can select for 7 different days of the week.

When I oepn the window containing my listbox I refresh my columns with data already selected for the day I'm working on or reloading my listbox (if no data was saved.

Here is my function :

function onOpenRefresh(e) {

        var caseCochee = "";
        // On récupère la première case cochée
        if ($("#header-chb-lundi").is(':checked')) {
            caseCochee = "lundi";
        } else if ($("#header-chb-mardi").is(':checked')) {
            caseCochee = "mardi";
        } else if ($("#header-chb-mercredi").is(':checked')) {
            caseCochee = "mercredi";
        } else if ($("#header-chb-jeudi").is(':checked')) {
            caseCochee = "jeudi";
        } else if ($("#header-chb-vendredi").is(':checked')) {
            caseCochee = "vendredi";
        } else if ($("#header-chb-samedi").is(':checked')) {
            caseCochee = "samedi";
        } else if ($("#header-chb-dimanche").is(':checked')) {
            caseCochee = "dimanche";
        } else {
            alert("Vous n'avez pas choisi de jour !!!");
            return;
        }
        
        var sourceUrl = "@Url.Action("GetTranchesHoraires", "EngagementRadioSM")";
        var dataSource1 = new kendo.data.DataSource({
            transport: {
                read: sourceUrl,
                dataType: "jsonp"
            }
        });

        // On réinit nos deux listbox
        var listeTranches1 = $("#listbox1").data("kendoListBox");
        var listeTranches2 = $("#listbox2").data("kendoListBox");

        listeTranches1.setDataSource(dataSource1);
        listeTranches1.dataSource.read();
        listeTranches2.dataSource.data([]); // On vide à gauche
        // On crée un tableau trié
        var mesTranchesTrie = [];
        if (mesTranches.length > 0 && mesTranches.find(function (e) { return e.sweekDay === caseCochee; })) {
            debugger;
            mesTranchesTrie = mesTranches;
            mesTranchesTrie.sort(function (a, b) { return b["nid_tranche"] - a["nid_tranche"]; });
            var tranche = [];
            for (var k = 0; k < mesTranchesTrie.length; k++) {
                if (mesTranchesTrie[k].sweekDay == caseCochee) {
                    tranche.push({ nid_tranche_horaire: mesTranchesTrie[k].nid_tranche, slibelle: mesTranchesTrie[k].slibelle });
                }
            }
            debugger;
            var d2 = new kendo.data.DataSource({ data: tranche });
            d2.read();
            listeTranches2.setDataSource(d2);

            var d1 = listeTranches1.dataSource;
            var dret = new kendo.data.DataSource();
            for (var i = 0; i < d2._data.length; i++) {
                var idTanche2 = d2._data[i].nid_tranche_horaire;
                for (var j = 0; j < d1._data.length; j++) {
                    var idTanche1 = d1._data[j].nid_tranche_horaire;
                    if (idTanche2 != idTanche1) {
                        dret.add({ nid_tranche_horaire: d1._data[j].nid_tranche_horaire, slibelle: d1._data[j].slibelle });
                    }
                }
                d1 = dret;
                dret = new kendo.data.DataSource();
            }
            debugger;
            listeTranches1.setDataSource(d1);
        } else {
            debugger;
            listeTranches1.setDataSource(dataSource1);
            listeTranches1.dataSource.read(); // On remplit à droite
        }
    };

And here is my EngagementRadioSM function alloowing me to get the hours that I put in my Listbox:

public JsonResult GetTranchesHoraires()
        {
            List<TrancheHoraire> lls_ret = new List<TrancheHoraire>();
            var list = _context.P_GCC_GET_TRANCHES_HORAIRES();
            foreach (var line in list)
            {
                TrancheHoraire obj = new TrancheHoraire
                {
                    nid_tranche_horaire = line.nid_tranche_horaire,
                    slibelle = line.slibelle
                };
                obj.bisValid = false;
                lls_ret.Add(obj);
            }
            return Json(lls_ret, JsonRequestBehavior.AllowGet);
        }

mesTranches is an array where I put my data for the different selected hours and days.

My main problem is that I cannot reset my listbox 1 when I already have data for the selected day in mesTranches ...

Hope my explanation isn't too bad (I'm french ...)

Thanx a lot for your help

Antoine

I've started using the ListBox. I noticed today that when I reordered a list using the up/down buttons, that the order doesn't update to the dataSource. Which makes sense, but is there a way to loop through the contents of the ListBox, so can update back to the database the new order?

var selectedFields = $("#selectedFields").data("kendoListBox");
var dataSource = selectedFields.dataSource;

As you can see from the screenshots, CADWorx Id is listed 1st on the screen, but in the dataSource, it still shows Lg. Description 1st.

Thanks,

Neil

I have a dialog that has two linked listboxes:

@(Html.Kendo().Dialog()
        .Name("dlgEdit")
        .Title("Edit Batch")
        .Content("<div style='display: flex; flex-direction:row; align-content:flex-start; align-items:stretch;' style='width:100%;'>" +
            "<div style='display: flex; flex-direction: column; align-content:flex-start; width:48%; margin-right: 8px;'>" +
            "<h3>Department Keys</h3>" +
            "<div><input id='editSearch' type='text' placeholder='Search department keys' style='height: 28px; margin: 0; padding: 0;' onkeyup='filterDepts()'/>" +
            "<img src='" + @Url.Content("~/Images/x-mark.png") + "' style='width: 12px; margin-left: 4px; cursor: pointer;' onclick='filterClear()' /></div>" +
            Html.Kendo().ListBox()
                .Name("optional")
                .DataValueField("Value")
                .DataTextField("Text")
                .DataSource(source => source
                    .Custom()
                    .Transport(transport => transport
                        .Read(read => read
                            .Action("GetDepartments", "CouncilReport")
                        )
                    )
                )
                .DropSources("selected")
                .BindTo(new List<SelectListItem>())
                .Draggable(true)
                .Selectable(ListBoxSelectable.Single)
                .HtmlAttributes(new { title = "Department Keys", style = "flex: 1; width: 100%; margin-top: 8px;" })
                .ConnectWith("selected") + "</div>" +
            "<div style='flex: 1; display: flex; flex-direction: column; align-content:flex-start; padding: 0;'>" +
            "<h3>Batch Details</h3>" +
            "<form id='editForm'>" +
            "<input id='editDesc' type='text' placeholder='Batch name' style='height: 28px; margin: 0; padding: 0;' />" +
            "<input id='editId' type='hidden' />" +
            Html.Kendo().ListBox()
                .Name("selected")
                .DataValueField("Value")
                .DataTextField("Text")
                .Draggable(true)
                .DataSource(source => source
                    .Custom()
                    .Transport(transport => transport
                        .Read(read => read
                            .Action("GetBatchDepts", "CouncilReport")
                    )
                )
            )
            .DropSources("optional")
            .ConnectWith("optional")
            .HtmlAttributes(new { title = "Selected Keys", style = "width: 100%; height: 500px; margin-top: 8px;" })
            .BindTo(new List<SelectListItem>())
            .Selectable(ListBoxSelectable.Single) +
        "</form></div></div></div>"
    )
    .Width(1000)
    .Modal(true)
    .Visible(false)
    .Actions(actions =>
    {
        actions.Add().Text("Cancel");
        actions.Add().Text("OK").Primary(true).Action("onOkEdit");
    })
)

When I open the dialog I call a read() to reset the listboxes for the selected batch:

        var treeview = $("#treeview").data("kendoTreeView");
        var selected = treeview.select();
        var data = treeview.dataItem(selected);

        $("#editSearch").val("");
        $("#editId").val(data.id);
        $("#editDesc").val(data.Description);
        var opt = $("#optional").data("kendoListBox");
        var sct = $("#selected").data("kendoListBox");
        sct.dataSource.read();
        opt.dataSource.read({ id: data.id });
        $("#dlgEdit").data("kendoDialog").open();

Notice that I am passing the id into the read() method at this line:

opt.dataSource.read({ id: data.id });

I must not have something right because the parameter is never used and I get an error 500 from the server because there was no parameter passed to the action "GetBatchDepts".

Can someone please help me see what I am doing wrong?