Search code examples
telerik-mvc

Retrieve Highlighted (Selected) options in Listbox (Telerik UI for Asp.net MVC)


I'm trying to find it if there is a way to get the "highlighted" options in the "optional" listbox in Telerik UI for Asp.Net MVC. I know that clicking on items in the option listbox triggers the "onChange" event for the listbox, but I can't figure out how to get the actual value of the highlighted items.

enter image description here

In the sample above, I wish to return Thomas Hardy and Christina Berglund, or at least their option ID's.

Here is my listbox definition:

                    @(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()
                            );
                        })
                        .Events(events => events
                        .Change("onChange"))
                        .ConnectWith("selected")
                        .Selectable(ListBoxSelectable.Multiple)
                        .Draggable()
                        .DropSources("selected")
                        .DataTextField("FullName")
                        .DataValueField("EmployeeCompanyId")
                        .DataSource(source => source
                            .Read(read => read.Action("GetEmployees", "Setup", new { area = "Admin" }))
                        )

                    )

Here is my onChange function:

    function onChange(e) {
    var item = e.sender.element;
}

Solution

  • Okay, I figured it out. I changed my "onChange" function to this:

       function onChange(e) {
        var item = e.sender.dataItem(e.sender.select());
    }