1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Grid Scroll bars

Grid Scroll bars

Hello,


Is it possible to have a scroll bar at the top of the grid as well as the bottom?

I can only get it to show on the bottom and right-hand side






8 Replies
VN Vignesh Natarajan Syncfusion Team June 19, 2018 11:52 AM UTC

Hi David , 

Thanks for using Syncfusion products. 


According to your query, you need to render the horizontal scrollbar at top as well as bottom of the Grid. We have achieved your requirement using DataBound event of the Grid. 
When we scroll the top, the bottom scrollbar moves by the scroll event of the ejScrollBar. When we scroll the bottom, the top scrollbar moves by the scroll jQuery event.    

Refer the below code snippet 

 
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">  
     <div id="scroll"></div>  
        <ej:Grid ID="Grid" runat="server" AllowScrolling="True"AllowSorting="True">  
            <ClientSideEvents DataBound="create" />  
            <Columns>  
                --------------------------------------  
           </Columns>  
            <ScrollSettings Height="300" Width="880"></ScrollSettings>  
        </ej:Grid>  
<script type="text/javascript">  
function create(args) {  
        var width, height, maximum, viewportSize;  
        var scroller = this.getScrollObject();  
        width = viewportSize = this.model.scrollSettings.width - scroller.model.scrollerSize;  
        height = scroller.model.scrollerSize;  
        maximum = scroller.content()[0]["scrollWidth"];  
          
        $("#scroll").ejScrollBar({   // render the scroller 
            viewportSize: viewportSize,  
            width: width,  
            maximum: maximum - viewportSize,  
            scroll: ej.proxy(scroller._scrollChanged, scroller),  
            thumbEnd: ej.proxy(scroller._thumbEnd, scroller),  
            thumbStart: ej.proxy(scroller._thumbStart, scroller),  
            thumbMove: ej.proxy(scroller._thumbMove, scroller),  
        });  
        this.element.find(".e-gridheader").append($("#scroll"));  
    }  
    $(function () {  
        $('#<%= Grid.ClientID %>').find(".e-content").scroll(function (args) {  
            var grid = $("#MainContent_Grid").ejGrid("instance");  
            var scroller = grid.getScrollObject();  
            var value = scroller.scrollLeft();  
            var scrollbar = $("#scroll").ejScrollBar("instance");  
            scrollbar.scroll(value);  
        });  
    });  
</script>  
  
</asp:Content>  

Screenshot:  

  

For your convenience we have prepared a sample which can be downloaded from below link 

Please get back to us if you have further queries. 


Regards, 
Vignesh Natarajan 
 


DP David Price July 13, 2018 02:16 PM UTC

Thank you , but I can't get this example to work? It seems that create(args) does not fire ?


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="competitive_info_Test" %>

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="Syncfusion.EJ.Web, Version=16.1460.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<%@ Register Assembly="Syncfusion.EJ, Version=16.1460.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Template</title>
        

    <link rel='nofollow' href="https://cdn.syncfusion.com/16.1.0.37/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src='<%= Page.ResolveClientUrl("~/js/ej/jquery-1.11.3.min.js")%>' type="text/javascript"></script>
    <script src='<%= Page.ResolveClientUrl("~/js/ej/jsrender.min.js")%>' type="text/javascript"></script>
    <script src='<%= Page.ResolveClientUrl("~/js/ej/ej.web.all.min.js")%>' type="text/javascript"></script>
    <script src='<%= Page.ResolveClientUrl("~/js/ej/ej.webform.min.js")%>' type="text/javascript"></script>
      

  </head>
  <body>


      <form id="form1" runat="server">          
          
          <div>
              <div id="scroll"></div>
                 <ej:Grid ID="Grid1" runat='server' MinWidth="400" Width="500" Height="580"  AllowScrolling="true" AllowSorting="true" >
                    <ClientSideEvents  DataBound="create" />
                    <Columns>
                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="90" />
                        <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="100" />
                        <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="100" />
                        <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="90" Format="{0:C}" />
                        <ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />
                        <ej:Column Field="ShipName" HeaderText="Ship Name" Width="170" />
                        <ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="100" Format="{0:MM/dd/yyyy}" />
                        <ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="110" />
                        <ej:Column Field="ShipPostalCode" HeaderText="Ship Postal Code" TextAlign="Right" Width="140" />
                        <ej:Column Field="Verified" HeaderText="Verified" Width="100" />
                    </Columns>
                     
                    <ScrollSettings Height="300" Width="880"></ScrollSettings>

                </ej:Grid>
              </div>

          
          </form>
      

    
