primeng

How to filter results for range slider with multiple checkbox together in Angular 2?

生来就可爱ヽ(ⅴ<●) 提交于 2021-02-19 07:34:11
问题 I am trying to filter results for the given array "db", there are three filters: price, duration, and category. I tried using filter() method to filter results. Here is the link of code which i have tried: https://stackblitz.com/edit/multiple-filters?file=app%2Fapp.component.ts component.html <div class="filters"> <div id="price"> <h3>Price: {{rangeValues[0] + ' - ' + rangeValues[1]}}</h3> <p-slider [(ngModel)]="rangeValues" (click)="handleChange()" [min]="0" [max]="2000" [style]="{'width':

Disable dropdown close of multiselect on click of a field inside multiselect dropdown in PrimeNG

北战南征 提交于 2021-02-16 18:54:25
问题 I am working on a requirement in which I am using PrimeNG multiselect. This multiselect has checkboxes followed by some text and logo. On click of logo I am displaying some data in popup. On click of the ok button of popup the background multiselect closes, where in I need to disable closing of popup on click of logo. Heere is the stackblitz example for reference: Stackblitz Demo click here. Step 1: Open mutiselect and click on logo Step 2: Click ok of popup Step 3: Multiselect Dropdwon

PrimeNG multiselect select and deselect value

混江龙づ霸主 提交于 2021-02-11 14:24:11
问题 How do we know in primeNG multiselect whether value/object is selected or deselected. https://www.primefaces.org/primeng/#/multiselect onChange event.originalEvent: browser event event.value: Current selected values event.itemValue: Toggled item value event.value always return the latest array of selected values event.itemValue returns the selected/unselected value I found in the documentation these three events and in debugging I didn't find any selection and deselection attribute. Any help

Angular 6 - PrimeNG - how to sort column by Date?

亡梦爱人 提交于 2021-02-11 12:11:36
问题 I have a code in Angular - PrimeNG and trying to make sorting by date (one of the columns): <p-table [columns]="cols" [value]="questions" selectionMode="single" [(selection)]="selectedQuestion" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="20"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <td *ngFor="let col of

Angular 6 - PrimeNG - how to sort column by Date?

老子叫甜甜 提交于 2021-02-11 12:11:31
问题 I have a code in Angular - PrimeNG and trying to make sorting by date (one of the columns): <p-table [columns]="cols" [value]="questions" selectionMode="single" [(selection)]="selectedQuestion" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="20"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <td *ngFor="let col of

PrimeNG DataTable Row Selection - Change Color

半世苍凉 提交于 2021-02-10 19:57:50
问题 Whats the best way to style the row selection of the primeng datatable grid? I have a checkbox and when selected the row changes to a bootstrap blue. I want to lighten the color for the row selection. How do I do this? 回答1: I'm not sure if you found your answer anywhere, but the CSS you're looking for is this: body .ui-datatable .ui-datatable-data tr.ui-datatable-even.ui-state-highlight { /*background-color handles the color of the highlighted row*/ /*color sets the color of the text*/

PrimeNG DataTable Row Selection - Change Color

社会主义新天地 提交于 2021-02-10 19:57:43
问题 Whats the best way to style the row selection of the primeng datatable grid? I have a checkbox and when selected the row changes to a bootstrap blue. I want to lighten the color for the row selection. How do I do this? 回答1: I'm not sure if you found your answer anywhere, but the CSS you're looking for is this: body .ui-datatable .ui-datatable-data tr.ui-datatable-even.ui-state-highlight { /*background-color handles the color of the highlighted row*/ /*color sets the color of the text*/

PrimeNG 6 dropdown not correctly showed

倾然丶 夕夏残阳落幕 提交于 2021-02-10 17:44:07
问题 I migrated to PrimeNG 6.1.7 and I've a problem with p-dropdown. This is my code import in app.module (taken from a simple example): import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {DropdownModule} from 'primeng/dropdown'; // include this for dropdown support @NgModule({ declarations: [ AppComponent ], imports

How to expand/collapse groups using PrimeNG?

China☆狼群 提交于 2021-02-08 08:24:20
问题 I'm simply trying to add 2 buttons to expand and collapse all groups in my code using primeNG. Here's my working code: PLUNKER <p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true" [sortableRowGroup]="false"> <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template> <p-column field="status" header="ID"></p-column> <p-column field="name" header="Title"></p-column> </p-dataTable> 回答1: Use

How to expand/collapse groups using PrimeNG?

[亡魂溺海] 提交于 2021-02-08 08:22:24
问题 I'm simply trying to add 2 buttons to expand and collapse all groups in my code using primeNG. Here's my working code: PLUNKER <p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" groupField="room" expandableRowGroups="true" [sortableRowGroup]="false"> <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData.room}} - INFO</ng-template> <p-column field="status" header="ID"></p-column> <p-column field="name" header="Title"></p-column> </p-dataTable> 回答1: Use