jQuery UI Widgets › Forums › Lists › ComboBox › checkboxes with an all/none option
Tagged: all, checkboxes, combobox, item, jqxComboBox, none, select
This topic contains 7 replies, has 5 voices, and was last updated by arkgroup 10 years, 8 months ago.
-
Author
-
So, I managed to get this combo-with-checkboxes widget going.
My picker allows you to pick from a selection of ‘order statuses’ (eg. Created, Editing, Ready, Done, Cancelled). You can pick as many or as few as you like, and it will filter the records based on your selection.
I had to use hand-rolled local data, since my server won’t allow me to open a local data file such as customer.txt – but I’ll worry about that later. This is a short, fixed list of options anyway.
I ripped out all the logging and metadata stuff, since I won’t need it.
My entire code comes down to this:
<div id="widgetCombo-Status"></div>
function initWidgetComboStatus(){ var source = new Array( {status:'All statuses'}, {status:'Created', value:0}, {status:'Editing', value:1}, {status:'Submitted', value:2}, {status:'Cancelled', value:3}, {status:'Processing',value:4}, {status:'Ready', value:5}, {status:'Delivery', value:6}, {status:'Completed', value:7} ); // Create a jqxComboBox $("#widgetCombo-Status").jqxComboBox({ checkboxes: true, source: source, selectedIndex: 0, displayMember: 'status', width: '258', height: '20px', theme: 'curo-widgets' }); $("#widgetCombo-Status").jqxComboBox('checkIndex', 0);};
What I want to do is add that first “Select All / None” choice to the list as a special case.
Checking All/None will check ALL options (and change the display to say ‘All Statuses’). Checking it again will UNcheck everything in the list (and change the display to say ‘Select Statuses’).But the widget is quite self-contained; you guys have taken care of all the click/check/display logic for me. How do I override its current behaviors?
I know I can do this:
$('#widgetCombo-Status').bind('checkChange', handleWidgetComboStatus );
but how will that override the default logic? Won;t it just collide with it, giving unpredictable results?
Hello DaveC426913,
Here is and implementation of a “Select All / None” item in jqxComboBox. The example is based on the demo Checkboxes.
<!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 id='Description'>In this demo is illustrated how to display checkboxes next to the ComboBox items. The combobox's input field in this mode is readonly.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var url = "../sampledata/customers.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'CompanyName' }, { name: 'ContactName' } ], id: 'id', url: url, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#jqxWidget").jqxComboBox({ checkboxes: true, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25, theme: theme }); // bind to the checkChange event. $("#jqxWidget").bind('checkChange', function (event) { if (event.args) { var item = event.args.item; if (item) { var valueelement = $("<div></div>"); valueelement.html("Value: " + item.value); var labelelement = $("<div></div>"); labelelement.html("Label: " + item.label); var checkedelement = $("<div></div>"); checkedelement.html("Checked: " + item.checked); $("#selectionlog").children().remove(); $("#selectionlog").append(labelelement); $("#selectionlog").append(valueelement); $("#selectionlog").append(checkedelement); var items = $("#jqxWidget").jqxComboBox('getCheckedItems'); var checkedItems = ""; $.each(items, function (index) { checkedItems += this.label + ", "; }); $("#checkedItemsLog").text(checkedItems); } } }); // handle "Select All / None" item. var handleCheckChange = true; $("#jqxWidget").bind('checkChange', function (event) { if (!handleCheckChange) return; if (event.args.label != 'Select All / None') { handleCheckChange = false; $("#jqxWidget").jqxComboBox('checkIndex', 0); var checkedItems = $("#jqxWidget").jqxComboBox('getCheckedItems'); var items = $("#jqxWidget").jqxComboBox('getItems'); if (checkedItems.length == 1) { $("#jqxWidget").jqxComboBox('uncheckIndex', 0); } else if (items.length != checkedItems.length) { $("#jqxWidget").jqxComboBox('indeterminateIndex', 0); } handleCheckChange = true; } else { handleCheckChange = false; if (event.args.checked) { $("#jqxWidget").jqxComboBox('checkAll'); } else { $("#jqxWidget").jqxComboBox('uncheckAll'); } handleCheckChange = true; } }); }); </script> <div> <div style='float: left;' id='jqxWidget'> </div> <div style="float: left; margin-left: 20px; font-size: 13px; font-family: Verdana;"> <div id="selectionlog"> </div> <div style='max-width: 300px; margin-top: 20px;' id="checkedItemsLog"> </div> </div> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks! That was a little more thorough than I was expecting!
So, the way you’re avoiding recursion is with that handleCheckChange flag? That way changing the state of a checkbox doesn’t start a cascade of changes. I see.
I’m making a few changes.
An easy one: Better to test a fixed value rather than a slippery label:
var source = new Array( {status:'Select All / None', <span style="color: red;">value:-1</span>}, {status:'Created', value:0}, ... etc. );
…then…
function handleWidgetComboStatus(e){ console.log(e); if (!handleCheckChange) return; if (<span style="color: red;">e.args.value >= 0</span>) {
(Sorry, haven’t figured out how to style text within a code block. I was just trying to highlight the important changes in red.)
Not so easy:
The label ‘Check All/None’ should never appear in the display. You would see either ‘All’, or ‘None’, and it would never be combined with other values.I’ll work on it and let you know if I get stumped.
Peter,
It is mentioned, Combobox’s inputfield is readonly. How can I overcome the readonly option? such that I will get “multiple search dropdown” functionality.
Hi cloudsurfer,
When “checkboxes” is true, the input field is readonly by design.
Best Regards,
Peter StoevjQwidgets Team
http://www.jqwidgets.comI tried code for check all, but I don’t see Select All / None item in the list.
Did I miss something?Thanks
Hello arkgroup,
You should add the item to the data source, too. In the case of customers.txt, like so:
[{"CompanyName":"","ContactName":"Select All / None","ContactTitle":"","Address":"","City":"","Country":""},{"CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Country":"Germany"}, ...
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar,
Thanks.
One more thing. When I check just one item, for example: Ana Trujillo, checkedItemsLog shows Select All / None, Ana Trujillo. Why Select All / None shows up?Thanks again.
-
AuthorPosts
You must be logged in to reply to this topic.