jQuery UI Widgets Forums Lists ComboBox checkboxes with an all/none option

This topic contains 7 replies, has 5 voices, and was last updated by  arkgroup 10 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • checkboxes with an all/none option #10926

    DaveC426913
    Member

    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?

    checkboxes with an all/none option #10932

    Dimitar
    Participant

    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,
    Dimitar

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

    checkboxes with an all/none option #10969

    DaveC426913
    Member

    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.

    checkboxes with an all/none option #13985

    cloudsurfer
    Member

    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.

    checkboxes with an all/none option #13993

    Peter Stoev
    Keymaster

    Hi cloudsurfer,

    When “checkboxes” is true, the input field is readonly by design.

    Best Regards,
    Peter Stoev

    jQwidgets Team
    http://www.jqwidgets.com

    checkboxes with an all/none option #49390

    arkgroup
    Participant

    I tried code for check all, but I don’t see Select All / None item in the list.
    Did I miss something?

    Thanks

    checkboxes with an all/none option #49508

    Dimitar
    Participant

    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,
    Dimitar

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

    checkboxes with an all/none option #49545

    arkgroup
    Participant

    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.

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

You must be logged in to reply to this topic.