Child Elements disappear after scrolling in Grid | Angular.

[Vigneswaran]

Hello,

The child elements disappear after scrolling from left to right but stays intact when I do not scroll.

Kindly help me out on this.

Warm Regards

Vigneswaran

[Ajith Govarthan]

Hi Vigneswaran, 

 

Thanks for contacting Syncfusion support. 

 

Query: The child elements disappear after scrolling from left to right but stays intact when I do not scroll. 

 

Based on your query we suspect that you have used hierarchy grid in your grid application. So, we have prepared sampled and found everything works fine at our end. For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

App.component.html 

 

<div class="control-section"> 

  <ejs-grid 

    #Grid 

    id="Grid" 

    [dataSource]="parentData" 

    width="400" 

    [childGrid]="childGrid" 

  > 

    <e-columns> 

      <e-column 

        field="EmployeeID" 

        headerText="Employee ID" 

        width="120" 

        textAlign="Right" 

      ></e-column> 

      <e-column field="FirstName" headerText="Name" width="140"></e-column> 

      <e-column field="Title" headerText="Title" width="170"></e-column> 

      <e-column 

        field="HireDate" 

        headerText="Hired Date" 

        width="120" 

        format="yMd" 

        textAlign="Right" 

      ></e-column> 

      <e-column 

        field="ReportsTo" 

        headerText="Reports To" 

        width="120" 

        textAlign="Right" 

      ></e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

 

 

App.component.ts 

 

export class AppComponent { 

    public parentData: Object[]; 

    public childGrid: any; 

    public secondChildGrid: any; 

 

 

    ngOnInit(): void { 

        this.parentData = employeeData; 

        this.secondChildGrid = { 

            dataSource: customerData, 

            queryString: 'CustomerID', 

            columns: [ 

                { field: 'CustomerID', headerText: 'Customer ID', textAlign: 'Right', width: 75 }, 

                { field: 'Phone', headerText: 'Phone', width: 100 }, 

                { field: 'Address', headerText: 'Address', width: 120 }, 

                { field: 'Country', headerText: 'Country', width: 100 } 

            ] 

        }; 

        this.childGrid = { 

            dataSource: orderDatas, 

            queryString: 'EmployeeID', 

            allowPaging: true, 

            pageSettings: {pageSize: 6, pageCount: 5}, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

                { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 

                { field: 'Freight', headerText: 'Freight', width: 120 }, 

                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 

            ], 

            childGrid: this.secondChildGrid 

        }; 

    } 

} 

 

 

Sample Link: https://stackblitz.com/edit/angular-pst4j1-ymrgkw?file=app.component.ts 

 

UG-Link: https://ej2.syncfusion.com/angular/documentation/grid/hierarchy-grid/ 

 

If we misunderstood your query, then please share the below details to find the root cause of the issue. 

 

1. Please try to reproduce the issue in the attached sample.

 

2. Share the complete grid code example.

 

3. Share the screenshot or video demonstration of the issue.

 

4. Share the Syncfusion package version.

 

Regards, 

Ajith G.