jQWidgets Forums

Tagged: Angular, angularjs, custom, directive, grid, jqxgrid, pager, paging

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years ago.

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

Author

Pager Position Problem with AngularJS Posts

April 27, 2014 at 11:48 am Pager Position Problem with AngularJS #53617

Participant

I’d gone through the AngularJS Directive Tutorials, and it works fine.
But, When I added the pager, the position of the pager is not in proper place (i.e bottom of the grid).Please anyone could help me…

April 28, 2014 at 6:20 am Pager Position Problem with AngularJS #53637

Dimitar

Participant

Hello amul.sapkota,

Thank you for your feedback. The grid directive requires a small modification for the pager to work properly. Here is the complete example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">
<head>
    <link rel="Stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
    <link rel="Stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.energyblue.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.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="../../demos/sampledata/generatedata.js"></script>
    <script type="text/javascript" src="ngJqxSettings.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["ngJqxsettings"])

        demoApp.controller('initController', function ($scope) {
            $scope.theme = "energyblue";
            $scope.data = generatedata(12);
            $scope.source =
            {
                localdata: $scope.data,
                datafields:
                [
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array"
            };
            $scope.dataAdapter = new $.jqx.dataAdapter($scope.source);
            $scope.gridWidth = 500;
            $scope.disabled = false;
            $scope.columns = [
                { text: 'Product Name', dataField: 'productname', width: 200 },
                { text: 'Quantity', dataField: 'quantity', width: 150, cellsformat: 'c2', cellsalign: 'right' },
                { text: 'Price', dataField: 'price', width: 150, cellsformat: 'c2', cellsalign: 'right' }
            ];
            $scope.buttonWidth = 100;

            $scope.reloadGrid = function () {
                $scope.data = generatedata(12);
            };
        });

        // jqxGrid custom directive
        demoApp.directive('ngJqxgrid', function ($interval, dateFilter) {
            function link(scope, element, attrs) {
                var isInitialized = false;
                var propertyToScopeArray = propertyToScope(attrs.ngJqxgrid);

                for (var p = 0; p < propertyToScopeArray.length; p++) {
                    var property = propertyToScopeArray[p].scopeVar;
                    eval("var " + property + " = scope." + property + ";");
                };
                var settings = eval("(" + attrs.ngJqxgrid + ")");

                $(document).ready(function () {
                    $(element[0]).jqxGrid(settings);
                    isInitialized = true;
                });

                scope.$watch("data", function (newValue, oldValue) {
                    if (isInitialized == true) {
                        scope.source.localdata = newValue;
                        scope.dataAdapter = new $.jqx.dataAdapter(scope.source);
                        $(element[0]).jqxGrid({ source: scope.dataAdapter });
                    };
                });
            };

            return {
                link: link
            };
        });
    </script>
</head>
<body ng-controller="initController">
    <div id="jqxGrid" ng-jqxgrid="{ theme: theme, source: dataAdapter, width: gridWidth, disabled: disabled, autoheight: true,
            editable: true,
            selectionmode: 'singlecell',
            columns: columns,
            pageable: true
             }">
    </div>
    <br />
    <div id="jqxButton" ng-jqwidgets="jqxButton" ng-jqxsettings="{ theme: theme, width: buttonWidth, height: 20 }"
        ng-click="reloadGrid()">
        <img style='position: relative; margin-top: 2px;' src="../../images/refresh.png" /><span
            style='margin-left: 4px; position: relative; top: -3px;'>Reload grid</span></div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.