Multiple filter for DataView

[kmiyatake]

I'm trying to set up multiple filters for DataView at the moment. The documentation says that the filterBy is a string and multiple fields can be defined with a comma separated list.
If I have an input field to do the filtering, how does the input field determine which field to filter on?

Example (added a random field called name to the example in the documentation):

Code: Select all

<p-dataView #dv [value]="cars" filterBy="brand, name">
    <p-header>
        <input type="search" pInputText placeholder="Search" (keyup)="dv.filter($event.target.value)">
       // With this current set up I'm guessing it always filters by Brand because that's the first filterBy string
       // Can I set this up as a global filter?
       // If global filter is not possible, I'm guessing I'm missing something to help indicate that this filter should filter on, for example, name.
    </p-header>
    <ng-template let-car pTemplate="listItem">
        {{car.id}}
    </ng-template>
</p-dataView>

[cagatay.civici]

It checks all field, it is like Global Filtering in TurboTable. The filter value will be checked against brand or value, if either one fits the criteria, it will be displayed.

[kmiyatake]

Thanks for the quick response!
I downloaded the cars data and tried the below code but I only see it filtering on the first value (in this case, color). If I switch the order of the filterBy to brand, color, it will only filter on the brand.

Code: Select all

	<p-dataView #dv [value]="cars" filterBy="color, brand">
		<p-header>
			<input type="search" pInputText placeholder="Search by brand" (keyup)="dv.filter($event.target.value)">
		</p-header>
		<ng-template let-car pTemplate="listItem">
			<div class="ui-g-12 ui-md-8 car-details">
				<div class="ui-g">
					<div class="ui-g-2 ui-sm-6">Vin: </div>
					<div class="ui-g-10 ui-sm-6"><b>{{car.vin}}</b></div>

					<div class="ui-g-2 ui-sm-6">Year: </div>
					<div class="ui-g-10 ui-sm-6"><b>{{car.year}}</b></div>

					<div class="ui-g-2 ui-sm-6">Brand: </div>
					<div class="ui-g-10 ui-sm-6"><b>{{car.brand}}</b></div>

					<div class="ui-g-2 ui-sm-6">Color: </div>
					<div class="ui-g-10 ui-sm-6"><b>{{car.color}}</b></div>
				</div>
			</div>
		</ng-template>
	</p-dataView>

[kmiyatake]

I figured out why my code was not working. I had a space after the commas in the filters. Removing the commas fixed the issue!