What could be the reason for the dataview component in PrimeNG not allowing multiple filters to be applied at once

I'm currently working on a project that utilizes the dataview component from PrimeNG. I am trying to allow users to filter by multiple fields simultaneously, specifically by name and category. However, I have encountered an issue where it only filters by one field at a time.

Here is a snapshot of the complete dataview:

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

For example, when I select the 'Accessories' category, only products with this specific category are displayed. https://i.sstatic.net/phvd8.png

But when I try to search using the input field, it shows products from categories other than 'Accessories'. This discrepancy in applying multiple filters is my current challenge. Can you help me figure out what I might be doing wrong?

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

Below is a snippet of my code:

<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name,category" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
    ....
    <p-multiSelect [options]="listCategory" [(ngModel)]="selectedCategory (onChange)="dv.filter($event.value)" defaultLabel="Select category"> </p-multiSelect>
    <span class="p-input-icon-left p-mb-2 p-mb-md-0">
          <i class="pi pi-search"></i>
          <input type="search" pInputText placeholder="Search by Name" (input)="dv.filter($event.target.value)">
    </span>
...
</p-dataView>

I have created a stackbliz demo to showcase the issue I am facing.

  • Angular Version: 11
  • PrimeNG Version: 11
angulartypescriptprimengdataview

Answer №1

At the top of the search field, consider creating custom filters and integrating them into the dataList using unique pipes if you want to filter based on the label value in a dropdown:

dataList = [{
    name: 'name1'
    },
    {
    name: 'name2'
    }]

with dropdown select value like { label:'James', value:'1'}

Primeng dataview:

<p-dataView [value]="dataList | CustomFilterPipe : 'name': filterNameValue" ...

PrimengFilter Component: databinding

<p-dropdown [(ngModel)]="filterNameValue" ...></p-dropdown>

