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

Angularjs custom directive not working Posts

May 5, 2015 at 9:41 am Angularjs custom directive not working #70648

iplan

Participant

Hi team,
I downloaded code from demo link:”http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/#demos/jqxangular/angularjs-datatable-custom-cell-template.htm”, while I execute the code Grid get displayed partially,”FirstName” column doesn’t display the values.

Am new to this angularjs + jqwidgets environment, I don’t know where I did mistake..

<!DOCTYPE html>
<html ng-app="demoApp" lang="en">
<head>
    <title id="Description">AngularJS DataTable with Custom Cell Template</title>
    <script src="jquery-1.11.1.js"></script>
    <script src="angular.min.js"></script>
    <link href="jqwidgets-ver3.8.0/jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    <script src="jqwidgets-ver3.8.0/jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets-ver3.8.0/jqwidgets/jqx-all.js"></script>
    <script src="jqwidgets-ver3.8.0/jqwidgets/jqxangular.js"></script>
    <script src="generatedata.js"></script>
    <script src="demo.js"></script>
    <script type="text/javascript">
        angular.module('simpleDirective', [])
        .directive('jqxName', function () {
            return {
                replace: true,
                template: "<a style='color: orange;'></a>",
                link: function link(scope, element, attrs) {
                    element.html(attrs.value);
                    element[0].href = "www.jqwidgets.com";
                }
            }
        });
        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: 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 jqx-settings="dataTableSettings"></jqx-data-table><br />
</body>
</html>

May 5, 2015 at 9:56 am Angularjs custom directive not working #70651

Peter Stoev

Keymaster

Hi iplan,

The demo is available online and it works – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/angularjs-datatable-custom-cell-template.htm?arctic. Make sure that you use the current version, because as you see the demo is marked as NEW which means that it demonstrates new functionality.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 5, 2015 at 10:03 am 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/”

May 5, 2015 at 10:06 am Angularjs custom directive not working #70654

Peter Stoev

Keymaster

Hi iplan,

The demo available in the download package is the same as the one which is online and it works. So I would suggest you to check again what you use and which scripts you include. Check also whether your browser has or has not cached your old scripts.

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.