jQuery UI Widgets Forums Plugins AngularJS jqxGrid: groupsrenderer: place a link / button and propagate click events

This topic contains 2 replies, has 2 voices, and was last updated by  badera 9 years ago.

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

  • badera

    Dear all

    I have a jqxgrid with grouping and a groupsrenderer function. I need to be able to place a clickable ui element (e.g. a link or a button) inside the groups header. But how can I manage to bring the click event out to my scope – i.e. the scope, in which <jqx-grid> is placed? I tried different things:

    1) $emit
    Idea: Since the directive jqxgrid has its own scope, I should be able to fire an event to the parent scope (which is the scope containing the grid), catch the event an call my function.

    groupsrenderer: function (text, group, expanded) {
        return '<button ng-click="$emit(\'TEST\', \'test...\')">Activate</button>';
    $scope.$on("TEST", function(event, message) {
        alert("hallo " + message);

    However, this does not work. Why?

    2) using own directive

    groupsrenderer: function (text, group, expanded) {
        return '<my-directive></my-directive>';

    According the example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/angularjs-datatable-custom-cell-template.htm, I tried to make my own directive and put it in the grouping header. But it seems, that this does not work; the directive template seems not to be evaluated / the DOM is not populated.

    Can somebody help me on this? – I really need a solution.
    Thanks in advance.
    – badera


    Hello badera,

    Please try this purely JavaScript solution:

    <!DOCTYPE html>
    <html ng-app="demoApp">
        <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/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/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.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, $http) {
                $scope.createWidget = false;
                    method: 'get',
                    url: '../sampledata/beverages.txt'
                }).success(function (data, status) {
                    // prepare the data
                    var source =
                        datatype: "json",
                        datafields: [
                            { name: 'name', type: 'string' },
                            { name: 'type', type: 'string' },
                            { name: 'calories', type: 'int' },
                            { name: 'totalfat', type: 'string' },
                            { name: 'protein', type: 'string' }
                        id: 'id',
                        localdata: data
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    $scope.gridSettings =
                        width: 850,
                        source: dataAdapter,
                        columnsresize: true,
                        groupable: true,
                        groupsrenderer: function (text, group, expanded) {
                            var message = 'user';
                            return '<button onclick="TEST(\'' + message + '\')">Activate</button>';
                        columns: [
                          { text: 'Name', datafield: 'name', width: 250 },
                          { text: 'Beverage Type', datafield: 'type', width: 250 },
                          { text: 'Calories', datafield: 'calories', width: 180 },
                          { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                          { text: 'Protein', datafield: 'protein', minwidth: 120 }
                    // now create the widget.
                    $scope.createWidget = true;
                }).error(function (data, status) {
                    // Some error occurred
        <div ng-controller="demoController">
            <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings">
            <script type="text/javascript">
                function TEST(message) {
                    alert('Hallo, ' + message + '.');

    Best Regards,

    jQWidgets team


    Thank you, Dimitar.

    OK, this is the last possibility, if nothing else works. (But for sure not that nice…)
    – badera

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

You must be logged in to reply to this topic.