0

I am using AngularJS ui-grid in my aplication. I have some table for example with 50-100 rows, nevermind. Now i want to use ui.grid.autoresize module which will dinamically resize the grid(table) with no need of scrolling.

I am using help from here Angular ui-grid dynamically calculate height of the grid
I tried to put ui-grid properties in table tag, also in div tag... but it's now working.

You can view my example below.

Controller view

<div class="panel>
    <div class="panel-heading">{{someheading}}</div>
    <div class="panel-body">
        <table ui-grid="gridData" ui-grid-auto-resize ng-style="getHeightTable()">
            <thed>
               <tr>
                  <th>{{filename}}</th>
               </tr> 
            </thead>
            <tbody>
                <tr ng-repeat="file in uploadFiles">
                    <td>{{file.fileName}}</td>
                    <td>....</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Controller

angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){
    $scope.gridData = {
       roweight : 30,
       data:[]
     };

     //I am populating data with uploaded files
     $scope.gridData.data = $scope.uploadedFiles;


     function getHeightTable(){
        var rowHeight = 30;
        var headerHeight = 30;
        return : $scope.gridData.data.length * rowHeight + headerHeight + "px"
       };
}
Community
  • 1
  • 1
Micko
  • 431
  • 8
  • 27

1 Answers1

0

try this...

angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){
    $scope.gridData = {
       roweight : 30,
       data:[]
     };

     //I am populating data with uploaded files
     $scope.gridData.data = $scope.uploadedFiles;
     var rowHeight = 30;
     var headerHeight = 30;
     var height = $scope.gridData.data.length * rowHeight + headerHeight + "px"
     $('.grid').css('height',height + ' !important');
}

and add class to table..

<table ui-grid="gridData" ui-grid-auto-resize class="grid">
Kandarp
  • 282
  • 1
  • 10
  • hey @Kandarp whit this code, when I start app my table is resizing like in ednless loop.... I want when to add file to resize then... with every file added... – Micko Oct 05 '15 at 08:10