Jqwidgets grid - conflicting rowclick with button click event - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular, angularjs, cellsrenderer, click, directive, grid, jqxgrid, jqxTreeGrid, rowclick, tag, tree grid, treegrid

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

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

Author

Jqwidgets grid – conflicting rowclick with button click event Posts

May 4, 2015 at 11:00 am Jqwidgets grid – conflicting rowclick with button click event #70585

iplan

Participant

Hi team,
Am using jqwidgets grid with angularjs, I need to perform row click event and cellrendered edit button event sepearately. In my scenario edit button event conflict with rowclick event. am new to angular enabled jqwidget grid.

<!DOCTYPE html>
<html ng-app="jqxgridAngular">
<head>
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script src="angular.min.js"></script>
    <link href="jqx.base.css" rel="stylesheet" />
    <script src="jqx-all.js"></script>
    <script type="text/javascript">
        var app = angular.module('jqxgridAngular', ["jqwidgets"]);
        app.controller('StoryboardController', function ($scope) {
            $scope.sceneGrid = [
                             { "scid": 49, "scname": "Scene 1", "sctag": "SCN_1", "scrank": 1 },
                             { "scid": 50, "scname": "Scene 1.1", "sctag": "SCN_11", "scrank": 1 }
            ];
            //columns which is from stored procedure will be binds to tree grid
            $scope.source = {
                dataType: "json",
                dataFields: [ //Columns in the database that will bind to treegrid
                    { name: 'scid', type: 'number' },
                    { name: 'scname', type: 'string' },
                    { name: 'sctag', type: 'string' },
                    { name: 'scrank', type: 'int' }
                ],
                hierarchy: {
                    keyDataField: {
                        name: 'scid'
                    },
                    parentDataField: {
                        name: 'scid'
                    }
                },
                id: 'scid',
                localData: $scope.sceneGrid
            };

            //setting folder icon to root node
            $scope.dataAdapter = new $.jqx.dataAdapter($scope.source, {
                beforeLoadComplete: function (records) {
                    for (var i = 0; i < records.length; i++) {
                        //var imgUrl = "./images/folder.png";
                        //records[i].icon = imgUrl;
                    }
                    return records;
                }
            });

            $scope.dataAdapter.dataBind();
            // create Tree Grid
            $scope.sceneGridSettings =
            {
                height: 250,
                icons: true,
                width: "100%",
                editable: true,
                source: $scope.dataAdapter,
                sortable: true,
                filterable: true,
                filterMode: 'advanced',
                selectionMode: 'singleRow',
                columns: [
                    { text: 'scid', dataField: 'scid', editable: false, width: 110, hidden: true },
                    { text: 'Scene Name', dataField: 'scname', editable: false, width: 110 },
                    { text: 'sctag', dataField: 'sctag', editable: false, width: 110, hidden: true },
                    { text: 'Rank', datafield: 'scrank', width: 50, editable: true, align: 'right', cellsalign: 'right' },
                    {
                        text: '',
                        dataField: 'stid',
                        sortable: false,
                        editable: false,
                        filterable: false,
                        cellsrenderer: function (row, columnDataField, value) {
                            return '&nbsp;<button id="ed' + row + '" onclick="editScene(' + row + ');">Edit</button>'
                        },
                        width: 300
                    }
                ]
            };

            //display name in tooltip
            var rendererName = function (row, columnfield, value, defaulthtml, columnproperties) {
                return '<div class="col-xs-5" title="' + value + '" style="padding: 0"><span>' + value + '</span></div>'
            }

            // invoked when a row clicked
            $('#jqxSceneTreeGrid').on('rowClick', function (event) {
                console.log('Row Click Event Calling');
            });
        });

    </script>
</head>
<body ng-controller="StoryboardController">
    <script type="text/javascript">
        function editScene() {
            console.log('Edit button invoked');
        }
    </script>
    <jqx-tree-grid jqx-settings="sceneGridSettings" id="jqxSceneTreeGrid" jqx-instance="jqxSceneTreeGrid">
    </jqx-tree-grid>
</body>
</html>

May 5, 2015 at 5:54 am Jqwidgets grid – conflicting rowclick with button click event #70625

Dimitar

Participant

Hi iplan,

This approach for binding a click event to cellsrenderer buttons would not work in an Angular environment. Please note, however, that with the latest version of jQWidgets (3.8.0), you can add Angular directives and tags in cellsrenderer, as shown in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/angularjs-datatable-custom-cell-template.htm?arctic.

