We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date


Is there any way that I can get the horizontal scrollbar for the grid to show up on the top as well as the bottom of the grid. We have some wider grids we are using and they often have scrollbars and it is hard to have to scroll to bottom of the grid to go left and right. if there is a way to duplicate the scrollbar at the top as well it would make it easier 

Just curious if its possible. Thanks

6 Replies

MF Mohammed Farook J Syncfusion Team January 13, 2017 09:52 AM UTC

Hi David, 
We have analyzed your requirement by we unable to reproduced the issue. Please find the demo sample . 
Please confirm the following details in before start your requirement. 
1.       What did you face difficulty to scroll to grid 
2.       Please share the more details about your requirement and share the screen shot . 
3.       Please share the code example , if it possible share your sample  
J.Mohammed Farook   

PK Prasanna Kumar Viswanathan Syncfusion Team January 13, 2017 10:21 AM UTC

Hi David,  
Please ignore the previous update. 
We have created a sample and in this sample we have used databound event to generate the scrollbar in the middle of the content and header. 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.    
Find the code example, screenshot and sample:  
                 // the datasource "window.gridData" is referred from jsondata.min.js 
  dataSource: window.gridData, 
  allowScrolling: true, 
  create : function (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"]; 
         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; 
      scrollSettings: { width: 600,height: 300 }, 
      columns: [ 
             $('#Grid').find(".e-content").scroll(function (args) { 
                 var grid = $("#Grid").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"); 
Prasanna Kumar N.S.V  

DB David Barrett January 13, 2017 02:21 PM UTC

Thank you so much for your reply,

  I looked at your version and saw what it can do so I put it in mine and I seem to get an error

Uncaught TypeError: Cannot read property 'ejScroller' of null

I made sure that I had replaced your "#Grid" with my tag but it still had issues. Is it something to do with my grid or something to do with my 
version of the software. I am using a custom javascript version. I tried using the full version I have but that didn't seem to make a difference. 

I really appreciate the help


DB David Barrett January 15, 2017 05:19 AM UTC

Ok I found that since I am using a different way to get the data into table that putting the initial function under create was causing the error. So I moved the function to the dataBound event and then the error goes away. But it doesn't append the scrollbar to the header. With some testing I can see it seems to make the scrollbar but this line doesn't seem to place it on the page nothing shows up there 


I can replace $('#scroll) with '<div>test</div>' and it shows up but the scrollbar doesn't. I was using the sample version of the javascript file so Im not missing any pieces that I can see but not sure why it doesn't place it on page. Did moving it to the databound event change something?

Thanks for any help

DB David Barrett January 15, 2017 05:27 AM UTC

Never mind I found it I forgot to add the initial div to the page with the id of scroll

My mistake. Thanks very much for all the help, this will be a big fix for me

MS Mani Sankar Durai Syncfusion Team January 16, 2017 11:19 AM UTC

Hi David. 

We are happy to hear that your problem has been solved. 

Please let us know if you need further assistance. 

Manisankar Durai 

Live Chat Icon For mobile
Up arrow icon