Unique Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'CustomFilterPipe',
})
export class CustomFilterPipe implements PipeTransform {
  transform(items: any[], name: string, value): any[] {
    // return null if no items are provided
    if (!items) {
      return [];
    }

    // return all items if search value is empty
    if (!value || value.length === 0) {
      return items;
    }
    
    // compare the name field with the dropdown label value
    const itemsToReturn = items.filter(
      (it) => it[field]=== value.label
    );

    return itemsToReturn;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you debug a Node.js CLI tool using WebStorm?

Struggling to develop a CLI tool using TypeScript within WebStorm as my IDE. No matter what I try, debugging just won't work for me. My journey in Node.js CLI programming started with this tutorial. Successfully transpiling the TS source with npx tsc, ...

typescriptdebuggingwebstorm

Issue with Angular 6: Textarea displaying value as Object Object

I have data saved in local storage using JSON.stringify, and I want to display it in a textarea. Here are the relevant code snippets: { "name": "some name" } To retrieve the data, I'm using this: this.mydata = localStorage.getItem('mydata&a ...

jsonangulartypescriptlocal-storageangular6

Utilizing Sharepoint Online SPFX Web parts with React: A guide to selecting scripts dynamically based on environment requirements

Would it be possible for me to dynamically choose which script to utilize in my web component? This is how I currently have my imports set up: import * as jQuery from 'jquery'; import 'jqueryui'; Here's what I am aiming to achie ...

reactjstypescriptsharepointsharepoint-online

How should I structure my MySQL tables for efficiently storing a user's preferences in a map format?

My current project involves developing a web application that provides administrators with the ability to manage user information and access within the system. While most user details like name, email, and workID are straightforward, I am facing difficulty ...

mysqlangulartypescriptspring-boot

Exploring the Potential of Jest Testing for Angular 6 Services

Hey there, I seem to be facing a bit of a roadblock and could use some assistance. Here's the situation - I'm trying to test a service using Jest, but all the tests pass without any issues even when they shouldn't. Here are the details of t ...

angulartypescriptrxjsobservablejestjs

The assignment of Type Observable<Observable<any[]>> to Observable<any[]> is not valid

Working on implementing autocomplete using data from a database service: @Injectable() export class SchoolService { constructor(private db: AngularFirestore) { } getSchools(): Observable<School[]> { return this.db.collection<School> ...

angulartypescriptrxjsrxjs5

Exploring the capabilities of Angular 2.0.0 by testing a component integrated with a

Here's a code snippet of a component in Angular: import {Component, OnInit} from '@angular/core'; import {Route, Router} from '@angular/router'; @Component({ selector: 'app-index', templateUrl: './index.compone ...

angularangular2-routingangular2-testing

"Is it time to kick off your project with the Ionic CLI v3 starter

When using the command ionic start myapp tabs, we receive the starter kit from version 2. However, I would like to initiate an application for Ionic v3. Could it be that the Ionic CLI is not updated? Is this similar to other commands such as ionic genera ...

angulartypescriptionic3ionic-cli

Creating two number-like types in TypeScript that are incompatible with each other can be achieved by defining two

I've been grappling with the challenge of establishing two number-like/integer types in TypeScript that are mutually incompatible. For instance, consider the following code snippet where height and weight are both represented as number-like types. Ho ...

typescripttyping

Accessing properties for objects with map-like characteristics

Many interfaces allow for arbitrary data, as shown below: interface Something { name: string; data: { [key: string]: any }; } The problem arises when trying to access or set values on objects with arbitrary keys in Typescript. let a: Something = { ...

typescript

Tips for passing an array between components in Angular 2

My goal is to create a to-do list with multiple components. Initially, I have 2 components and plan to add more later. I will be sharing an array of tasks using the Tache class. Navbar Component import { Component } from '@angular/core'; impor ...

javascriptangulartypescriptangular-services

Creating synchronous behavior using promises in Javascript

Currently, I am working with Ionic2/Typescript and facing an issue regarding synchronization of two Promises. I need both Promises to complete before proceeding further in a synchronous manner. To achieve this, I have placed the calls to these functions in ...

javascriptsqlitetypescript

How do I create a text file using Ionic framework?

I've been encountering issues writing a text file in Ionic and have tried multiple methods without success. import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'; writeSecretFile = async () => { await Filesystem.writ ...

angularionic-frameworkionic-native

Tips for validating form input upon submission in Angular 6

Within my Angular application, I have successfully implemented form validators. However, I am aiming to trigger form validation specifically upon submission. This means that when the user clicks on the submit button and the form is invalid, the errors indi ...

javascriptangular

By utilizing a function provided within the context, React state will consistently have its original value

After passing functions from one component to its parent and then through context, updating the state works fine. However, there is an issue with accessing the data inside these functions. They continue to show as the initial data rather than the updated v ...

reactjstypescriptnext.js

Retrieving the row value of a checkbox in an Angular table

I'm facing a challenge where I have a table with three columns, one of which is a checkbox. Here is an image for reference: https://i.sstatic.net/4U6vP.png Here is the code snippet: <div nz-row> <nz-table nz-col nzSpan="22" [nzLoading] ...

angulartypescript

Troubleshooting problem with GZIP in Angular 2 application deployment

I have developed an Angular 2 TypeScript application. I am using Firebase for hosting and Cloudflare for optimizing speed, caching, and security. When checking the browser header, it indicates: accept-encoding:gzip, deflate, sdch, br The app.js file has ...

javascriptangulargzipsystemjscloudflare

How do I disable split panel on Ionic 2 login page exclusively?

I have successfully implemented the split-pane feature in my app.html file. However, I am facing an issue where the split pane is being applied to every page such as login and SignUp. Can someone please guide me on how to restrict the split pane function ...

angulartypescriptionic2

Using Typescript to import a module and export a sub function

I am currently using mocha for testing a function, but I have encountered an error while running the test file. The structure of my files is organized as follows: server |-test | |-customer.test.ts |-customer.js Here is the content of the customer.js fi ...

node.jstypescriptmocha.js

Issue with command execution within execSync in node.js

I am facing an issue where a shell command works fine from the terminal, but when I try to run it from node.js, it gives me an error. Original Command awk -v RS='"[^"]*"' '{n+=gsub(/\n/, "&")} END{print n}& ...

javascriptnode.jstypescript