ng-grid ne prend pas 100% de largeur sur le chargement de la page mais montre bien sur le redimensionnement

La ng-grille avec angular js ne pas prendre 100% de la largeur de chargement de page. Voici mon code:

    <tabs ng-cloak>
        <pane title="Test Plan">
            <tabs>
                <pane title="Include Tests">
                    <div ng-controller="includedTestPlanGridCntrl">
                        <div class="gridStyle" ng-grid="gridOptions"></div>
                    </div>
                </pane>
                <pane title="Excluded Tests">
                    <div ng-controller="excludedTestPlanGridCntrl">
                        <div class="gridStyle1" ng-grid="gridOptions"></div>
                    </div>
                </pane>
            </tabs>
        </pane>
        <pane title="Advanced Planning">
            Some text here
        </pane>
    </tabs>

La grille s'affiche correctement si je redimensionner.

source d'informationauteur vipulsharma

  1. 5

    Cela a fonctionné pour moi

    $scope.gridOptions = {
        data: 'gridData',
        init:function(grid,$scope) {
            setTimeout(function() {
                $scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
                    $scope.gridOptions.$gridScope,
                    $scope.gridOptions.ngGrid
                );
            },1000);
        }
    };

    Remplacer "gridOptions" avec la variable que vous utilisez et bingo!

  2. 4

    Essayez de régler une ng-si seulement inclure la grille quand il y a des données à afficher: (ng-hide ne fonctionne pas pour moi)

    <div class="gridStyle" ng-grid="gridOptions" ng-if="myViewModel.Data.length"></div>

    Source:
    https://github.com/angular-ui/ng-grid/issues/855

    Liés à la question: Lorsque ng-grille de changement de la visibilité de l'invisible au visible par ng-hide, grille largeur de ne pas être re-calculé

  3. 3

    J'ai eu le même problème en utilisant les onglets de Angulaire UI Bootstrap.

    La solution la plus simple est de déclencher l' resize événement sur un élément parent de ng-grille,

    de préférence, lorsque l'onglet contenant ng-grille est sélectionnée.

    La ng-grille de redimensionner correctement cet événement est déclenché.

    Utiliser quelque chose comme ceci:

    function onTabSelect() {
  $('.grid-container').trigger('resize');
}
  4. 2

    Vous pouvez utiliser les grilles ngGridLayoutPlugin (trouvé ici) et de l'appeler dans les contrôleurs de la fonction init.

        var layoutPlugin = new ngGridLayoutPlugin();


    $scope.init = function() {
        $scope.gridOptions = {
            plugins: [layoutPlugin],
        };


        window.setTimeout(function(){
            layoutPlugin.updateGridLayout();
        }, 100);

    };
  5. 1

    Dans le cas où si vous avez de gestionnaire d'après la grille est chargé, vous pouvez appeler une méthode qui se ré-affiche la grille lorsque la fenêtre est redimensionnée.

    gridApi.core.handleWindowResize()

    Ce qui pourrait vous aider à chaque fois que vous voulez l'appeler l'événement de redimensionnement manuellement.

  6. 0

    Ce changement serait beaucoup mieux en terme de charge CPU.

    Ligne 2904

    https://github.com/angular-ui/ng-grid/blob/a0d693e413e993145bff274375f1102770585e59/ng-grid-2.0.6.debug.js

    De:

        //we have to set this to false in case we want to autogenerate columns with no initial data.
    grid.lateBoundColumns = false;
    $scope.columns = [];
    grid.config.columnDefs = a;
    grid.buildColumns();
    grid.configureColumnWidths();
    grid.eventProvider.assignEvents();
    domUtilityService.RebuildGrid($scope, grid);
}, true);

    :

        //we have to set this to false in case we want to autogenerate columns with no initial data.
    grid.lateBoundColumns = false;
    $scope.columns = [];
    grid.config.columnDefs = a;
    grid.buildColumns();
    grid.configureColumnWidths();
    grid.eventProvider.assignEvents();
    setTimeout(function() {domUtilityService.RebuildGrid($scope,grid);}, 1);
}, true);
  7. 0

    Dans mon cas, j'ai déménagé ng-grille de la bibliothèque de scripts après tous les scripts, qui a changé arborescence DOM.
    En d'autres termes:

    avec le problème de l':

    <script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script src="jquery.mmenu.min.all.js"></script>

    résoudre le problème:

    <script src="jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
  8. 0

    J'espère que cela va sauver quelqu'un d'autre le temps que j'ai passé sur un travail autour de dans les scénarios où c'est toujours un problème. Pour moi, ma dernière largeur de la colonne est "*", et la coupure n'est pas un problème, l'utilisation d'un wrapper div œuvres. J'ai aussi été pas intéressé par un javascript délai d'expiration de la solution.

    HTML:

    <div class="gridWidthWrapper">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</div>

    Contrôleur:

    $scope.gridOptions = {
    data: 'dataList',
    columnDefs: [{field: 'type', displayName: 'Type', width: 120},
      {field: 'description', displayName: 'Description', width: '*'}]
  };

    CSS:

    .gridWidthWrapper {
    width: 100%;
    overflow: hidden;
}

.gridStyle {
/* width: 100%;  --- 100% not sizing on load - using gridWidthWrapper class to obtain 100% */
  width: 2000px;
  height: 150px;
}
  9. 0

    Vous êtes tous de bien compliqué, c'est pas la meilleure façon d'apporté des modifications dans le code source..

    Vient de s'ajouter à la div

    data-ng-show="myData.length"

    Où myData est la Grille, de source de données, s'assurer que les données de chargement asynchrone ou un ensemble $timeout sur les données de chargement de la méthode.

    Je sais ngGrid a une méthode appelée getPagedDataAsyncl'appel de JQuery document de prêt, certains comme ceci:

    $(function(){
   getPagedDataAsync(...)
});

    si vous n'êtes pas à la pagination de données, il suffit d'appeler vos données personnalisées méthode load de JQuery document de prêt.

    Espère que cela aide 🙂

    Ce qui concerne

  10. -1

    J'ai travaillé sur une solution pour cela.

    Il suffit d'ajouter les lignes suivantes dans le ng-grid.js à l'intérieur de la ng.EventProvider.

    setInterval(function() {
    domUtilityService.RebuildGrid($scope,grid);
}, 30);