Best Regards,
Dimitar

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

May 5, 2015 at 11:27 am Jqwidgets grid – conflicting rowclick with button click event #70656

iplan

Participant

Hi Dimitar,
As I replaced with custom directive for button click code, but still have the same problem, row click and button click events conflicting.

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id="Description">AngularJS DataTable with Custom Cell Template</title>
    <script src="jqwidgets-ver3.8.0/scripts/jquery-1.11.1.min.js"></script>
    <script src="jqwidgets-ver3.8.0/scripts/angular.min.js"></script>
    <link href="jqwidgets-ver3.8.0/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    <script src="jqwidgets-ver3.8.0/jqwidgets/jqx-all.js"></script>
    <script src="../sampledata/generatedata.js"></script>
    <script type="text/javascript">
        angular.module('simpleDirective', [])
        .directive('jqxName', function () {
            return {
                replace: true,
                template: "<button></button>",
                link: function link(scope, element, attrs) {
                    element.html("View");
                    element[0].href = "www.jqwidgets.com";
                    element.bind("click", function () {
                        alert(attrs.value);
                    });
                }
            }
        });
        var demoApp = angular.module("demoApp", ["jqwidgets", "simpleDirective"]);
        demoApp.controller("demoController", function ($scope) {
            $('#jqxTreeGrid').on("rowClick", function (event) {
                console.log('row click');
            });

            var dataTable;
            $scope.data = generatedata(85);
            $scope.dataTableSettings =
            {
                source: {
                    localdata: $scope.data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ],
                    sortcolumn: 'firstname',
                    sortdirection: 'asc'
                },
                pageable: true,
                altRows: true,
                width: 650,
                editable: true,
                created: function (args) {
                    dataTable = args.instance;
                },
                columns: [
                  {
                      text: 'First Name', datafield: 'firstname', width: 180, cellsRenderer: function (row, columnDataField, value) {
                          return "<jqx-name data-value=" + value + "><jqx-name>";
                      }
                  },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', align: 'right', cellsalign: 'right' },
                ]
            };
        });
    </script>
</head>
 <body ng-controller="demoController">
    <jqx-data-table id="jqxTreeGrid" jqx-settings="dataTableSettings"></jqx-data-table><br />
</body>
</html>

May 5, 2015 at 12:39 pm Jqwidgets grid – conflicting rowclick with button click event #70660

Dimitar

Participant

Hi iplan,

Please check out the following working example:

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxscrollbar.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/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        angular.module('simpleDirective', [])
        .directive('jqxName', function () {
            return {
                replace: true,
                template: "<button style='width: 100%;'></button>",
                link: function link(scope, element, attrs) {
                    element.html('View');
                    element.on('click', function (event) {
                        $('#log').text('Button clicked.');
                    });
                }
            }
        });
        var demoApp = angular.module("demoApp", ["jqwidgets", "simpleDirective"]);
        demoApp.controller("demoController", function ($scope) {
            var dataTable;
            $scope.data = generatedata(85);

            $scope.dataTableSettings =
            {
                source: {
                    localdata: $scope.data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ],
                    sortcolumn: 'firstname',
                    sortdirection: 'asc'
                },
                pageable: true,
                altRows: true,
                width: 650,
                editable: true,
                created: function (args) {
                    dataTable = args.instance;
                },
                columns: [
                  {
                      text: 'First Name', datafield: 'firstname', width: 80, cellsRenderer: function (row, columnDataField, value) {
                          return "<jqx-name data-value=" + value + "><jqx-name>";
                      }
                  },
                  { text: 'Last Name', dataField: 'lastname', width: 200 },
                  { text: 'Product', dataField: 'productname', width: 180 },
                  { text: 'Quantity', dataField: 'quantity', align: 'right', cellsalign: 'right' },
                ],
                rowClick: function (event) {
                    if (event.args.dataField !== 'firstname') {
                        $('#log').text('Row clicked.');
                    }
                }
            };
        });
    </script>
</head>
<body ng-controller="demoController">
    <jqx-data-table jqx-settings="dataTableSettings"></jqx-data-table>
    <br />
    <div id="log">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

May 5, 2015 at 12:55 pm Jqwidgets grid – conflicting rowclick with button click event #70661

iplan

Participant

Hi Dimitar,
It works fine. Thanks for your wonderful support.

Author

Posts

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

You must be logged in to reply to this topic.