Search results

Templates in JavaScript QueryBuilder control

17 Sep 2021 / 8 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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, RuleModel, ColumnsModel, ActionEventArgs} from  '@syncfusion/ej2-querybuilder'
import { closest } from '@syncfusion/ej2-base';
import { DropDownButton, ItemModel, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { CheckBox } from '@syncfusion/ej2-buttons';

let filter: ColumnsModel [] = [
    { 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'},
];

let importRules: RuleModel = {
    '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
    }]
}]
};

let queryBldrObj: QueryBuilder = new QueryBuilder({
    columns: filter,
    width: '100%',
    rule: importRules,
    headerTemplate: '#headerTemplate',
    actionBegin: actionBegin,
    enableNotCondition: true
});
queryBldrObj.appendTo('#querybuilder');

    function actionBegin(args: ActionEventArgs): void {
        if (args.requestType === 'header-template-create') {
            let checkBoxObj: CheckBox = new CheckBox({
                label: 'NOT',
                checked: args.notCondition,
                change: function(e:any){
                    queryBldrObj.notifyChange(e.checked,e.event.target, 'not')
                }
             });
            checkBoxObj.appendTo('#' + args.ruleID + '_notoption');
            let ds: { [key: string]: Object }[] = [{'key': 'AND', 'value': 'and'},{'key': 'OR', 'value': 'or'}];
            let btnObj: DropDownList= new DropDownList({
                dataSource: ds,
                fields: { text: 'key', value: 'value' },
                value: args.condition,
                cssClass: 'e-custom-group-btn e-active-toggle',
                change: (e: any) => {
                    queryBldrObj.notifyChange(e.value, e.element, 'condition');
                }
            });
            btnObj.appendTo('#' + args.ruleID + '_cndtnbtn');
            let ddbitems: ItemModel[] = [
                { text: 'AddGroup', iconCss: 'e-icons e-add-icon e-addgroup' },
                { text: 'AddCondition', iconCss: 'e-icons e-add-icon e-addrule' }
            ];
            let addbtn: DropDownButton = new DropDownButton({
                items: ddbitems,
                cssClass: 'e-round e-small e-caret-hide e-addrulegroup',
                iconCss: 'e-icons e-add-icon',
                select: function(event: MenuEventArgs) {
                    let addbtn: Element = closest(event.element,'.e-dropdown-popup');  let ddb: string[]= 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');
            let deleteGroup: Element =  document.getElementById(args.ruleID).querySelector('.e-delete-btn');
            if (deleteGroup) {
                (deleteGroup as HTMLElement).onclick = function (e:any) {
                    queryBldrObj.deleteGroup(closest(e.target.offsetParent, '.e-group-container'));
                }
            }
        }
    }
Copied to clipboard
<!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/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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { getComponent } from '@syncfusion/ej2-base';
import { TextBox } from '@syncfusion/ej2-inputs';
import { DropDownList, MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';

let expenseData: Object[]  = [{
'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'
  }];

let elem: HTMLElement;
let inOperators: string [] = ['in', 'notin'];
let columnData: ColumnsModel[] = [
    { field: 'Category', label: 'Category', type: 'string' },
    { field: 'TransactionType', label: 'Transaction Type', type: 'boolean' },
    {
        field: 'PaymentMode', label: 'Payment Mode', type: 'string', template: {
            create: () => {
                elem = document.createElement('input');
                elem.setAttribute('type', 'text');
                return elem;
            },
            destroy: (args: { elementId: string }) => {
                let multiSelect: MultiSelect = (getComponent(document.getElementById(args.elementId), 'multiselect') as MultiSelect);
                if (multiSelect) {
                    multiSelect.destroy();
                }
                let dropdown: DropDownList = (getComponent(document.getElementById(args.elementId), 'dropdownlist') as DropDownList);
                if (dropdown) {
                    dropdown.destroy();
                }
            },
            write: (args: { elements: Element, values: string[] | string, operator: string }) => {
                let ds: string[] = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet'];
                if (inOperators.indexOf(args.operator) > -1) {
                    let multiSelectObj: MultiSelect = new MultiSelect({
                        dataSource: ds,
                        value: args.values as string [],
                        mode: 'CheckBox',
                        placeholder: 'Select Transaction',
                        change: (e: any) => {
                            qryBldrObj.notifyChange(e.value, e.element);
                        }
                    });
                    multiSelectObj.appendTo('#' + args.elements.id);
                } else {
                    let dropDownObj: DropDownList = new DropDownList({
                        dataSource: ds,
                        value: args.values as string,
                        change: (e: any) => {
                            qryBldrObj.notifyChange(e.itemData.value, e.element);
                        }
                    });
                    dropDownObj.appendTo('#' + args.elements.id);
                }
            }
        },
        operators: [
            { value: 'equal', key: 'Equal' },
            { value: 'notequal', key: 'Not Equal' },
            { value: 'in', key: 'In' },
            { value: 'notin', key: 'Not In' }
        ],
    },
    { field: 'Description', label: 'Description', type: 'string' },
    { field: 'Date', label: 'Date', type: 'date' },
    { field: 'Amount', label: 'Amount', type: 'number' }
];

let importRules: RuleModel = {
    'condition': 'and',
    'rules': [{
            'label': 'Payment Mode',
            'field': 'PaymentMode',
            'type': 'string',
            'operator': 'equal',
            'value': 'Cash'
        }
    ]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
    dataSource: expenseData,
    columns: columnData,
    width: '70%',
    rule: importRules
});
qryBldrObj.appendTo('#querybuilder');
Copied to clipboard
<!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/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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='querybuilder'></div>
         <div id='property'> </div>
    </div>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, RuleModel, ColumnsModel, ActionEventArgs} from '@syncfusion/ej2-querybuilder';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { CheckBox } from '@syncfusion/ej2-buttons';

let filter: ColumnsModel [] = [
{ 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'},
];

let customOperators: { [key: string]: Object }[] = [{value: 'equal', key: 'Equal'},
  {value: 'notequal', key: 'Not Equal'}];
let importRules: RuleModel = {
'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'
  }]
};

let valueObj: Slider;
let queryBldrObj: QueryBuilder = new QueryBuilder({
columns: filter,
rule: importRules,
width: '100%',
actionBegin: actionBegin
});
queryBldrObj.appendTo('#querybuilder');


function actionBegin(args: ActionEventArgs): void {
let ruleID: string = args.ruleID
if (args.requestType === 'value-template-create') {
    let checkBoxObj: CheckBox = new CheckBox({
        label: 'Is Expense',
        checked: args.rule.value === "Expense" ? true: false,
        change: function(e:any){
            let elem: HTMLElement = document.getElementById(ruleID).querySelector('.e-rule-value');qryBldrObj.notifyChange(e.checked === true ? 'Expense' : 'Income', elem, 'value');
        }
    });
    checkBoxObj.appendTo('#' + args.ruleID + '_checkbox');
    let ds: string[] = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking'];
    let btnObj: DropDownList= new DropDownList({
            dataSource: ds,
            fields: { text: 'key', value: 'value' },
            value: args.rule.value,
            change: (e: any) => {
             let elem: HTMLElement = document.getElementById(ruleID).querySelector('.e-rule-value');qryBldrObj.notifyChange(e.value as string, elem, 'value');
            }
    });
    btnObj.appendTo('#' + args.ruleID + '_paymentlist');
}
}
Copied to clipboard
<!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/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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
import { QueryBuilder, RuleModel, ColumnsModel, ActionEventArgs} from '@syncfusion/ej2-querybuilder';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Slider } from '@syncfusion/ej2-inputs';
import { employeeData } from './datasource.ts';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { compile } from '@syncfusion/ej2-base';