<script type="text/javascript">

       
        function create(args) {
            try {
                var width, height, maximum, viewportSize;
                var scroller = this.getScrollObject();
                width = viewportSize = this.model.scrollSettings.width - scroller.model.scrollerSize;
                height = scroller.model.scrollerSize;
                maximum = scroller.content()[0]["scrollWidth"];
                $("#scroll").ejScrollBar({
                    viewportSize: viewportSize,
                    width: width,
                    maximum: maximum - viewportSize,
                    scroll: ej.proxy(scroller._scrollChanged, scroller),
                    thumbEnd: ej.proxy(scroller._thumbEnd, scroller),
                    thumbStart: ej.proxy(scroller._thumbStart, scroller),
                    thumbMove: ej.proxy(scroller._thumbMove, scroller),
                });
                var scrollbar = $("#scroll").ejScrollBar("instance");
                if (scroller.model.enableRTL) {
                    scrollbar._scrollData.enableRTL = true;
                }
                this.element.find(".e-gridheader").append($("#scroll"));
            } catch{ }
        }

    $(function () {
        $('#<%= Grid1.ClientID %>').find(".e-content").scroll(function (args) {
            var grid = $("#Grid1").ejGrid("instance");
            var scroller = grid.getScrollObject();
            var scrollLeft = scroller._rtlScrollLeftValue;
            var value = scroller.scrollLeft();
            if (grid.model.enableRTL) {
                value = value - scrollLeft;
            }
            var scrollbar = $("#scroll").ejScrollBar("instance");
            scrollbar.scroll(value);
        });
    });
</script>

  </body>
</html>


code




DP David Price July 13, 2018 02:16 PM UTC

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Practices.EnterpriseLibrary.Data;
using System.Data;

using System.Data.Common;
using Newtonsoft.Json;
using MySql.Data.MySqlClient;
using System.Data.SqlClient;


using Syncfusion.JavaScript.Web;


public partial class competitive_info_Test : System.Web.UI.Page
{

    List<Orders> order = new List<Orders>();
    protected void Page_Load(object sender, EventArgs e)
    {
        BindDataSource();
    }
    private void BindDataSource()
    {
        int code = 10000;
        for (int i = 1; i < 5; i++)
        {
            order.Add(new Orders(code + 1, "TOMSP", i + 0, 2.3 * i, "Münster", "Toms Spezialitäten", new DateTime(1991, 05, 15), "Germany", "44087", false));
            order.Add(new Orders(code + 2, "HANAR", i + 2, 3.3 * i, "Rio de Janeiro", "Hanari Carnes", new DateTime(1990, 04, 04), "Brazil", "05454-876", true));
            order.Add(new Orders(code + 3, "VICTE", i + 1, 4.3 * i, "Lyon", "Victuailles en stock", new DateTime(1957, 11, 30), "France", "69004", true));
            order.Add(new Orders(code + 4, "VINET", i + 3, 5.3 * i, "Reims", "Vins et alcools Chevalier", new DateTime(1930, 10, 22), "France", "51100", true));
            order.Add(new Orders(code + 5, "SUPRD", i + 4, 6.3 * i, "Charleroi", "Suprêmes délices", new DateTime(1953, 02, 18), "Belgium", "B-6000", false));
            code += 5;
        }
        this.Grid1.DataSource = order;
        this.Grid1.DataBind();
    }

