Telerik Forums / KendoReact

Fill grid using flexbox with the rest of the space

1 Answer 181 Views
Grid
Christiaan
Top achievements
Rank 1
Christiaan asked on 14 Sep 2023, 06:30 AM

In the following code, there is a div that contains two child divs. The first child div has a fixed height, and the bottom div contains the grid, and should fill the remaining space. With other components this approach works by using flexbox and the flex property, but the grid will ignore the flex: 1 and just overlays on the first child div. 

What am I doing wrong?

 

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Grid, GridColumn, GridDataStateChangeEvent} from '@progress/kendo-react-grid';
import { DataResult, process, State } from '@progress/kendo-data-query';
import orders from './orders.json';
import { Order } from './interfaces';
const App = () => {
const [dataState, setDataState] = React.useState<State>({
skip: 0,
take: 20,
sort: [
{ field: 'orderDate', dir: 'desc' }
],
group: [
{ field: 'customerID' }
]
})
const [dataResult, setDataResult] = React.useState<DataResult>(process(orders, dataState))
const dataStateChange = (event: GridDataStateChangeEvent) => {
setDataResult(process(orders, event.dataState));
setDataState(event.dataState);
}
return (
<div style={{display: 'flex', flexDirection: 'column', height: '100%'}} >
<div style={{height: '60px', backgroundColor: 'blue'}}></div>
<div style={{flex: '1', height: '100%'}}>
<Grid
style={{ height: '100%' }}
sortable={true}
filterable={true}
groupable={true}
reorderable={true}
pageable={{ buttonCount: 4, pageSizes: true }}
data={dataResult}
{...dataState}
onDataStateChange={dataStateChange}
>
<GridColumn field="customerID" width="200px" />
<GridColumn field="orderDate" filter="date" format="{0:D}" width="300px" />
<GridColumn field="shipName" width="280px" />
<GridColumn field="freight" filter="numeric" width="200px" />
<GridColumn field="shippedDate" filter="date" format="{0:D}" width="300px" />
<GridColumn field="employeeID" filter="numeric" width="200px" />
<GridColumn locked={true} field="orderID" filterable={false} title="ID" width="90px" />
</Grid>
</div>
</div>
);
}
ReactDOM.render(<App />, document.querySelector('my-app'));

1 Answer, 1 is accepted

Sort by
0
Wissam
Telerik team
answered on 15 Sep 2023, 10:39 AM

Hello, Christiaan,

Thank you so much for the provided code sample.

Indeed the flex property is not making any changes when setting it in this case. Nevertheless, I was able to resolve the issue by setting the height of the div wrapper of the Grid to `94%` or a smaller value (where the remaining 6% is for the blue division):

On the other hand, do you necessarily need to use CSS flex layout? If not, it is enough to set the width to `100%` in the Grid's style prop, the Grid's div wrapper, and the parent div:

I hope this matches what you need, but please let me know if you have any further questions.

Regards,
Wissam
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Christiaan
Top achievements
Rank 1
commented on 16 Sep 2023, 06:26 PM

The issue is with your first approach is that the div above the grid is dynamic in height

And the second solution doesn't work, because the grid will be too tall. I want the grid to take the remaining of the view-height of the page so no scrollbar appears in the page, but only a scrollar for the grid itself so that the header will stay in view while viewing records in the bottom, and so that the grid footer is always in sight.

Wissam
Telerik team
commented on 20 Sep 2023, 05:14 AM | edited

Hello, Christiaan,

Thank you for getting back to me with more information.

I forwarded this scenario to the front-end team and they suggested setting the height of the div that wraps the Grid to `calc(100% - 60px)`. Basically, this height should take into consideration the height of the previous element which is `60px` in this case:

In addition, since the first div is dynamic in height, you can include a variable that is set to the height of the div (such that it changes when the div height is updated) instead of using a constant value such as `60px`.

If you require further assistance on this matter, please let me know.

Regards,
Wissam
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
Grid
Asked by
Christiaan
Top achievements
Rank 1
Answers by
Wissam
Telerik team
Share this question
or