Articles in this section
Category / Section

How to move the scrollbar to selected row in JavaScript Grid?

1 min read

We can scroll the scroller to the selected row by using rowSelected client side event of the JavaScript Grid.


Grid rendering code:


Please refer the below snippet for enable “rowSelected” client side event of the grid.

<script type="text/javascript">$(function () {
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” 



@(Html.EJ().Grid<EditableOrder>("Scrolling") .Datasource((IEnumerable<object>)ViewBag.datasource)
.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();



<ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="True" AllowSorting="True">
<ScrollSettings height="500" width="720"></ScrollSettings>
    <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" />
<ClientSideEvents RowSelected="rowSelected"></ClientSideEvents>


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);



                                                       Figure: Moving scroller to selected row.


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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment