Templates in ASP.NET CORE Query Builder
27 Aug 202613 minutes to read
Header Template
The Header Template allows you to define your own user interface for the header, which includes creating or deleting rules and groups and customizing the AND/OR condition and NOT condition options. To implement a header template in the Query Builder, you can create the user interface using the headerTemplate property and assign the values when requestType is header-template-create in the 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();
}