UI-Grid nicht 100% der Breite auf die Seite laden

Bin ich mit dem ui-grid zum anzeigen von Daten in der Tabelle. wenn ich das laden der Seite und lassen Sie für einige Sekunden und klicken Sie dann auf die Registerkarte (die mit ui-grid), die ui-grid-css Pause. es zeigt nicht die Breite des ui-grid-100% der container.aber wenn ich das laden der Seite und klicken Sie einfach auf die Registerkarte (mit ui-grid). ui-grid zeigt perfekt, ich meine die Breite, die 100% der container. Ich weiß nicht, was das problem ist.dies ist der code, an dem ich arbeite :

Js:

$scope.gridOptions= {
            enableFiltering: true,
            enableGridMenu : true,
            enableRowSelection: true,
            enableSelectAll: true,

            selectionRowHeaderWidth: 50,
            //rowHeight: 35,
            //infiniteScrollRowsFromEnd: 50,
            //infiniteScrollUp: true,
            infiniteScrollDown: true,
            columnDefs : [
              { displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'},
              { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}},
              { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} }
            ]
}

Html:

<div class="grid m-b-20" ui-grid="gridOptions" ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll>
</div>

Hinweis: ui-grid ist im inneren Angular bootstrap-Registerkarte

und hier ist der snapshot der Zusammenbruch grid :

UI-Grid nicht 100% der Breite auf die Seite laden

Was passiert, wenn Sie die Größe des browser-Fensters? Mag eine dumme Frage sein, aber ich hatte dieses Problem einmal. Vielleicht schauen Sie hier für ein workaround: stackoverflow.com/questions/24157824/...
wenn ich die Größe browser-Fenster, das es funktioniert !!!

InformationsquelleAutor Mukund Kumar | 2015-04-21

12

Verwenden Sie eine animation, die beim laden der Seite - vielleicht eine Registerkarte oder ein modales? Wenn ja, dann die übliche Abhilfe ist, die wir verwenden in der modal-tutorial: http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

Das problem ist, dass das raster nicht reagieren, es wird die Größe auf "Rendern". Wenn Sie haben nicht eine Feste Größe, die es bekommt, es aus der container-Größe. Wenn Sie Ihren container animiert an der Zeit, die Größe kann nicht die Reale Größe.
- Dass mein problem gelöst mit grids in ui-tabs. Dank
InformationsquelleAutor PaulL

  $timeout(function () {
                $scope.gridApi.core.handleWindowResize();

            }, 500);
            $scope.gridApi.core.refresh();

Dieser hat den job für mich.

InformationsquelleAutor SReddy

verwenden $Umfang.gridApi.core.handleWindowResize(); diese Methode in Intervall-Zeit, um dieses problem zu lösen

onRegisterApi: function(gridApi) {
        $scope.gridApi = gridApi;
        $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
        //$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter);
        gridApi.selection.on.rowSelectionChanged($scope, function(row) {
            $scope.selectedUser = row.entity.dev_id;
            console.log(row);
            console.log(row.grid.selection.lastSelectedRow.isSelected);
            /*$http.get('./api/ioni_developers/' + $scope.selectedUser).then(function(response) {
                if(row.grid.selection.lastSelectedRow.isSelected === true){
                    $scope.data.dev_id = response.data.dev_id;
                    $scope.data.dev_name = response.data.dev_name;
                    $scope.data.dev_email = response.data.dev_email;
                    $scope.selected = false;           
                }else{
                    $scope.data.dev_id = '';
                    $scope.data.dev_name = '';
                    $scope.data.dev_email = '';
                    $scope.selected = true;
                }
            })*/
        });
        $scope.selected = true;
         $interval( function() {
            $scope.gridApi.core.handleWindowResize();
          }, 500, 10);
    }

Der obige code-core-Funktion ist $Intervall( function() { $scope.gridApi.core.handleWindowResize(); }, 500, 10)

InformationsquelleAutor KARTHIKEYAN.A

Die Abhilfe für dieses ist das hinzufügen der Breite und rowHeight
für Zeile und Zelle. Wie ich bereits erwähnt habe ist dies ein workaround und ich bin sicher, es muss andere Wege dies zu tun, aber das ist eine schnelle Lösung, und sollten Sie bekommen, was Sie zumindest 🙂

    $scope.gridOptions={
    //set the row height to a fixed length 
     rowHeight: 80,
                enableFiltering: true,
                enableGridMenu : true,
                enableRowSelection: true,
                enableSelectAll: true,
                selectionRowHeaderWidth: 50,
                infiniteScrollDown: true,
                columnDefs : [
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:100},
                  { displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}, width:100},
                  { displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} , width:100}
                ]}

InformationsquelleAutor grepit

0

Ist mit den vorgeschlagenen polling-Ansatz, die Funktion wird aufgerufen, nachdem eine festgelegte Wartezeit, so dass jeder Breite Veränderung plötzlich Auftritt. Dies führt zu erheblichen Ruckeln, wenn der Benutzer schnell ändert sich die Größe der Tabelle.

Ein viel besserer Ansatz ist zum binden ein resize-handler aufrufen, eine resize-Funktion, wenn der viewport-änderungen
```
angular.element($window).bind('resize', () => {
        this.updateTableWidth();
    });
```
Mein Projekt verwendet eine sidebar, also ich Konto für die Breite der Seitenleiste oder Polsterung Breite (wenn die sidebar geöffnet ist oder nicht), dann setzen Sie einfach einer variable gebunden an ein ng-style auf meinem Tisch wrapper
```
private updateTableWidth() {
    let width = this.$window.innerWidth;
    let modifier = (width >= 1280) ? this.sidebarWidth : this.paddingWidth;
    this.tableWidth = (width - modifier) + 'px';
}

<div ng-style="{'width': ctrl.tableWidth}">
    <div ui-grid></div> 
</div>
```
InformationsquelleAutor AnthonyI
0

Dies ist was für mich gearbeitet wie ein Charme!

Hinzufügen sagen ng-style="windowResize" dem ui-grid-markup in HTML-template, und auf $scope.windowResize fügen Sie width: 100% innerhalb onRegisterApi Funktion innerhalb des Gültigkeitsbereichs.

So, im Grunde onRegisterApi() ist die Standard-Funktion von ui-grid, löst beim raster ist wirklich gezeichnet, und so im Grunde sind wir bedingt hinzufügen Breite 100% auf raster und machen Sie sensibel für alle Ansichtsfenster.

InformationsquelleAutor siddhi
0

Entfernen ui-grid-resize-columns von Ihren HTML - div tags.
- Ich fand diese Antwort in die "low-quality-post" review-Warteschlange, wahrscheinlich weil, wie kurz es ist. Ich denke, es ist gut, wenn es behebt OP ' s Frage, also werde ich lass es einfach. Aber es wäre sicher ein high-quality-post, wenn gab es irgendwelche Hinweise, dass Sie versucht hatte, Ihre Antwort aus und es funktioniert. (Oder wirklich keine Gedanken, warum Sie denken, das würde funktionieren, so können wir davon ausgehen, dass Sie nicht nur ein Schuss im Dunkeln).
InformationsquelleAutor Ravindra Bakkamanthala

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.