1. Home
  2. Forum
  3. Angular
  4. Scrolling doesn't work as expected

Scrolling doesn't work as expected

I have a ejGrid with two templated columns with scrolling enabled and two problems with it. 

  1. I'm using bootstrap 4 for layout and whatever I do (eg. put grid in col-12 class column), horizontal scroll is visible, and grid is going out of layout horizontally. Width of scroll is set to 100%.
  2. Grid is rendering only the items that are in bounds of the height of the scroll. If I set scroll height to 700px, only that portion of grid is rendered inside the scroll.

Thanks in advance,
Ivan

7 Replies
MS Mani Sankar Durai Syncfusion Team February 28, 2018 12:25 PM UTC

Hi Ivan, 

Thanks for contacting Syncfusion support.  

Before proceeding please provide us the following details. 
1.       Share the screenshot/ video of the issue that you have faced.  
2.       Share the full grid code that you have used. 
3.       Share the Syncfusion Essential studio version that you are using? 
4.       If possible please reproduce the issue in the simple sample 
The provided information will help us to analyze the issue and provide you the response as early as possible 

Regards, 
Manisankar Durai. 


IJ Ivan Janjic February 28, 2018 03:18 PM UTC

Thanks for the answer.

Here's the picture of the problem:
Grid Problem

I'm having troubles pasting code in a reply, so here's my grid code here:

ej-angular2 version is 15.4.21

Can you please also explain how to post code snippets to forum posts? Thanks!

MS Mani Sankar Durai Syncfusion Team March 1, 2018 12:07 PM UTC

Hi Ivan, 

Query 1:  I'm using bootstrap 4 for layout and whatever I do (eg. put grid in col-12 class column), horizontal scroll is visible, and grid is going out of layout horizontally. Width of scroll is set to 100% 
We have checked the query and we are not able to reproduce the reported issue. We have also prepared a sample that can be downloaded from the below link 
To make to grid to be responsive we suggest you to enable isResponsive and minWidth property in grid.  
Please refer the documentation link 
 
Query 2: Grid is rendering only the items that are in bounds of the height of the scroll. If I set scroll height to 700px, only that portion of grid is rendered inside the scroll 
 We are quite unclear regarding the information Grid is rendering only the items that are in bounds of the height of the scroll.  
1.       Is that the full data for the grid are not bounded? 
2.       Share the component.ts file that you have used.  

Query 3: Can you please also explain how to post code snippets to forum posts 
 
 Please follow below steps to formatting content and codes.       
     
  1. Open MS word document or Outlook, then edit code in which format you want to paste.
  2. Copy the code from Visual studio and paste in word file or outlook.
  3. Then copy the content and code from MS word and paste it into our text editor. 
  4. Then it will be formatted as you pasted in the text editor.
We will include this (code snippets) feature in our forum page in upcoming website release.  
  
Note:  If you directly copy and paste from Visual studio it’s will not format.   
Please let us know if you need further assistance.  

Regards, 
Manisankar Durai. 


IJ Ivan Janjic March 1, 2018 02:52 PM UTC

Hi Manisankar,

Thanks for the answer

To answer your questions:
1.       Is that the full data for the grid are not bounded? 
     - Full data is bound, but only part of the data is rendered. See image:
          Grid Problem
2.       Share the component.ts file that you have used.  
     The only part relevant to the scroll settings:
     this.scrollSettings = { width: "100%", height: 650, autoHide: true };



RS Renjith Singh Rajendran Syncfusion Team March 2, 2018 12:25 PM UTC

Hi Ivan, 

In our previous update we have prepared a sample and shared with you based on the code snippets shared by you. We are not able to reproduce the reported issue with the Grid code you have shared. So the issue may be with the bootstrap model codes, the container of the Grid may affect the grid. So please share the bootstrap model container codes with us. 

We have also shared a sample, if possible please reproduce the issue in the shared sample and share with us. Or if possible share a simple issue reproducing sample. 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Regards, 
Renjith Singh Rajendran. 


IJ Ivan Janjic March 2, 2018 03:48 PM UTC

Hi Renjith

Unfortunately it is not possible for me to prepare the sample because this component is part of the much larger solution and it will take so much time to isolate it. My main problem is with rendered data inside the  grid. It looks like when scrolling is enabled that only data that fits the page height is rendered inside the scroll.

Regards 
Ivan

MS Mani Sankar Durai Syncfusion Team March 5, 2018 12:14 PM UTC

Hi Ivan, 


A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.   
 
 
Regards,   
Manisankar Durai                                                                                                   


Loader.
Up arrow icon