Discussion :

[flamant]

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



Merci d'avance pour vos suggestions

[slim]

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

[flamant]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[slim]

tu peux reproduire le problème sur le plunker que j'ai donné en exemple ?

[flamant]

Bonsoir Slim,

je vais essayer peut être pas tout de suite car je vais rentrer chez moi et diner. A plus

[NoSmoking]

Bonjour,
un axe de réflexion ng-show="!gridOptions.data.length".

[flamant]

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

[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...

[flamant]

Re-bonjour Slim


Voici mes options

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
        	    }
        	  };

[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

[flamant]

Bonjour,

j'ai trouvé la solution

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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