4

I have custom dropdown component in each header cell of ngx-datatable. But when I click at dropdown the it is going inside ngx-datatable body. How can I fix the issue please help me.

I am using angular 4.0 and typescript 2.4.

Screen shot: enter image description here

enter image description here

Here is my code:

 <div>
      <ngx-datatable style="height:450px;"
        class='material'
        [rows]='activeTabData | filtermanual:propKey:propValue | orderBy : {property: column, direction: direction}'
        [columnMode]="'force'"
        [headerHeight]="height"
        [rowHeight]="getRowHeight"
        [scrollbarV]="true"
        [scrollbarH]="true"
        [loadingIndicator]="loadingIndicator"
        [rowClass]="getRowClass"
        (page)="onPage($event)">
      <div>
        <ngx-datatable-column 
          [width]="50"
          [frozenLeft]="true">
            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <input type="checkbox" 
              (ngModelChange)="checkButtonState($event, row)"
              [ngModel]="row.status"
              >
          </ng-template>
        </ngx-datatable-column>

        <ul>
          <li *ngFor="let col of tableKeys; let i=index; let last = last" >
        <ngx-datatable-column name={{col}} width="230" [resizeable]="true">
          <ng-template let-column="column" ngx-datatable-header-template >
              <div class="draggable" style="height:30px;width:160px;background:transparent;z-index:1000;position:relative;cursor:pointer;"></div>

                                    <ng2-multiselect 
                                      [options]="dropdowns[col]"
                                      [loading]="isLoading"
                                      [(ngModel)]="multiModels[col]"
                                      [texts]="{'defaultTitle':col}"
                                      (dropdownOpen)="dropdownOpen()"
                                      (dropdownClosed)="dropdownClosed(col)"
                                      >
                                    </ng2-multiselect>   
        </ng-template>

          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
              <i [innerHTML]="row[col]"></i>
          </ng-template>
        </ngx-datatable-column>

          </li>
        </ul>
      </div>
      </ngx-datatable>
    </div>
Mohit
  • 335
  • 3
  • 10
  • 19
  • can you create a plunker to reproduce ? – Aravind Sep 09 '17 at 12:24
  • What do you mean by " it is going inside ngx-datatable body" ? what is exactly the behaviour? – Vega Sep 09 '17 at 14:43
  • Hi Vega,I have added new screen sort.The dropdown which is opend is hidden by table body.Please help me.How can I fix the issue. – Mohit Sep 09 '17 at 14:48
  • @Mohit Any updates? I've got the same problem. – jeti Jan 22 '18 at 15:16
  • I got the solution for that.You need to call the function below on click of dropdown.Let me know if any issue you have. dropdownSettingOnTop(){ let rows = document.getElementsByClassName('datatable-row-wrapper'); for (let i = 0; i < rows.length; i++) { let row = rows[i]; row.style.zIndex = '' + (1000 - i); } } – Mohit Jan 24 '18 at 05:04

7 Answers7

6

For ngbDropdown dropdown, I resolved the similer issue by adding the container="body" atrribute as below:

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>
rc.adhikari
  • 1,974
  • 1
  • 21
  • 24
1

You can try adding the following into your component styles:

ngx-datatable {
  overflow: visible;
  .datatable-header {
    overflow: visible;
    .datatable-header-cell {
      overflow-x: visible;
    }
  }
}
Heehaaw
  • 2,677
  • 17
  • 27
1

I've got the same issue:
My custom dropdown became hidden by the <datatable-body>.
I got it working by: 

.datatable-header-cell,
.datatable-header {
    overflow:visible !important;   
}
.datatable-row-center{
   z-index:11;
}

But then using the horizontal scrolling [scrollbarH], the content inside the <datatable-header> overflew horizontally, so I wrapped my <ngx-datatable> in a <div> and set overflow:hidden to it.

I hope someone might find this useful in the future. :)

jeti
  • 1,650
  • 1
  • 19
  • 28
1

I found this solution (may help somebody): 1) use @ng-select/ng-select 2) add attribute: appendTo="body", example:

    <ng-select [items]="simpleItems"
               appendTo="body"
               [(ngModel)]="selectedSimpleItem">
    </ng-select>

No need any other z-index configurations.

Dmitriy Ivanko
  • 950
  • 8
  • 17
0

You can share templates by adding a TemplateRef as a ViewChild.

Let me give you an example:

Let's say we have these columns and a template (outside the columns):

   <ngx-datatable-column prop="deadline" name="Deadline" [cellTemplate]="dateTemplate">
   <ngx-datatable-column prop="entryDate" name="Entry date" [cellTemplate]="dateTemplate">

   <ng-template #dateTemplate let-value="value">{{value | date:"shortDate"}}</ng-template>

as you can see I bind [cellTemplate] to a dateTemplate. This date template is defined in my component as a ViewChild with a template reference.

export class TableComponent implements OnInit {
  @ViewChild("dateTemplate") dateTemplate: TemplateRef<any>;

...

In your case you can do the same but use [cellHeaderTemplate] instead of [cellTemplate] !

Nick N.
  • 12,902
  • 7
  • 57
  • 75
  • Now it's `[headerTemplate]` not `[cellHeaderTemplate]`, but your solution has the same result as in the question. – jeti Jan 22 '18 at 15:10
0

merely setting with ViewEncapsulation.None in component and

datatable-body-cell {
  overflow: visible !important;
}

in the .css or .scss did the job for me.

daisura99
  • 1,030
  • 1
  • 12
  • 22
0

Had similar issue showing drop-down (using ngbTypeahead) within ngx-datatable columns. Adding container="body" to the input element worked for me.

<input name="xyz" [ngbTypeahead]="searchElement" container="body"/>

Sategroup
  • 955
  • 13
  • 29