Reusable Custom Filter Components
The Grid provides the base for creating an advanced, custom-filter user interface that you can use across multiple Grids.
Depending on the filtering mode of the Kendo UI Grid for Angular, the approach varies.
Row Filtering
To implement a custom and reusable DropDownList filter-cell component in the Grid:
-
Subclass the custom filter component from
BaseFilterCellComponentto utilize the existing functions.export class DropDownListFilterComponent extends BaseFilterCellComponent { //... } -
Pass a
FilterServicethrough its constructor as required by theBaseFilterCellComponentabstract class. This service is responsible for the communication with the host Grid component.constructor(filterService: FilterService) { super(filterService); } -
Add the root
CompositeFilterDescriptoras required by the component so you cab add or modify it with the filter descriptor that will be built.@Input() public filter: CompositeFilterDescriptor; -
Provide the appropriate
textField,valueField, anddatainput properties to reuse the filter component on different column fields. Pass the properties to the DropDownList component.@Input() public data: any[]; @Input() public textField: string; @Input() public valueField: string; -
(Optional) Construct a default item that will be used when the user wants to remove the filter.
public get defaultItem(): any { return { [this.textField]: "Select item...", [this.valueField]: null }; } -
Add the DropDownList component to the template.
@Component({ selector: 'my-dropdown-filter', template: ` <kendo-dropdownlist [data]="data" (valueChange)="onChange($event)" [defaultItem]="defaultItem" [value]="selectedValue" [valuePrimitive]="true" [textField]="textField" [valueField]="valueField"> </kendo-dropdownlist> ` }) export class DropDownListFilterComponent extends BaseFilterCellComponent { //... } -
Hook the
valueChangeevent handler and modify the root filter descriptor.The
applyFilter,removeFilter, andupdateFiltermethods are provided by the base class. Their role is to update the root filter, remove the child filter for the field, and override the child filter.public onChange(value: any): void { this.applyFilter( value === null ? // if value of the default item this.removeFilter(this.valueField) : // remove the filter this.updateFilter({ // otherwise add/modify the filter for the field with the value field: this.valueField, operator: "eq", value: value }) ); // and update the root filter } -
Apply the custom-filter component to the application component.
<kendo-grid-column field="Category.CategoryName" title="Category"> <ng-template kendoGridFilterCellTemplate let-filter> <my-dropdown-filter [filter]="filter" [data]="distinctCategories" textField="CategoryName" valueField="CategoryID"> </my-dropdown-filter> </ng-template> </kendo-grid-column>
The following example demonstrates the full implementation of the approach.
import { Component } from '@angular/core';
import { process, State } from '@progress/kendo-data-query';
import { sampleProducts } from './products';
import {
GridComponent,
GridDataResult,
DataStateChangeEvent
} from '@progress/kendo-angular-grid';
const distinct = data => data
.map(x => x.Category)
.filter((x, idx, xs) => xs.findIndex(y => y.CategoryName === x.CategoryName) === idx);
@Component({
selector: 'my-app',
template: `
<kendo-grid
[kendoGridBinding]="gridData"
[pageSize]="5"
[sortable]="true"
[pageable]="true"
[filterable]="true"
>
<kendo-grid-column field="ProductID" title="ID" width="60" [filterable]="false">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="Category.CategoryName" title="Category">
<ng-template kendoGridFilterCellTemplate let-filter>
<my-dropdown-filter
[filter]="filter"
[data]="distinctCategories"
textField="CategoryName"
valueField="CategoryID">
</my-dropdown-filter>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230" filter="numeric">
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public distinctCategories: any[] = distinct(sampleProducts);
public gridData: any[] = sampleProducts;
}
import { Component, Input } from '@angular/core';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { FilterService, BaseFilterCellComponent } from '@progress/kendo-angular-grid';
@Component({
selector: 'my-dropdown-filter',
template: `
<kendo-dropdownlist
[data]="data"
(valueChange)="onChange($event)"
[defaultItem]="defaultItem"
[value]="selectedValue"
[valuePrimitive]="true"
[textField]="textField"
[valueField]="valueField">
</kendo-dropdownlist>
`
})
export class DropDownListFilterComponent extends BaseFilterCellComponent {
public get selectedValue(): any {
const filter = this.filterByField(this.valueField);
return filter ? filter.value : null;
}
@Input() public filter: CompositeFilterDescriptor;
@Input() public data: any[];
@Input() public textField: string;
@Input() public valueField: string;
public get defaultItem(): any {
return {
[this.textField]: 'Select item...',
[this.valueField]: null
};
}
constructor(filterService: FilterService) {
super(filterService);
}
public onChange(value: any): void {
this.applyFilter(
value === null ? // value of the default item
this.removeFilter(this.valueField) : // remove the filter
this.updateFilter({ // add a filter for the field with the value
field: this.valueField,
operator: 'eq',
value: value
})
); // update the root filter
}
}
import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';
import { DropDownListFilterComponent } from './dropdownlist-filter.component';
// enableProdMode();
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent,
DropDownListFilterComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
GridModule,
DropDownListModule
]
})
export class AppModule { }
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
export const sampleProducts = [
{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 8, 20)
},
{
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 7, 12)
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 8, 26)
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 7, 17)
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
},
"FirstOrderedOn": new Date(1996, 7, 22)
},
{
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 11, 1)
},
{
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
},
"FirstOrderedOn": new Date(1997, 1, 21)
},
{
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
},
"FirstOrderedOn": new Date(1996, 8, 5)
}
];
export const products = [{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18.0000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22.0000,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.3500,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25.0000,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40.0000,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97.0000,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31.0000,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 11,
"ProductName": "Queso Cabrales",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "1 kg pkg.",
"UnitPrice": 21.0000,
"UnitsInStock": 22,
"UnitsOnOrder": 30,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 12,
"ProductName": "Queso Manchego La Pastora",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 86,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 13,
"ProductName": "Konbu",
"SupplierID": 6,
"CategoryID": 8,
"QuantityPerUnit": "2 kg box",
"UnitPrice": 6.0000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 14,
"ProductName": "Tofu",
"SupplierID": 6,
"CategoryID": 7,
"QuantityPerUnit": "40 - 100 g pkgs.",
"UnitPrice": 23.2500,
"UnitsInStock": 35,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 15,
"ProductName": "Genen Shouyu",
"SupplierID": 6,
"CategoryID": 2,
"QuantityPerUnit": "24 - 250 ml bottles",
"UnitPrice": 15.5000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 16,
"ProductName": "Pavlova",
"SupplierID": 7,
"CategoryID": 3,
"QuantityPerUnit": "32 - 500 g boxes",
"UnitPrice": 17.4500,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 17,
"ProductName": "Alice Mutton",
"SupplierID": 7,
"CategoryID": 6,
"QuantityPerUnit": "20 - 1 kg tins",
"UnitPrice": 39.0000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 18,
"ProductName": "Carnarvon Tigers",
"SupplierID": 7,
"CategoryID": 8,
"QuantityPerUnit": "16 kg pkg.",
"UnitPrice": 62.5000,
"UnitsInStock": 42,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 19,
"ProductName": "Teatime Chocolate Biscuits",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 12 pieces",
"UnitPrice": 9.2000,
"UnitsInStock": 25,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 20,
"ProductName": "Sir Rodney's Marmalade",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "30 gift boxes",
"UnitPrice": 81.0000,
"UnitsInStock": 40,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 21,
"ProductName": "Sir Rodney's Scones",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "24 pkgs. x 4 pieces",
"UnitPrice": 10.0000,
"UnitsInStock": 3,
"UnitsOnOrder": 40,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 22,
"ProductName": "Gustaf's Knäckebröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "24 - 500 g pkgs.",
"UnitPrice": 21.0000,
"UnitsInStock": 104,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 23,
"ProductName": "Tunnbröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "12 - 250 g pkgs.",
"UnitPrice": 9.0000,
"UnitsInStock": 61,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 24,
"ProductName": "Guaraná Fantástica",
"SupplierID": 10,
"CategoryID": 1,
"QuantityPerUnit": "12 - 355 ml cans",
"UnitPrice": 4.5000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 25,
"ProductName": "NuNuCa Nuß-Nougat-Creme",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "20 - 450 g glasses",
"UnitPrice": 14.0000,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 26,
"ProductName": "Gumbär Gummibärchen",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 250 g bags",
"UnitPrice": 31.2300,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 27,
"ProductName": "Schoggi Schokolade",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 100 g pieces",
"UnitPrice": 43.9000,
"UnitsInStock": 49,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 28,
"ProductName": "Rössle Sauerkraut",
"SupplierID": 12,
"CategoryID": 7,
"QuantityPerUnit": "25 - 825 g cans",
"UnitPrice": 45.6000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 29,
"ProductName": "Thüringer Rostbratwurst",
"SupplierID": 12,
"CategoryID": 6,
"QuantityPerUnit": "50 bags x 30 sausgs.",
"UnitPrice": 123.7900,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 30,
"ProductName": "Nord-Ost Matjeshering",
"SupplierID": 13,
"CategoryID": 8,
"QuantityPerUnit": "10 - 200 g glasses",
"UnitPrice": 25.8900,
"UnitsInStock": 10,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 31,
"ProductName": "Gorgonzola Telino",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "12 - 100 g pkgs",
"UnitPrice": 12.5000,
"UnitsInStock": 0,
"UnitsOnOrder": 70,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 32,
"ProductName": "Mascarpone Fabioli",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 32.0000,
"UnitsInStock": 9,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 33,
"ProductName": "Geitost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "500 g",
"UnitPrice": 2.5000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 34,
"ProductName": "Sasquatch Ale",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 111,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 35,
"ProductName": "Steeleye Stout",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 18.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 36,
"ProductName": "Inlagd Sill",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 250 g jars",
"UnitPrice": 19.0000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 37,
"ProductName": "Gravad lax",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "12 - 500 g pkgs.",
"UnitPrice": 26.0000,
"UnitsInStock": 11,
"UnitsOnOrder": 50,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 38,
"ProductName": "Côte de Blaye",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "12 - 75 cl bottles",
"UnitPrice": 263.5000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 39,
"ProductName": "Chartreuse verte",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "750 cc per bottle",
"UnitPrice": 18.0000,
"UnitsInStock": 69,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 40,
"ProductName": "Boston Crab Meat",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "24 - 4 oz tins",
"UnitPrice": 18.4000,
"UnitsInStock": 123,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 41,
"ProductName": "Jack's New England Clam Chowder",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "12 - 12 oz cans",
"UnitPrice": 9.6500,
"UnitsInStock": 85,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 42,
"ProductName": "Singaporean Hokkien Fried Mee",
"SupplierID": 20,
"CategoryID": 5,
"QuantityPerUnit": "32 - 1 kg pkgs.",
"UnitPrice": 14.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 43,
"ProductName": "Ipoh Coffee",
"SupplierID": 20,
"CategoryID": 1,
"QuantityPerUnit": "16 - 500 g tins",
"UnitPrice": 46.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 10,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 44,
"ProductName": "Gula Malacca",
"SupplierID": 20,
"CategoryID": 2,
"QuantityPerUnit": "20 - 2 kg bags",
"UnitPrice": 19.4500,
"UnitsInStock": 27,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 45,
"ProductName": "Rogede sild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "1k pkg.",
"UnitPrice": 9.5000,
"UnitsInStock": 5,
"UnitsOnOrder": 70,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 46,
"ProductName": "Spegesild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "4 - 450 g glasses",
"UnitPrice": 12.0000,
"UnitsInStock": 95,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 47,
"ProductName": "Zaanse koeken",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 - 4 oz boxes",
"UnitPrice": 9.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 48,
"ProductName": "Chocolade",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 pkgs.",
"UnitPrice": 12.7500,
"UnitsInStock": 15,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 49,
"ProductName": "Maxilaku",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "24 - 50 g pkgs.",
"UnitPrice": 20.0000,
"UnitsInStock": 10,
"UnitsOnOrder": 60,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 50,
"ProductName": "Valkoinen suklaa",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "12 - 100 g bars",
"UnitPrice": 16.2500,
"UnitsInStock": 65,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 51,
"ProductName": "Manjimup Dried Apples",
"SupplierID": 24,
"CategoryID": 7,
"QuantityPerUnit": "50 - 300 g pkgs.",
"UnitPrice": 53.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 52,
"ProductName": "Filo Mix",
"SupplierID": 24,
"CategoryID": 5,
"QuantityPerUnit": "16 - 2 kg boxes",
"UnitPrice": 7.0000,
"UnitsInStock": 38,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 53,
"ProductName": "Perth Pasties",
"SupplierID": 24,
"CategoryID": 6,
"QuantityPerUnit": "48 pieces",
"UnitPrice": 32.8000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 54,
"ProductName": "Tourtière",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "16 pies",
"UnitPrice": 7.4500,
"UnitsInStock": 21,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 55,
"ProductName": "Pâté chinois",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "24 boxes x 2 pies",
"UnitPrice": 24.0000,
"UnitsInStock": 115,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 56,
"ProductName": "Gnocchi di nonna Alice",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 21,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 57,
"ProductName": "Ravioli Angelo",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 19.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 58,
"ProductName": "Escargots de Bourgogne",
"SupplierID": 27,
"CategoryID": 8,
"QuantityPerUnit": "24 pieces",
"UnitPrice": 13.2500,
"UnitsInStock": 62,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 59,
"ProductName": "Raclette Courdavault",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 55.0000,
"UnitsInStock": 79,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 60,
"ProductName": "Camembert Pierrot",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "15 - 300 g rounds",
"UnitPrice": 34.0000,
"UnitsInStock": 19,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 61,
"ProductName": "Sirop d'érable",
"SupplierID": 29,
"CategoryID": 2,
"QuantityPerUnit": "24 - 500 ml bottles",
"UnitPrice": 28.5000,
"UnitsInStock": 113,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 62,
"ProductName": "Tarte au sucre",
"SupplierID": 29,
"CategoryID": 3,
"QuantityPerUnit": "48 pies",
"UnitPrice": 49.3000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 63,
"ProductName": "Vegie-spread",
"SupplierID": 7,
"CategoryID": 2,
"QuantityPerUnit": "15 - 625 g jars",
"UnitPrice": 43.9000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 64,
"ProductName": "Wimmers gute Semmelknödel",
"SupplierID": 12,
"CategoryID": 5,
"QuantityPerUnit": "20 bags x 4 pieces",
"UnitPrice": 33.2500,
"UnitsInStock": 22,
"UnitsOnOrder": 80,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 65,
"ProductName": "Louisiana Fiery Hot Pepper Sauce",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "32 - 8 oz bottles",
"UnitPrice": 21.0500,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 66,
"ProductName": "Louisiana Hot Spiced Okra",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "24 - 8 oz jars",
"UnitPrice": 17.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 100,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 67,
"ProductName": "Laughing Lumberjack Lager",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 52,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 68,
"ProductName": "Scottish Longbreads",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 8 pieces",
"UnitPrice": 12.5000,
"UnitsInStock": 6,
"UnitsOnOrder": 10,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 69,
"ProductName": "Gudbrandsdalsost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 kg pkg.",
"UnitPrice": 36.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 70,
"ProductName": "Outback Lager",
"SupplierID": 7,
"CategoryID": 1,
"QuantityPerUnit": "24 - 355 ml bottles",
"UnitPrice": 15.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 71,
"ProductName": "Flotemysost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 21.5000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 72,
"ProductName": "Mozzarella di Giovanni",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 34.8000,
"UnitsInStock": 14,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 73,
"ProductName": "Röd Kaviar",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 150 g jars",
"UnitPrice": 15.0000,
"UnitsInStock": 101,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 74,
"ProductName": "Longlife Tofu",
"SupplierID": 4,
"CategoryID": 7,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 10.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 20,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 75,
"ProductName": "Rhönbräu Klosterbier",
"SupplierID": 12,
"CategoryID": 1,
"QuantityPerUnit": "24 - 0.5 l bottles",
"UnitPrice": 7.7500,
"UnitsInStock": 125,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 76,
"ProductName": "Lakkalikööri",
"SupplierID": 23,
"CategoryID": 1,
"QuantityPerUnit": "500 ml",
"UnitPrice": 18.0000,
"UnitsInStock": 57,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 77,
"ProductName": "Original Frankfurter grüne Soße",
"SupplierID": 12,
"CategoryID": 2,
"QuantityPerUnit": "12 boxes",
"UnitPrice": 13.0000,
"UnitsInStock": 32,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
Menu Filtering
To create a filterable multi-checkbox menu component and use it in the FilterMenu template of the Grid:
-
Create a custom component that will take the
filterof the current column and theFilterServiceas inputs. The data to which the custom list will be bound can be a collection of the distinct Grid data from the respective field. The custom filter component can work with both primitive values and complex objects.<kendo-grid-column field="ProductName" title="Product Name"> <ng-template kendoGridFilterMenuTemplate let-column="column" let-filter="filter" let-filterService="filterService" > <multicheck-filter [isPrimitive]="true" [field]="column.field" [filterService]="filterService" [currentFilter]="filter" [data]="distinctPrimitive(column.field)"></multicheck-filter> </ng-template> </kendo-grid-column> -
Loop through the data to create a list of items with checkboxes and text. The items will correspond to the values of the respective Grid column. Attach the required handlers and bindings that will manage the selection and deselection of items.
<ul> <li *ngIf="showFilter"> <input class="k-textbox" (input)="onInput($event)" /> </li> <li *ngFor="let item of currentData; let i = index;" (click)="onSelectionChange(isPrimitive ? item : item[valueField])" [ngClass]="{'k-state-selected': isItemSelected(item)}"> <input type="checkbox" id="chk-{{isPrimitive ? item : item[valueField]}}" class="k-checkbox" [checked]="isItemSelected(item)" /> <label class="k-multiselect-checkbox k-checkbox-label" for="chk-{{isPrimitive ? item : item[valueField]}}"> {{ isPrimitive ? item : item[textField] }} </label> </li> </ul> -
Monitor the selected items and call the
filterService.filter()method accordingly.public onSelectionChange(item) { if(this.value.some(x => x === item)) { this.value = this.value.filter(x => x !== item); } else { this.value.push(item); } this.filterService.filter({ filters: this.value.map(value => ({ field: this.field, operator: 'eq', value })), logic: 'or' }); } -
(Optional) Add a custom filter for the list of options.
<li *ngIf="showFilter"> <input class="k-textbox" (input)="onInput($event)" /> </li>public onInput(e) { this.currentData = distinct([ ...this.currentData.filter(dataItem => this.value.some(val => val === this.valueAccessor(dataItem))), ...filterBy(this.data, { operator: 'contains', field: this.textField, value: e.target.value })], this.textField ); }
The following example demonstrates the full implementation of the approach.
import { Component, ViewChild } from '@angular/core';
import { filterBy, FilterDescriptor, CompositeFilterDescriptor, distinct } from '@progress/kendo-data-query';
import { sampleProducts } from './products';
@Component({
selector: 'my-app',
template: `
<kendo-grid
[data]="gridData"
[filter]="filter"
filterable="menu"
(filterChange)="filterChange($event)"
[height]="400"
>
<kendo-grid-column field="ProductName" title="Product Name">
<ng-template kendoGridFilterMenuTemplate
let-column="column"
let-filter="filter"
let-filterService="filterService"
>
<multicheck-filter
[isPrimitive]="true"
[field]="column.field"
[filterService]="filterService"
[currentFilter]="filter"
[data]="distinctPrimitive(column.field)"></multicheck-filter>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="130" format="{0:c}" filter="numeric">
<ng-template kendoGridFilterMenuTemplate
let-column="column"
let-filter="filter"
let-filterService="filterService"
>
<multicheck-filter
[isPrimitive]="true"
[field]="column.field"
[filterService]="filterService"
[currentFilter]="filter"
[data]="distinctPrimitive(column.field)"></multicheck-filter>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="CategoryID" title="Category" width="180">
<ng-template kendoGridFilterMenuTemplate
let-column="column"
let-filter="filter"
let-filterService="filterService"
>
<multicheck-filter
[isPrimitive]="false"
[field]="column.field"
[currentFilter]="filter"
[filterService]="filterService"
textField="CategoryName"
valueField="CategoryID"
[data]="categories"></multicheck-filter>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.Category?.CategoryName}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="160" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public filter: CompositeFilterDescriptor;
public gridData: any[] = filterBy(sampleProducts, this.filter);
public categories: any[] = distinct(sampleProducts, 'CategoryID').map(item => item.Category);
public filterChange(filter: CompositeFilterDescriptor): void {
this.filter = filter;
this.gridData = filterBy(sampleProducts, filter);
}
public distinctPrimitive(fieldName: string): any {
return distinct(sampleProducts, fieldName).map(item => item[fieldName]);
}
}
import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { CompositeFilterDescriptor, distinct, filterBy, FilterDescriptor } from '@progress/kendo-data-query';
import { FilterService } from '@progress/kendo-angular-grid';
@Component({
selector: 'multicheck-filter',
template: `
<ul>
<li *ngIf="showFilter">
<input class="k-textbox" (input)="onInput($event)" />
</li>
<li
*ngFor="let item of currentData; let i = index;"
(click)="onSelectionChange(valueAccessor(item))"
[ngClass]="{'k-state-selected': isItemSelected(item)}">
<input
type="checkbox"
id="chk-{{valueAccessor(item)}}"
class="k-checkbox"
[checked]="isItemSelected(item)" />
<label
class="k-multiselect-checkbox k-checkbox-label"
for="chk-{{valueAccessor(item)}}">
{{ textAccessor(item) }}
</label>
</li>
</ul>
`,
styles: [`
ul {
list-style-type: none;
height: 200px;
overflow-y: scroll;
padding-left: 0;
padding-right: 12px;
}
ul>li {
padding: 8px 12px;
border: 1px solid rgba(0,0,0,.08);
border-bottom: none;
}
ul>li:last-of-type {
border-bottom: 1px solid rgba(0,0,0,.08);
}
.k-multiselect-checkbox {
pointer-events: none;
}
`]
})
export class MultiCheckFilterComponent implements AfterViewInit {
@Input() public isPrimitive: boolean;
@Input() public currentFilter: CompositeFilterDescriptor;
@Input() public data;
@Input() public textField;
@Input() public valueField;
@Input() public filterService: FilterService;
@Input() public field: string;
@Output() public valueChange = new EventEmitter<number[]>();
public currentData: any;
public showFilter = true;
private value: any[] = [];
protected textAccessor = (dataItem: any) => this.isPrimitive ? dataItem : dataItem[this.textField];
protected valueAccessor = (dataItem: any) => this.isPrimitive ? dataItem : dataItem[this.valueField];
public ngAfterViewInit() {
this.currentData = this.data;
this.value = this.currentFilter.filters.map((f: FilterDescriptor) => f.value);
this.showFilter = typeof this.textAccessor(this.currentData[0]) === 'string';
}
public isItemSelected(item) {
return this.value.some(x => x === this.valueAccessor(item));
}
public onSelectionChange(item) {
if (this.value.some(x => x === item)) {
this.value = this.value.filter(x => x !== item);
} else {
this.value.push(item);
}
this.filterService.filter({
filters: this.value.map(value => ({
field: this.field,
operator: 'eq',
value
})),
logic: 'or'
});
}
public onInput(e: any) {
this.currentData = distinct([
...this.currentData.filter(dataItem => this.value.some(val => val === this.valueAccessor(dataItem))),
...filterBy(this.data, {
operator: 'contains',
field: this.textField,
value: e.target.value
})],
this.textField
);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { AppComponent } from './app.component';
import { MultiCheckFilterComponent } from './multicheck-filter.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent, MultiCheckFilterComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
GridModule
]
})
export class AppModule { }
import { AppModule } from './app.module';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
export const sampleProducts = [
{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 8, 20)
},
{
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 7, 12)
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 8, 26)
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 7, 17)
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
},
"FirstOrderedOn": new Date(1996, 7, 22)
},
{
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 11, 1)
},
{
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
},
"FirstOrderedOn": new Date(1997, 1, 21)
},
{
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
},
"FirstOrderedOn": new Date(1996, 8, 5)
}
];
export const products = [{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18.0000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22.0000,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.3500,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25.0000,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40.0000,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97.0000,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31.0000,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 11,
"ProductName": "Queso Cabrales",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "1 kg pkg.",
"UnitPrice": 21.0000,
"UnitsInStock": 22,
"UnitsOnOrder": 30,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 12,
"ProductName": "Queso Manchego La Pastora",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 86,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 13,
"ProductName": "Konbu",
"SupplierID": 6,
"CategoryID": 8,
"QuantityPerUnit": "2 kg box",
"UnitPrice": 6.0000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 14,
"ProductName": "Tofu",
"SupplierID": 6,
"CategoryID": 7,
"QuantityPerUnit": "40 - 100 g pkgs.",
"UnitPrice": 23.2500,
"UnitsInStock": 35,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 15,
"ProductName": "Genen Shouyu",
"SupplierID": 6,
"CategoryID": 2,
"QuantityPerUnit": "24 - 250 ml bottles",
"UnitPrice": 15.5000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 16,
"ProductName": "Pavlova",
"SupplierID": 7,
"CategoryID": 3,
"QuantityPerUnit": "32 - 500 g boxes",
"UnitPrice": 17.4500,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 17,
"ProductName": "Alice Mutton",
"SupplierID": 7,
"CategoryID": 6,
"QuantityPerUnit": "20 - 1 kg tins",
"UnitPrice": 39.0000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 18,
"ProductName": "Carnarvon Tigers",
"SupplierID": 7,
"CategoryID": 8,
"QuantityPerUnit": "16 kg pkg.",
"UnitPrice": 62.5000,
"UnitsInStock": 42,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 19,
"ProductName": "Teatime Chocolate Biscuits",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 12 pieces",
"UnitPrice": 9.2000,
"UnitsInStock": 25,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 20,
"ProductName": "Sir Rodney's Marmalade",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "30 gift boxes",
"UnitPrice": 81.0000,
"UnitsInStock": 40,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 21,
"ProductName": "Sir Rodney's Scones",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "24 pkgs. x 4 pieces",
"UnitPrice": 10.0000,
"UnitsInStock": 3,
"UnitsOnOrder": 40,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 22,
"ProductName": "Gustaf's Knäckebröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "24 - 500 g pkgs.",
"UnitPrice": 21.0000,
"UnitsInStock": 104,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 23,
"ProductName": "Tunnbröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "12 - 250 g pkgs.",
"UnitPrice": 9.0000,
"UnitsInStock": 61,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 24,
"ProductName": "Guaraná Fantástica",
"SupplierID": 10,
"CategoryID": 1,
"QuantityPerUnit": "12 - 355 ml cans",
"UnitPrice": 4.5000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 25,
"ProductName": "NuNuCa Nuß-Nougat-Creme",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "20 - 450 g glasses",
"UnitPrice": 14.0000,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 26,
"ProductName": "Gumbär Gummibärchen",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 250 g bags",
"UnitPrice": 31.2300,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 27,
"ProductName": "Schoggi Schokolade",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 100 g pieces",
"UnitPrice": 43.9000,
"UnitsInStock": 49,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 28,
"ProductName": "Rössle Sauerkraut",
"SupplierID": 12,
"CategoryID": 7,
"QuantityPerUnit": "25 - 825 g cans",
"UnitPrice": 45.6000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 29,
"ProductName": "Thüringer Rostbratwurst",
"SupplierID": 12,
"CategoryID": 6,
"QuantityPerUnit": "50 bags x 30 sausgs.",
"UnitPrice": 123.7900,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 30,
"ProductName": "Nord-Ost Matjeshering",
"SupplierID": 13,
"CategoryID": 8,
"QuantityPerUnit": "10 - 200 g glasses",
"UnitPrice": 25.8900,
"UnitsInStock": 10,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 31,
"ProductName": "Gorgonzola Telino",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "12 - 100 g pkgs",
"UnitPrice": 12.5000,
"UnitsInStock": 0,
"UnitsOnOrder": 70,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 32,
"ProductName": "Mascarpone Fabioli",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 32.0000,
"UnitsInStock": 9,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 33,
"ProductName": "Geitost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "500 g",
"UnitPrice": 2.5000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 34,
"ProductName": "Sasquatch Ale",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 111,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 35,
"ProductName": "Steeleye Stout",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 18.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 36,
"ProductName": "Inlagd Sill",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 250 g jars",
"UnitPrice": 19.0000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 37,
"ProductName": "Gravad lax",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "12 - 500 g pkgs.",
"UnitPrice": 26.0000,
"UnitsInStock": 11,
"UnitsOnOrder": 50,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 38,
"ProductName": "Côte de Blaye",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "12 - 75 cl bottles",
"UnitPrice": 263.5000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 39,
"ProductName": "Chartreuse verte",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "750 cc per bottle",
"UnitPrice": 18.0000,
"UnitsInStock": 69,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 40,
"ProductName": "Boston Crab Meat",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "24 - 4 oz tins",
"UnitPrice": 18.4000,
"UnitsInStock": 123,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 41,
"ProductName": "Jack's New England Clam Chowder",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "12 - 12 oz cans",
"UnitPrice": 9.6500,
"UnitsInStock": 85,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 42,
"ProductName": "Singaporean Hokkien Fried Mee",
"SupplierID": 20,
"CategoryID": 5,
"QuantityPerUnit": "32 - 1 kg pkgs.",
"UnitPrice": 14.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 43,
"ProductName": "Ipoh Coffee",
"SupplierID": 20,
"CategoryID": 1,
"QuantityPerUnit": "16 - 500 g tins",
"UnitPrice": 46.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 10,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 44,
"ProductName": "Gula Malacca",
"SupplierID": 20,
"CategoryID": 2,
"QuantityPerUnit": "20 - 2 kg bags",
"UnitPrice": 19.4500,
"UnitsInStock": 27,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 45,
"ProductName": "Rogede sild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "1k pkg.",
"UnitPrice": 9.5000,
"UnitsInStock": 5,
"UnitsOnOrder": 70,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 46,
"ProductName": "Spegesild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "4 - 450 g glasses",
"UnitPrice": 12.0000,
"UnitsInStock": 95,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 47,
"ProductName": "Zaanse koeken",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 - 4 oz boxes",
"UnitPrice": 9.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 48,
"ProductName": "Chocolade",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 pkgs.",
"UnitPrice": 12.7500,
"UnitsInStock": 15,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 49,
"ProductName": "Maxilaku",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "24 - 50 g pkgs.",
"UnitPrice": 20.0000,
"UnitsInStock": 10,
"UnitsOnOrder": 60,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 50,
"ProductName": "Valkoinen suklaa",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "12 - 100 g bars",
"UnitPrice": 16.2500,
"UnitsInStock": 65,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 51,
"ProductName": "Manjimup Dried Apples",
"SupplierID": 24,
"CategoryID": 7,
"QuantityPerUnit": "50 - 300 g pkgs.",
"UnitPrice": 53.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 52,
"ProductName": "Filo Mix",
"SupplierID": 24,
"CategoryID": 5,
"QuantityPerUnit": "16 - 2 kg boxes",
"UnitPrice": 7.0000,
"UnitsInStock": 38,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 53,
"ProductName": "Perth Pasties",
"SupplierID": 24,
"CategoryID": 6,
"QuantityPerUnit": "48 pieces",
"UnitPrice": 32.8000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 54,
"ProductName": "Tourtière",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "16 pies",
"UnitPrice": 7.4500,
"UnitsInStock": 21,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 55,
"ProductName": "Pâté chinois",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "24 boxes x 2 pies",
"UnitPrice": 24.0000,
"UnitsInStock": 115,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 56,
"ProductName": "Gnocchi di nonna Alice",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 21,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 57,
"ProductName": "Ravioli Angelo",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 19.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 58,
"ProductName": "Escargots de Bourgogne",
"SupplierID": 27,
"CategoryID": 8,
"QuantityPerUnit": "24 pieces",
"UnitPrice": 13.2500,
"UnitsInStock": 62,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 59,
"ProductName": "Raclette Courdavault",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 55.0000,
"UnitsInStock": 79,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 60,
"ProductName": "Camembert Pierrot",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "15 - 300 g rounds",
"UnitPrice": 34.0000,
"UnitsInStock": 19,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 61,
"ProductName": "Sirop d'érable",
"SupplierID": 29,
"CategoryID": 2,
"QuantityPerUnit": "24 - 500 ml bottles",
"UnitPrice": 28.5000,
"UnitsInStock": 113,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 62,
"ProductName": "Tarte au sucre",
"SupplierID": 29,
"CategoryID": 3,
"QuantityPerUnit": "48 pies",
"UnitPrice": 49.3000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 63,
"ProductName": "Vegie-spread",
"SupplierID": 7,
"CategoryID": 2,
"QuantityPerUnit": "15 - 625 g jars",
"UnitPrice": 43.9000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 64,
"ProductName": "Wimmers gute Semmelknödel",
"SupplierID": 12,
"CategoryID": 5,
"QuantityPerUnit": "20 bags x 4 pieces",
"UnitPrice": 33.2500,
"UnitsInStock": 22,
"UnitsOnOrder": 80,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 65,
"ProductName": "Louisiana Fiery Hot Pepper Sauce",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "32 - 8 oz bottles",
"UnitPrice": 21.0500,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 66,
"ProductName": "Louisiana Hot Spiced Okra",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "24 - 8 oz jars",
"UnitPrice": 17.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 100,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 67,
"ProductName": "Laughing Lumberjack Lager",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 52,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 68,
"ProductName": "Scottish Longbreads",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 8 pieces",
"UnitPrice": 12.5000,
"UnitsInStock": 6,
"UnitsOnOrder": 10,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 69,
"ProductName": "Gudbrandsdalsost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 kg pkg.",
"UnitPrice": 36.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 70,
"ProductName": "Outback Lager",
"SupplierID": 7,
"CategoryID": 1,
"QuantityPerUnit": "24 - 355 ml bottles",
"UnitPrice": 15.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 71,
"ProductName": "Flotemysost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 21.5000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 72,
"ProductName": "Mozzarella di Giovanni",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 34.8000,
"UnitsInStock": 14,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 73,
"ProductName": "Röd Kaviar",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 150 g jars",
"UnitPrice": 15.0000,
"UnitsInStock": 101,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 74,
"ProductName": "Longlife Tofu",
"SupplierID": 4,
"CategoryID": 7,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 10.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 20,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 75,
"ProductName": "Rhönbräu Klosterbier",
"SupplierID": 12,
"CategoryID": 1,
"QuantityPerUnit": "24 - 0.5 l bottles",
"UnitPrice": 7.7500,
"UnitsInStock": 125,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 76,
"ProductName": "Lakkalikööri",
"SupplierID": 23,
"CategoryID": 1,
"QuantityPerUnit": "500 ml",
"UnitPrice": 18.0000,
"UnitsInStock": 57,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 77,
"ProductName": "Original Frankfurter grüne Soße",
"SupplierID": 12,
"CategoryID": 2,
"QuantityPerUnit": "12 boxes",
"UnitPrice": 13.0000,
"UnitsInStock": 32,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
Filter Menu with Popup
By default, the filter menu closes when the user clicks outside the menu content. Such behavior is typical for components which render their popup in the body or the root component—for example, the DatePicker.
You can override the default behavior and prevent the menu from closing by injecting the SinglePopupService into the current filter component and prevent its onClose event.
import { Component, ViewChild } from '@angular/core';
import { filterBy, FilterDescriptor, CompositeFilterDescriptor, distinct } from '@progress/kendo-data-query';
import { sampleProducts } from './products';
@Component({
selector: 'my-app',
template: `
<kendo-grid
[kendoGridBinding]="products"
filterable="menu"
[height]="400"
>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="FirstOrderedOn" format="{0:d}">
<ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
<date-range-filter
[field]="column.field"
[filter]="filter"
[filterService]="filterService">
</date-range-filter>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public products: any[] = sampleProducts;
}
import { Component, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { FilterService, SinglePopupService, PopupCloseEvent } from '@progress/kendo-angular-grid';
import { addDays } from '@progress/kendo-date-math';
const closest = (node: any, predicate: any): any => {
while (node && !predicate(node)) {
node = node.parentNode;
}
return node;
};
@Component({
selector: 'date-range-filter',
template: `
<div class="k-form">
<label class="k-form-field">
<span>After</span>
<kendo-datepicker (valueChange)="onStartChange($event)"
[(ngModel)]="start" [max]="max" [popupSettings]="popupSettings">
</kendo-datepicker>
</label>
<label class="k-form-field">
<span>Before</span>
<kendo-datepicker (valueChange)="onEndChange($event)"
[(ngModel)]="end" [min]="min" [popupSettings]="popupSettings">
</kendo-datepicker>
</label>
</div>
`,
styles: [`
.k-form {
padding: 5px;
}
`]
})
export class DateRangeFilterComponent implements OnInit, OnDestroy {
@Input() public filter: CompositeFilterDescriptor;
@Input() public filterService: FilterService;
@Input() public field: string;
public start: any;
public end: any;
public get min(): any {
return this.start ? addDays(this.start, 1) : null;
}
public get max(): any {
return this.end ? addDays(this.end, -1) : null;
}
public popupSettings: any = {
popupClass: 'date-range-filter'
};
private popupSubscription: any;
constructor(private element: ElementRef,
private popupService: SinglePopupService) {
// Handle the service onClose event and prevent the menu from closing when the datepickers are still active.
this.popupSubscription = popupService.onClose.subscribe((e: PopupCloseEvent) => {
if (document.activeElement && closest(document.activeElement,
node => node === this.element.nativeElement || (String(node.className).indexOf('date-range-filter') >= 0))) {
e.preventDefault();
}
});
}
public ngOnInit(): void {
this.start = this.findValue('gte');
this.end = this.findValue('lte');
}
public ngOnDestroy(): void {
this.popupSubscription.unsubscribe();
}
public onStartChange(value: any): void {
this.filterRange(value, this.end);
}
public onEndChange(value: any): void {
this.filterRange(this.start, value);
}
private findValue(operator) {
const filter = this.filter.filters.filter(x => x.field === this.field && x.operator === operator)[0];
return filter ? filter.value : null;
}
private filterRange(start, end) {
const filters = [];
if (start && (!end || start < end)) {
filters.push({
field: this.field,
operator: "gte",
value: start
});
this.start = start;
}
if (end && (!start || start < end)) {
filters.push({
field: this.field,
operator: "lte",
value: end
});
this.end = end;
}
this.filterService.filter({
logic: "and",
filters: filters
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { GridModule } from '@progress/kendo-angular-grid';
import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';
import { DateRangeFilterComponent } from './date-range-filter.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent, DateRangeFilterComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
GridModule,
DatePickerModule
]
})
export class AppModule { }
import { AppModule } from './app.module';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
export const sampleProducts = [
{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 8, 20)
},
{
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 7, 12)
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 8, 26)
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 7, 17)
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
},
"FirstOrderedOn": new Date(1996, 7, 22)
},
{
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 11, 1)
},
{
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
},
"FirstOrderedOn": new Date(1997, 1, 21)
},
{
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
},
"FirstOrderedOn": new Date(1996, 8, 5)
}
];
export const products = [{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18.0000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22.0000,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.3500,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25.0000,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40.0000,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97.0000,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31.0000,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 11,
"ProductName": "Queso Cabrales",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "1 kg pkg.",
"UnitPrice": 21.0000,
"UnitsInStock": 22,
"UnitsOnOrder": 30,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 12,
"ProductName": "Queso Manchego La Pastora",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 86,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 13,
"ProductName": "Konbu",
"SupplierID": 6,
"CategoryID": 8,
"QuantityPerUnit": "2 kg box",
"UnitPrice": 6.0000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 14,
"ProductName": "Tofu",
"SupplierID": 6,
"CategoryID": 7,
"QuantityPerUnit": "40 - 100 g pkgs.",
"UnitPrice": 23.2500,
"UnitsInStock": 35,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 15,
"ProductName": "Genen Shouyu",
"SupplierID": 6,
"CategoryID": 2,
"QuantityPerUnit": "24 - 250 ml bottles",
"UnitPrice": 15.5000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 16,
"ProductName": "Pavlova",
"SupplierID": 7,
"CategoryID": 3,
"QuantityPerUnit": "32 - 500 g boxes",
"UnitPrice": 17.4500,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 17,
"ProductName": "Alice Mutton",
"SupplierID": 7,
"CategoryID": 6,
"QuantityPerUnit": "20 - 1 kg tins",
"UnitPrice": 39.0000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 18,
"ProductName": "Carnarvon Tigers",
"SupplierID": 7,
"CategoryID": 8,
"QuantityPerUnit": "16 kg pkg.",
"UnitPrice": 62.5000,
"UnitsInStock": 42,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 19,
"ProductName": "Teatime Chocolate Biscuits",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 12 pieces",
"UnitPrice": 9.2000,
"UnitsInStock": 25,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 20,
"ProductName": "Sir Rodney's Marmalade",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "30 gift boxes",
"UnitPrice": 81.0000,
"UnitsInStock": 40,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 21,
"ProductName": "Sir Rodney's Scones",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "24 pkgs. x 4 pieces",
"UnitPrice": 10.0000,
"UnitsInStock": 3,
"UnitsOnOrder": 40,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 22,
"ProductName": "Gustaf's Knäckebröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "24 - 500 g pkgs.",
"UnitPrice": 21.0000,
"UnitsInStock": 104,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 23,
"ProductName": "Tunnbröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "12 - 250 g pkgs.",
"UnitPrice": 9.0000,
"UnitsInStock": 61,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 24,
"ProductName": "Guaraná Fantástica",
"SupplierID": 10,
"CategoryID": 1,
"QuantityPerUnit": "12 - 355 ml cans",
"UnitPrice": 4.5000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 25,
"ProductName": "NuNuCa Nuß-Nougat-Creme",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "20 - 450 g glasses",
"UnitPrice": 14.0000,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 26,
"ProductName": "Gumbär Gummibärchen",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 250 g bags",
"UnitPrice": 31.2300,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 27,
"ProductName": "Schoggi Schokolade",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 100 g pieces",
"UnitPrice": 43.9000,
"UnitsInStock": 49,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 28,
"ProductName": "Rössle Sauerkraut",
"SupplierID": 12,
"CategoryID": 7,
"QuantityPerUnit": "25 - 825 g cans",
"UnitPrice": 45.6000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 29,
"ProductName": "Thüringer Rostbratwurst",
"SupplierID": 12,
"CategoryID": 6,
"QuantityPerUnit": "50 bags x 30 sausgs.",
"UnitPrice": 123.7900,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 30,
"ProductName": "Nord-Ost Matjeshering",
"SupplierID": 13,
"CategoryID": 8,
"QuantityPerUnit": "10 - 200 g glasses",
"UnitPrice": 25.8900,
"UnitsInStock": 10,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 31,
"ProductName": "Gorgonzola Telino",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "12 - 100 g pkgs",
"UnitPrice": 12.5000,
"UnitsInStock": 0,
"UnitsOnOrder": 70,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 32,
"ProductName": "Mascarpone Fabioli",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 32.0000,
"UnitsInStock": 9,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 33,
"ProductName": "Geitost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "500 g",
"UnitPrice": 2.5000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 34,
"ProductName": "Sasquatch Ale",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 111,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 35,
"ProductName": "Steeleye Stout",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 18.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 36,
"ProductName": "Inlagd Sill",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 250 g jars",
"UnitPrice": 19.0000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 37,
"ProductName": "Gravad lax",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "12 - 500 g pkgs.",
"UnitPrice": 26.0000,
"UnitsInStock": 11,
"UnitsOnOrder": 50,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 38,
"ProductName": "Côte de Blaye",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "12 - 75 cl bottles",
"UnitPrice": 263.5000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 39,
"ProductName": "Chartreuse verte",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "750 cc per bottle",
"UnitPrice": 18.0000,
"UnitsInStock": 69,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 40,
"ProductName": "Boston Crab Meat",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "24 - 4 oz tins",
"UnitPrice": 18.4000,
"UnitsInStock": 123,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 41,
"ProductName": "Jack's New England Clam Chowder",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "12 - 12 oz cans",
"UnitPrice": 9.6500,
"UnitsInStock": 85,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 42,
"ProductName": "Singaporean Hokkien Fried Mee",
"SupplierID": 20,
"CategoryID": 5,
"QuantityPerUnit": "32 - 1 kg pkgs.",
"UnitPrice": 14.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 43,
"ProductName": "Ipoh Coffee",
"SupplierID": 20,
"CategoryID": 1,
"QuantityPerUnit": "16 - 500 g tins",
"UnitPrice": 46.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 10,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 44,
"ProductName": "Gula Malacca",
"SupplierID": 20,
"CategoryID": 2,
"QuantityPerUnit": "20 - 2 kg bags",
"UnitPrice": 19.4500,
"UnitsInStock": 27,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 45,
"ProductName": "Rogede sild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "1k pkg.",
"UnitPrice": 9.5000,
"UnitsInStock": 5,
"UnitsOnOrder": 70,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 46,
"ProductName": "Spegesild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "4 - 450 g glasses",
"UnitPrice": 12.0000,
"UnitsInStock": 95,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 47,
"ProductName": "Zaanse koeken",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 - 4 oz boxes",
"UnitPrice": 9.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 48,
"ProductName": "Chocolade",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 pkgs.",
"UnitPrice": 12.7500,
"UnitsInStock": 15,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 49,
"ProductName": "Maxilaku",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "24 - 50 g pkgs.",
"UnitPrice": 20.0000,
"UnitsInStock": 10,
"UnitsOnOrder": 60,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 50,
"ProductName": "Valkoinen suklaa",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "12 - 100 g bars",
"UnitPrice": 16.2500,
"UnitsInStock": 65,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 51,
"ProductName": "Manjimup Dried Apples",
"SupplierID": 24,
"CategoryID": 7,
"QuantityPerUnit": "50 - 300 g pkgs.",
"UnitPrice": 53.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 52,
"ProductName": "Filo Mix",
"SupplierID": 24,
"CategoryID": 5,
"QuantityPerUnit": "16 - 2 kg boxes",
"UnitPrice": 7.0000,
"UnitsInStock": 38,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 53,
"ProductName": "Perth Pasties",
"SupplierID": 24,
"CategoryID": 6,
"QuantityPerUnit": "48 pieces",
"UnitPrice": 32.8000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 54,
"ProductName": "Tourtière",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "16 pies",
"UnitPrice": 7.4500,
"UnitsInStock": 21,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 55,
"ProductName": "Pâté chinois",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "24 boxes x 2 pies",
"UnitPrice": 24.0000,
"UnitsInStock": 115,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 56,
"ProductName": "Gnocchi di nonna Alice",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 21,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 57,
"ProductName": "Ravioli Angelo",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 19.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 58,
"ProductName": "Escargots de Bourgogne",
"SupplierID": 27,
"CategoryID": 8,
"QuantityPerUnit": "24 pieces",
"UnitPrice": 13.2500,
"UnitsInStock": 62,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 59,
"ProductName": "Raclette Courdavault",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 55.0000,
"UnitsInStock": 79,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 60,
"ProductName": "Camembert Pierrot",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "15 - 300 g rounds",
"UnitPrice": 34.0000,
"UnitsInStock": 19,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 61,
"ProductName": "Sirop d'érable",
"SupplierID": 29,
"CategoryID": 2,
"QuantityPerUnit": "24 - 500 ml bottles",
"UnitPrice": 28.5000,
"UnitsInStock": 113,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 62,
"ProductName": "Tarte au sucre",
"SupplierID": 29,
"CategoryID": 3,
"QuantityPerUnit": "48 pies",
"UnitPrice": 49.3000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 63,
"ProductName": "Vegie-spread",
"SupplierID": 7,
"CategoryID": 2,
"QuantityPerUnit": "15 - 625 g jars",
"UnitPrice": 43.9000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 64,
"ProductName": "Wimmers gute Semmelknödel",
"SupplierID": 12,
"CategoryID": 5,
"QuantityPerUnit": "20 bags x 4 pieces",
"UnitPrice": 33.2500,
"UnitsInStock": 22,
"UnitsOnOrder": 80,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 65,
"ProductName": "Louisiana Fiery Hot Pepper Sauce",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "32 - 8 oz bottles",
"UnitPrice": 21.0500,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 66,
"ProductName": "Louisiana Hot Spiced Okra",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "24 - 8 oz jars",
"UnitPrice": 17.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 100,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 67,
"ProductName": "Laughing Lumberjack Lager",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 52,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 68,
"ProductName": "Scottish Longbreads",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 8 pieces",
"UnitPrice": 12.5000,
"UnitsInStock": 6,
"UnitsOnOrder": 10,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 69,
"ProductName": "Gudbrandsdalsost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 kg pkg.",
"UnitPrice": 36.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 70,
"ProductName": "Outback Lager",
"SupplierID": 7,
"CategoryID": 1,
"QuantityPerUnit": "24 - 355 ml bottles",
"UnitPrice": 15.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 71,
"ProductName": "Flotemysost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 21.5000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 72,
"ProductName": "Mozzarella di Giovanni",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 34.8000,
"UnitsInStock": 14,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 73,
"ProductName": "Röd Kaviar",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 150 g jars",
"UnitPrice": 15.0000,
"UnitsInStock": 101,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 74,
"ProductName": "Longlife Tofu",
"SupplierID": 4,
"CategoryID": 7,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 10.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 20,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 75,
"ProductName": "Rhönbräu Klosterbier",
"SupplierID": 12,
"CategoryID": 1,
"QuantityPerUnit": "24 - 0.5 l bottles",
"UnitPrice": 7.7500,
"UnitsInStock": 125,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 76,
"ProductName": "Lakkalikööri",
"SupplierID": 23,
"CategoryID": 1,
"QuantityPerUnit": "500 ml",
"UnitPrice": 18.0000,
"UnitsInStock": 57,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 77,
"ProductName": "Original Frankfurter grüne Soße",
"SupplierID": 12,
"CategoryID": 2,
"QuantityPerUnit": "12 boxes",
"UnitPrice": 13.0000,
"UnitsInStock": 32,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
Filtering by Date Ranges
The Grid enables you to implement filtering which is based on a date period in the Grid.
-
Add the
DateRangecomponent to the custom cell template of thefiltercomponent by utilizing the filter row component.<kendo-daterange> <kendo-dateinput kendoDateRangeStartInput [value]="start" (valueChange)="filterRange($event, end)"> </kendo-dateinput> - <kendo-dateinput kendoDateRangeEndInput [value]="end" (valueChange)="filterRange(start, $event)"> </kendo-dateinput> </kendo-daterange> -
Add a
CompositeFilterDescriptorwhich describes the selected date range to the root filter of the Grid by using thevalueChangeevent of the DateInput component.public filterRange(start: Date, end: Date): void { this.filter = this.removeFilter(this.field); const filters = []; if (start) { filters.push({ field: this.field, operator: "gte", value: start }); } if (end) { filters.push({ field: this.field, operator: "lte", value: end }); } const root = this.filter || { logic: "and", filters: [] }; if (filters.length) { root.filters.push(...filters); } this.filterService.filter(root); }
The following example demonstrates the full implementation of the approach.
import { Component } from '@angular/core';
import { sampleProducts } from './products';
@Component({
selector: 'my-app',
template: `
<kendo-grid
[kendoGridBinding]="products"
filterable="row"
[height]="400"
>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="FirstOrderedOn" format="{0:d}">
<ng-template kendoGridFilterCellTemplate let-filter>
<date-range-filter-cell
class="date-range-filter"
[filter]="filter"
field="FirstOrderedOn">
</date-range-filter-cell>
</ng-template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public products: any[] = sampleProducts;
}
import { Component, Input } from "@angular/core";
import { BaseFilterCellComponent, FilterService } from "@progress/kendo-angular-grid";
import { FilterDescriptor, CompositeFilterDescriptor } from "@progress/kendo-data-query/dist/es/main";
@Component({
selector: 'date-range-filter-cell',
styles: [`
kendo-daterange > kendo-dateinput.range-filter {
display: inline-block;
}
.k-button {
margin-left: 5px;
}
` ],
template: `
<kendo-daterange>
<kendo-dateinput
class="range-filter"
kendoDateRangeStartInput
[value]="start"
(valueChange)="filterRange($event, end)"
style="width:120px">
</kendo-dateinput>
-
<kendo-dateinput
class="range-filter"
kendoDateRangeEndInput
[value]="end"
(valueChange)="filterRange(start, $event)"
style="width:120px">
</kendo-dateinput>
</kendo-daterange>
<button
*ngIf="hasFilter"
class="k-button k-button-icon"
title="Clear"
(click)="clearFilter()">
<span class="k-icon k-i-filter-clear"></span>
</button>
`
})
export class DateRangeFilterCellComponent extends BaseFilterCellComponent {
@Input()
public filter: CompositeFilterDescriptor;
@Input()
public field: string;
constructor(filterService: FilterService) {
super(filterService);
}
public get start(): Date {
const first = this.findByOperator("gte");
return (first || <FilterDescriptor>{}).value;
}
public get end(): Date {
const end = this.findByOperator("lte");
return (end || <FilterDescriptor>{}).value;
}
public get hasFilter(): boolean {
return this.filtersByField(this.field).length > 0;
}
public clearFilter(): void {
this.filterService.filter(
this.removeFilter(this.field)
);
}
public filterRange(start: Date, end: Date): void {
this.filter = this.removeFilter(this.field);
const filters = [];
if (start) {
filters.push({
field: this.field,
operator: "gte",
value: start
});
}
if (end) {
filters.push({
field: this.field,
operator: "lte",
value: end
});
}
const root = this.filter || {
logic: "and",
filters: []
};
if (filters.length) {
root.filters.push(...filters);
}
this.filterService.filter(root);
}
private findByOperator(op: string): FilterDescriptor {
return this.filtersByField(this.field)
.filter(({ operator }) => operator === op)[0];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { GridModule } from '@progress/kendo-angular-grid';
import { DateRangeModule, DateInputModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';
import { DateRangeFilterCellComponent } from './date-range-cell-filter.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent, DateRangeFilterCellComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
GridModule,
DateRangeModule,
DateInputModule
]
})
export class AppModule { }
import { AppModule } from './app.module';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
export const sampleProducts = [
{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 8, 20)
},
{
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
},
"FirstOrderedOn": new Date(1996, 7, 12)
},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 8, 26)
},
{
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 7, 17)
},
{
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 9, 19)
},
{
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
},
"FirstOrderedOn": new Date(1996, 7, 22)
},
{
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
},
"FirstOrderedOn": new Date(1996, 11, 1)
},
{
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
},
"FirstOrderedOn": new Date(1997, 1, 21)
},
{
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
},
"FirstOrderedOn": new Date(1996, 8, 5)
}
];
export const products = [{
"ProductID": 1,
"ProductName": "Chai",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "10 boxes x 20 bags",
"UnitPrice": 18.0000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 2,
"ProductName": "Chang",
"SupplierID": 1,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 19.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"SupplierID": 1,
"CategoryID": 2,
"QuantityPerUnit": "12 - 550 ml bottles",
"UnitPrice": 10.0000,
"UnitsInStock": 13,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "48 - 6 oz jars",
"UnitPrice": 22.0000,
"UnitsInStock": 53,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "36 boxes",
"UnitPrice": 21.3500,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 8 oz jars",
"UnitPrice": 25.0000,
"UnitsInStock": 120,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 7,
"ProductName": "Uncle Bob's Organic Dried Pears",
"SupplierID": 3,
"CategoryID": 7,
"QuantityPerUnit": "12 - 1 lb pkgs.",
"UnitPrice": 30.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 8,
"ProductName": "Northwoods Cranberry Sauce",
"SupplierID": 3,
"CategoryID": 2,
"QuantityPerUnit": "12 - 12 oz jars",
"UnitPrice": 40.0000,
"UnitsInStock": 6,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 9,
"ProductName": "Mishi Kobe Niku",
"SupplierID": 4,
"CategoryID": 6,
"QuantityPerUnit": "18 - 500 g pkgs.",
"UnitPrice": 97.0000,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 10,
"ProductName": "Ikura",
"SupplierID": 4,
"CategoryID": 8,
"QuantityPerUnit": "12 - 200 ml jars",
"UnitPrice": 31.0000,
"UnitsInStock": 31,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 11,
"ProductName": "Queso Cabrales",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "1 kg pkg.",
"UnitPrice": 21.0000,
"UnitsInStock": 22,
"UnitsOnOrder": 30,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 12,
"ProductName": "Queso Manchego La Pastora",
"SupplierID": 5,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 86,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 13,
"ProductName": "Konbu",
"SupplierID": 6,
"CategoryID": 8,
"QuantityPerUnit": "2 kg box",
"UnitPrice": 6.0000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 14,
"ProductName": "Tofu",
"SupplierID": 6,
"CategoryID": 7,
"QuantityPerUnit": "40 - 100 g pkgs.",
"UnitPrice": 23.2500,
"UnitsInStock": 35,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 15,
"ProductName": "Genen Shouyu",
"SupplierID": 6,
"CategoryID": 2,
"QuantityPerUnit": "24 - 250 ml bottles",
"UnitPrice": 15.5000,
"UnitsInStock": 39,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 16,
"ProductName": "Pavlova",
"SupplierID": 7,
"CategoryID": 3,
"QuantityPerUnit": "32 - 500 g boxes",
"UnitPrice": 17.4500,
"UnitsInStock": 29,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 17,
"ProductName": "Alice Mutton",
"SupplierID": 7,
"CategoryID": 6,
"QuantityPerUnit": "20 - 1 kg tins",
"UnitPrice": 39.0000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 18,
"ProductName": "Carnarvon Tigers",
"SupplierID": 7,
"CategoryID": 8,
"QuantityPerUnit": "16 kg pkg.",
"UnitPrice": 62.5000,
"UnitsInStock": 42,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 19,
"ProductName": "Teatime Chocolate Biscuits",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 12 pieces",
"UnitPrice": 9.2000,
"UnitsInStock": 25,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 20,
"ProductName": "Sir Rodney's Marmalade",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "30 gift boxes",
"UnitPrice": 81.0000,
"UnitsInStock": 40,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 21,
"ProductName": "Sir Rodney's Scones",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "24 pkgs. x 4 pieces",
"UnitPrice": 10.0000,
"UnitsInStock": 3,
"UnitsOnOrder": 40,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 22,
"ProductName": "Gustaf's Knäckebröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "24 - 500 g pkgs.",
"UnitPrice": 21.0000,
"UnitsInStock": 104,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 23,
"ProductName": "Tunnbröd",
"SupplierID": 9,
"CategoryID": 5,
"QuantityPerUnit": "12 - 250 g pkgs.",
"UnitPrice": 9.0000,
"UnitsInStock": 61,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 24,
"ProductName": "Guaraná Fantástica",
"SupplierID": 10,
"CategoryID": 1,
"QuantityPerUnit": "12 - 355 ml cans",
"UnitPrice": 4.5000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 25,
"ProductName": "NuNuCa Nuß-Nougat-Creme",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "20 - 450 g glasses",
"UnitPrice": 14.0000,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 26,
"ProductName": "Gumbär Gummibärchen",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 250 g bags",
"UnitPrice": 31.2300,
"UnitsInStock": 15,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 27,
"ProductName": "Schoggi Schokolade",
"SupplierID": 11,
"CategoryID": 3,
"QuantityPerUnit": "100 - 100 g pieces",
"UnitPrice": 43.9000,
"UnitsInStock": 49,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 28,
"ProductName": "Rössle Sauerkraut",
"SupplierID": 12,
"CategoryID": 7,
"QuantityPerUnit": "25 - 825 g cans",
"UnitPrice": 45.6000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 29,
"ProductName": "Thüringer Rostbratwurst",
"SupplierID": 12,
"CategoryID": 6,
"QuantityPerUnit": "50 bags x 30 sausgs.",
"UnitPrice": 123.7900,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 30,
"ProductName": "Nord-Ost Matjeshering",
"SupplierID": 13,
"CategoryID": 8,
"QuantityPerUnit": "10 - 200 g glasses",
"UnitPrice": 25.8900,
"UnitsInStock": 10,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 31,
"ProductName": "Gorgonzola Telino",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "12 - 100 g pkgs",
"UnitPrice": 12.5000,
"UnitsInStock": 0,
"UnitsOnOrder": 70,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 32,
"ProductName": "Mascarpone Fabioli",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 32.0000,
"UnitsInStock": 9,
"UnitsOnOrder": 40,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 33,
"ProductName": "Geitost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "500 g",
"UnitPrice": 2.5000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 34,
"ProductName": "Sasquatch Ale",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 111,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 35,
"ProductName": "Steeleye Stout",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 18.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 36,
"ProductName": "Inlagd Sill",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 250 g jars",
"UnitPrice": 19.0000,
"UnitsInStock": 112,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 37,
"ProductName": "Gravad lax",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "12 - 500 g pkgs.",
"UnitPrice": 26.0000,
"UnitsInStock": 11,
"UnitsOnOrder": 50,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 38,
"ProductName": "Côte de Blaye",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "12 - 75 cl bottles",
"UnitPrice": 263.5000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 39,
"ProductName": "Chartreuse verte",
"SupplierID": 18,
"CategoryID": 1,
"QuantityPerUnit": "750 cc per bottle",
"UnitPrice": 18.0000,
"UnitsInStock": 69,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 40,
"ProductName": "Boston Crab Meat",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "24 - 4 oz tins",
"UnitPrice": 18.4000,
"UnitsInStock": 123,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 41,
"ProductName": "Jack's New England Clam Chowder",
"SupplierID": 19,
"CategoryID": 8,
"QuantityPerUnit": "12 - 12 oz cans",
"UnitPrice": 9.6500,
"UnitsInStock": 85,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 42,
"ProductName": "Singaporean Hokkien Fried Mee",
"SupplierID": 20,
"CategoryID": 5,
"QuantityPerUnit": "32 - 1 kg pkgs.",
"UnitPrice": 14.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 43,
"ProductName": "Ipoh Coffee",
"SupplierID": 20,
"CategoryID": 1,
"QuantityPerUnit": "16 - 500 g tins",
"UnitPrice": 46.0000,
"UnitsInStock": 17,
"UnitsOnOrder": 10,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 44,
"ProductName": "Gula Malacca",
"SupplierID": 20,
"CategoryID": 2,
"QuantityPerUnit": "20 - 2 kg bags",
"UnitPrice": 19.4500,
"UnitsInStock": 27,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 45,
"ProductName": "Rogede sild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "1k pkg.",
"UnitPrice": 9.5000,
"UnitsInStock": 5,
"UnitsOnOrder": 70,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 46,
"ProductName": "Spegesild",
"SupplierID": 21,
"CategoryID": 8,
"QuantityPerUnit": "4 - 450 g glasses",
"UnitPrice": 12.0000,
"UnitsInStock": 95,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 47,
"ProductName": "Zaanse koeken",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 - 4 oz boxes",
"UnitPrice": 9.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 48,
"ProductName": "Chocolade",
"SupplierID": 22,
"CategoryID": 3,
"QuantityPerUnit": "10 pkgs.",
"UnitPrice": 12.7500,
"UnitsInStock": 15,
"UnitsOnOrder": 70,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 49,
"ProductName": "Maxilaku",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "24 - 50 g pkgs.",
"UnitPrice": 20.0000,
"UnitsInStock": 10,
"UnitsOnOrder": 60,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 50,
"ProductName": "Valkoinen suklaa",
"SupplierID": 23,
"CategoryID": 3,
"QuantityPerUnit": "12 - 100 g bars",
"UnitPrice": 16.2500,
"UnitsInStock": 65,
"UnitsOnOrder": 0,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 51,
"ProductName": "Manjimup Dried Apples",
"SupplierID": 24,
"CategoryID": 7,
"QuantityPerUnit": "50 - 300 g pkgs.",
"UnitPrice": 53.0000,
"UnitsInStock": 20,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 52,
"ProductName": "Filo Mix",
"SupplierID": 24,
"CategoryID": 5,
"QuantityPerUnit": "16 - 2 kg boxes",
"UnitPrice": 7.0000,
"UnitsInStock": 38,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 53,
"ProductName": "Perth Pasties",
"SupplierID": 24,
"CategoryID": 6,
"QuantityPerUnit": "48 pieces",
"UnitPrice": 32.8000,
"UnitsInStock": 0,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": true,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 54,
"ProductName": "Tourtière",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "16 pies",
"UnitPrice": 7.4500,
"UnitsInStock": 21,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 55,
"ProductName": "Pâté chinois",
"SupplierID": 25,
"CategoryID": 6,
"QuantityPerUnit": "24 boxes x 2 pies",
"UnitPrice": 24.0000,
"UnitsInStock": 115,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 6,
"CategoryName": "Meat/Poultry",
"Description": "Prepared meats"
}
}, {
"ProductID": 56,
"ProductName": "Gnocchi di nonna Alice",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 38.0000,
"UnitsInStock": 21,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 57,
"ProductName": "Ravioli Angelo",
"SupplierID": 26,
"CategoryID": 5,
"QuantityPerUnit": "24 - 250 g pkgs.",
"UnitPrice": 19.5000,
"UnitsInStock": 36,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 58,
"ProductName": "Escargots de Bourgogne",
"SupplierID": 27,
"CategoryID": 8,
"QuantityPerUnit": "24 pieces",
"UnitPrice": 13.2500,
"UnitsInStock": 62,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 59,
"ProductName": "Raclette Courdavault",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 55.0000,
"UnitsInStock": 79,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 60,
"ProductName": "Camembert Pierrot",
"SupplierID": 28,
"CategoryID": 4,
"QuantityPerUnit": "15 - 300 g rounds",
"UnitPrice": 34.0000,
"UnitsInStock": 19,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 61,
"ProductName": "Sirop d'érable",
"SupplierID": 29,
"CategoryID": 2,
"QuantityPerUnit": "24 - 500 ml bottles",
"UnitPrice": 28.5000,
"UnitsInStock": 113,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 62,
"ProductName": "Tarte au sucre",
"SupplierID": 29,
"CategoryID": 3,
"QuantityPerUnit": "48 pies",
"UnitPrice": 49.3000,
"UnitsInStock": 17,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 63,
"ProductName": "Vegie-spread",
"SupplierID": 7,
"CategoryID": 2,
"QuantityPerUnit": "15 - 625 g jars",
"UnitPrice": 43.9000,
"UnitsInStock": 24,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 64,
"ProductName": "Wimmers gute Semmelknödel",
"SupplierID": 12,
"CategoryID": 5,
"QuantityPerUnit": "20 bags x 4 pieces",
"UnitPrice": 33.2500,
"UnitsInStock": 22,
"UnitsOnOrder": 80,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 5,
"CategoryName": "Grains/Cereals",
"Description": "Breads, crackers, pasta, and cereal"
}
}, {
"ProductID": 65,
"ProductName": "Louisiana Fiery Hot Pepper Sauce",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "32 - 8 oz bottles",
"UnitPrice": 21.0500,
"UnitsInStock": 76,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 66,
"ProductName": "Louisiana Hot Spiced Okra",
"SupplierID": 2,
"CategoryID": 2,
"QuantityPerUnit": "24 - 8 oz jars",
"UnitPrice": 17.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 100,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
"ProductID": 67,
"ProductName": "Laughing Lumberjack Lager",
"SupplierID": 16,
"CategoryID": 1,
"QuantityPerUnit": "24 - 12 oz bottles",
"UnitPrice": 14.0000,
"UnitsInStock": 52,
"UnitsOnOrder": 0,
"ReorderLevel": 10,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 68,
"ProductName": "Scottish Longbreads",
"SupplierID": 8,
"CategoryID": 3,
"QuantityPerUnit": "10 boxes x 8 pieces",
"UnitPrice": 12.5000,
"UnitsInStock": 6,
"UnitsOnOrder": 10,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 3,
"CategoryName": "Confections",
"Description": "Desserts, candies, and sweet breads"
}
}, {
"ProductID": 69,
"ProductName": "Gudbrandsdalsost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 kg pkg.",
"UnitPrice": 36.0000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 70,
"ProductName": "Outback Lager",
"SupplierID": 7,
"CategoryID": 1,
"QuantityPerUnit": "24 - 355 ml bottles",
"UnitPrice": 15.0000,
"UnitsInStock": 15,
"UnitsOnOrder": 10,
"ReorderLevel": 30,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 71,
"ProductName": "Flotemysost",
"SupplierID": 15,
"CategoryID": 4,
"QuantityPerUnit": "10 - 500 g pkgs.",
"UnitPrice": 21.5000,
"UnitsInStock": 26,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 72,
"ProductName": "Mozzarella di Giovanni",
"SupplierID": 14,
"CategoryID": 4,
"QuantityPerUnit": "24 - 200 g pkgs.",
"UnitPrice": 34.8000,
"UnitsInStock": 14,
"UnitsOnOrder": 0,
"ReorderLevel": 0,
"Discontinued": false,
"Category": {
"CategoryID": 4,
"CategoryName": "Dairy Products",
"Description": "Cheeses"
}
}, {
"ProductID": 73,
"ProductName": "Röd Kaviar",
"SupplierID": 17,
"CategoryID": 8,
"QuantityPerUnit": "24 - 150 g jars",
"UnitPrice": 15.0000,
"UnitsInStock": 101,
"UnitsOnOrder": 0,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 8,
"CategoryName": "Seafood",
"Description": "Seaweed and fish"
}
}, {
"ProductID": 74,
"ProductName": "Longlife Tofu",
"SupplierID": 4,
"CategoryID": 7,
"QuantityPerUnit": "5 kg pkg.",
"UnitPrice": 10.0000,
"UnitsInStock": 4,
"UnitsOnOrder": 20,
"ReorderLevel": 5,
"Discontinued": false,
"Category": {
"CategoryID": 7,
"CategoryName": "Produce",
"Description": "Dried fruit and bean curd"
}
}, {
"ProductID": 75,
"ProductName": "Rhönbräu Klosterbier",
"SupplierID": 12,
"CategoryID": 1,
"QuantityPerUnit": "24 - 0.5 l bottles",
"UnitPrice": 7.7500,
"UnitsInStock": 125,
"UnitsOnOrder": 0,
"ReorderLevel": 25,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 76,
"ProductName": "Lakkalikööri",
"SupplierID": 23,
"CategoryID": 1,
"QuantityPerUnit": "500 ml",
"UnitPrice": 18.0000,
"UnitsInStock": 57,
"UnitsOnOrder": 0,
"ReorderLevel": 20,
"Discontinued": false,
"Category": {
"CategoryID": 1,
"CategoryName": "Beverages",
"Description": "Soft drinks, coffees, teas, beers, and ales"
}
}, {
"ProductID": 77,
"ProductName": "Original Frankfurter grüne Soße",
"SupplierID": 12,
"CategoryID": 2,
"QuantityPerUnit": "12 boxes",
"UnitPrice": 13.0000,
"UnitsInStock": 32,
"UnitsOnOrder": 0,
"ReorderLevel": 15,
"Discontinued": false,
"Category": {
"CategoryID": 2,
"CategoryName": "Condiments",
"Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];