ui-grid Data display issue

Question

I'm using ui-grid with my Cordova application. When I try to populate the ui-grid, sometimes data is displayed on the left like in the picture below:

Any help?

HTML

<div ui-grid="{data: gridOptions, columnDefs: gridColumns, paginationPageSize: 10, enableColumnMenus: false, enableHorizontalScrollbar : 0,
                enableVerticalScrollbar : 0}" ui-grid-auto-resize ui-grid-pagination class="grid_transmiss"> </div>

JS

$scope.gridColumns = [{
        field: 'ref',
        displayName: 'Référence'
      }, {
        field: 'Emq',
        displayName: 'Nombre de plots empilés'
      }, {
        field: 'charge',
        displayName: 'Charge nominale (daN)'

      }, {
        field: 'fp',
        displayName: 'Fréquence propre(Hz)'
      }, {
        field: 'attenuation',
        displayName: 'Atténuation(%)'
      }, {
        field: 'flechereel',
        displayName: 'Flèche réelle statique (mm)'
      }, {
        name: 'Courbe',
        displayName: 'Courbe',
        cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>'
      }];

what does your columnDefs in your gridOptions look like? – Rani Radcliff Aug 25 '16 at 17:24 — Rani Radcliff, Aug 25 '16 at 17:24

score 0 · Answer 1 · answered Aug 26 '16 at 13:20

Try defining your grid in your controller like this:

$scope.gridOptions = {
    columnDefs: [
        {
            field: 'ref', displayName: 'Référence', width: "*"
        },
      {
          field: 'Emq', displayName: 'Nombre de plots empilés', width: "*"
      },
      {
          field: 'charge', width: 110, displayName: 'Charge nominale (daN)'
      },
      {    field: 'fp', displayName: 'Fréquence propre(Hz)', width: "*" 
      },
      {
          field: 'attenuation', displayName: 'Atténuation(%)', width: "*"

      },
      {
          field: 'flechereel', displayName: 'Flèche réelle statique (mm', width: "*"


      },
      {
          field: 'Courbe', displayName: 'Release Courbe', width: "*",
          cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>'
      },
        ],
        showGridFooter: true,
        enableFiltering: true,
        enableSorting: false,
        enableColumnMenus: false,
        paginationPageSizes: [100, 120, 140],
        paginationPageSize: 100,
        enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
        enableGridMenu: false,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;

        }
};

Then in your HTML:

            <div ui-grid="gridOptions" class="grid" ui-grid-pagination ui-grid-exporter ui-grid-auto-resize></div>

Also, make sure you include 'uiGridConstants' in our controller definition like so:

    ContractorCtrl.$inject = ['$scope', '$interval', '$window', '$filter', 'uiGridConstants', '$q', '$timeout'];
function ContractorCtrl($scope, $interval, $window, $filter, uiGridConstants, $q, $timeout)

Let me know if this solves your issue.

score 0 · Answer 2 · answered May 06 '18 at 10:16

change your column definition according to below format. It will work.

$scope.gridOptions = {
                    columnDefs: [
                        {name:'clumnName', fields: 'DisplayValue', width: '20%'},
                        {name:'clumnName', fields: 'DisplayValue', width: '20%'},
                        {name:'clumnName', fields: 'DisplayValue', width: '20%'},

                    ],


                    data: $scope.DisplayDataSet,
                }

ui-grid Data display issue

2 Answers2