1. Home
  2. Forum
  3. Angular
  4. Scroll doesn't work inside of grid

Scroll doesn't work inside of grid

Hi support team,

i'm working on C#, MVC.NET, Angular application. I'm using ejGrid component for data rendering and i have issue related with scroll implemented inside of grid. Problem is that my scroll doesn't work as it expected, it scrolls only for few rows and after that it blocks my grid! One interested fact that i should mention is that i'm using groping result in my grid and when i expand some group and when i close (shrink) group after that, scroll begin to work! 

I have provided you some example in attachment and basic view of blocked page so please take a better look on this and i will be more than happy if you provide me some help with this. Thanks!


Best regards,
Goran.



Attachment: holidays_ada8c365.zip

5 Replies
SE Sathyanarayanamoorthy Eswararao Syncfusion Team March 15, 2018 04:25 PM UTC

Hi Goran, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are unable to reproduce the mentioned issue on our end. We have prepared a sample with the same requirement and the same can be found below. 


Refer the code example below. 

 
[gridcomponent.html] 
 
<ej-grid #grid  [dataSource]="gridData" [allowPaging]="false" [allowSorting]="false" [isResponsive]="true" [allowGrouping]="true" [groupSettings]="groupSettings" [allowScrolling]="true" [scrollSettings]="scrollSettings"> 
      <e-columns> 
        <e-column headerText="Photo"> 
          <ng-template e-template let-data> 
             <div *ngIf="data.EmployeeID"> 
             <img style="width: 75px; height: 70px" [attr.src]="'app/Content/images/grid/Employees/' + data.EmployeeID + '.png' " [alt]="data.EmployeeID" /> 
             </div> 
         </ng-template> 
      </e-column> 
              …. 
      </e-columns>     
    </ej-grid> 
 
[gridcomponent.ts] 
 
export class GridComponent { 
                       …. 
    constructor() 
    { 
               
        this.gridData = window.gridData; 
        this.groupSettings = { groupedColumns: ["ShipCountry"], showUngroupButton: false, showGroupedColumn: false, showDropArea: false }; 
        this.scrollSettings = { width: "auto", height: 745 }; 
       
    } 

If you still face the issue please share the following details. 

  1. Syncfusion Essential studio versions.
  2. Screenshot or video of replication procedure of issue since we are not able to download the previously given images from the given link.
  3. Check whether any script errors are thrown in the console.
  4. If possible try to reproduce the mentioned issue in attached sample.

Regards, 
Sathyanarayanamoorthy 



IJ Ivan Janjic March 16, 2018 03:27 PM UTC

Hi all,

I already wrote about the grid scroll problems here on forums. I think I found the cause of the problem. Scrolling is not working properly when grid is inside the component which is inside the tab control. Something like this:

[HTML]

<ej-tab id="Test">

    <ul>

        <li><a rel='nofollow' href="#tab1">Tab 1</a></li>

        <li><a rel='nofollow' href="#tab2">Tab 2</a></li>

    </ul>

    <div id=" tab1">

        <component-with-grid></component-with-grid>

    </div>

    <div id=" tab2">

        <component-2></component-2>

    </div>

<ej-tab/>


I also tried loading the content of the tabs on demand but to no avail.



SE Sathyanarayanamoorthy Eswararao Syncfusion Team March 19, 2018 11:52 AM UTC

Hi Ivan, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we are unable to reproduce the mentioned issue on our end. We have prepared a sample with the same requirement which can be found below. 


Refer the below code example. 



 <ej-tab id="tabsample"> 
  <ul> 
      <li><a rel='nofollow' href="#tab1">Grid1</a></li> 
      <li><a rel='nofollow' href="#tab2">Grid2</a></li> 
      <li><a rel='nofollow' href="#tab3">Empty</a></li> 
  </ul>  
 
  <div id="tab1"> 
    <ej-grid #grid  [dataSource]="gridData" [allowPaging]="true" [allowSorting]="true" [isResponsive]="true" [allowGrouping]="true" [groupSettings]="groupSettings" [allowScrolling]="true" [scrollSettings]="scrollSettings"> 
      <e-columns> 
        
