Comment ne pas afficher la grid (ui-grid de AngularJs) quand il n'y a aucune donnée

Version imprimable

03/11/2015, 16h46
flamant

1 pièce(s) jointe(s)

Comment ne pas afficher la grid (ui-grid de AngularJs) quand il n'y a aucune donnée

Bonjour,

j'implémente une grid (ui-grid) dans le cadre de AngularJs.

Mon problème est qu'une partie de la grid s'affiche quand il n'y a pas de données

Pièce jointe 191747

Merci d'avance pour vos suggestions
03/11/2015, 18h38
slim

Salut!
http://plnkr.co/edit/156wBdD5ogLGcKamP3lJ?p=preview ?

Bonsoir Slim et merci pour ta réponse.

j'ai essayé ceci mais ça ne marche pas (je ne veux rien voir quand il n'y a pas de données)

Code:

1
2
3
4
5
6
7
 
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping  ng-show="!gridOptions.data.length" class="grid"></div>
 
OU 
<div ng-show="!gridOptions.data.length">
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping   class="grid"></div>
</div>

Pourtant dans mon controlleur, j'ai bien

Code:

1
2
3
4
5
 
        $scope.gridOptions = {
        	    enableFiltering: true,
                     ..........
        }

03/11/2015, 19h54
flamant

Re-bosoir,

excuse moi , j'ai oublié de dire ce qui n'allait pas

quand j'affiche ma page la grid est bien cache car au depart il n'y a pas de données, mais lorsque je fait une recherché avec des données, la grid est toujours invisible, à croire que la propriété "gridOptions.data.length" n'est pas rafraichie
03/11/2015, 20h44
slim

tu peux reproduire le problème sur le plunker que j'ai donné en exemple ?
03/11/2015, 21h08
flamant

Bonsoir Slim,

je vais essayer peut être pas tout de suite car je vais rentrer chez moi et diner. A plus
03/11/2015, 21h34
NoSmoking

Bonjour,
un axe de réflexion ng-show="!gridOptions.data.length".
04/11/2015, 09h19
flamant

1 pièce(s) jointe(s)

Bonjour à tous,

Slim, ça marche sur ton exemple. Pour mon application, ça marche à moitié:

1) Au depart quand je n'ai pas de données, la grid ne s'affiche pas

2) En revanche quand je fais une recherche et qu'il y a des données, la grid s'affiche mais les premières colonne sont décalées sur la gauche et les autres colonnes sont invisibles

Pièce jointe 191781
04/11/2015, 09h42
slim

Et bien le problème ne doit pas être l'affichage ou non du tableau, mais les options du grid.
Désolé mais j'ai du mal avec des captures d'écran. Rien ne vaut un exemple concret sur les systemes comme plunker, jsbin, jsfiddle...

Re-bonjour Slim

Voici mes options

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
        $scope.gridOptions = {
        	    enableFiltering: true,
        	    treeRowHeaderAlwaysVisible: false,
        	    data: [],
        	    columnDefs: [
        	      { name: 'blockAStatus',field: 'blockAStatus', displayName: 'A' , width: '4%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents {{COL_FIELD | rawValue | blockStatusClass}}" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'blockBStatus',field: 'blockBStatus', displayName: 'B' , width: '4%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents {{COL_FIELD | rawValue | blockStatusClass}}" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'blockCStatus',field: 'blockCStatus', displayName: 'C' , width: '4%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents {{COL_FIELD | rawValue | blockStatusClass}}" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'blockDStatus',field: 'blockDStatus', displayName: 'D' , width: '4%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents {{COL_FIELD | rawValue | blockStatusClass}}" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'blockEStatus',field: 'blockEStatus', displayName: 'E' , width: '4%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents {{COL_FIELD | rawValue | blockStatusClass}}" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'cfid',field: 'cfid', displayName: 'N° CF', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'asc' }, width: '10%', cellTemplate: '<span ng-if="row.groupHeader && col.grouping.groupPriority === row.treeLevel">{{COL_FIELD}}</span><span ng-if="!(row.groupHeader && col.grouping.groupPriority === row.treeLevel)">{{row.entity.partNumber}}</span>' },
        	      { name: 'csfLabel',field: 'csfLabel', displayName: 'Description', width: '30%', treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<span ng-if="row.groupHeader">{{COL_FIELD | rawValue}}</span><span ng-if="!(row.groupHeader)">{{row.entity.partDescription}}</span>' },
        	      { name: 'supplierSiteCode',field: 'supplierSiteCode', displayName: 'Manufactoring Site Code' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'vendorCode',field: 'vendorCode', displayName: 'Nissan Local code' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'supplierName',field: 'supplierName', displayName: 'Supplier Name' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'supplierSiteCodeCity',field: 'supplierSiteCodeCity', displayName: 'Town' , width: '10%' , treeAggregationType: uiGridGroupingConstants.aggregation.MAX, cellTemplate: '<div ng-if="row.groupHeader" class="ui-grid-cell-contents" >{{COL_FIELD | rawValue}}</div><div ng-if="!(row.groupHeader)" class="ui-grid-cell-contents" ></div>'},
        	      { name: 'partNumber',field: 'partNumber', visible: false },
        	      { name: 'partDescription',field: 'partDescription', visible: false }
        	    ],
        	    onRegisterApi: function( gridApi ) {
        	        $scope.gridApi = gridApi;
        	    }
        	  };

04/11/2015, 10h13
slim

c'est surement les width: 4%, 10% etc. qu'il faut modifier.
Mais là on avance qu'en tatonnant. Crée ton exemple sur un plunker. On perdra moins de temps :wink:

Bonjour,

j'ai trouvé la solution

Code:

1
2
3
4
 
<div data-ng-show="gridOption.data.length" >
   <div ui-grid="gridOption"  ui-grid-grouping ui-grid-resize-columns></div>
</div>