Templates
17 Feb 202213 minutes to read
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.
<ejs-querybuilder id="querybuilder" headerTemplate="#headerTemplate" width="100%" rule="ViewBag.rule" dataSource="ViewBag.dataSource" actionBegin="actionBegin" enableNotCondition="true">
<e-querybuilder-columns>
<e-querybuilder-column field="EmployeeID" label="Employee ID" type="number"></e-querybuilder-column>
<e-querybuilder-column field="LastName" label="LastName" type="string">
</e-querybuilder-column>
<e-querybuilder-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean"></e-querybuilder-column>
<e-querybuilder-column field="Title" label="Title" type="string"></e-querybuilder-column>
<e-querybuilder-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-querybuilder-column>
<e-querybuilder-column field="Country" label="Country" type="string"></e-querybuilder-column>
<e-querybuilder-column field="City" label="City" type="string"></e-querybuilder-column>
</e-querybuilder-columns>
</ejs-querybuilder>
<style>
.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;
margin-top: 3px;
}
.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 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>
<script type="text/javascript">
function actionBegin(args) {
var queryBldrObj = ej.base.getComponent(document.getElementById("querybuilder"), "query-builder");
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: function (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 = ej.base.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 deleteGroupBtn = document.getElementById(args.ruleID).querySelector('.e-delete-btn');
if (deleteGroupBtn) {
deleteGroupBtn.onclick = function (e) {
queryBldrObj.deleteGroup(ej.base.closest(e.target.offsetParent, '.e-group-container'));
}
}
}
}
</script>public IActionResult Index()
{
QueryBuilderRule rule = new QueryBuilderRule()
{
Not = true,
Condition = "and",
Rules = new List<QueryBuilderRule>()
{
new QueryBuilderRule { Label="Employee ID", Field="EmployeeID", Type="number", Operator="equal", Value = 1 },
new QueryBuilderRule { Label="LastName", Field="LastName", Type="string", Operator="equal", Value = "MALAN" },
{
new QueryBuilderRule {
Condition = "or",
Rules = new List<QueryBuilderRule>()
{
new QueryBuilderRule { Label="LastName", Field="LastName", Type="string", Operator="equal", Value = "MALAN" }
}
}
}
}
};
ViewBag.rule = rule;
return View();
}