jQuery UI Widgets Forums Lists DropDownList Enable select All option in JqxDropDownList with check true

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 4 months ago.

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

  • dineshnk
    Participant

    Hi,

    I am using below code to enable checkboxes in dropdownlist.

    $(“#testScenario”).jqxDropDownList({ selectedIndex: 1, checkboxes: true, source: sourceData, width: 200, height: 25});

    And working good. Do we have any option here like ‘Select All’ to check all the checkboxees here ?

    Thanks,
    dineshnk


    Nadezhda
    Participant

    Hello dineshnk,

    Here is an example which shows how to select all checkboxes in jqxDropDownList: http://jsfiddle.net/hs1twpqn/.

    Best Regards,
    Nadezhda

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


    dineshnk
    Participant

    Thanks for reply Nadezhda.

    I have already seen this one.But I mean to say that can we have select all option along-with the checkboxes option inside dropdown options?

    Thanks,
    Dineshnk


    Nadezhda
    Participant

    Hi Dineshnk,

    Here is an example which shows how to check all checkbox options inside the jqxDropDownList.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.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/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    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 jqxDropDownList
                    $("#jqxDropDownList").jqxDropDownList({ checkboxes: true, source: dataAdapter, displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25/*, filterable: true*/ });
    
                    $("#jqxDropDownList").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 = $("#jqxDropDownList").jqxDropDownList('getCheckedItems');
                                var checkedItems = "";
                                $.each(items, function (index) {
                                    checkedItems += this.label + ", ";
                                });
                                $("#checkedItemsLog").text(checkedItems);
                            }
                        }
                    });
                    // handle "Select All" item.
                    var handleCheckChange = true;
                    $("#jqxDropDownList").bind('checkChange', function (event) {
                        if (!handleCheckChange)
                            return;
                        if (event.args.label != '(Select All)') {
                            handleCheckChange = false;
                            $("#jqxDropDownList").jqxDropDownList('checkIndex', 0);
                            var checkedItems = $("#jqxDropDownList").jqxDropDownList('getCheckedItems');
                            var items = $("#jqxDropDownList").jqxDropDownList('getItems');
                            if (checkedItems.length == 1) {
                                $("#jqxDropDownList").jqxDropDownList('uncheckIndex', 0);
                            }
                            else if (items.length != checkedItems.length) {
                                $("#jqxDropDownList").jqxDropDownList('indeterminateIndex', 0);
                            }
                            handleCheckChange = true;
                        }
                        else {
                            handleCheckChange = false;
                            if (event.args.checked) {
                                $("#jqxDropDownList").jqxDropDownList('checkAll');
                            }
                            else {
                                $("#jqxDropDownList").jqxDropDownList('uncheckAll');
                            }
                            handleCheckChange = true;
                        }
                    });
                });
            </script>
            <div>
                <div style='float: left;' id='jqxDropDownList'>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.