      <e-column field="OrderID" headerText="OrderID" width="80"></e-column> 
      <e-column field="EmployeeID" headerText="EmployeeID" widht="120"></e-column> 
      <e-column field="ShipCity" headerText="ShipCity" width="80"></e-column> 
      <e-column field="ShipCountry" headerText="ShipCountry" width="80"></e-column> 
      <e-column field="Freight" headerText="Freight" width="80"></e-column>       
      </e-columns>     
    </ej-grid> 
  </div> 
 
               ….. 
   
</ej-tab> 
 
[component.ts] 
 
constructor() 
    { 
       //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' 
        
       this.gridData =window.gridData; 
        this.scrollSettings = { width:300, height:400 }; 
       
    } 
 

Refer the below screenshot. 
 

If you still face the issue please share the following details. 

  1. Complete code example of the grid in view page and ts file.
  2. Syncfusion essential studio versions.
  3. Screenshot or video of replication procedure of issue.
  4. If possible please try to reproduce the mentioned issue in attached sample.

The provided details will help us to analyze the problem and provide the solution as soon as possible. 

Regards, 
Sathyanarayanamoorthy 


IJ Ivan Janjic March 23, 2018 04:34 PM UTC

Hi Sathyanarayanamoorthy,

As for the code sample, you can refer to the one from the first post in this thread, because it is basically the same. (Goran is working with me on a same project).
What we do, we load data for grid from web API via http service, and we are using bootstrap 4 for the layout (I saw in you sample that you are using bootstrap v3, maybe that can be the issue). One thing that I noticed while testing is that if I change and reload the data for the grid using the same service and the tab with grid is active, scroll shows and works correctly. We have multiple grids across the project, and none of them has working scroll.

Version of SF essential:

"syncfusion-javascript": "^15.4.20"

"ej-angular2": "^15.4.21"

Screenshot of the problem:

Grid

You can see that scroll is not rendered at all. It is also not working when I'm scrolling with the mouse wheel. 

Our angular project is part of the .NET web API project created using guidelines from your site that can be found here. If we load data from the static file, as you do in your sample, everything is fine and works as it should.

Kind regards
Ivan

SE Sathyanarayanamoorthy Eswararao Syncfusion Team March 26, 2018 05:16 PM UTC

Hi Ivan, 

We have analyzed your query and found that in the provided code example you have enabled the isResponsive property. If the isResponsive property of the grid is enabled then we suggest you to set the minWidth value for the grid. If the width of the grid goes below the specified minWidth value then the scroll bar is rendered automatically for the grid to display all the columns of the grid properly. 

Also for the grid to be responsive the script files ej.responsive.css file and ejgrid.responsive.css files has to be referred in the application. 

Please refer the below code example. 

<ej-tab id="tabsample"> 
  <ul> 
      <li><a rel='nofollow' href="#tab1">Grid1</a></li> 
      <li><a rel='nofollow' href="#tab2">Grid2</a></li> 
      <li><a rel='nofollow' href="#tab3">Empty</a></li> 
  </ul>  
 
  <div id="tab1"> 
    <ej-grid #grid  [dataSource]="gridData" [allowPaging]="true" [allowSorting]="true" [isResponsive]="true" [minWidth]="width"   ….     
<e-columns>       
                        ….. 
      </e-columns>     
    </ej-grid> 
  </div> 
  <div id="tab2"> 
    <ej-grid #grid1  [dataSource]="gridData" [allowPaging]="true" [isResponsive]="true" [minWidth]="width"  [allowScrolling]="true"  
 
              ….. 
</ej-tab> 
 
[component.ts] 
 
constructor() 
    { 
       this.dataManager = new ej.DataManager({ 
        crossDomain:true 
    }); 
this.gridData = this.dataManager; 
        this.scrollSettings = { width:600 }; 
      this.minwidth = 700; 
    } 

Please refer the below documentation for the details of the responsive grid. 



If you still face the issue please share a simple issue reproducing sample so that we may analyze the issue and provide the solution as soon as possible. 

Regards, 
Sathyanarayanamoorthy 



Loader.
Up arrow icon