0

I am using devextreme Data grid with angular 4 and some how I am not able to remove the blank space in grid header after binding the data to grid. Below is my HTML code for dx-data-grid on how i am specifying the columns.

    <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>

and below is the attached image that represents the blank space where i am getting on grid header.

enter image description here

Could any one please help give any suggestions on this query about how to remove that white blank space on grid header.

Many Thanks in advance.

Glory Raj
  • 17,397
  • 27
  • 100
  • 203
  • You should be able to use the browser developer tools to locate the element and reduce the height with CSS. Otherwise, please create a StackBlitz and someone can take a look – user184994 Aug 28 '18 at 20:42
  • if i remove the blank space, the vertical column bars height will be the same .. for SHR and H/p – Glory Raj Aug 28 '18 at 20:45

1 Answers1

0

I found two way of fixing this

  1. Use the height property of the DataGrid component

  2. If that is not possible, for example when there are multiple grids and you don't know what size they could be

    .dx-row.dx-freespace-row { display: none !important; }

https://supportcenter.devexpress.com/ticket/details/t351629/data-grid-generates-an-extra-row

drBibber
  • 1