let filter: ColumnsModel [] = [
{ 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'},
];

let importRules: RuleModel = {
'condition': 'and',
'rules': [{
    'label': 'Age',
    'field': 'Age',
    'type': 'number',
    'operator': 'greaterthanorequal',
    'value': 30
}]
};

let fieldObj: DropDownList;
let valueObj: Slider;
let ruleID: string;

let queryBldrObj: QueryBuilder = new QueryBuilder({
columns: filter,
dataSource: employeeData,
rule: importRules,
width: '100%',
actionBegin: actionBegin
});
queryBldrObj.appendTo('#querybuilder');

function actionBegin(args: ActionEventArgs): void {
ruleID = args.ruleID;
if (args.requestType === 'template-create') {
    args.rule.operator = 'greaterthanorequal';
    fieldObj = new DropDownList({
        dataSource: this.columns, // tslint:disable-line
        fields: args.fields,
        value: args.rule.field,
        change: (e: any) => {
            queryBldrObj.notifyChange(e.value, e.element, 'field');
        }
    });
    if (args.rule.value === '') {
        args.rule.value = 30;
    }
    valueObj = new Slider({
        value: args.rule.value as number,
        min: 30,
        max: 50,
        ticks: { placement: 'Before', largeStep: 5, smallStep: 1, showSmallTicks: true },
        change: (e: any) => {
            let elem: HTMLElement = valueObj.element;
            queryBldrObj.notifyChange(e.value, elem, 'value');
            refreshTable(queryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
        },
        created: () => {
            let elem: HTMLElement = valueObj.element;
            refreshTable(queryBldrObj.getRule(elem), elem.id.split('_valuekey0')[0]);
        }
    });
    fieldObj.appendTo('#' + args.ruleID + '_filterkey');
    valueObj.appendTo('#' + args.ruleID + '_valuekey0');
}
}

function refreshTable(rule: RuleModel, ruleID: string) {
let template: string = '<tr><td>${EmployeeID}</td><td>${FirstName}</td><td>${Age}</td></tr>';
let compiledFunction: Function = compile(template);
let predicate = queryBldrObj.getPredicate({condition: 'and', rules: [rule]});
let dataManagerQuery: Query = new Query().select(['EmployeeID', 'FirstName', 'Age']).where(predicate);
let result: Object[] = new DataManager(employeeData).executeLocal(dataManagerQuery);
let table: HTMLElement = (<HTMLElement>document.querySelector('#' + ruleID + '_section #datatable'));
if (result.length) {
    table.style.display = 'block';
} else {
    table.style.display = 'none';
}
table.querySelector('tbody').innerHTML = '';
result.forEach((data: Object) => {
    table.querySelector('tbody').appendChild(compiledFunction(data)[0].querySelector('tr'));
});
}
Copied to clipboard
<!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/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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    
</head>

<body>
    <div id='loader'>LOADING....</div>
    <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>
</body>
</html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-query-builder {
  margin: 0 auto;
}

.e-rule-template {
    padding-bottom: 12px;
}
.e-rule-btn {
    float: right;
    padding-top: 12px;
}
.e-rule-value-group {
    margin: 12px;
    border-top: 1px solid #e0e0e0;
    min-height: 40px;
}
.e-query-builder .e-hide {
    display: none;
}

.e-rule-table {
    margin: 20px 0 0 20px;
    border: solid 1px #e0e0e0;
    border-collapse: collapse;
    font-family: Roboto;
    width: 320px;
    height: 180px;
    overflow-y: auto;
}
.e-rule-table th,
.e-rule-table td {
    border: solid #e0e0e0;
    border-width: 1px 0 0;
    display: table-cell;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    padding: 8px 21px;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
}