After binding datasource to ejs-grid which consists of child grid the data is moved right

[Lahari Navudu]

Hi Team,

After binding datasource to ejs-grid which consists of child grid the data is moved right in the screen.

This shows like the data of one column shown in the preceding column. You can refer the below code snippet,

<div class='control-body'>

    <ejs-grid #planListGrid id='planListGrid' gridLines='Horizontal' [dataSource]='gridDataSource' [locale]='locale'

      [childGrid]='childGrid' [allowSorting]='true' [sortSettings]='initialSort' [allowSelection]='true'

      [allowFiltering]='true' [allowPaging]='true' width='100%' [height]='windowHeight'

      (excelExportComplete)='onGridExcelExportComplete()' [toolbar]='toolbar' [pageSettings]='pageSettings'

      (toolbarClick)='onGridToolbarClick($event)' [filterSettings]='filterOption' [editSettings]='editSettings'

      [allowExcelExport]='true' [allowResizing]='true' [rowHeight]='30' (actionBegin)="actionBegin($event)"

      (rowSelected)='onGridRowSelected($event)' (rowDeselected)='onGridRowDeselected($event)'

      (excelQueryCellInfo)='exportQueryCellInfo($event)' (actionComplete)='actionComplete($event)'>

      <e-columns>

        <e-column field='name' id='name' headerText='Name' width="250" textAlign='left'

          i18n-headerText="@@PlanList.Grid.Field.name">

          <ng-template #template let-data>

            <div class="grid-row-link">

              <a (click)="onClickPlan(data)" title={{data.name}} class='e-planname-cursor'>

                {{data.name}}

              </a>

            </div>

          </ng-template>

        </e-column>

        <e-column field='description' id='description' headerText='Description' width="300" textAlign='left'

          i18n-headerText="@@PlanList.Grid.Field.description">

        </e-column>

        <e-column field='statusName' id='status' headerText='Status' minWidth="130" textAlign='left'>

          <ng-template #template let-data>

            <div class="status-container" fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="start center">

              <span id='status' [ngClass]="getStatusColorClass(data.status)"></span>

              <span id='inprogressStatus' class="status-text" [innerHtml]='data.statusName'></span>

            </div>

          </ng-template>

        </e-column>

        <e-column field='createdDate' id='createdDate' headerText='Created Date' minWidth="170" textAlign='left'

          [format]='dateFormat' type='date' [filter]='filterDate' i18n-headerText="@@PlanList.Grid.Field.createdDate">

        </e-column>

        <e-column field='startDate' id='startDate' headerText='Start Date' minWidth="170" textAlign='left'

          [format]='dateFormat' type='date' [filter]='filterDate' i18n-headerText="@@PlanList.Grid.Field.startDate">

        </e-column>

        <e-column field='endDate' id='endDate' headerText='End Date' minWidth="170" textAlign='left'

          [format]='dateFormat' type='date' [filter]='filterDate' i18n-headerText="@@PlanList.Grid.Field.endDate">

        </e-column>

      </e-columns>

    </ejs-grid>

 getPlanList() {

    this.assortmentPlanningService.getAvailablePlanList().pipe(takeUntil(this.unSubscribe)).subscribe(res => {

      if (res.success === true) {

        this.gridDataSource = this.dataUtil(res.data?.gridDataSource);

        this.childGridData = res.data?.childGrid;

        for (var i = 0; i < this.childGridData.length; i++) {

          this.childGridData[i].updatedDate = new Date(this.childGridData[i].updatedDate)

        }

        this.childGrid = {

          dataSource: this.childGridData,

          queryString: 'planId',

          allowTextWrap: true,

          allowPaging: false,

          allowSelection: false,

          gridLines: 'None',

          columns: [

            { field: 'planLevel', headerText: $localize`:@@PlanList.planLevel:Plan Level`, width: 150, },

            { field: 'itemLevel', headerText: $localize`:@@PlanList.itemLevel:Item Level`, width: 100 },

            { field: 'periods', headerText: $localize`:@@PlanList.periods:Periods`, width: 90 },

            { field: 'stores', headerText: $localize`:@@PlanList.stores:Stores`, width: 90 },

            { field: 'cluster', headerText: $localize`:@@PlanList.cluster:Cluster`, width: 90 },

            { field: 'createdBy', headerText: $localize`:@@PlanList.createdBy:Created By`, width: 100 },

            { field: 'updatedDate', headerText: $localize`:@@PlanList.updatedDate:Last Updated Date`, width: 130, format: this.dateFormat, type: 'date' },

          ]

        };

        this.planListGrid?.refresh();

        if (this.planListGrid) {

          this.planListGrid.refreshColumns();

        }

      }

    });

  }

Can you please provide any solution for this issue.

Regards,

Lahari Navudu.

[Rajapandi Ravi]

Hi Lahari, 

Greetings from Syncfusion support 

From your update, we could see that you are facing the problem with child grid rendering. Based on your query we have prepared a sample and try to reproduce your reported problem, but it was working fine at our end. Please refer the below sample for more information. 

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

If you still face the problem, please share the below details that will be helpful for us to provide better solution. 

1)            Please share your syncfusion package version. 

2)            Please share what CSS theme you are using to the Grid. 

3)            Please confirm if you have used any custom CSS. 

4)            Please share the screenshot if any scripts error throws in the console window. 

5)            If possible, share the simple issue reproducible sample or try to reproduce the issue in the above attached sample. 

Regards, 

Rajapandi R