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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Scrollbars

Thread ID:

Created:

Updated:

Platform:

Replies:

128280 Jan 12,2017 08:11 AM UTC Jan 16,2017 11:19 AM UTC JavaScript 6
loading
Tags: ejGrid
David Barrett
Asked On January 12, 2017 08:11 AM UTC



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

Mohammed Farook J [Syncfusion]
Replied On 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  
 
 
 
Regards, 
J.Mohammed Farook   


Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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:  
 
 
$("#Grid").ejGrid({ 
                 // 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"]; 
     $("#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")); 
     }, 
      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"); 
                 scrollbar.scroll(value); 
             }); 
         }); 
 
Screenshot 
 
   
 
  
Regards,  
Prasanna Kumar N.S.V  


David Barrett
Replied On 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

Thanks

David Barrett
Replied On 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 

this.element.find(".e-gridheader").append($("#scroll"));

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

David Barrett
Replied On 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

Mani Sankar Durai [Syncfusion]
Replied On 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. 

Regards, 
Manisankar Durai 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;