Я использую сетку данных devextreme с углом 4 и кое-что, как я не могу удалить пустое пространство в заголовке сетки после привязки данных к сетке.
Ниже мой HTML-код для dx-data-grid о том, как я определяю столбцы.
<dxo-remote-operations [sorting]="true" [paging]="true"></dxo-remote-operations>
<dxo-column-chooser [enabled]="true"></dxo-column-chooser>
<dxo-paging [pageSize]="10"></dxo-paging>
<dxo-pager [showInfo]="true" [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 50]"></dxo-pager>
<div *dxTemplate="let rating of 'RatingTemplate'">
<p>{{rating.value.Rating}}</p>
</div>
<div *dxTemplate="let share of 'ShareTemplate'">
<p>{{share.value.Share}}</p>
</div>
<div *dxTemplate="let temp of 'Template'">
<p>{{temp.value.People}}</p>
</div>
<div *dxTemplate="let data of 'ReportTemplate'">
<a href="JavaScript:void(0)" (click)="ReportTitleClick(data.row)">{{data.value}}</a>
</div>
<div *dxTemplate="let data of 'STemplate'">
<div *ngIf="data.value === 3">
<a href="JavaScript:void(0)" (click)="Show(data)">Mo</a>
</div>
<div *ngIf="data.value !== 3">
<a href="JavaScript:void(0)" (click)="Show(data)">TB</a>
</div>
</div>
<div *dxTemplate="let change of 'changeButton'" class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" appNgBoostrapDropdown data-toggle="dropdown">Change
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li *ngFor="let data of changeOptions" (click)="changewizard(data)"><a>{{data.text}}</a></li>
</ul>
</div>
</dx-data-grid>
и ниже - прикрепленное изображение, представляющее пустое пространство, в которое я попал в заголовок сетки.
Может ли кто-нибудь помочь, пожалуйста, дать какие-либо предложения по этому запросу о том, как удалить это белое пустое пространство в заголовке сетки.
Большое спасибо заранее.