jqxGrid: groupsrenderer: place a link / button and propagate click events - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular, angular grid, click, directive, grid, group, groupable, groupsrenderer, jqxgrid, ng-click

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

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

Author

jqxGrid: groupsrenderer: place a link / button and propagate click events Posts

July 6, 2015 at 8:34 am jqxGrid: groupsrenderer: place a link / button and propagate click events #73376

badera

Participant

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

July 6, 2015 at 12:03 pm jqxGrid: groupsrenderer: place a link / button and propagate click events #73392

Dimitar

Participant

Hello badera,

Please try this purely JavaScript solution:

<!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/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;
            $http({
                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
            });
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-grid jqx-create="createWidget" jqx-settings="gridSettings">
        <script type="text/javascript">
            function TEST(message) {
                alert('Hallo, ' + message + '.');
            }
        </script>
        </jqx-grid>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

July 6, 2015 at 12:17 pm jqxGrid: groupsrenderer: place a link / button and propagate click events #73395

badera

Participant

Thank you, Dimitar.

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

Author

Posts

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

You must be logged in to reply to this topic.