<ngx-datatable-column [width]="24"
[sortable]="true"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="true"
[checkboxable]="true">
</ngx-datatable-column>
<ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
<ng-template let-column="column" ngx-datatable-header-template>
<ng-container>
<div ngbTooltip="Click on the word 'Name' to change the sort direction of the student list">
{{column.name}}
</div>
</ng-container>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
<div>
{{value}}
</div>
</ng-template>
</ngx-datatable-column>
This is part of my code. I needed to use a ngbTooltip, which works, for the column header, but when I hover the bubble gets cut off by the datatable. How can I prevent it from getting cutoff?
<ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
<ng-template let-column="column" ngx-datatable-header-template>
<ng-container>
<div container="body" ngbTooltip="Click on the word 'Name' to change the sort
direction of the student list">
{{column.name}}
</div>
</ng-container>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
<div>
{{value}}
</div>
</ng-template>
</ngx-datatable-column>
By adding container="body" to the div with the tooltip it allowed the tooltip window to pop over the borders of the ngx-datatable.
Side note: in my research I found that for ngbTooltip you can add tooltipClass="className" to customize the tooltip window.
Related
I try to apply some css for the ngx-datatable element like this.
.datatable-body-row:hover {
background-color: #3387b5;
}
Nothing changed, result are the same. The css remains default setting.
The color is still the same when I hover my mouse to the specific row.
How can I customize it? Thankyou.
For reference the over all HTML structure are like this.
<ngx-datatable >
<!-- row are included in these column, but these column includes header-->
<ngx-datatable-column >
<ng-template ngx-datatable-header-template>
<label class="datatable-checkbox">
<input />
</label>
</ng-template>
<ng-template ngx-datatable-cell-template >
<label class="datatable-checkbox">
<input type="checkbox" />
</label>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column *ngFor="let column of columns; let i = index" >
</ngx-datatable-column>
</ngx-datatable>
Probably lower CSS Priority
you can use this or raise Priority other way https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
.datatable-body-row:hover,
.datatable-body-row:hover .datatable-row-group {
background-color: #3387b5 !important;
}
Hi I am having two different table (table within table without any unique id)using p-row expansion. while expanding row it expand all the rows, I need to expand only the selected row. My code look like the below syntax.
<p-table>
<ng-template pTemplate="header">
</ng-template>
<ng-template pTemplate="body">
</ng-template>
<ng-template pTemplate="rowexpansion">
<p-table>
<ng-template pTemplate="header">
</ng-template>
<ng-template pTemplate="body">
</ng-template>
</p-table>
</ng-template>
</p-table>
In my HTML file, I've duplicated the "elseBlock2". How do I implement directive (ng-template) to handle it?
<div class="col-2">
<ng-container *ngIf="item.isSuccess; else elseBlock2">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress; else elseBlock2">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</div>
Can work something like this?
<div class="col-2">
<ng-container *ngIf="(item.isSuccess || item.progress); else elseBlock2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
</ng-container>
<ng-template #elseBlock2>
Your content
</ng-template>
</div>
Update:
If you want to display the elseBlock only when it's both not in progress and success you can do something like this:
<div class="col-2">
<ng-container *ngIf="item.isSuccess">
{{getSimplifiedSize(item.file.size)}}
</ng-container>
<ng-container *ngIf="item.progress">
{{item.progress}}%
<mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
</ng-container>
<ng-container *ngIf="!item.progress && !item.isSuccess">
Your content
</ng-container>
</div>
You can use if then else with ternary operator to achieve else-if in Angular
<ng-container
*ngIf="item.isSuccess then successBlock; else (item.progress) ? progressBlock : elseBlock"
></ng-container>
<ng-template #successBlock>
{{ getSimplifiedSize(item.file.size) }}
</ng-template>
<ng-template #progressBlock>
{{ item.progress }}%
</ng-template>
<ng-template #elseBlock>
Error
</ng-template>
In else statement, instead of passing a template, do another conditional check with ternary operator and pass other two templates as values
Is you see the examle so what i want is when i click on top FEMALE this need to check all box the same now, but i dont want the name inside the input ho i can do? Thanks
Here is the example:
https://stackblitz.com/edit/angular-rspagz
https://dgf1hw.run.stackblitz.io/
<ng-select
[items]="people"
[multiple]="true"
bindLabel="name"
groupBy="gender"
[selectableGroup]="true"
[selectableGroupAsModel]="true"
[closeOnSelect]="false"
bindValue="id"
[(ngModel)]="selectedPeople">
<ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" (click)="test(item.gender)" [ngModel]="item$.selected" [ngModelOptions]="{ standalone : true }"/> {{item.gender | uppercase}}
</ng-template>
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/> {{item.name}}
</ng-template>
</ng-select>
Im trying to showup simple tooltips on my ngx-datatable-column header. Important is that I can still use the sort functionality.
Somehow "title" is not working.
<ngx-datatable-column title="my Tooltip" [resizeable]="false" [width]="50" name="Name" prop="key" headerClass="text-left">
Where I can integrate the title tag?
<ngx-datatable #table [rows]="rows" [reorderable]="false" columnMode="force" class="bootstrap table-bordered table-hover" [summaryRow]="true" [summaryPosition]="'bottom'" [loadingIndicator]="showLoadingIndicator" headerHeight="auto" rowHeight="auto" footerHeight="auto" summaryHeight="auto">
<ngx-datatable-column [resizeable]="false" [width]="50" name="Name" prop="key" headerClass="text-left">
<ng-template let-value="value" ngx-datatable-cell-template>
<a href="link" target="_blank" class="text-left">
{{value}}
</a>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
You can use ng-template to set header and tooltip for the header:
<ngx-datatable-column name="Part" headerClass="header" [title]="Hello"
[summaryFunc]="emptySumm">
<ng-template ngx-datatable-header-template let-column="column">
<span title="the tooltip">I am a tooltip</span>
</ng-template>
</ngx-datatable-column>
The complete example can be seen at stackblitz.