directive can't take a jqx-set-selection attribute - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular, Angular button group, angularjs, buttongroup, created, directive, isolated scope, jqx-instance, jqxbuttongroup, method, scope, setSelection

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

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

Author

directive can't take a jqx-set-selection attribute Posts

February 3, 2016 at 9:13 pm directive can't take a jqx-set-selection attribute #81090

david

Participant

I have a <jqx-button-group> directive defined in my application, and I would like to initialize it with the third button selected by default. In Jquery I would call $(‘#jqxButtonGroup’).jqxButtonGroup(‘setSelection’, 2); as described on your API page, immediately after initializing the widget, but I can’t find a similar function for the directive. Is there one?

February 4, 2016 at 8:06 am directive can't take a jqx-set-selection attribute #81109

Dimitar

Participant

Hello david,

Please take a look at this example that shows how to call the setSelection method in an AngularJS environment. I also suggest you refer to the tutorial jQWidgets Integration with AngularJS to learn how to invoke widget methods in this case.

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/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/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttongroup.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)
        {
            $scope.myButtonGroup = {};
            $scope.buttonGroupMode = 'radio';

            $scope.$on('jqxButtonGroupCreated', function (event, arguments)
            {
                $scope.myButtonGroup.setSelection(2);
            });
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-button-group jqx-mode="buttonGroupMode" jqx-instance="myButtonGroup">
            <button style="padding:4px 16px;">Left</button>
            <button style="padding:4px 16px;">Center</button>
            <button style="padding:4px 16px;">Right</button>
        </jqx-button-group>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

February 4, 2016 at 5:07 pm directive can't take a jqx-set-selection attribute #81130

david

Participant

Thanks Dimitar,

Here is my difficulty: I am trying to enclose the jqx-button-group directive inside my own directive with isolate scope using the controllerAs to access the directive controller. It takes an array of options and populates the button group with those options, a default “selected” option index, and a function to execute whenever a new option is selected. Here’s my directive as it stands, attempting to incorporate $on(‘jqxButtonGroupCreated’):


(function() {

    var filterSelector = function () {
        return {
            restrict: 'E',
            scope: {
                options: '=',
                selected: '@',
                onchange: '&'
            },
            controller: controller,
            controllerAs: 'fsc',
            bindToController: true,
            template: template
        }
    };

    var template =
        '<jqx-button-group ' +
        'jqx-instance="fsc.filterSelector" ' +
        'jqx-on-selected="fsc.onButtonClick(event)" ' +
        'jqx-settings="fsc.jqxSettings">' +
        '<button style="padding:4px 16px" ng-repeat="option in fsc.options"> ' +
        '{{option}}' +
        '<img ng-show="fsc.isSelectedOption(option)" style="margin-top:0px; margin-left:0px; height:10px" src="../js/thirdparty/jqwidgets/styles/images/check_black.png">' +
        '</button>'+
        '</jqx-button-group>',

    controller = function () {
        var fsc = this;

        fsc.onButtonClick = function (event) {
            fsc.updateFilter(event.args.index)
        }

        fsc.updateFilter = function (selectedIndex) {
            fsc.selected = selectedIndex;
            fsc.onchange({newValue: fsc.options[fsc.selected]})
        }

        fsc.isSelectedOption = function (option) {
            return option == fsc.options[fsc.selected]
        }

        fsc.jqxSettings = {
            mode: 'radio',
            theme: 'energyblue'
        }

        var init = function() {
            fsc.$on('jqxButtonGroupCreated', function (event, arguments) {
                fsc.filterSelector.setSelection(2)
            })
            fsc.updateFilter(fsc.selected)
        }();
    };

    var app = angular.module("app")
    app.directive('filterSelector', filterSelector)
}())

Unfortunately since the controller doesn’t have access to $scope, it cannot access $scope.$on. is it possible to inject $on into the directive’s isolate scope?

Thanks,
David

February 5, 2016 at 1:20 pm directive can't take a jqx-set-selection attribute #81170

Dimitar

Participant

Hi David,

Unfortunately, what you require cannot be achieved. The widget’s $scope cannot be accessed from your directive’s isolated scope.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.