Hi Eyal,
Thanks for your update.
Based on your requirement, you want to adapt the Grid when resizing the browser screen.
By default, EJ2 Grid is responsive with the parent container of the Grid. To do that we need to the set the Grid height as “100%” and width in “n%”. You can change the height and width of parent-container element which will be adapted by Grid.
Kindly set the height as 100% for html, body, Grid element and set n% height to Grid’s parent element to achieve your requirement.
[index.html]
<style>
html,
body,
#sample {
height: 100%;
}
.container {
height: 100%;
}
.header {
height: 30%;
}
.content {
height: 60%; // customize the height of Grid’s parent element. You can also set 90%, 80% based on your requirement.
}
</style>
|
export class AggregateDefault extends SampleBase {
render() {
return (
<div className="container">
<div className="header">
<div>
<button>button</button>
<button>button</button>
</div>
<br />
<h>Text</h>
<div>
<input />
</div>
</div>
<div className="content">
<GridComponent
dataSource={hierarchyOrderdata}
editSettings={this.editOptions}
toolbar={this.toolbarOptions}
height={'100%'}
width={'100%'}
actionFailure={this.actionFailure.bind(this)}
aggregates={this.aggregates}
>
---
</GridComponent>
</div>
</div>
);
}
}
|
Find the below sample for your reference.
Please let us know if you have any concerns.
Regards,
Rajapandiyan S
