jQuery UI Widgets Forums Plugins AngularJS directive can't take a jqx-set-selection attribute

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

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

  • david

    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?


    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">
        <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)
        <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>

    Best Regards,

    jQWidgets team


    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">' +
        controller = function () {
            var fsc = this;
            fsc.onButtonClick = function (event) {
            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) {
        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?


    • This reply was modified 8 years, 4 months ago by  david.


    Hi David,

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

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.