Move multiple items with checkboxes - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Move multiple items with checkboxes Posts

January 15, 2013 at 9:38 pm Move multiple items with checkboxes #13653

emeade

Member

I have two jqxlistboxes, source listbox and target listbox. Target listbox items also have checkboxes. I have buttons that allow the user to select multiple items in source listbox and move them to target listbox. I would like to do the same with target listbox but with checkboxes turned on I am unable to select an item – it only checks the checkbox. Our use case may be a little strange because we are submitting all items (checked and unchecked) in the target listbox. A checked checkbox designates the item as “expert”.

I tried enabling hasThreeStates and using the indeterminate state as the remove trigger but capturing indetermine items seems to be inconsistent. For example, when I move an item form source listbox to target listbox it does not have three states only two.

Ideally I would like to be able to select an item in target listbox independent of the checkbox. Is this possible? Do I need to set hasThreeStates to items when I move them from source to target?

January 16, 2013 at 7:06 am Move multiple items with checkboxes #13686

Peter Stoev

Keymaster

Hi emeade,

When the “checkboxes” property of jqxListBox is set to true, clicking on the list items will update the Check State. There is no selection in that mode. Could you send us a code which demonstrates how you move items from one ListBox to another?

Looking forward to your reply.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 16, 2013 at 2:25 pm Move multiple items with checkboxes #13704

emeade

Member

We are using this functionality in multiple forms so I’ve wrapped everything in a jQuery plugin. I’ve only included the relevant functions. The form is loaded in a jQuery modal…not sure if that is relevant.

Here is a screenshot of the form.

Delegate Button click:
$('div.list_buttons').on('click', function(event){ var clicked = $(event.target);


            	var addAll = clicked.hasClass('jqxlist_addAll') || clicked.parents().hasClass('jqxlist_addAll');

            	var removeAll = clicked.hasClass('jqxlist_removeAll') || clicked.parents().hasClass('jqxlist_removeAll');

            	var add = clicked.hasClass('jqxlist_add') || clicked.parents().hasClass('jqxlist_add');

            	var remove = clicked.hasClass('jqxlist_remove') || clicked.parents().hasClass('jqxlist_remove');
            	if (add){

	            	addItems(that.options.sourceObj.selector, that.options.targetObj.selector);

            	}

            	else if(remove){

            		removeItems(that.options.sourceObj.selector, that.options.targetObj.selector);

            	}

});

Add Item(s) by clicking right arrow. Even when I set item.hasThreeStates on add the newly added item only has two states.
addItems: function(source,target){ var items = $(source).jqxListBox('getSelectedItems');


        for (var i = 0; i < items.length; i++) {

        	item = items[i];

        	item.hasThreeStates = true;
              $(target).jqxListBox('addItem', item);

              $(source).jqxListBox('removeAt', items[i].index);

          };
          $(source).jqxListBox('clearSelection');

}

Remove Item(s) by clicking left arrow. Only removing items where checked is null because this is the indeterminate state.
removeItems: function(source,target){ var items = $(target).jqxListBox('getItems');

for (var i = 0; i < items.length; i++) { if (items[i].checked == null){ $(source).jqxListBox('addItem', { label: items[i].label, value: items[i].value }); $(target).jqxListBox('removeAt', items[i].index); } }; }

Basically, I need some way for users to remove items from the target listbox without using the checkbox. If I add a custom renderer to the target listbox that includes a remove button, would that work? Would I be able to capture a click of the button separate from checkbox selection?

Thanks for the quick reply!

January 18, 2013 at 8:13 am Move multiple items with checkboxes #13846

Peter Stoev

Keymaster

Hi emeade,

As a solution, take a look at the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery ListBox Sample</title>
    <link rel="stylesheet" href="../2.6/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxcheckbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var sourceS = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
		        ];
                var sourceT = [
                    "Espresso"
		        ];
                $("#source").jqxListBox({ source: sourceS, width: '200px', height: '200px', multiple: true });
                $("#target").jqxListBox({ source: sourceT, width: '200px', height: '200px', checkboxes: true, hasThreeStates: true });
                $("#add").jqxButton();
                $("#add").click(function () {
                    var items = $("#source").jqxListBox('getSelectedItems');
                    var selectedItemsLength = items.length;
                    var initTargetItemsLength = $("#target").jqxListBox('getItems').length;
                    for (var i = 0; i < items.length; i++) {
                        var item = items[i];
                        $("#target").jqxListBox('addItem', item);
                        $("#source").jqxListBox('removeAt', items[i].index);
                    };
                    $("#source").jqxListBox('clearSelection');
                    var targetItems = $("#target").jqxListBox('getItems');
                    for (var j = initTargetItemsLength; j < targetItems.length; j++) {
                        targetItems[j].hasThreeStates = true;
                    };
                });
                $("#remove").jqxButton();
                $("#remove").click(function () {
                    var items = $("#target").jqxListBox('getItems');
                    var length = items.length;
                    for (var i = 0; i < length; i++) {
                        var itemsU = $("#target").jqxListBox('getItems');
                        if (itemsU[0].checked == null) {
                            $("#source").jqxListBox('addItem', { label: itemsU[0].label, value: itemsU[0].value });
                            $("#target").jqxListBox('removeAt', 0);
                        }
                    };
                });
            });
        </script>
        <div id='source'>
        </div>
        <br />
        <div id='target'>
        </div>
        <div style="margin-top: 10px;">
            <input id="add" type="button" value="Add selected items" />
            <input id="remove" type="button" value="Remove items" />
            <div id="eventlog">
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.