Search results

Templates in JavaScript (ES5) 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
index.js
index.html
styles.css
Copied to clipboard
/**
     *  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'));
                }
            }
        }
    }
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://cdn.syncfusion.com/ej2/dist/ej2.min.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>
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
index.js
index.html
styles.css
Copied to clipboard
/**
     *  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');
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://cdn.syncfusion.com/ej2/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>
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
index.js
index.html
styles.css
Copied to clipboard
/**
     * 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');
    }
}
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://cdn.syncfusion.com/ej2/dist/ej2.min.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>
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
index.js
index.html
styles.css
Copied to clipboard
/**
     *  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'));
        });
    }
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://cdn.syncfusion.com/ej2/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>
	<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>
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;
}