Scrollbars

[David Barrett]

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]

Hi David, 

 

We have analyzed your requirement by we unable to reproduced the issue. Please find the demo sample . 

 

Sample : http://js.syncfusion.com/demos/web/#!/bootstrap/grid/scrolling/defaultfunctionalities 

 

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]

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:  

 

   

 

Sample: http://www.syncfusion.com/downloads/support/forum/128280/ze/Html_Encode_Feature177609291 

  

Regards,  

Prasanna Kumar N.S.V  

[David Barrett]

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]

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]

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]

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