windowonresize() not working

[Me]

Hello,

I need ejGrid to take full width and height of it's parent div. I tried to use height="100%" and width="100%", but nothing works. I tried to use windowonresize() method, but that won't work too.

[Jayaprakash Kamaraj]

Hi Customer, 

Thank you for contacting Syncfusion support. 

In Grid, we have default support for responsive behavior. If responsive is enabled, then the grid will be rendered based on parent’s width and height. We need to set isResponsive and minWidth Property to enable responsive in Grid. MinWidth is used to maintain minimum width for the Grid and if the grid width is less than minWidth then the scrollbar will be displayed. Please refer to the below API reference documentation.

http://help.syncfusion.com/js/api/ejgrid#members:isresponsive

http://help.syncfusion.com/js/api/ejgrid#members:minwidth 

 

<h2>Syncfusion Javascript Angular 2 Component</h2> 

 

 

<div> 

<ej-grid #grid id="gridData"  [dataSource]="gridData1" [allowPaging]="true" [isResponsive]="true" [minWidth]="400" [allowScrolling]="true" [scrollSettings]="scroll" [toolbarSettings]= "tool" (rowSelecting)= rowSelecting($event) (rowSelected)= rowSelected($event)  > 

    <e-columns> 

        <e-column field="EmployeeID"  headerText="Employee ID" width="30" textAlign="right"></e-column> 

        

        <e-column field="OrderID" width="30" [isPrimaryKey]="true"  textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="30"textAlign="right"></e-column> 

        <e-column field="ShipCity" headertext="ShipCity" width="30" textalign="right"></e-column> 

    </e-columns> 

</ej-grid> 

</div> 

Height responsive will work when you set height as “100%” in ScrollSettings and it has been explained in the release notes of 14.3.0.49. Please find the release notes from the following link . 

https://help.syncfusion.com/js/release-notes/v14.3.0.49?type=all#ejgrid-breaking-changes 

        

<h2>Syncfusion Javascript Angular 2 Component</h2> 

 

 

<div> 

<ej-grid #grid id="gridData"  [dataSource]="gridData1" [allowPaging]="true" [isResponsive]="true" [minWidth]="400" [allowScrolling]="true" [scrollSettings]="scroll" [toolbarSettings]= "tool" (rowSelecting)= rowSelecting($event) (rowSelected)= rowSelected($event)  > 

    <e-columns> 

        <e-column field="EmployeeID"  headerText="Employee ID" width="30" textAlign="right"></e-column> 

        

        <e-column field="OrderID" width="30" [isPrimaryKey]="true"  textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="30"textAlign="right"></e-column> 

        <e-column field="ShipCity" headertext="ShipCity" width="30" textalign="right"></e-column> 

    </e-columns> 

</ej-grid> 

</div>                                                   

appComponent.ts 

 

public scroll = { height:"100%", width:"600" } 

Regards, 

Jayaprakash K.