Documentation(940669)-Need to Add Render scroll bar in both top and 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>

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();
+ }

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>

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)
+![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)

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)