We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

windowonresize() not working

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.


1 Reply

JK Jayaprakash Kamaraj Syncfusion Team March 20, 2017 12:16 PM UTC

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 . 



        
<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. 


Loader.
Live Chat Icon For mobile
Up arrow icon