jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years ago.

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

Author

Button Click Event Not Fire in TreeGrid cell Posts

April 28, 2015 at 9:39 am Button Click Event Not Fire in TreeGrid cell #70364

iplan

Participant

Hi,

I have created a treegrid and 4 cusom buttons. Edit, Delete, AddChild, AddSibling. If am click any of the above 4 button row click event only fire instead of particular button events. Please find the code below and give me the solution.

<!DOCTYPE html>
<html ng-app="jqxgridAngular">
<head>
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="angular.min.js"></script>
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <script src="jqwidgets/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, "scstatus": "D", "scwork": 60, "sclevel": 1 },
                             { "scid": 50, "scname": "Scene 1.1", "sctag": "SCN_11", "scrank": 1, "scstatus": "D", "scwork": 30, "sclevel": 2 },
                             { "scid": 51, "scname": "Scene 2", "sctag": "SCN_2", "scrank": 2, "scstatus": "D", "scwork": 4, "sclevel": 1 },
                             { "scid": 52, "scname": "Scene 3", "sctag": "SCN_3", "scrank": 3, "scstatus": "D", "scwork": 15, "sclevel": 1 },
                             { "scid": 53, "scname": "Scene 4", "sctag": "SCN_4", "scrank": 4, "scstatus": "D", "scwork": 30, "sclevel": 1 },
                             { "scid": 54, "scname": "Scene 4.1", "sctag": "SCN_41", "scrank": 1, "scstatus": "D", "scwork": 15.5, "sclevel": 2 },
                             { "scid": 55, "scname": "Scene 4.1.1", "sctag": "SCN_411", "scrank": 1, "scstatus": "D", "scwork": 8, "sclevel": 3 },
                             { "scid": 56, "scname": "Scene 4.1.2", "sctag": "SCN_411", "scrank": 2, "scstatus": "D", "scwork": 8, "sclevel": 3 },
                             { "scid": 57, "scname": "Scene 5", "sctag": "SCN_411", "scrank": 5, "scstatus": "D", "scwork": 2, "sclevel": 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' },
                    { name: 'scstatus', type: 'string' },
                    { name: 'scwork', type: 'number' },
                    { name: 'sctarget', type: 'date' },
                    { name: 'sclevel', type: 'number' }
                ],
                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',
                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: 'Status', dataField: 'scstatus', editable: false, width: 110 },
                    { text: 'Work', dataField: 'scwork', editable: false, width: 70 },
                    { text: 'Target', dataField: 'sctarget', editable: false, width: 110 },
                    { text: 'Level', dataField: 'sclevel', editable: false, width: 110, hidden: true },
                    {
                        text: '',
                        dataField: 'stid',
                        sortable: false,
                        editable: false,
                        filterable: false,
                        cellsrenderer: function (row, columnDataField, value) {
                            return '&nbsp;<button id="ed' + row + '" ng-click="editScene(' + row + ');">Edit</button>' +
                                   '&nbsp;<button id="de' + row + '" ng-click="deleteScene(' + row + ');">Delete</button>' +
                                   '&nbsp;<button id="ac' + row + '" ng-click="AddChild(' + row + ');">Add Child</button>' +
                                   '&nbsp;<button id="as' + row + '" ng-click="AddSibling(' + row + ');">Add Sibling</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');
            });

            // invoked when a add child button clicked
            $scope.AddChild = function () {
                console.log('Add Child Function Calling');
            }

            // invoked when a add child button clicked
            $scope.AddSibling = function () {
                console.log('Add Sibling Function Calling');
            }

            //invoked when a delete icon is clicked
            $scope.deleteScene = function (sceneID) {
                console.log('Delete Event Fire : ' + sceneID);
            }

            //invoked when the edit icon is clicked
            $scope.editScene = function (sceneID) {
                console.log('Edit Event Fire : ' + sceneID);
            }
        });

    </script>
</head>
<body ng-controller="StoryboardController">
    <jqx-tree-grid jqx-settings="sceneGridSettings" id="jqxSceneTreeGrid" jqx-instance="jqxSceneTreeGrid">
    </jqx-tree-grid>
</body>
</html>

April 28, 2015 at 9:55 am Button Click Event Not Fire in TreeGrid cell #70365

Peter Stoev

Keymaster

hi iplan,

See: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-command-column.htm?arctic. This is how Clicks should be handled. cellsRenderer is expected to return plain HTML to replace the default rendering of the widget. You cannot attach events there.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 29, 2015 at 1:13 pm Button Click Event Not Fire in TreeGrid cell #70443

iplan

Participant

Hi Peter Stoev,

Thanks for your reply. In the above condition i edit the column rank. after complete my edit i want call some function. how to fire it. I need in Angular.js. I tried in cellendedit event but not fire. please find the code below.

