jQuery UI Widgets Forums Grid Jqwidgets grid – conflicting rowclick with button click event

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

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

  • 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>

    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/


    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>

    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/


    iplan
    Participant

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

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

You must be logged in to reply to this topic.