Using the Kendo Grid for Angular, it was easy enough to code up a directive that could dynamically adjust the grid height as the window was resized. I am not finding anything similar in the API, or Google, as to how to do this with the React grid.
Any suggestions?
4 Answers, 1 is accepted
This can be achieved if the Grid and its parent container have a height of '100%'.
Please check the following example:
https://stackblitz.com/edit/react-ublqwy?file=app/main.jsx
I hope this is the desired result.
Regards,
Stefan
Progress Telerik
Rank 1
Hmm, thanks but this doesn't seem to be working with my Grid. I am using paging, and loading the data dynamically on page change. I assume this changes things. I even stripped it down to just the wrapper <div> and <Grid>, and it was still not working correctly.
This is my grid:
<React.Fragment> <div className="d-flex align-items-end text-primary"> <h2 className="mr-auto">Logging</h2> <button className="btn btn-secondary" data-toggle="button" onClick={() => setFiltState(!filtState)} > <i className="intelicon-filter-solid"></i> </button> </div> <hr /> <div style={{ height: '100%' }}> <Grid style={{ height: '100%' }} data={data.logs || []} total={30} filterable={filtState} pageable sortable {...dataState} onDataStateChange={dataStateChange} > <GridColumn field="app_id" title="App Id" /> <GridColumn field="app_name" title="App Name" /> <GridColumn field="type" title="Message Type" /> <GridColumn field="message" cell={MessageCell} title="Message" /> <GridColumn field="created_on" cell={DateCell} title="Created" /> <GridColumn field="updated_on" cell={DateCell} title="Updated" /> </Grid> </div></React.Fragment>Thank you for the code.
I can assume that this occurs because there are elements over the Grid.
For example, if the window view port is 1000px, the Grid will have height 100% which is 1000px. But when we have an element over the Grid, lets say 100px, the Grid will still be 1000px but its bottom 100px will not be visible. Please take a look at the video showcasing this:
https://www.screencast.com/t/2uEBKT4oDTd
https://stackblitz.com/edit/react-ublqwy-pwyezn?file=app/main.jsx
I hope this provide more details on what is happening.
Regards,
Stefan
Progress Telerik
Rank 2
Iron
Iron
Iron
I'm currently having the same issue. Is there a way to adjust the Grid height dynamically when there is an element over the Grid?
I want all of the elements to fit on one screen, whether new elements are added or removed. Please help, thanks.
Rank 2
Iron
Iron
Iron
I'm currently having the same issue. Is there a way to adjust the Grid height dynamically when there is an element over the Grid?
I want all of the elements to fit on one screen, whether new elements are added or removed. Please help, thanks.
Hi, Jason,
As the new elements are using some of the height of the view port, the Grid's height should be decreased.
Here is an example: https://stackblitz.com/edit/react-shihkb?file=app%2Fmain.jsx
The `height` of the division wrapper above the Grid is handled dynamically. When clicking the `Add item` button, a new list item is shown and the height is decreased by `3.5%`. You can handle the height to decrease or increase with any value, depending on your use case.
I hope this helps, but please let us know if you have any further questions.
Regards,Wissam
Progress Telerik