I have a custom dropdown component in each header cell of ngx-datatable.But when I click at that dropdown then it is going inside ngx-datatable body.How can I add custom dropdown so that its popup will come on the top.

[mohittripathi]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

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. I tried with three or four dropdown.

Expected behavior I have custom dropdown component in each header cell of ngx-datatable. But when I click at dropdown the it is going then it should disply that dropdown.

Reproduction of the problem

    <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 >
            
                <!--<select class="draggable" style="z-index:1000">
                <option value="volvo">{{value}}</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
                </select> -->
                

         

                  <div style="width:150px">
                  <angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 
[settings]="dropdownSettings" 
(onSelect)="onItemSelect($event)" 
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"></angular2-multiselect>

    </ng-template>
    
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template >
        {{row[col]}}

      </ng-template>
    </ngx-datatable-column>

      </li>
    </ul>
    
  </div>
  </ngx-datatable>
</div>

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x

• Angular version: 4.0.0 Typescript version:2.4.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[wizarrc]

@mohittripathi do you have a plunker demo?

[mohittripathi]

I tried but it is giving error at plunkar

[wizarrc]

#959 may be related

[mohittripathi]

I have created a plunkar for angular4 ngx-datatable.But it is showing error.I can add my code there but could you suggest me how to run ngx-datatable at plunkar. https://plnkr.co/edit/Utk4KnNx2I1VaUPs6d04?p=preview

[wizarrc]

@mohittripathi try http://plnkr.co/edit/D7PBYD0yDsHZPKD74oHN?p=preview and go from there.

[wizarrc]

In #959 I suggested that you make an overlay and place the template there outside of the datatable.

[mohittripathi]

Could you tell me how to place the template outside.I am trying to ad custom component in ngx-datatable header.Please help me. The link below you shared me is not allow me to edit at plunkar http://plnkr.co/edit/D7PBYD0yDsHZPKD74oHN?p=preview

[wizarrc]

Stack overflow may be a good place to ask those type of questions. This is mostly for bugs. From the looks of it, it is by design. Another place to ask questions is https://gitter.im/swimlane/ngx-datatable

A good starting place for an overlay would be right before the table and use css to overlap them. Use the css property z-index to have it appear overtop but hidden till activated. It's possible to trigger click events inside the header template, and activate your overlay when handling the event. I don't have any examples on hand.

[wizarrc]

@mohittripathi you should be able to fork any plunker link.

[mohittripathi]

I will re create the issue and share with you at plunkar soon.

[amalleIntesens]

Hi,

I have created a quick plunker for demonstration : http://plnkr.co/edit/gSXcHq39QeFoFaNH6ddp?p=preview

I have tried to work with the z-index property without any results.

[wizarrc]

<select multiple materialize="material_select">
  <option value="na">Na</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

@amalleIntesens replace the above code with a non-expanding component, then place an expanding overlay completely outside the datatable. When the non-expanding component is clicked, trigger the select expansion. You can offset the expanding component's location by getting the position of the non-expanding component. You can get a reference to the non-expanding component by using @ViewChild()

[mohit-kanerika]

@wizarrc :I have 20 columns in ngx-datatable with horizontal scrollbar,If I place the "multi select with checkbox" drop down outside of ngx-datatable then by using css I will set the position.Suppose first five column is displaying at table and rest column will display on horizontal scroll.How can I place the multi select outside the table so that it will work good.

[wizarrc]

@mohit-kanerika aha, never thought of that scenario, just off the top of my head, the only approach I can think of is to somehow query the scroll position and total scroll length, then create your own horizontal viewport for the drop downs, and scroll it in sync with the datatables horizontal scrollbar. I think if you add padding, you can effectively remove the scrollbars on the overlay. Sounds like a big undertaking. Nothing like that would be built-in to the library.

[lmedeiros]

Try adding this css style

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

It worked for me with a bootstrap dropdown inside a cell

[cyberbobjr]

@lmedeiros no it doesn't works sorry :(

[lmedeiros]

@cyberbobjr - here are some package versions:

ng-bootstrap/ng-bootstrap": 1.0.0-beta.7 swimlane/ngx-datatable": 11.1.5 bootstrap: 4.0.0-beta.2 jquery: 3.2.1

I got it fixed here with that.

• try use a button inside dropdown-menu (dropdown-item)

<ngx-datatable-column [sortable]="false" [resizeable]="false" [width]="40">
<ng-template ngx-datatable-cell-template>

<div class="dropdown">
	<button class="btn btn-icon-toggle dropdown-toggle" data-toggle="dropdown" type="button">
		<i class="fa fa-ellipsis-v"></i>
        </button>
	<div class="dropdown-menu">
		<button class="dropdown-item cursor-pointer">some button 1</button>
                <button class="dropdown-item cursor-pointer">some button 1</button>
	</div>
</div>

</ng-template>
</ngx-datatable-column>

[DevNogueira]

Hi @mohittripathi ! I was having the same problem! Dtry put that in your css:

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

[DmitriyIvanko]

I found this solution (may help somebody):

1. use @ng-select/ng-select

2. and add attribute: appendTo="body", example:

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

No need any other z-index configurations.

[rcadhikari]

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

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>

[idzeravianka]

if you don't need virtual scroll, disable it, and problem will be fixed

[enu-44]

this solution works for me on angular 11

1. Add css styles global

 .datatable-body-cell {
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
 .ngx-datatable {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

2. Add container="body" to ngbDropdown

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>

3. Result

<ngx-datatable-column name="Options" [width]="70" >
    <ng-template ngx-datatable-cell-template>
        <div class="dropdown btn-group mr-1 mb-1" ngbDropdown  container="body">
            <button type="button" class="btn btn-outline-info dropdown-toggle" ngbDropdownToggle>
                 Dropdown
                <span class="caret"></span>
            </button>
           <div ngbDropdownMenu class="dropdown-menu" role="menu">
               <a class="dropdown-item">Action 1</a>
               <a class="dropdown-item">Action 2</a>
            </div>
         </div>
    </ng-template>
</ngx-datatable-column>

[thanhhy]

this solution works for me on angular 11

1. Add css styles global

 .datatable-body-cell {
    overflow-y: visible !important;
    overflow-x: visible !important;
  }
 .ngx-datatable {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

2. Add container="body" to ngbDropdown

<div ngbDropdown class="d-inline-block" container="body">
....
.....
</div>

3. Result

<ngx-datatable-column name="Options" [width]="70" >
    <ng-template ngx-datatable-cell-template>
        <div class="dropdown btn-group mr-1 mb-1" ngbDropdown  container="body">
            <button type="button" class="btn btn-outline-info dropdown-toggle" ngbDropdownToggle>
                 Dropdown
                <span class="caret"></span>
            </button>
           <div ngbDropdownMenu class="dropdown-menu" role="menu">
               <a class="dropdown-item">Action 1</a>
               <a class="dropdown-item">Action 2</a>
            </div>
         </div>
    </ng-template>
</ngx-datatable-column>

Thanks pro. It works fine

[andang2208]

I found this solution (may help somebody):

1. use @ng-select/ng-select
2. and add attribute: appendTo="body", example:

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

No need any other z-index configurations.

this save my life