angularjs ng-grid how to set row or cell height
It's very simple if you know ^^
$scope.gridOptions = {
data: 'items',
rowHeight: 80,
enablePaging: true,
showFooter: true,
enablePinning: true,
totalServerItems:'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
showSelectionCheckbox: true,
multiSelect: false,
columnDefs: [
{field: 'id', displayName: 'Id'},
{field:'firstname', displayName:'Name'},
{field: 'surname', displayName:'Cognome'},
{field: 'email', displayName:'Email'},
{field: 'address', displayName:'Indirizzo'},
{field: 'city', displayName:'Città'},
{field: 'zip', displayName:'Cap'},
{field: 'birthday', displayName:'Data di nascita'},
{field: 'joined', displayName:'Registrazione'},
{field: 'ip', displayName:'Ip'},
{field: 'url', displayName:'Prodotto',cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><img src="./assets/base/img/products/{{row.getProperty(\'url\')}}" /></div>'},
]
};
});
simply add rowHeight: 80, to your grid options
How to change height of ui-grid row?
Take out the:
height: 22px !important;
from the css and add:
rowHeight:22
to the gridOptions.
I have the feeling that this is much smoother.
Forked Plunker
UI-GRID - Dynamic Row Height - Alternatives
You can see an answer to the same question here: https://github.com/angular-ui/ng-grid/issues/3239#issuecomment-91045267
UI-Grid virtualizes the rows, meaning that it only renders a small subset of the data, and leaves everything that wouldn't be in view unrendered. This means the grid needs to know how tall every row is, so that it can calculate positioning.
If it had to measure every row when rendered this would cause the browser to repaint over and over and performance would be miserable.
You'll find that other virtualized tools (like Ionic's collection-repeat) have the same limitation.
Update:
To answer your second question: you can set a height
property on the GridRow object (not your entity, you can use getRow from the grid API to get the GridRow object) and the grid will use this height when rendering the row.
And your third question: no, expandable is only built to work off entire rows. It might be possible to alter what sort of data is displayed in a sub-grid based on clicks in certain cells, but that would require some changes to the expandable code.
Related Topics
Make a <Br> Instead of <Div></Div> by Pressing Enter on a Contenteditable
Storing Arbitrary Info in HTML Tags for JavaScript
Prevent Select2 from Flipping the Dropdown Upward
Highcharts: Make the Legend Symbol a Square or Rectangle
Render Closing Tag Conditionally in Order to Emulate Calendar Behavior
Custom Cursor Interaction Point - CSS/Jquery
How to Fix the Bootstrap Navbar to the Top After a Div Was Scrolled
Remove CSS Rules by JavaScript
How to Remove an Important CSS Property
How to Access the Content of the "Embed" Tag in HTML
CSS Position Absolute Making the Textbox Go Down
Serving High Res Images to Retina Display
Use JavaScript to Click on a Pseudo-Element
How to Dynamically Change CSS Style Attribute of Div Tag
How to Make JavaScript Scrollintoview Smooth