In ngx-datatable, I’ve set up a unique custom dropdown component within every header cell

Question

In ngx-datatable, I’ve set up a unique custom dropdown component within every header cell

I have a custom dropdown component in each header cell of my ngx-datatable. However, when I click on the dropdown, it is going inside the body of ngx-datatable. Can someone please help me resolve this issue?

My development environment includes Angular 4.0 and TypeScript 2.4.

Attached screenshots: https://i.sstatic.net/jIWVR.png

https://i.sstatic.net/RwQtB.png

Below is my code snippet:

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

angular typescript angular2-template ngx-datatable

Answer 1

Answer №1

When dealing with the ngbDropdown dropdown, I was able to fix a similar problem by including the container="body" attribute like so:

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

Answer 2

When dealing with the ngbDropdown dropdown, I was able to fix a similar problem by including the container="body" attribute like so:

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

Answer 3

Answer №2

To enhance your component styling, consider incorporating the code snippet below:

.custom-datatable {
  overflow: auto;
  .datatable-header {
    overflow: hidden;
    .datatable-header-cell {
      overflow-x: scroll;
    }
  }
}

Answer 4

To enhance your component styling, consider incorporating the code snippet below:

.custom-datatable {
  overflow: auto;
  .datatable-header {
    overflow: hidden;
    .datatable-header-cell {
      overflow-x: scroll;
    }
  }
}

Answer 5

Answer №3

Encountered a similar issue:
My personalized dropdown got hidden behind the <datatable-body>.
Resolved it by following these steps:

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

However, when using horizontal scrolling with [scrollbarH], the content within the <datatable-header> spilled over horizontally. To address this, I placed my <ngx-datatable> inside a <div> and applied overflow:hidden to it.

Hoping that this solution proves helpful for someone else down the line. :)

Answer 6

Encountered a similar issue:
My personalized dropdown got hidden behind the <datatable-body>.
Resolved it by following these steps:

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

However, when using horizontal scrolling with [scrollbarH], the content within the <datatable-header> spilled over horizontally. To address this, I placed my <ngx-datatable> inside a <div> and applied overflow:hidden to it.

Hoping that this solution proves helpful for someone else down the line. :)

Answer 7

Answer №4

For anyone looking for a solution, I came across this helpful method: 1) Utilize @ng-select/ng-select 2) Simply add the attribute: appendTo="body", like so:


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

No need to worry about any additional z-index configurations.

Answer 8

For anyone looking for a solution, I came across this helpful method: 1) Utilize @ng-select/ng-select 2) Simply add the attribute: appendTo="body", like so:


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

No need to worry about any additional z-index configurations.

Answer 9

Answer №5

Sharing templates can easily be achieved by incorporating a TemplateRef as a ViewChild.

For instance, consider the following scenario:

Assume we have specific columns along with a template (situated 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>

In this example, I am binding [cellTemplate] to the dateTemplate. The date template is declared in my component as a ViewChild using a template reference.

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

...

In your situation, you can follow a similar approach but utilize [cellHeaderTemplate] instead of [cellTemplate]!

Answer 10

Sharing templates can easily be achieved by incorporating a TemplateRef as a ViewChild.

For instance, consider the following scenario:

Assume we have specific columns along with a template (situated 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>

In this example, I am binding [cellTemplate] to the dateTemplate. The date template is declared in my component as a ViewChild using a template reference.

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

...

In your situation, you can follow a similar approach but utilize [cellHeaderTemplate] instead of [cellTemplate]!

Answer 11

Answer №6

simply using ViewEncapsulation.None in the component along with

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

in the .css or .scss file solved the issue for me.

Answer 12

simply using ViewEncapsulation.None in the component along with

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

in the .css or .scss file solved the issue for me.

Answer 13

Answer №7

I encountered a comparable problem when trying to display a drop-down (utilizing ngbTypeahead) within ngx-datatable columns. The solution that worked for me was adding container="body" to the input element.

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

Answer 14

I encountered a comparable problem when trying to display a drop-down (utilizing ngbTypeahead) within ngx-datatable columns. The solution that worked for me was adding container="body" to the input element.

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

In ngx-datatable, I’ve set up a unique custom dropdown component within every header cell

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

The routing on the Angular app is malfunctioning after deployment via Azure Static App

What is the best way to apply a custom date format of 'MM/DD/YYYY H:MM am/pm' with moment.js?

Angular: Safely preserving lengthy content without the use of a database

What could be causing the interface to malfunction when defining a type that includes an enum as a property key?

How can you set a checkbox to be selected when a page loads using Angular?

Issue with *ngIf on Nativescript not functioning properly on iOS

Is it possible to efficiently structure intricate JSON data onto interfaces in TypeScript with the incorporation of observables?

Is there a way to reset the yAxes count of a chart.js chart in Angular when changing tabs?

What's the best way to implement satisfies with a generic type?

What is the syntax for typing a mongoose populated field in Typescript?

Upgrading from Angular 5 to 6: Embracing the RxJS Changes without the crutch of rxjs

The disappearing act of embedded Twitter timelines in Ionic 2

Querying the Firebase real-time database and refining the output using an Angular pipe

I am looking to include both a space and a comma in the State dropdown value in an Angular application

Utilizing ngrx/store in Angular 2 for Search Functionality

Can data from an Angular app be accessed by an external JavaScript code within the same project?

Setting up a project with Angular 2 and NodeJS

Ensure that enums in Typescript are initialized explicitly

What exactly does RouteComponentProps entail?

"Securing your Angular application: A guide to encrypting and decrypting