ui-grid row selection highlights wrong row when filtering is enabled

[andymcd7]

ui-grid - v3.0.0-rc.10-a2f60ef - 2014-09-26

When using filtering and row selection, the highlighted row is off by one after selecting a row. With filtering disabled, it works properly.

        $scope.myGrid = {
            enableFiltering: true,
            enableRowSelection: true,
            columnDefs: [
                    { name: 'NormStyleName', displayName: 'Normalization Style' },
                    { name: 'FromDate', displayName: 'From Date' },
                    { name: 'ThruDate', displayName: 'Thru Date' }
            ]
        };

[PaulL1]

From the picture, looks like the row selection header isn't aware the filter is there, it needs to be padded down one row.

[c0bra]

I think maybe the left render container's height calculation (if there is one?) needs to be synced up with the height of the other render containers. Maybe the render container registration can set up a "max container header height" and all the headers will sync up with that value if they're less than that so they can be equal?

[raviverma89]

Temporary solution to fix this issue:
step 1: download unminified version of "ui-grid-unstable.js"
step 2: open this file in editor
step 3: find "update()" function
step 4: replace it with below code

function update() {
var ret = '';
var canvasWidth = colContainer.canvasWidth;
var viewportWidth = colContainer.getViewportWidth();
var canvasHeight = rowContainer.getCanvasHeight();
//add additional height for scrollbar on left and right container
if ($scope.containerId !== 'body') {
canvasHeight += grid.scrollbarHeight;
}
var viewportHeight = rowContainer.getViewportHeight();
var headerViewportWidth,
footerViewportWidth;
headerViewportWidth = footerViewportWidth = colContainer.getHeaderViewportWidth();
// Set canvas dimensions
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-canvas { width: ' + canvasWidth + 'px; height: ' + canvasHeight + 'px; }';
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
if (renderContainer.explicitHeaderCanvasHeight) {
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { height: ' + renderContainer.explicitHeaderCanvasHeight + 'px; }';
} else {
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-canvas { height: inherit; }';
}
//CUSTOM CODE STARTS HERE
$('.grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-left .ui-grid-header-canvas').height($('.grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-body .ui-grid-header-canvas').height())
//CUSTOM CODE ENDS HERE
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-viewport { width: ' + viewportWidth + 'px; height: ' + viewportHeight + 'px; }';
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-header-viewport { width: ' + headerViewportWidth + 'px; }';
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-canvas { width: ' + (canvasWidth + grid.scrollbarWidth) + 'px; }';
ret += '\n .grid' + uiGridCtrl.grid.id + ' .ui-grid-render-container-' + $scope.containerId + ' .ui-grid-footer-viewport { width: ' + footerViewportWidth + 'px; }';
return ret;
}