<!DOCTYPE html>
<html ng-app="jqxgridAngular">
<head>
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="angular.min.js"></script>
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <script src="jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        var app = angular.module('jqxgridAngular', ["jqwidgets"]);
        app.controller('StoryboardController', function ($scope) {
            var data = [
                              { "scid": 49, "scname": "Scene 1", "sctag": "SCN_1", "scrank": 1, "scstatus": "D", "scwork": 60, "sclevel": 1, "plugin1": true, "plugin2": false },
                              { "scid": 50, "scname": "Scene 1.1", "sctag": "SCN_11", "scrank": 1, "scstatus": "D", "scwork": 30, "sclevel": 2, "plugin1": false, "plugin2": true },
                              { "scid": 51, "scname": "Scene 2", "sctag": "SCN_2", "scrank": 2, "scstatus": "D", "scwork": 4, "sclevel": 1, "plugin1": true, "plugin2": true },
                              { "scid": 52, "scname": "Scene 3", "sctag": "SCN_3", "scrank": 3, "scstatus": "D", "scwork": 15, "sclevel": 1, "plugin1": false, "plugin2": false },
                              { "scid": 53, "scname": "Scene 4", "sctag": "SCN_4", "scrank": 4, "scstatus": "D", "scwork": 30, "sclevel": 1, "plugin1": false, "plugin2": true },
                              { "scid": 54, "scname": "Scene 4.1", "sctag": "SCN_41", "scrank": 1, "scstatus": "D", "scwork": 15.5, "sclevel": 2, "plugin1": true, "plugin2": true },
                              { "scid": 55, "scname": "Scene 4.1.1", "sctag": "SCN_411", "scrank": 1, "scstatus": "D", "scwork": 8, "sclevel": 3, "plugin1": true, "plugin2": false },
                              { "scid": 56, "scname": "Scene 4.1.2", "sctag": "SCN_411", "scrank": 2, "scstatus": "D", "scwork": 8, "sclevel": 3, "plugin1": false, "plugin2": false },
                              { "scid": 57, "scname": "Scene 5", "sctag": "SCN_411", "scrank": 5, "scstatus": "D", "scwork": 2, "sclevel": 1, "plugin1": true, "plugin2": false }
            ];
            $scope.sceneGrid = data;
            $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' },
                    { name: 'scstatus', type: 'string' },
                    { name: 'scwork', type: 'number' },
                    { name: 'sctarget', type: 'date' },
                    { name: 'sclevel', type: 'number' }
                ],
                hierarchy: {
                    keyDataField: {
                        name: 'scid'
                    },
                    parentDataField: {
                        name: 'scid'
                    }
                },
                id: 'scname',
                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 = "";
                        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',
                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: 'Status', dataField: 'scstatus', editable: false, width: 110 },
                    { text: 'Work', dataField: 'scwork', editable: false, width: 70 },
                    { text: 'Target', dataField: 'sctarget', editable: false, width: 110 },
                    { text: 'Level', dataField: 'sclevel', editable: false, width: 110, hidden: true },
                    {
                        text: '',
                        dataField: 'stid',
                        sortable: false,
                        editable: false,
                        filterable: false,
                        cellsrenderer: function (row, columnDataField, value) {
                            return '&nbsp;<button id="ed' + row + '" ng-click="editScene(' + row + ');">Edit</button>' +
                                   '&nbsp;<button id="de' + row + '" ng-click="deleteScene(' + row + ');">Delete</button>' +
                                   '&nbsp;<button id="ac' + row + '" ng-click="AddChild(' + row + ');">Add Child</button>' +
                                   '&nbsp;<button id="as' + row + '" ng-click="AddSibling(' + row + ');">Add Sibling</button>';
                        },
                        width: 300
                    }
                ]
            };

            $("#jqxSceneTreeGrid").on('cellendedit', function (event) {
                alert('1');
                var args = event.args;
                $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });

            var valuchange = function (row, columnfield, value, defaulthtml, columnproperties) {
                console.log(value);
            }
            //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');
            });

            // invoked when a add child button clicked
            $scope.AddChild = function () {
                console.log('Add Child Function Calling');
            }

            // invoked when a add child button clicked
            $scope.AddSibling = function () {
                console.log('Add Sibling Function Calling');
            }

            //invoked when a delete icon is clicked
            $scope.deleteScene = function (sceneID) {
                console.log('Delete Event Fire : ' + sceneID);
            }

            //invoked when the edit icon is clicked
            $scope.editScene = function (sceneID) {
                console.log('Edit Event Fire : ' + sceneID);
            }
        });

    </script>
</head>
<body ng-controller="StoryboardController">
    <jqx-tree-grid jqx-settings="sceneGridSettings" id="jqxSceneTreeGrid" jqx-instance="jqxSceneTreeGrid">
    </jqx-tree-grid>
</body>
</html>

April 29, 2015 at 3:37 pm Button Click Event Not Fire in TreeGrid cell #70449

Peter Stoev

Keymaster

Hi iplan,

cellEndEdit is not supposed to be raised when a Button is clicked. This event is raised when an Editor which is in Edit mode exits the Edit mode. From your code, it seems that you did not even take a look at the sample I posted you.

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.