How to move the scrollbar to selected row in JavaScript Grid?
We can scroll the scroller to the selected row by using rowSelected client side event of the JavaScript Grid.
Example:
Grid rendering code:
JS:
Please refer the below snippet for enable “rowSelected” client side event of the grid.
<script type="text/javascript">$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,allowScrolling: true,
scrollSettings: { height: 500,width:720 },
columns: [
{ field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "Customer ID", width: 80 },
{ field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
{ field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right },
{ field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
{ field: "ShipCity", headerText: "Ship City", width: 110 }
],
rowSelected: “rowSelected”
});
});</script>
MVC:
@(Html.EJ().Grid<EditableOrder>("Scrolling") .Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowScrolling()
.ScrollSettings(scroll => { scroll.Height(500).Width(720); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true). TextAlign(TextAlign.Right). Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75). Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right) .Width(75)
.Format("{0:C}"). Add();
col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right). Width(80).Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
})
.ClientSideEvents(eve=>{eve.RowSelected("rowSelected");})
)
ASP.NET:
<ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="True" AllowSorting="True">
<ScrollSettings height="500" width="720"></ScrollSettings>
<columns>
<ej:column field="OrderID" headertext="Order ID" isprimarykey="True" textalign="Right" width="75" />
<ej:column field="CustomerID" headertext="Customer ID" width="80" />
<ej:column field="EmployeeID" headertext="Employee ID" textalign="Right" width="75" />
<ej:column field="Freight" headertext="Freight" textalign="Right" width="75" format="{0:C}" />
<ej:column field="OrderDate" headertext="Order Date" textalign="Right" width="80" format="{0:MM/dd/yyyy}" />
<ej:column field="ShipCity" headertext="Ship City" width="110" />
</columns>
<ClientSideEvents RowSelected="rowSelected"></ClientSideEvents>
</ej:Grid>
rowSelected event script code:
//Move the scroller while selecting the row using rowSelected event
function rowSelected(args) {
//Get the single row height
var rowHeight = this.getRowHeight();
//Get the selected row index
var selectedRowIndex = args.model.selectedRowIndex;
//Set the ejScroller "y" axis position
this.getScrollObject().scrollY(rowHeight * selectedRowIndex);
}
Result:
Figure: Moving scroller to selected row.
Conclusion
I hope you enjoyed learning about how to move the scrollbar to selected row in JavaScript Grid.
You can refer to our JavaScript
Grid feature tour
page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration
specifications.
You can also explore
our JavaScript
Grid example
to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
