CODEWITHSUNDEEP
angular-ui-grid
Wes
Wes

Reputation: 172

UI-Grid enablefiltering not showing input box with AngularJS page

I'm using UI-Grid 3.0 unstable on an angular page that is loading data via Restangular. So far most of it seems to be ok. I am using the selection module along with it and I'm having difficulty with pages that are loading the {enableFiltering: true} gridOptions in that most of the pages are not showing the input box on the grid.

I invoke the ui-grid on the html page using: 

<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection></div>

and my gridOptions in my controller looks like this.

 $scope.gridOptions = {
    enableFiltering: true,
    data: 'data',
    columnDefs: [
        {field: 'name', displayName: 'Name'},
        {field: 'date', displayName: 'Date', cellFilter: 'date:\'MM-dd-yyyy\''}
    ],
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};

I honestly can't figure out why its not appearing on the page.

Upvotes: 1

Views: 2392

Answers (2)

davaus
davaus

Reputation: 1155

This an awful hack, but I always use the filters, so I just tracked the container that was the wrong height. I had lost hours to this trying to find the cause and using all the suggested fixes. The container turned out to have the class "ui-grid-header-canvas", so I just set the height to 54px after the grid had sized itself.(after I set the data)

 $(".ui-grid-header-canvas").css("height","54px")

Sorry, but it works and I have a deadline..

Upvotes: 0

sunghun
sunghun

Reputation: 1424

I don't understand 100% the problem, but I could go around it by overriding some css. The height in css were 100% and I changed them to auto.

.ui-grid-header-cell{
    height:auto;
}

.ui-grid-cell-contents {
    height: auto;
}

I hope this would be helpful.

Upvotes: 0

Related Questions