jqxDropDownList with checkboxes - AngularJS two-way data binding - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angularjs, checkChange, jqxcheckbox, jqxDropDownList, ng-model, ng-repeat

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 8 years, 5 months ago.

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

Author

jqxDropDownList with checkboxes – AngularJS two-way data binding Posts

June 2, 2016 at 8:16 pm jqxDropDownList with checkboxes – AngularJS two-way data binding #84843

dbed

Participant

Is it possible to get two-way data binding working with the jqx-drop-down-list with checkboxes enabled (i.e. multiselect dropdown)?

I’ve tried referencing my scope object with the ng-model directive but cannot get the controller to see the changes when the user selects different values:

<jqx-drop-down-list jqx-settings="settings" ng-model="testmodel"></jqx-drop-down-list>

Thank you

June 3, 2016 at 12:17 pm jqxDropDownList with checkboxes – AngularJS two-way data binding #84870

Dimitar

Participant

Hello dbed,

Please refer to the section Using ngModel of the help topic jQWidgets Integration with AngularJS. Please also take a look at our AngularJS integration demo featuring jqxDropDownList with checkboxes: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/angular-dropdownlist/angularjs-dropdownlist-checkboxes.htm?light.

Best Regards,
Dimitar

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

June 3, 2016 at 2:04 pm jqxDropDownList with checkboxes – AngularJS two-way data binding #84884

dbed

Participant

Hi Dimitar,
In the example I see the expression for the checkedItems in the source:

<div style="font-size: 13px; font-family: Verdana; margin-top: 10px;">{{checkedItems}}</div>

However, I’m not seeing any value get displayed. Also if I look in F12 developer tools, I don’t see the scope variable getting updated either. It just stays as “”

Thanks again

June 6, 2016 at 5:22 am jqxDropDownList with checkboxes – AngularJS two-way data binding #84913

Dimitar

Participant

Hi dbed,

Thank you for your feedback. Here is an updated, properly working, version of our demo:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.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/jqxdata.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/jqxangular.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {
            var source = [
                "Affogato",
                "Americano",
                "Bicerin",
                "Breve",
                "Café Bombón",
                "Café au lait",
                "Caffé Corretto",
                "Café Crema",
                "Caffé Latte",
                "Caffé macchiato",
                "Café mélange",
                "Coffee milk",
                "Cafe mocha",
                "Cappuccino",
                "Carajillo",
                "Cortado",
                "Cuban espresso",
                "Espresso",
                "Eiskaffee",
                "The Flat White",
                "Frappuccino",
                "Galao",
                "Greek frappé coffee",
                "Iced Coffee",
                "Indian filter coffee",
                "Instant coffee",
                "Irish coffee",
                "Liqueur coffee"
            ];
            $scope.dropDownListInstance = {};
            $scope.checkedItems = "";
            $scope.eventData = "";

            // Create a jqxListBox
            $scope.settings = {
                width: 200, source: source, checkboxes: true, height: 25,
                created: function (args) {
                    var instance = args.instance;
                    $scope.dropDownListInstance = instance;
                    instance.checkIndex(0);
                    instance.checkIndex(1);
                    instance.checkIndex(2);
                    instance.checkIndex(5);
                }
            };

            $scope.checkChange = function (event) {
                var args = event.args;
                if (args.checked) {
                    $scope.eventData = "Checked: " + args.label;
                }
                else {
                    $scope.eventData = "Unchecked: " + args.label;
                }

                var items = $scope.dropDownListInstance.getCheckedItems();
                var checkedItems = "";
                $.each(items, function (index) {
                    if (index < items.length - 1) {
                        checkedItems += this.label + ", ";
                    }
                    else checkedItems += this.label;
                });
                $scope.checkedItems = checkedItems;
            };
        });
    </script>
</head>
<body ng-controller="demoController">
    <jqx-drop-down-list jqx-settings="settings" jqx-on-check-change="checkChange(event)"></jqx-drop-down-list>
    <div style="font-size: 13px; font-family: Verdana; margin-top: 20px;">{{eventData}}</div>
    <div style="font-size: 13px; font-family: Verdana; margin-top: 10px;">{{checkedItems}}</div>
</body>
</html>

Best Regards,
Dimitar

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

June 14, 2016 at 4:13 pm jqxDropDownList with checkboxes – AngularJS two-way data binding #85103

dbed

Participant

Thanks Dimitar, I was able to get it working based on the info you provided.

One more question about this approach though: I have the jqxDropDown widget inside a repeating div (using ng-repeat). When the checkChange() function gets called, would it be possible to also pass the index of the repeating div as well? I’ve tried including $index but it is always coming up as undefined (I’m guessing maybe because jqx-on-check-change isn’t a native angularjs directive?).

Thanks again for the help

June 15, 2016 at 5:04 am jqxDropDownList with checkboxes – AngularJS two-way data binding #85114

Dimitar

Participant

Hi dbed,

You can get information about the HTML element (div) that triggered the checkChange event from the event.target argument. If this does not help you, please share your code and we will try to assist you in another way.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.