Summary view allows you to show or hide the filtered query. By default, the value is false. You can enable this feature by setting the summaryView property to true.
/**
* summary-view querybuilder sample
*/
var columnData= [
{
field: 'EmployeeID', label: 'EmployeeID', type: 'number'
},
{ field: 'FirstName', label: 'FirstName', type: 'string' },
{ field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
{ field: 'Title', label: 'Title', type: 'string' },
{ field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
{ field: 'Country', label: 'Country', type: 'string' },
{ field: 'City', label: 'City', type: 'string' }
];
var 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'
}]
}]
}]
};
var qryBldrObj = new ej.querybuilder.QueryBuilder({
width: '30%',
dataSource: window.employeeData,
columns: columnData,
rule: importRules,
summaryView: "true"
});
qryBldrObj.appendTo('#querybuilder');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Query Builder</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-querybuilder/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="querybuilder"></div>
<div id="property"> </div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-query-builder {
margin: 0 auto;
}