    [Serializable]
    public class Orders
    {
        public Orders()
        {

        }
        public Orders(long OrderId, string CustomerId, int EmployeeId, double Freight, string ShipCity, string ShipName,
            DateTime OrderDate, string ShipCountry, string ShipPostalCode, bool Verified)
        {
            this.OrderID = OrderId;
            this.CustomerID = CustomerId;
            this.EmployeeID = EmployeeId;
            this.Freight = Freight;
            this.ShipCity = ShipCity;
            this.ShipName = ShipName;
            this.OrderDate = OrderDate;
            this.ShipCountry = ShipCountry;
            this.ShipPostalCode = ShipPostalCode;
            this.Verified = Verified;
        }
        public long OrderID { get; set; }
        public string CustomerID { get; set; }
        public int EmployeeID { get; set; }
        public double Freight { get; set; }
        public string ShipCity { get; set; }
        public string ShipName { get; set; }
        public DateTime OrderDate { get; set; }
        public string ShipCountry { get; set; }
        public string ShipPostalCode { get; set; }
        public bool Verified { get; set; }
    }
}


VN Vignesh Natarajan Syncfusion Team July 16, 2018 10:30 AM UTC

Hi David, 

Thanks for the update. 

According to your query, you are facing issue while rendering the scroller bar at top. We have prepared a sample using your code snippet in 16.1.0.24 version and we are able to render the scrollbar at top. We are not able to reproduce the reported issue at our end. 

Kindly download the sample from below link 

Share the following detail to reproduce the reported issue at our end. 

  1. Share the video demonstration of the issue.
  2. Share the screenshot of script error in console window (if any).
  3. If possible try to reproduce the reported issue at our end.
  4. From you code snippet we have found that you have referred 16.1.0.37 version script and 16.1.0.24 dll’s . kindly ensure to refer the same version of dll’s and scripts.

Regards, 
Vignesh Natarajan. 


DP David Price July 16, 2018 02:34 PM UTC

Hi,

It seems that I have 

function GridCreateEvent(args) { 
                                                
    var gridObj = $('#<%= Grid1.ClientID %>').ejGrid("instance"); 
    args.model.columns[0]['visible'] = false; 
    args.model.columns[0]['isPrimaryKey'] = true; 
                                                                                                
    gridObj.columns(args.model.columns)                                                                                                 

}           


<ClientSideEvents DataBound="createEvent" Create="GridCreateEvent"  /> 

Which is conflicting with the top scrollbars. Since I want to hide the ID's showing in the grid. They don't show with this code in place?









VN Vignesh Natarajan Syncfusion Team July 17, 2018 12:41 PM UTC

Hi David, 

Thanks for the update. 

We have modified the sample as per your suggestion and we are able to reproduce the reported issue at our end. This is due to dataBound event will be triggered once the dataSource bound to Grid and at that time scroller is rendered at top.  

In the create event you have changes the column properties and updated it through columns API. So scroller at top gets removed. So we suggest you to update the column properties in the DataBound event and then render the scroller at top.   

Refer the below code example 

<ej:Grid ID="Grid1" runat='server' MinWidth="400" Width="500" Height="580"  AllowScrolling="true" AllowSorting="true" > 
                   <ClientSideEvents DataBound="bound"  />  
