Using Bootstrap grid row/columns, the listbox will not stay within the bounds of the column it is contained in.  Further, I have tried to limit it's width in CSS and it refuses.  What needs to be set to get this to conform to standard layout rules?  We are using HTMLHelper code to generate the listboxes.

Just as the title states I'd like to add a tooltip or even title to the options in the listbox. So that when a uses hovers the option the tip appears. The first Listbox binding is done on a SelectListItem List.

                @(Html.Kendo().ListBox()
                .Name("lbOptions")
                .ConnectWith("lbSelectedOptions")
                .Selectable(ListBoxSelectable.Multiple)
                .Toolbar(toolbar =>
                {
                    toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                    toolbar.Tools(tools => tools
                        .TransferTo()
                        .TransferFrom()
                        .TransferAllTo()
                        .TransferAllFrom()
                    );
                })
                .BindTo(ViewBag.Lists)
            )<!--End of lbProjects listbox-->
                @(Html.Kendo().ListBox()
                .Name("lbSelectedOptions")
                .BindTo(new List<SelectListItem>())
                .ConnectWith("lbOptions")
                .Selectable(ListBoxSelectable.Multiple)
            )<!--End of lbSelectedProjects listbox-->

I have

@(Html.Kendo().TreeView()
    .Name("treeviewAvail")

...and...

 @(Html.Kendo().ListBox()
      .Name("listboxAvail")

How can I 'have both of those so that I can drag/drop from either into another list box?  (It's not needed to go the other way.)

@(Html.Kendo().ListBox()
    .Name("listboxSelected")

I've seen this topic, but it does not handle what I need for TreeView too

https://www.telerik.com/forums/listbox-drag-and-drop-1557506

Hi

We are having a grid with editable field option which triggers when you click on the field.

I wanted to enable tab functionality so that if you are on any field and click tab it should make the next field enable/editable.

When I am clicking on any field to show like this. On tab press I wanted make Charlotte editable.

ANY help appreciated. Thanks!

Right now, I have a ListBox on a ASP.NET Core MVC application that has some "clonky" behavior.  When I press the "Up/Down" arrows to reorder the contents of the ListBox, it redirects over to the controller then loads an "Edit" view then when I save the Edit result (item index) and it directs back to the view with the ListBox.  This is not a good user experience.

Instead, I want to push the up/down arrow and have it perform the update without it redirecting over to the Controller/Edit page.  How do I accomplish this?

                <div class="container">
                    @(Html.Kendo().ListBox()
                        .Name("listBox")
                        .DataTextField("Name")
                        .DataValueField("Id")
                        .DataSource(source =>
                            source.Read(read =>
                                read.Action("IndexJson", "SessionOptionItems").Data("gridGetData"))
                        )
                        .TemplateId("item-template")
                        .Toolbar(toolbar =>
                        {
                            toolbar.Position(ListBoxToolbarPosition.Right);
                            toolbar.Tools(tools => tools
                                .MoveUp()
                                .MoveDown()
                                .Remove()
                                );
                        })
                        .Events(events => events
                            .Reorder("onReorder")
                            .Remove("onRemove"))
                        .HtmlAttributes(new { style = "height:550px;width:530px" })
                        .BindTo(new List<SessionOptionTemplate>()))
                </div>

    function onReorder(e) {
        //alert("onReorder");

        $("#isbusy").show();

        var dataSource = e.sender.dataSource;
        var element = e.sender.select();
        var dataItem = e.sender.dataItem(element[0]);

        //alert("id: " + dataItem.Id);
        //alert("name: " + dataItem.Name);

        var index = dataSource.indexOf(dataItem) + e.offset;

        //alert("index: " + index);

        var url = '@Url.Action("Edit", "SessionOptionItems")?id=' + dataItem.Id + '&order=' + index + '@Model.GetUrlParameters("&")';
        // Replace &amp with & as the above encoding step changes & to &amp.
        window.location.href = url.replace(/&/g, "&");
    }

This demo with 2 list boxes and the transfer buttons is the exact use case that I have. I'm trying to make it less work for the users since there will be several employees to select. I would like to avoid having to click the transfer button after clicking each employee or having to remember to control click to select more than one.

I tried to use a template to make the items checkboxes, but the checkboxes were rendered as text fields.

I also tried defining the change event to click on the transferTo link whenever an item is selected.

$('a[data-command="transferTo"]').click();

When an item is clicked, ALL of the list items are transferred instead of the one that was clicked.

Is there any way to do either of the following?

1. Make the list items checkboxes. Clicking the transfer button will transfer all of the checked items.

2. Transfer an item to the other listbox when it is clicked.

If not I think I will use plain HTML select elements.

Thanks

Is there a way to drag and drop from one ListBox to any number of other ListBoxes? I have a use case where I have a list of items and I want to be able to drag those items to any one of multiple other ListBoxes to assign them to a group. The documentation and examples show being able to drag to ony one other ListBox.  

Has anyone done this before and can point me to some example code?

Thank you!

Hello,

I create a ListBox that I bind to a list of SelectListItem. In this list i use the Group property. But i don't know how to render groups in Html.Kendo().ListBox()

I'm using mvc core and Telerik.UI.for.ASP.Net.Core version 2021.2.511 package

Regards

I have a ListBox with a Row Template that contains a Button.  There is no guarantee that the user will press the button for the "selected" item in the ListBox.  So, I need to capture the Data Item in the ListBox that is related to the button that was pressed.  How do I accomplish this?  

Thanks for your help, 

Joel

Note:  My goDetail script currently just grabs the listBox control and posts for the selected item.  It doesn't post based on the Row that contained the Button that fired the event.