Move ListBox items on double click

11 posts, 1 answers
  1. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 28 Jan Link to this post

    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)
     
    )
  2. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 28 Jan in reply to Michael Link to this post

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

     

  3. Tsvetomir
    Admin
    Tsvetomir avatar
    388 posts

    Posted 30 Jan Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  4. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 31 Jan in reply to Tsvetomir Link to this post

    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 + ")")
                }
                 
                });
            });
        }
  5. Tsvetomir
    Admin
    Tsvetomir avatar
    388 posts

    Posted 04 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 04 Feb in reply to Tsvetomir Link to this post

    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.
  7. Tsvetomir
    Admin
    Tsvetomir avatar
    388 posts

    Posted 06 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 06 Feb in reply to Tsvetomir Link to this post

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

     

     

     

  9. Tsvetomir
    Admin
    Tsvetomir avatar
    388 posts

    Posted 07 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Michael
    Michael avatar
    36 posts
    Member since:
    Sep 2014

    Posted 07 Feb in reply to Tsvetomir Link to this post

    @{
        ViewBag.Title = "Home Page";
    }
     
     
     
     
    @(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).

  11. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    388 posts

    Posted 08 Feb Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top