Summary view allows you to show or hide the filtered query. By default, the value is false. You can enable by setting the summaryView property to true.
import { Component } from '@angular/core';
import { employeeData } from './datasource';
@Component({
selector: 'app-root',
template: `<!-- To render Query Builder. -->
<ejs-querybuilder #querybuilder width="30%" [dataSource]="data" [rule]="importRules" summaryView="true">
<e-columns>
<e-column field="EmployeeID" label="Employee ID" type="number"></e-column>
<e-column field="FirstName" label="First Name" type="string"></e-column>
<e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column>
<e-column field="Title" label="Title" type="string"></e-column>
<e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column>
<e-column field="Country" label="Country" type="string"></e-column>
<e-column field="City" label="City" type="string"></e-column>
</e-columns>
</ejs-querybuilder>`
})
export class AppComponent implements OnInit {
public data: Object[];
public importRules: RuleModel;
public values: string[] = ['Mr.', 'Mrs.'];
ngOnInit(): void {
this.data = employeeData;
this.importRules = {
'condition': 'and',
'rules': [{
'label': 'EmployeeID',
'field': 'EmployeeID',
'type': 'number',
'operator': 'notequal',
'value': '5'
},
{
'condition': 'or',
'rules': [{
'label': 'Title Of Courtesy',
'field': 'TitleOfCourtesy',
'type': 'string',
'operator': 'equal',
'value': 'Mr.'
},
{
'label': 'Country',
'field': 'Country',
'type': 'string',
'operator': 'equal',
'value': 'USA'
},
{
'condition': 'and',
'rules': [{
'label': 'City',
'field': 'City',
'type': 'string',
'operator': 'equal',
'value': 'London'
}]
}]
}]
};
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
QueryBuilderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }/**
* QueryBuilder datasource
*/
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'Date': '12/10/2018',
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President',
'TitleOfCourtesy': 'Dr.',
'Date': '22/06/2018',
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'Date': '12/10/2011',
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'Date': '01/11/2014',
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'Date': '12/10/2018',
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'Date': '01/12/2018',
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'Date': '12/12/2011',
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'Date': '12/10/2012',
'TitleOfCourtesy': 'Ms.',
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'Date': '12/03/2018',
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK'
}];
export let expenseData: Object[] = [{
'UniqueId': 'T100001',
'Category': 'Food',
'PaymentMode': 'Credit Card',
'TransactionType': 'Expense',
'Description': 'Boiled peanuts',
'Amount': '7',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/01/2017 09:12 AM'
}, {
'UniqueId': 'T100024',
'Category': 'Food',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Peanuts in Coke',
'Amount': '8',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 02:43 PM'
}, {
'UniqueId': 'T100025',
'Category': 'Food',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Palmetto Cheese, Mint julep',
'Amount': '11',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 08:35 PM'
}, {
'UniqueId': 'T100026',
'Category': 'Transportation',
'PaymentMode': 'Debit Card',
'TransactionType': 'Expense',
'Description': 'Cars and trucks, used',
'Amount': '9',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 10:25 AM'
}, {
'UniqueId': 'T100027',
'Category': 'Transportation',
'PaymentMode': 'Debit Card',
'TransactionType': 'Expense',
'Description': 'Public and other transportation',
'Amount': '8',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 03:55 PM'
}, {
'UniqueId': 'T100028',
'Category': 'Shopping',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Household things \u0026 Utilities',
'Amount': '160',
'MonthShort': 'Jun',
'MonthFull': 'June, 2017',
'FormattedDate': '06/04/2017 10:22 AM'
},
{
'UniqueId': 'T101284',
'Category': 'Extra income',
'PaymentMode': 'Cash',
'TransactionType': 'Income',
'Description': 'Income from Sale',
'Amount': '110',
'MonthShort': 'Nov',
'MonthFull': 'November, 2017',
'FormattedDate': '11/30/2017 02:42 PM'
}];
export let hardwareData: Object[] = [
{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'DOP': '04/10/2018',
'WEO': '05/01/2021',
'Status': 'Assigned',
'AssignedTo': 'John Doe',
'Note': 'Remarks are noted'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'DOP': '02/12/2018',
'WEO': '03/01/2023',
'Status': 'In-repair',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'DOP': '04/10/2018',
'WEO': '04/03/2021',
'Status': 'In-repair',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 4,
'Name': 'Lenovo ThinkPad',
'Category': 'Laptop',
'SerialNo': 'CB56209872',
'InvoiceNo': 'INV-2980',
'DOP': '03/09/2018',
'WEO': '05/12/2021',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 5,
'Name': 'Dell Inspiron',
'Category': 'Laptop',
'SerialNo': 'CB56289036',
'InvoiceNo': 'INV-3782',
'DOP': '01/10/2018',
'WEO': '04/01/2021',
'Status': 'Assigned',
'AssignedTo': 'David Anto',
'Note': 'Remarks are noted'
},
{
'TaskID': 6,
'Name': 'HP Pavilion',
'Category': 'Laptop',
'SerialNo': 'CB56289305',
'InvoiceNo': 'INV-2712',
'DOP': '04/10/2018',
'WEO': '05/01/2021',
'Status': 'Assigned',
'AssignedTo': 'Mary Saveley',
'Note': 'Remarks are noted'
},
{
'TaskID': 7,
'Name': 'Asus ZenBook',
'Category': 'Laptop',
'SerialNo': 'CB25637891',
'InvoiceNo': 'INV-0984',
'DOP': '06/16/2018',
'WEO': '09/01/2021',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 8,
'Name': 'HP EliteBook',
'Category': 'Laptop',
'SerialNo': 'CB27819726',
'InvoiceNo': 'INV-2561',
'DOP': '02/19/2018',
'WEO': '05/21/2021',
'Status': 'Ordered',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 9,
'Name': 'Apple MacBook Air',
'Category': 'Laptop',
'SerialNo': 'CB05262880',
'InvoiceNo': 'INV-8970',
'DOP': '02/12/2018',
'WEO': '03/01/2023',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
},
{
'TaskID': 10,
'Name': 'Apple iPad Air',
'Category': 'Tablet',
'SerialNo': 'CB45262777',
'InvoiceNo': 'INV-4555',
'DOP': '04/10/2018',
'WEO': '05/01/2021',
'Status': 'Pending',
'AssignedTo': '',
'Note': 'Remarks are noted'
}
];import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion Angular Query Builder</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Angular UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size:16px;
top: 45%;
left: 45%;
}
.e-qb-button {
margin: 2% 1% 0 15%;
}
.e-qbr-button {
margin: 2% 1% 0 1%;
}
.e-query-builder {
display: block;
margin: 0 auto;
}