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.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Height("400").Width("auto").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipAddress").HeaderText("Ship Address").Width("170").Add();
col.Field("ShipCity").HeaderText("Ship City").Width("170").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).Render()
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.
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Height("100%").Width("auto").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipAddress").HeaderText("Ship Address").Width("170").Add();
col.Field("ShipCity").HeaderText("Ship City").Width("170").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).Render()
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.
@Html.EJS().NumericTextBox("numeric").Placeholder("Enter index to select a row").Change("onChange").Width("200").Render()
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Height("400").Width("auto").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShipAddress").HeaderText("Ship Address").Width("170").Add();
col.Field("ShipCity").HeaderText("Ship City").Width("170").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).RowSelected("rowSelected").Render()
<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();
}