How do I dynamically change ng-grid table size when parent containing div size changes?

Question

I am changing the size of the containing div using ng-class and an expression that evaluates whether or not an edit form is displayed. If the edit form is displayed I want to change the size of the div containing the ng-grid and the ng-grid itself.

<div class=" row-fluid">
    <div ng-class="{'span7' : displayEditForm == true, 'span12': displayEditForm == false}" >
        <ul class="nav nav-tabs" style="margin-bottom: 5px;">
            <li class="active"><a href="#" ng-click="getActivitiesThatNeedMyApproval()" data-toggle="tab">Activities Needing My Approval</a></li>
            <li><a href="#" ng-click="getMyActivitiesNeedingApproval()" data-toggle="tab">My Activities Needing Approval </a></li>
            <li><a href="#" ng-click="getMyActivities()" data-toggle="tab">My Activities</a></li>
        </ul>
       <div class="edus-admin-manage-grid span12"  style="margin-left:0;" ng-grid="gridOptions"></div>
    </div>
    <div class="span5" ng-show="displayEditForm">
        <div class="edus-activity-container">
            <div class="edus-admin-activities-grid">
                <div ng-include="'/partials/' + activity.object.objectType + '.html'" class="edus-activity"></div>
                <!--  <div ng-include="'/partials/admin-activity-actions.html'"></div>-->
            </div>
        </div>
        <div ng-include="'/partials/admin-edit-activity-grid-form.html'"></div>
    </div>
</div>

The div containing the navbar and grid changes size via ng-class (from span12 to span7), but the ng-grid does not refresh. How can I trigger the refresh of ng-grid given the change in the parent div?

I've included my gridOptions below:

$scope.gridOptions = {
plugins: [gridLayoutPlugin],
data : 'activities',
showFilter: true,
/*    enablePaging: true,*/
showColumnMenu: true,
/*  showFooter: true,*/
rowHeight: 70,
enableColumnResize: true,
multiSelect: false,
selectedItems: $scope.selectedActivities,
afterSelectionChange: function(rowItem,event){
   if($scope.selectedActivities && $scope.selectedActivities.length > 0){
        $scope.activity = $scope.selectedActivities[0];
        $scope.activityViewState.index = $scope.activities.indexOf($scope.activity);
        $scope.displayEditForm = true;
        console.log("DEBUG :::::::::::::::: updated displayEditForm.",            $scope.displayEditForm);

                        if($scope.activity.ucdEdusMeta.startDate) {

                           // $scope.activity.ucdEdusMeta.startDate = new Date($scope.activity.ucdEdusMeta.startDate);
                            $scope.edit.startDate = moment($scope.activity.ucdEdusMeta.startDate).format("MM/DD/YYYY");
                            $scope.edit.startTime = moment($scope.activity.ucdEdusMeta.startDate).format("hh:mm A");
                        }

                        if($scope.activity.ucdEdusMeta.endDate) {

                           // $scope.activity.ucdEdusMeta.endDate = new Date($scope.activity.ucdEdusMeta.endDate);
                            $scope.edit.endDate = moment($scope.activity.ucdEdusMeta.endDate).format("MM/DD/YYYY");
                            $scope.edit.endTime = moment($scope.activity.ucdEdusMeta.endDate).format("hh:mm A");
                        }

                    }
                },
       /* pagingOptions: { pageSizes: [5, 10, 20], pageSize: 10, totalServerItems: 0, currentPage: 1 },*/
       columnDefs: [
            {field: 'title', displayName: 'Title', width:'15%',
                        cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'},
            {field: 'actor.displayName', displayName: 'DisplayName', width:'10%',
                        cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'},
            {field: 'object.content', displayName:'Content', width:'35%',
                        cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'},
            {field: 'ucdEdusMeta.startDate', displayName: 'Start Date', width:'20%',
                        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) | date:"short"}} </span></div>'},
            {field: 'ucdEdusMeta.endDate', displayName: 'End Date', width:'20%',
                        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) | date:"short"}} </span></div>'}
          // {field: '', displayName: ''},
          ]
};

Here's the CSS used by the grid:

.edus-admin-manage-grid {
    border: 1px solid rgb(212,212,212);
    width: 100%;
    height: 700px
}

Solution

You can use ng-grid's layout plugin (ng-grid-layout.js). It should come with ngGrid located at:

ng-grid/plugins/ng-grid-layout.js

(UPDATED: now at https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-layout.js)

You will have to include an additional script tag pointing to this js file in your main index.html file. And the order of including this versus ng-grid.js is important.

You would have to set a watch on displayEditForm and then call the plugin's updateGridLayout() function.

So it would be something like:

var gridLayoutPlugin = new ngGridLayoutPlugin();

// include this plugin with your grid options
$scope.gridOptions = {
    // your options and:
    plugins: [gridLayoutPlugin]
};

// make sure grid redraws itself whenever
// the variable that ng-class uses has changed:
$scope.$watch('displayEditForm', function() {
    gridLayoutPlugin.updateGridLayout();
});

From my understanding, watches generally belong in the link function rather than the controller but it will work in either spot. You could also go a bit further and say:

$scope.$watch('displayEditForm', function(newVal, oldVal) {
    if (newVal !== undefined && newVal !== oldVal) {
        gridLayoutPlugin.updateGridLayout();
    }
});

To make sure this only fires when the data switches from true/false. This would matter if your data is initially undefined and you waste time calling grid redraw before you give it an initial value.

Comments

[Gary Sharpe]

This almost works... One problem appears to be with re-applying the CSS associated with the div that is assigned to the ng-grid. The background and border do not change when the grid is re-sized.

[jCuga]

Which css classes specifically don't seem to be applied? Including your gridOptions and CSS class definitions might help figure this out.

[Gary Sharpe]

I've included my gridOptions and the relevant CSS above. Thanks for all the help!

[jCuga]

I still can't get a grasp of your remaining problem. I would need to see a working jsfiddle or at least some screenshots. Does the grid resize properly, but the containing border display as still the old size? It would help if you describe how the style is not being re-applied. Are there any javascript errors?

[Gary Sharpe]

I appear to have two problems: 1) involving CSS, when I click a button that toggles the displayEditForm from false to true, the table redraws itself to fit the new div, but the background color and border appear to not change. 2) When I click on an activity inside the table , I use the afterSelectionChange function in gridOptions to display and fill the edit form. The value for displayEditForm changes to true, but does not trigger the $watch to update the grid layout.

[frhd]

link to ng-grid plugin is dead

[jCuga]

They upped to version 3. the plugin can be found in the 2.x branches: github.com/angular-ui/ng-grid/blob/2.x/plugins/… Not sure if/where the plugin is for v3.