Move ListBox items on double click

[Michael]

Hi, this seems like it should be easy to do, but all the suggestions I've tried have failed.  I simply want to move items from searchResults to Assigned when the user double clicks on an item in searchResults.  The examples I've seen have all been for Kendo for Jquery and I keep getting errors on the "wrapper" piece.

 

Any help would be appreciated.

@(Html.Kendo().ListBox()
    .Name("searchResults")
    .BindTo(new List<TPResourceVM>())
    .DataValueField("Id")
    .DataTextField("FullName")
    .HtmlAttributes(new { style = "height:600px;width:40%" })
    .Toolbar(toolbar =>
    {
        toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
        toolbar.Tools(tools => tools
            .TransferTo()
            .TransferFrom()
        );
    })
    .Selectable(ListBoxSelectable.Multiple)
    .ConnectWith("assigned")

)

@(Html.Kendo().ListBox()
    .Name("assigned")
    .HtmlAttributes(new { style = "height:600px;width:40%" })
    .DataValueField("Id")
    .DataTextField("FullName")
    .Selectable(ListBoxSelectable.Multiple)

)

[Michael]

SO I was able to figure out how to do it in case anyone else was interested.  I put the code in the databound event to ensure the control was initialized before I tried to bind to it.  In my case the Listboxes are on a pop up editor.

 

function onSearchResultsDataBound(e) {
   //Handle double clicks
       var listBoxA = $("#searchResults").data("kendoListBox");

       listBoxA.wrapper.find(".k-list").on("dblclick", ".k-item", function (e) {
           listBoxA._executeCommand("transferTo");
       });


   }

 

[Tsvetomir]

Hi Michael,

I have noticed that you have managed to resolve the case on how to transfer items on double click of the mouse. However, we have already prepared a Knowledge Base article which covers the same:

https://docs.telerik.com/kendo-ui/knowledge-base/listbox-move-double-click

Kind regards,
Tsvetomir
Progress Telerik

[Michael]

Thanks, I had seen that article, but the problem SEEMS to be because my Listboxes are in a popup edit form, I can't refer to the Listbox until the databound event fires.  I've solved my own issue, as I stated before by using your code, but doing it in on the databound event.  In addition, I've added a confirmation pop up as seen below.  My problem now, however, is I also want to add the remove button to the ListBox, but it seems as though the item is removed before I can even ask for the user to confirm.  I tried using e.preventDefault in a function I call from the .Remove() method, but then it won't remove it at all no matter what the user chooses on the confirm, and it also then won't allow the Remove from the double click.

 

function onAssignedDataBound(e) {
        var listBoxA = $("#assigned").data("kendoListBox");

        listBoxA.wrapper.find(".k-list").on("dblclick", ".k-item", function (e) {

        swal({
            title: "Confirm?",
            text: "Are you sure you want to remove this resource from the talent pool?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Confirm",
            cancelButtonText: "Cancel",
            closeOnConfirm: true,
            closeOnCancel: true
        }, function (isConfirm) {
            if (isConfirm) {
                listBoxA._executeCommand("remove");
                var itemCount = $("#assigned").data("kendoListBox").items().length;
                $('#assignedLabel').text("Assigned (" + itemCount + ")")
            }

            });
        });
    }

[Tsvetomir]

Hi Michael, 

It is expected the double click event to not be attached to the Kendo UI Listbox widgets because they are not initialized until the edit popup form opens. So, the solution would be to attach them in the DataBound event handler 

The Kendo UI Suite comes with a number predefined dialogs which provide the opportunity for easy customization. I have created a sample which shows how to remove an item only when the "Ok" button of a confirm box is selected:

https://dojo.telerik.com/IXuTiBAh/2

A live demo with the predefined dialogs can be found here:

http://https//demos.telerik.com/kendo-ui/dialog/predefined-dialogs


Best Regards,
Tsvetomir
Progress Telerik

[Michael]

Hi, I think I might now have been clear above.  I'm good with the double click confirmation, that works fine.  My issues now is I also want to add the remove button to the ListBox, but it seems as though the item is removed before I can even ask for the user to confirm.  I tried using e.preventDefault in a function I call from the .Remove() method, but then it won't remove it at all no matter what the user chooses on the confirm, and it also then won't allow the Remove from the double click.

[Tsvetomir]

Hi Michael, 

The remove event of the Kendo UI ListBox is not preventable. If you would like to show a confirmation before a deletion, handle the click event of the "Delete" button. Call the stopPropagation() method. This would not allow the ListBow to trigger the remove event. 

$("a[data-command='remove']").on("click", function(e){
  e.stopPropagation();
  kendo.confirm("Are you sure that you want to proceed?").then(function () {
    listBoxA._executeCommand("remove"); // Ok selected
  }, function () {
    kendo.alert("You chose to Cancel action.");
  });
})

I have attached the "click" event to the specific button on document.ready(). It is important to point out the ListBox has to be initialized before attaching the event.


Kind regards,
Tsvetomir
Progress Telerik

[Michael]

Thanks for the reply and I think I'm getting very close, but something still isn't right.  My double click on the item does get the confirmation, but just clicking on the remove button does not, and it simply removes the item.

