diff --git a/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/razor b/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/razor
new file mode 100644
index 0000000000..dda5427c0f
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/razor
@@ -0,0 +1,43 @@
+<div id="scroller" style="width: 100%; overflow-x: auto; height: 18px;"></div>
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height(315).Width(500).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width(90).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add();
+    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(80).Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width(140).Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("Freight").HeaderText("Freight").Width(80).Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width(130).Add();
+    col.Field("ShipAddress").HeaderText("Ship Address").Width(140).Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width(100).Add();
+    col.Field("ShipRegion").HeaderText("Ship Region").Width(80).Add();
+    col.Field("ShipPostalCode").HeaderText("Ship Postal Code").Width(110).Add();
+}).Created("onGridCreated").Render()
+</div>
+<script>
+    function onGridCreated() {
+        var grid = this; 
+        var scroller = document.getElementById('scroller'); 
+        var content = grid.getContent().firstElementChild; 
+        var contentTable = grid.getContentTable(); 
+
+        grid.element.insertBefore(scroller, content.parentElement);
+
+        scroller.onscroll = function () {
+            content.scrollLeft = scroller.scrollLeft;
+        };
+        content.onscroll = function () {
+            scroller.scrollLeft = content.scrollLeft;
+        };
+
+        function setScroller() {
+            if (contentTable) {
+                scroller.innerHTML = `<div style="width: ${contentTable.offsetWidth}px; height: 18px;"></div>`;
+                scroller.style.height = content.scrollWidth <= content.clientWidth ? '0px' : '18px';
+            }
+        }
+
+        setScroller();
+        window.onresize = setScroller; 
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/render-scrollbar.cs b/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/render-scrollbar.cs
new file mode 100644
index 0000000000..2e8d016608
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/render-scrollbar.cs
@@ -0,0 +1,5 @@
+ public IActionResult Index()
+ {
+   ViewBag.dataSource = OrderDetails.GetAllRecords();           
+   return View();
+ }
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/tagHelper
new file mode 100644
index 0000000000..e223816970
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/scrolling/render-scrollbar/tagHelper
@@ -0,0 +1,42 @@
+<div id="scroller" style="width: 100%; overflow-x: auto; height: 18px;"></div>
+<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" height="315" width="500" created="created">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="90" validationRules="@(new { required = true })"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="100"></e-grid-column>
+        <e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="80"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" width="140" format="yMd" textAlign="Right"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" width="80"></e-grid-column>
+        <e-grid-column field="ShipName" headerText="Ship Name" width="130"></e-grid-column>
+        <e-grid-column field="ShipAddress" headerText="Ship Address" width="140"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="100"></e-grid-column>
+        <e-grid-column field="ShipRegion" headerText="Ship Region" width="80"></e-grid-column>
+        <e-grid-column field="ShipPostalCode" headerText="Ship Postal Code" width="110"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+function created() {
+    var grid = this; 
+    var scroller = document.getElementById('scroller');
+    var content = grid.getContent().firstElementChild; 
+    var contentTable = grid.getContentTable(); 
+
+    if (!scroller) return;
+
+    scroller.onscroll = function () {
+        content.scrollLeft = scroller.scrollLeft;
+    };
+    content.onscroll = function () {
+        scroller.scrollLeft = content.scrollLeft;
+    };
+
+    function setScroller() {
+        if (contentTable) {
+            scroller.innerHTML = `<div style="width: ${contentTable.offsetWidth}px; height: 18px;"></div>`;
+            scroller.style.height = content.scrollWidth <= content.clientWidth ? '0px' : '18px';
+        }
+    }
+    setScroller();
+    window.onresize = setScroller; 
+}
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/scrolling.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/scrolling.md
index 02bfa499eb..d79c6786d0 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/scrolling.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/scrolling/scrolling.md
@@ -103,4 +103,28 @@ The following example that demonstrates how to use the `hideScroll` method insid
 {% endhighlight %}
 {% endtabs %}
 
-![Hide the empty placehoder of scrollbar](../images/scrolling/scrolling-holder.png)
\ No newline at end of file
+![Hide the empty placehoder of scrollbar](../images/scrolling/scrolling-holder.png)
+
+## Render scrollbar in both top and bottom
+
+The Syncfusion ASP.NET MVC Grid allows rendering scrollbars at both the top and bottom, enhancing horizontal navigation for large datasets. This feature ensures users can scroll the Grid from either direction, enhancing usability and accessibility.
+
+Steps to render scrollbars at the top in the Grid:
+
+1. **Add a Scrollbar** - Insert a `<div id="scroller">` above the Grid in the template to act as a top scrollbar.
+2. **Initialize Scrollbar in [Created](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Created) Event** - Retrieve the Grid's content and move the scroller `div` above it dynamically.
+3. **Synchronize Scroll Events** - Link `onscroll` events of the scroller `div` and the Grid content to scroll together.
+4. **Adjust Scrollbar Width and Visibility** - Use `setScroller()` to match the scrollbar width with the Grid and update it on window resize.
+
+The following example demonstrates how to use the `Created` event to insert a scrollbar at the top of the Grid content:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/scrolling/render-scrollbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Render-scroll.cs" %}
+{% include code-snippet/grid/scrolling/render-scrollbar/render-scrollbar.cs%}
+{% endhighlight %}
+{% endtabs %}
+
+![Render of scrollbar in top and bottom](../images/scrolling/render-scrollbar.gif)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/scrolling.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/scrolling.md
index 262531671a..a9669a1121 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/scrolling.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/scrolling/scrolling.md
@@ -105,4 +105,26 @@ The following example that demonstrates how to use the `hideScroll` method insid
 
 ![Hide the empty placehoder of scrollbar](../images/scrolling/scrolling-holder.png)
 
+## Render scrollbar in both top and bottom
 
+The Syncfusion ASP.NET Core Grid allows rendering scrollbars at both the top and bottom, enhancing horizontal navigation for large datasets. This feature ensures users can scroll the Grid from either direction, enhancing usability and accessibility.
+
+Steps to render scrollbars at the top in the Grid:
+
+1. **Add a Scrollbar** - Insert a `<div id="scroller">` above the Grid in the template to act as a top scrollbar.
+2. **Initialize Scrollbar in [Created](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Created) Event** - Retrieve the Grid's content and move the scroller `div` above it dynamically.
+3. **Synchronize Scroll Events** - Link `onscroll` events of the scroller `div` and the Grid content to scroll together.
+4. **Adjust Scrollbar Width and Visibility** - Use `setScroller()` to match the scrollbar width with the Grid and update it on window resize.
+
+The following example demonstrates how to use the `created` event to insert a scrollbar at the top of the Grid content:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/scrolling/render-scrollbar/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Render-scroll.cs" %}
+{% include code-snippet/grid/scrolling/render-scrollbar/render-scrollbar.cs%}
+{% endhighlight %}
+{% endtabs %}
+
+![Render of scrollbar in top and bottom](../images/scrolling/render-scrollbar.gif)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/images/scrolling/render-scrollbar.gif b/ej2-asp-core-mvc/grid/images/scrolling/render-scrollbar.gif
new file mode 100644
index 0000000000..0dc642db55
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/scrolling/render-scrollbar.gif differ