jQuery UI Widgets Forums Lists DropDownList Need to Implement Check all in JqxDropDownlist.

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

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

  • ajayetw2009
    Participant

    Hi Sir/Mam,

    Need to Implement Check all and filter in JqxDropDownlist and Check-all CheckBox should be inside Dropdownlist with filter please suggest me.

    Thanks with Regards,
    Rinku


    Nadezhda
    Participant

    Hello Rinku,

    Here is an example which shows how to check all checkboxes and how to apply filter row in 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").jqxDropDownList('checkIndex', 0);
                    // subscribe to the checkChange event.
                    $("#jqxDropDownList").on('checkChange', function (event) {
                        if (event.args) {
                            var item = event.args.item;
                            if (item) {
                                var valueelement = $("<div></div>");
                                valueelement.text("Value: " + item.value);
                                var labelelement = $("<div></div>");
                                labelelement.text("Label: " + item.label);
                                var checkedelement = $("<div></div>");
                                checkedelement.text("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);
                            }
                        }
                    });
                    $("#jqxDropDownList").jqxDropDownList('checkAll');
                });
            </script>
            <div>
                <div style='float: left;' id='jqxDropDownList'>
                </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,
    Nadezhda

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


    ajayetw1987
    Participant

    Hi Sir/Mam,

    I need check all like this:

    Thanks with regards,
    Rinku


    ajayetw1987
    Participant

    Hi Sir/Mam,

    I need check all like this demo:
    http://jsfiddle.net/Dimitar_jQWidgets/axujkwrv/

    Thanks with regards,
    Rinku


    Nadezhda
    Participant

    Hi Rinku,

    Here is an example with implementation of a “Select All” item in jqxDropDownList. I hope it would be helpful.

    <!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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.