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.
Unfortunately, activation email could not send to your email. Please try again.

windowonresize() not working

Thread ID:

Created:

Updated:

Platform:

Replies:

129430 Mar 17,2017 03:42 AM Mar 20,2017 08:16 AM Angular 1
loading
Tags: ejGrid
Me
Asked On March 17, 2017 07:21 AM

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 [Syncfusion]
Replied On March 20, 2017 08:16 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;