Hi Customer,
Thank you for contacting Syncfusion support.
<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.