Customizing ListBox

[Tim]

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

 

[Stoyan]

Hi Tim,

These requirements can be achieved although they do not come out-of-the-box with the ListBox Component.

To add checkboxes to the item 

1. Add an input of type checkbox to the item's template
2. Declare a 3 global variables 
   • a counter to prevent recursions when a selection is made in the onSelect handler
   • a userSelected flag to indicate whether the item was selected through the checkbox or by a regular click
   • a selected collection to persist previously selected items when adding new selections programmatically
3. Subscribe to the DataBound event of the ListBoxes to ensure the items are already populated

4. Then subscribe to change event of the inputs

5. If the checkbox is checked, set the userSelected flag to false to prevent items to get transferred with a click

6. Get the client-side instance of the ListBox and use its select method to select the item of the checked checkbox

7. Add the current selection to the selected collection to persist the selection if the user missclicks outside of the checkbox

8. Finally in the Change Event's handler persist the selection by passing the selected collection to it

To tranfer items on click

1. Subscribe to the Change Event of the ListBoxes
2. In the handler first clear the selection of their counterparts to ensure items aren't transferred by mistake
3. Add a conditional statement to check if the userSelected flag is up and the counter is less than 1
4. In the body of the conditional statement increase the counter and use the internal method _executeCommand. Pass it "transferTo" to transfer the selected items
5. Set the counter to 0 again

This is the code of the two approaches above:

<script id="customer-item-template" type="text/x-kendo-template">
    <span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>
    <input class="checkbox" id="#=data.ContactName#" type="checkbox" />
</script>
<script>
    var counter=0;
    var userSelected=true;
    var selected;
    function onSelectLeft(e){
        var right=$("#right").data("kendoListBox");
        right.clearSelection();
        if(!userSelected && counter<1){
            counter++;
            e.sender.select(selected)
        }
        if(userSelected && counter<1){
            counter++;
            e.sender._executeCommand("transferTo");
        }

        counter=0;
    }
    function onSelectRight(e){
        var left=$("#left").data("kendoListBox");
        left.clearSelection();
        if(userSelected && counter<1){
            counter++;
            e.sender._executeCommand("transferTo");
        }
        counter=0;
    }
    function onDataBoundLeft(e){
        $(".checkbox").off().change(function(e) {
            if(this.checked) {
                userSelected=false;
                var left=$("#left").data("kendoListBox");
                left.select($(e.currentTarget).parent().parent())
                selected=left.select();
            }
        });
    }
</script>

For your convenience I have applied the above to this Telerik REPL.

Please give these suggestions a try and let me know whether they are useful in the scenario at hand.

Regards,
Stoyan
Progress Telerik

[Tim]

This works great Stoyan! Thanks for your help.