function onAssignedDataBound(e) {
       var listBoxA = $("#assigned").data("kendoListBox");

       listBoxA.wrapper.find(".k-list").on("dblclick", ".k-item", function (e) {

           swal({
               title: "Confirm?",
               text: "Are you sure you want to remove this resource from the talent pool?",
               type: "warning",
               showCancelButton: true,
               confirmButtonColor: "#DD6B55",
               confirmButtonText: "Confirm",
               cancelButtonText: "Cancel",
               closeOnConfirm: true,
               closeOnCancel: true
           }, function (isConfirm) {
               if (isConfirm) {
                   listBoxA._executeCommand("remove");
                   var itemCount = $("#assigned").data("kendoListBox").items().length;
                   $('#assignedLabel').text("Assigned (" + itemCount + ")")
               }

           });
       });

       $("a[data-command='remove']").on("click", function (e) {
           e.stopPropagation();

           swal({
               title: "Confirm?",
               text: "Are you sure you want to remove this resource from the talent pool?",
               type: "warning",
               showCancelButton: true,
               confirmButtonColor: "#DD6B55",
               confirmButtonText: "Confirm",
               cancelButtonText: "Cancel",
               closeOnConfirm: true,
               closeOnCancel: true
           }, function (isConfirm) {
               if (isConfirm) {
                   listBoxA._executeCommand("remove");
                   var itemCount = $("#assigned").data("kendoListBox").items().length;
                   $('#assignedLabel').text("Assigned (" + itemCount + ")")
               }
           });
       });

   }

 

@(Html.Kendo().ListBox()
           .Name("assigned")
           .HtmlAttributes(new { style = "height:680px;width:45%" })
           .Toolbar(toolbar =>
           {
               toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
               toolbar.Tools(tools => tools
               .Remove()
               );
           })
           .DataValueField("Id")
           .DataTextField("FullName")
           .Events(e => e.DataBound("onAssignedDataBound"))
           .Selectable(ListBoxSelectable.Multiple)

       )

[Tsvetomir]

Hi Michael,

I have created a sample ASP.NET MVC project which has two ListBox widgets nested inside a panel bar. This would replicate the scenario in which the ListBox widgets are nested inside another container which prevents them from being initialized in the very beginning. I have also used the same library for the confirm message just before deleting the item.

Can you check what are the crucial differences between the attached project and the one on your side? Let me know in case the issue persists.


Regards,
Tsvetomir
Progress Telerik

[Michael]

@{
    ViewBag.Title = "Home Page";
}

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>



@(Html.Kendo().PanelBar()
                .Name("panelbar")
                .ExpandMode(PanelBarExpandMode.Single)
                .Items(panelbar =>
                {
                    panelbar.Add().Text("My Teammates")
                        .Expanded(true)
                        .Content(@<div style="padding: 10px;">
                            <div class="teamMate">
                                <h2>Andrew Fuller</h2>
                                <p>Team Lead</p>
                            </div>
                            <div class="teamMate">
                                <h2>Nancy Leverling</h2>
                                <p>Sales Associate</p>
                            </div>
                        </div>);

                      panelbar.Add().Text("ListBox Widgets")
                                .Content(@<text>
                                    @(Html.Kendo().ListBox()
                                            .Name("assigned")
                                            .HtmlAttributes(new { style = "height:680px;width:45%" })

                                            //.BindTo(ViewBag.Attendees)
                                            .DataValueField("Id")
                                            .DataTextField("FullName")
                                             .Toolbar(toolbar =>
                                            {
                                                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                                                toolbar.Tools(tools => tools
                                                    .TransferTo()
                                                    .TransferAllTo()
                                                    );
                                            })
                                            .DataValueField("ProductID")
                                            .DataTextField("ProductName")
                                            .DataSource(source => source
                                                .Read(r => r.Action("GetProducts", "ListBox"))
                                            )
                                            .Selectable(ListBoxSelectable.Multiple)
                                            .ConnectWith("selected")
                                    )
                                    @(Html.Kendo().ListBox()
                                            .Name("selected")
                                            .HtmlAttributes(new { style = "height:680px;width:45%" })
                                            .Toolbar(toolbar =>
                                            {
                                                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
                                                toolbar.Tools(tools => tools
                                                    .Remove()
                                                );
                                            })
                                            .Events(ev => ev.DataBound("onAssignedDataBound"))
                                            .BindTo(new List<string>())
                                            .Selectable(ListBoxSelectable.Multiple)
                                    )

                                    </text>);
                })
)
<script>
    function onAssignedDataBound(e) {
        var that = this;

        $("a[data-command='remove']").on("click", function (e) {
            e.stopPropagation();
            alert("In");
            //swal({
            //    title: "Are you sure?",
            //    text: "Once deleted, you will not be able to recover this imaginary file!",
            //    icon: "warning",
            //    buttons: true,
            //    dangerMode: true,
            //}).then((willDelete) => {
            //        if (willDelete) {
            //            that._executeCommand("remove"); // Ok selected
            //            swal("Poof! Your imaginary file has been deleted!", {
            //                icon: "success",
            //            });
            //        } else {
            //            swal("Your imaginary file is safe!");
            //        }
            //    });
        });
    }
</script>

Yes I was able to make changes to your application to mimic what is going on with mine.  It appears the problem occurs when the remove is on the right (as opposed to left) listbox.

 

In my scenario, the left listbox is populated as a result of a search, then the user is allowed to pull items from the left into the right, which ultimately becomes the collection associated with the parent object which is then updated. 

 

Once I added a toolbar on the right listbox, and moved the databound event to the right listbox, I observed the same behavior.  (FYI I removed the reference to swal because I think we might have different versions).

[Tsvetomir]

Hi Michael,

Thank you for elaborating on the exact scenario. 

In order to make sure that the click event is attached to the button, use the Change event of the ListBox. 

.Events(ev => ev.Change("onChange"))

And in the event handler instead of using "on" to attach the click event, use "one". This is due to the fact that if "on" is used, the click event will be attached each time the change event is raised:

function onChange(e) {
    var that = this;

    $("a[data-command='remove']").one("click", function (e) {

Try the suggestion above and let me know if the issue persists.


Best regards,
Tsvetomir
Progress Telerik