jQuery UI Widgets Forums Grid Pager Position Problem with AngularJS

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Pager Position Problem with AngularJS #53617

    amul.sapkota
    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…

    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/

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

You must be logged in to reply to this topic.