The scrollbar will be displayed in the grid when content exceeds the element width
or height
. The vertical and horizontal scrollbars will be displayed based on the following criteria:
height
and width
are used to set the grid height and width, respectively.To specify the width
and height
of the scroller in the pixel, set the pixel value to a number.
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="315" width="400" >
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
Specify the width
and height
as 100%
to make the grid element fill its parent container.
Setting the height
to 100%
requires the grid parent element to have explicit height.
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="100%" >
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}
You can scroll the grid content to the selected row position by using the rowSelected
event.
<ejs-numerictextbox id="numeric" width="200" min="0" showSpinButton="false" placeholder="Enter index to select a row" change="onChange"></ejs-numerictextbox>
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" rowSelected="rowSelected" height="270" width="100%">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
function onChange(args) {
var gridObj = document.getElementById("Grid").ej2_instances[0];
gridObj.selectRow(parseInt(this.getText(), 10));
}
function rowSelected(args) {
var rowHeight = this.getRows()[this.getSelectedRowIndexes()[0]].scrollHeight;
this.getContent().children[0].scrollTop = rowHeight * this.getSelectedRowIndexes()[0];
}
</script>
public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}