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.
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>
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>
<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.
Using the incell editing for the primeng TurboTable, I am trying to execute a method by clicking on enter key. Here is the following code:
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData.vin" (keyup.enter)="onKeyPress($event)">
</ng-template>
<ng-template pTemplate="output">
{{rowData.vin}}
</ng-template>
</p-cellEditor>
</td>
The problem is that the method onKeyPress is not executed by clicking on the enterKey. So I've tried with keypress as following:
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData.vin" (keypress)="onKeyPress($event)">
</ng-template>
<ng-template pTemplate="output">
{{rowData.vin}}
</ng-template>
</p-cellEditor>
</td>
And what I've noticed is that the method onKeyPress is executed by clicking on any button except the enter Key.
I think onEditComplete event catches the enter key press.
Check https://www.primefaces.org/primeng/#/table under Events.
To call your function on enter key press you can do this:
<p-table ... (onEditComplete)="onEditComplete($event)">
...
<td [pEditableColumn]="rowData" pEditableColumnField="'vin'">
In your component:
onEditComplete(event) {
console.log(event.data);
}
I Tried to use keydown instead of Keyup and it works fine
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input type="text" [(ngModel)]="rowData.vin"
(keydown.enter)="onKeyDown($event)">
</ng-template>
<ng-template pTemplate="output">
{{rowData.vin}}
</ng-template>
</p-cellEditor>
</td>