.                       .                   .                .  
 
                </ej:Grid> 
              </div> 
              <script type="text/javascript">     
        
                  function bound(args) { 
                      try { 
                 var gridObj = $('#<%= Grid1.ClientID %>').ejGrid("instance");  
                 args.model.columns[0]['visible'] = false;  
                 args.model.columns[0]['isPrimaryKey'] = true;  
                 gridObj.columns(args.model.columns)           
                var width, height, maximum, viewportSize; 
                var scroller = this.getScrollObject(); 
                width = viewportSize = this.model.scrollSettings.width - scroller.model.scrollerSize; 
                height = scroller.model.scrollerSize; 
                maximum = scroller.content()[0]["scrollWidth"]; 
.                    .                  .             .           .          .  
 
    $(function () { 
        $('#<%= Grid1.ClientID %>').find(".e-content").scroll(function (args) { 
            var grid =  $('#<%= Grid1.ClientID %>').ejGrid("instance"); 
            var scroller = grid.getScrollObject(); 
            var scrollLeft = scroller._rtlScrollLeftValue; 
            var value = scroller.scrollLeft(); 
            if (grid.model.enableRTL) { 
                value = value - scrollLeft; 
            } 
            var scrollbar = $("#scroll").ejScrollBar("instance"); 
            scrollbar.scroll(value); 
        }); 
    }); 
</script> 
               

Note: in the previously shared code snippet, you have taken the Grid ID wrongly. So kindly refer above code example (highlighted).  

Refer the below screenshot for the output 

 

Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan  


DP David Price July 24, 2018 04:11 PM UTC

Hello,

This example doesn't work

I have made the columns wider so the scrollbars show as you can see they are not in sync



I have also noticed that moving the bottom scroll doesn't make the top one move?

In the past, you have said that the attachment doesn't work so I have also uploaded it to http://viewo.com/Test4.aspx.zip for you to review.


Attachment: Test4.aspx_18368e90.zip

VN Vignesh Natarajan Syncfusion Team July 25, 2018 12:59 PM UTC

Hi David, 
 
Thanks for the update.  
 
According to your you are facing issue while resizing the Grid column and we have achieved your requirement using Resized event of Grid  
You have render the Grid with FrozenColumn enabled so, we have modified the previously provided code example to render the scrollbar at top of Grid.  
 
Refer the below code example for modified codes 
 
   <script type="text/javascript">                                             
                                                    .                       .                       .                     .          . 
                                                function resize(args) { 
                                                    scrollcheck(args); 
                                                } 
                                                function scrollcheck(args) {                                                   
                                                    var width, height, maximum, viewportSize; 
                                                    var GridObj = $('#<%= Grid1.ClientID %>').ejGrid("instance"); 
                                                    var scroller = GridObj.getScrollObject(); 
                                                    width = viewportSize = GridObj.model.scrollSettings.width - scroller.model.scrollerSize; 
                                                    height = scroller.model.scrollerSize; 
                                                    if (GridObj.model.scrollSettings.frozenColumns > 0) 
                                                        maximum = scroller.content().find(".e-movablecontent")[0]["scrollWidth"] + scroller.content().find(".e-frozencontentdiv")[0]["scrollWidth"]; 
                                                    else 
                                                        maximum = scroller.content()[0]["scrollWidth"]; 
                                                    $("#scroll").ejScrollBar({ 
.                      .                      .                  .                 .                 . 
                                                    GridObj.element.find(".e-gridheader").append($("#scroll")); 
                                                } 
                                            function createEvent(args) { 
                                                var gridObj = $('#<%= Grid1.ClientID %>').ejGrid("instance");  
                                                args.model.columns[0]['visible'] = false;  
                                                args.model.columns[0]['isPrimaryKey'] = true;                                                                                                  
                                                gridObj.columns(args.model.columns); 
                                                scrollcheck(args); 
                                            } 
 
 
             $(function () { 
                 var GridObj = $('#<%= Grid1.ClientID %>').ejGrid("instance") 
                 if (GridObj.model.scrollSettings.frozenColumns > 0) 
                     var content = ".e-movablecontent" 
                 else 
                     var content = ".e-content"; 
                 $('#<%= Grid1.ClientID %>').find(content).scroll(function (args) { 
                             var grid =  $('#<%= Grid1.ClientID %>').ejGrid("instance"); 
                             var scroller = grid.getScrollObject(); 
.                .                .                .              .                 .              .  
                    });                                            
                                        </script> 
 
                                                                                                                                   
 
                                         
                                                           
                                                                                                                                                                
                                              <div id="scroll"></div> 
                                             <ej:Grid ID="Grid1" Width="1200" runat="server" AllowResizeToFit="true" AllowResizing="true" AllowScrolling="true"  >    
                                                       <ScrollSettings Width="180" FrozenColumns="2"/>   
                                                <EditSettings AllowEditing="True"></EditSettings> 
                                                <ToolbarSettings ShowToolbar="True" ToolbarItems="edit,update,cancel"></ToolbarSettings> 
                                                <ClientSideEvents DataBound="createEvent" Resized="resize" QueryCellInfo="GridQueryCellInfoEvent"  />  
                                            </ej:Grid>  
 
                                       
 
               
    
We have created a function called scrollCheck(). In this method only we will initiate to render the scrollbar at top. So We have called this method whenever the Grid is resized. So that scrollbar at top will also get refreshed. 
 
Kindly download the modified sample from below link 
 
 
Refer our help documentation for your reference 
 
 
Regards, 
Vignesh Natarajan   


Loader.
Up arrow icon