Templates in EJ2 JavaScript Query builder control
27 Apr 202324 minutes to read
Templates allows users to define customized header and own user interface for columns.
Header Template
Header Template allows to define your own user interface for Header, which includes creating or deleting rules and groups and to customize the AND/OR condition and NOT condition options. To implement header template in querybuilder, you can create the user interface using x-template and assign the values when requestType is header-template-create in actionBegin event.
In the following sample dropdown, splitbutton and button are used as the custom components in the header.
/**
* querybuilder headerTemplate sample
*/
var filter = [
{ field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
{ field: 'FirstName', label: 'FirstName', type: 'string' },
{ field: 'LastName', label: 'LastName', type: 'string' },
{ field: 'Age', label: 'Age', type: 'number'},
{ field: 'City', label: 'City', type: 'string' },
{ field: 'Country', label: 'Country', type: 'string' }
];
var importRules = {
'condition': 'and', 'not' : true,
'rules': [{
'label': 'Age',
'field': 'Age',
'type': 'number',
'operator': 'equal',
'value': 34
},
{
'label': 'LastName',
'field': 'LastName',
'type': 'string',
'operator': 'equal',
'value': 'vinit'
},
{
'condition': 'or',
'rules': [{
'label': 'Age',
'field': 'Age',
'type': 'number',
'operator': 'equal',
'value': 34
}]
}]
};
var queryBldrObj = new ej.querybuilder.QueryBuilder({
columns: filter,
rule: importRules,
width: '100%',
headerTemplate: '#headerTemplate',
actionBegin: actionBegin,
enableNotCondition: true
});
queryBldrObj.appendTo('#querybuilder');
function actionBegin(args) {
if (args.requestType === 'header-template-create') {
var checkBoxObj = new ej.buttons.CheckBox({
label: 'NOT',
checked: args.notCondition,
change: function(e){
queryBldrObj.notifyChange(e.checked,e.event.target, 'not')
}
});
checkBoxObj.appendTo('#' + args.ruleID + '_notoption');
var ds = [{'key': 'AND', 'value': 'and'},{'key': 'OR', 'value': 'or'}];
var btnObj = new ej.dropdowns.DropDownList({
dataSource: ds,
fields: { text: 'key', value: 'value' },
value: args.condition,
cssClass: 'e-custom-group-btn e-active-toggle',
change: (e) => {
queryBldrObj.notifyChange(e.value, e.element, 'condition');
}
});
btnObj.appendTo('#' + args.ruleID + '_cndtnbtn');
var ddbitems = [
{ text: 'AddGroup', iconCss: 'e-icons e-add-icon e-addgroup' },
{ text: 'AddCondition', iconCss: 'e-icons e-add-icon e-addrule' }
];
var addbtn = new ej.splitbuttons.DropDownButton({
items: ddbitems,
cssClass: 'e-round e-small e-caret-hide e-addrulegroup',
iconCss: 'e-icons e-add-icon',
select: function(event) {
var addbtn = closest(event.element,'.e-dropdown-popup'); var ddb= addbtn.id.split('_');
if (event.item.text === 'AddGroup') {
queryBldrObj.addGroups([{condition: 'and', 'rules': [{}], not: false}], ddb[1]);
} else if (event.item.text === 'AddCondition') {
queryBldrObj.addRules([{}], ddb[1]);
}
}
});
addbtn.appendTo('#' + args.ruleID + '_addbtn');
var deleteGroup = document.getElementById(args.ruleID).querySelector('.e-delete-btn');
if (deleteGroup) {
(deleteGroup ).onclick = function (e) {
queryBldrObj.deleteGroup(closest(e.target.offsetParent, '.e-group-container'));
}
}
}
}<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-querybuilder/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="querybuilder"></div>
</div>
<script id="headerTemplate" type="text/x-template">
<div class = 'e-groupheader'>
${if(notCondition !== undefined)}
<button class='e-cb-wrapper'>
<input type="checkbox" class= "e-not" id='${ruleID}_notoption' checked='${notCondition}'>
</button>
${/if}
<input type="text" class= "e-custom-group-btn" id='${ruleID}_cndtnbtn'>
<button id = '${ruleID}_addbtn' class = 'e-add-btn'></button>
${if(ruleID !== 'querybuilder_group0')}
<button id= 'dltbtn' class = "e-btn e-delete-btn e-lib e-small e-round e-icon-btn">
<span class = 'e-btn-icon e-icons e-delete-icon'></span>
</button>
${/if}
</div>
</script>
<style type="text/css">
.e-query-builder .e-add-btn {
margin-left: 10px;
margin-right: 10px;
}
.e-query-builder .cndtnbtn.e-control.e-dropdownlist.e-lib.e-input {
padding-left: 10px;
}
.e-query-builder span.e-custom-group-btn {
max-width: 100px;
border-radius: 5px !important;
border-width: 1px !important;
}
.e-query-builder .e-custom-group-btn.e-input-focus::before, .e-custom-group-btn.e-input-focus::after {
background: transparent !important;
}
.e-query-builder .e-group-header .e-addrulegroup, .e-group-header .e-delete-btn {
border: 1px solid grey !important;
}
.e-query-builder .e-group-header .e-addrulegroup:hover, .e-group-header .e-delete-btn:hover {
border: 1px solid grey !important;
}
.e-query-builder .e-toggle{
background: #317ab9;
border-color: #317ab9;
color: #fff;
}
.e-query-builder .e-cb-wrapper {
margin-right: 5px;
height: 32px;
border-radius: 5px;
border: 1px solid gray;
background-color: white;
}
.e-query-builder .e-custom-group-btn{
padding-left: 10px;
height: 32px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Column Template
Column Template allows you to define your own input widgets for columns. To implement template, you can define the following functions
-
create: Creates the custom component. -
write: Wire events for the custom component. -
Destroy: Destroy the custom component.
In the following sample, dropdown is used as the custom component in the PaymentMode column.
/**
* querybuilder template sample
*/
var elem;
var dropDownObj;
var multiSelectObj;
var inOperators = ['in', 'notin'];
var filter = [{
field: 'Category',
label: 'Category',
type: 'string'
},
{
field: 'PaymentMode',
label: 'PaymentMode',
type: 'string',
operators: [
{ key: 'Equal', value: 'equal' },
{ key: 'Not Equal', value: 'notequal' },
{ key: 'In', value: 'in' },
{ key: 'Not In', value: 'notin' }
],
template: {
create: function () {
elem = document.createElement('input');
elem.setAttribute('type', 'text');
return elem;
},
destroy: function (args) {
var selectObj = ej.base.getComponent(document.getElementById(args.elementId), 'multiselect');
if (selectObj) {
selectObj.destroy();
}
var dropdown = ej.base.getComponent(document.getElementById(args.elementId), 'dropdownlist');
if (dropdown) {
dropdown.destroy();
}
},
write: function (args) {
var ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];
if (inOperators.indexOf(args.operator) > -1) {
var multiSelectObj = new ej.dropdowns.MultiSelect({
dataSource: ds,
value: args.values,
mode: 'CheckBox',
placeholder: 'Select Transaction',
change: function (e) {
qryBldrObj.notifyChange(e.value, e.element);
}
});
multiSelectObj.appendTo('#' + args.elements.id);
}
else {
dropDownObj = new ej.dropdowns.DropDownList({
dataSource: ds,
value: args.values ? args.values : ds[0],
change: function (e) {
qryBldrObj.notifyChange(e.itemData.value, e.element);
}
});
dropDownObj.appendTo('#' + args.elements.id);
}
}
}
},
{
field: 'TransactionType',
label: 'TransactionType',
type: 'string'
},
{
field: 'Description',
label: 'Description',
type: 'string'
},
{
field: 'Date',
label: 'Date',
type: 'date'
},
{
field: 'Amount',
label: 'Amount',
type: 'number'
}
];
var importRules = {
'condition': 'and',
'rules': [{
'label': 'PaymentMode',
'field': 'PaymentMode',
'type': 'string',
'operator': 'equal',
'value': 'Cash'
}]
};
var expenseData = [{
'Category': 'Food',
'PaymentMode': 'Credit Card',
'TransactionType': 'Expense',
'Description': 'Boiled peanuts',
'Amount': '7',
'Date': '06/01/2017'
}, {
'Category': 'Food',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Peanuts in Coke',
'Amount': '8',
'Date': '06/04/2017'
}, {
'Category': 'Food',
'PaymentMode': 'Cash',
'TransactionType': 'Expense',
'Description': 'Palmetto Cheese, Mint julep',
'Amount': '11',
'Date': '06/04/2017'
}];
var qryBldrObj = new ej.querybuilder.QueryBuilder({
dataSource: expenseData,
columns: filter,
width: '100%',
rule: importRules
});
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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-querybuilder/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>Using Template
Template allows you to define your own input widgets for columns. To implement template in querybuilder, you can create the user interface using x-template and assign the values through actionBegin event.
/**
* querybuilder sample
*/
var filter = [
{ field:"Category", label:"Category" ,type:"string"},
{ field: 'PaymentMode', label: 'PaymentMode', type: 'string', operators: customOperators , template:"#paymentTemplate"},
{ field: 'TransactionType', label: 'TransactionType', type: 'string', operators: customOperators, template:"#transactionTemplate"},
{ field: 'Description', label: 'Description', type: 'string' },
{ field: 'Date', label: 'Date', type: 'string'},
{ field: 'Amount', label: 'Amount', type: 'string'},
];
var customOperators = [{value: 'equal', key: 'Equal'},
{value: 'notequal', key: 'Not Equal'}];
var importRules = {
'condition': 'and',
'rules': [{
'label': 'Transaction Type',
'field': 'TransactionType',
'type': 'string',
'operator': 'equal',
'value': 'Expense'
},
{
'label': 'Payment Mode',
'field': 'PaymentMode',
'type': 'string',
'operator': 'equal',
'value': 'Cash'
}]
};
var queryBldrObj = new ej.querybuilder.QueryBuilder({
columns: filter,
rule: importRules,
width: '100%',
actionBegin: actionBegin
});
queryBldrObj.appendTo('#querybuilder');
function actionBegin(args) {
var ruleID = args.ruleID
if (args.requestType === 'value-template-create') {
var checkBoxObj = new ej.buttons.CheckBox({
label: 'Is Expense',
checked: args.rule.value === "Expense" ? true: false,
change: function(e){
var elem = document.getElementById(ruleID).querySelector('.e-rule-value');this.qryBldrObj.notifyChange(e.checked === true ? 'Expense' : 'Income', elem, 'value');
}
});
checkBoxObj.appendTo('#' + args.ruleID + '_checkbox');
var ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking'];
var btnObj = new ej.dropdowns.DropDownList({
dataSource: ds,
fields: { text: 'key', value: 'value' },
value: args.rule.value,
change: (e) => {
var elem = document.getElementById(ruleID).querySelector('.e-rule-value');qryBldrObj.notifyChange(e.value , elem, 'value');
}
});
btnObj.appendTo('#' + args.ruleID + '_paymentlist');
}
}<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-querybuilder/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="querybuilder"></div>
</div>
<script id="paymentTemplate" type="text/x-template">
<input type="text" class= "e-payment-list" id='${ruleID}_paymentlist'>
</script>
<script id="transactionTemplate" type="text/x-template">
<input type="checkbox" class= "e-checkbox" id='${ruleID}_checkbox'>
</script>
<style type="text/css">
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Rule Template
Rule Template allows to define your own user interface for columns. To implement ruleTemplate, you can create the user interface using x-template and assign the values through actionBegin event.
In the following sample, dropdown and slider are used as the custom component in the Age column and we have applied greaterthanorequal operator to this column.
/**
* querybuilder template sample
*/
var filter = [
{ field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
{ field: 'FirstName', label: 'FirstName', type: 'string' },
{ field: 'LastName', label: 'LastName', type: 'string' },
{ field: 'Age', label: 'Age', type: 'number', ruleTemplate: '#ageTemplate' },
{ field: 'City', label: 'City', type: 'string' },
{ field: 'Country', label: 'Country', type: 'string' },
];
var importRules = {
'condition': 'and',
'rules': [{
'label': 'Age',
'field': 'Age',
'type': 'number',
'operator': 'greaterthanorequal',
'value': 30
}]
};
var fieldObj;
var valueObj;
var ruleID;
var queryBldrObj = new ej.querybuilder.QueryBuilder({
columns: filter,
dataSource: employeeData,
rule: importRules,
width: '100%',
actionBegin: actionBegin
});
queryBldrObj.appendTo('#querybuilder');
function actionBegin(args) {
ruleID = args.ruleID;
if (args.requestType === 'template-create') {
args.rule.operator = 'greaterthanorequal';
fieldObj = new ej.dropdowns.DropDownList({
dataSource: this.columns,
fields: args.fields,
value: args.rule.field,
change: function (e) {
queryBldrObj.notifyChange(e.value, e.element, 'field');
}
});
if (args.rule.value === '') {
args.rule.value = 30;
}
valueObj = new ej.inputs.Slider({
value: args.rule.value,
min: 30,
max: 50,
ticks: { placement: 'Before', largeStep: 5, smallStep: 1, showSmallTicks: true },
change: function (e) {
var elem = valueObj.element;
queryBldrObj.notifyChange(e.value, elem, 'value');
refreshTable(queryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
},
created: function () {
var elem = valueObj.element;
refreshTable(queryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
}
});
fieldObj.appendTo('#' + args.ruleID + '_filterkey');
valueObj.appendTo('#' + args.ruleID + '_valuekey0');
}
}
function refreshTable(rule, ruleID) {
var template = '<tr><td>${EmployeeID}</td><td>${FirstName}</td><td>${Age}</td></tr>';
var compiledFunction = ej.base.compile(template);
var predicate = queryBldrObj.getPredicate({condition: 'and', rules: [rule]});
var dataManagerQuery = new ej.data.Query().select(['EmployeeID', 'FirstName', 'Age']).where(predicate);
var result = new ej.data.DataManager(employeeData).executeLocal(dataManagerQuery);
var table = document.querySelector('#' + ruleID + '_section #datatable');
if (result.length) {
table.style.display = 'block';
}
else {
table.style.display = 'none';
}
table.querySelector('tbody').innerHTML = '';
result.forEach(function (data) {
table.querySelector('tbody').appendChild(compiledFunction(data)[0].querySelector('tr'));
});
}<!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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-calendars/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-querybuilder/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="querybuilder"></div>
</div>
<script id="ageTemplate" type="text/x-template">
<div class="e-rule e-rule-template">
<div class="e-rule-filter e-custom-filter">
<input id = ${ruleID}_filterkey class='e-filter-input'>
</div>
<div>
<div class="e-value e-rule-value e-slider-value">
<div id = ${ruleID}_valuekey0 class="ticks_slider"></div>
</div>
<div class="e-rule-btn">
<button id=${ruleID}_option onclick="myFunction(${ruleID})" class="e-primary e-btn e-small">
View Details
</button>
<button class="e-removerule e-rule-delete e-css e-btn e-small e-round">
<span class="e-btn-icon e-icons e-delete-icon"/>
</button>
</div>
</div>
<div id=${ruleID}_section class="e-rule-value-group e-hide">
<div>
<table id='datatable' class='e-table e-rule-table' style='display:none'>
<thead>
<tr><th>EmployeeID</th><th>FirstName</th><th>Age</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</script>
<script type="text/javascript">
function myFunction(ruleElem) {
var element = document.getElementById(ruleElem.id + '_section');
if (element.className.indexOf('e-hide') > -1) {
element.className = element.className.replace('e-hide', '');
document.getElementById(ruleElem.id + '_option').textContent = 'Hide Details';
} else {
element.className += ' e-hide';
document.getElementById(ruleElem.id + '_option').textContent = 'View Details';
}
}
</script>
<style type="text/css">
.e-query-builder .e-custom-filter {
width: 40% !important;
}
.e-query-builder .e-slider-value {
width: 40% !important;
padding: 12px 0 12px 0 !important;
display: inline-block;
}
.e-query-builder .e-slider-container.e-horizontal {
padding: 0 0 0 18px;
height: 0;
}
.e-query-builder .e-slider-container.e-horizontal .e-slider {
top: calc(50% - 10px);
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>