jQWidgets Forums

Forum Replies Created

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

Author

Posts

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

iplan

Participant

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

May 5, 2015 at 11:27 am in reply to: Jqwidgets grid – conflicting rowclick with button click event 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 10:03 am in reply to: Angularjs custom directive not working Angularjs custom directive not working #70653

iplan

Participant

Hi Peter,
Thanks for your quick support, am using New version(jqwidgets-ver3.8.0) only. Refer the screenshot :”http://postimg.org/image/jg1zvbxe1/”

April 29, 2015 at 1:13 pm in reply to: Button Click Event Not Fire in TreeGrid cell 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>

March 2, 2015 at 7:53 am in reply to: Multilanguage implementation on jqwidgets grid Multilanguage implementation on jqwidgets grid #67881

iplan

Participant

Hi peter,
As I tired with the following code, but column name not to be translates.

<!doctype html>
<html>
<head>
    <link href="jqx.base.css" rel="stylesheet" />
    <script src="jquery-1.11.1.js"></script>
    <script src="angular.min.js"></script>
    <script src="angular-translate.min.js"></script>
    <script src="jqx-all.js"></script>
    <script src="jqxangular.js"></script>
    <script src="script.js"></script>

</head>
<body>
    <div ng-app="testApp" ng-controller="testCtrl">
        <jqx-grid jqx-settings="settings"></jqx-grid>
         {{'id'|translate}}
         {{'name'|translate}}
         {{'age'|translate}}

        <button ng-click="btnenglish()" translate="btn_en">English</button>
        <button ng-click="btngerman()" translate="btn_gm">German</button>
    </div>
</body>
</html>
<!DOCTYPE html>

script.js

var translationsEN = {
    btn_en: 'English',
    id:'id-english',
    name: 'name-english',
    age:'age-english'
};

var translationsGM = {
    btn_gm: 'German',
    name: 'iplan-german',
    id: 'id-german',
    name: 'name-german',
    age: 'age-german'
};

var apptest = angular.module('testApp', ['jqwidgets', 'pascalprecht.translate']);

apptest.config(['$translateProvider', function ($translateProvider) {
  
    $translateProvider.translations('en', translationsEN);
    $translateProvider.translations('gm', translationsGM);
    $translateProvider.preferredLanguage('en');
    $translateProvider.fallbackLanguage('en');
    $translateProvider.fallbackLanguage('gm');
}]);

apptest.controller('testCtrl', ['$scope', '$translate', function ($scope, $translate) {

    $scope.btnenglish = function () {
        $translate.use('en');
    }

    $scope.btngerman = function () {
        $translate.use('gm');
    }

    $scope.people = [{
        id: 1,
        name: "Pedro",
        age: 13
    }, {
        id: 2,
        name: "Clara",
        age: 22
    }, {
        id: 3,
        name: "John",
        age: 33
    }, {
        id: 4,
        name: "Pier",
        age: 27
    }];
    $scope.settings = {
        altrows: true,
        width: 500,
        height: 150,
        source: $scope.people,
        columns: [{
            text: $translate('id'),
            dataField: 'id',
            width: 150
        }, {
            text: $translate('name'),
            dataField: 'name',
            width: 200
        }, {
            text: $translate('age'),
            dataField: 'age',
            width: 150
        }]
    }

}]);

March 2, 2015 at 7:05 am in reply to: Dynamic "DropDownButton" control creation Dynamic "DropDownButton" control creation #67863

iplan

Participant

Hi peter,
Thanks for your support, I referred the link, it is static control but need to create dynamic control(dropdown button).

Author

Posts

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