The column definitions are used as the dataSource
schema in the Query Builder. This plays a vital role in rendering column values. The query builder operations such as create or delete conditions, and create or delete groups, are performed based on the column definitions. The field
property of the columns
is necessary to map the data source values in the query builder columns.
If the column field is not specified in the dataSource, the column values will be empty.
The columns
are automatically generated when the columns
declaration is empty or undefined while initializing the query builder. All the columns in the dataSource
are bound as the query builder columns.
import { QueryBuilder } from '@syncfusion/ej2-querybuilder';
let data: Object[] = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, Freight: 32.3800, OrderDate: "07/09/1991" },
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, Freight: 32.3800, OrderDate: "07/09/1991" },
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, Freight: 32.3800, OrderDate: "07/09/1991" }];
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: data,
});
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="//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>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-query-builder {
margin: 0 auto;
}
When columns are auto-generated, the column type will be determined from the first record of the dataSource.
By default, the column label is displayed from the column field
value. To override the default label, you have to define the label
value.
The operator for a column can be defined in the operators
property.
The available operators and its supported data types are:
Operators | Description | Supported Types |
---|---|---|
startswith | Checks whether the value begins with the specified value. | String |
endswith | Checks whether the value ends with the specified value. | String |
contains | Checks whether the value contains the specified value. | String |
equal | Checks whether the value is equal to the specified value. | String Number Date Boolean |
notequal | Checks whether the value is not equal to the specified value. | String Number Date Boolean |
greaterthan | Checks whether the value is greater than the specified value. | Date Number |
greaterthanorequal | Checks whether a value is greater than or equal to the specified value. | Date Number |
lessthan | Checks whether the value is less than the specified value. | Date Number |
lessthanorequal | Checks whether the value is less than or equal to the specified value. | Date Number |
between | Checks whether the value is between the two-specific values. | Date Number |
notbetween | Checks whether the value is not between the two-specific values. | Date Number |
in | Checks whether the value is one of the specific values. | String Number |
notin | Checks whether the value is not in the specific values. | String Number |
The Query Builder allows you to set the step values to the number fields. So that, you can easily access the numeric textbox. Use the step
property, to set the step value for number values.
The Query Builder formats date and number values. Use the format
property to format date and number values.
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
let employeeData: Object[] = [{
'EmployeeID': 1,
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'City': 'Seattle',
'Country': 'USA'
},
{
'EmployeeID': 2,
'FirstName': 'Andrew',
'Title': 'Vice President',
'TitleOfCourtesy': 'Dr.',
'HireDate': '21/04/2003',
'City': 'Tacoma',
'Country': 'USA'
},
{
'EmployeeID': 3,
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'City': 'Kirkland',
'Country': 'USA'
}];
let columnData: ColumnsModel[] = [
{
field: 'EmployeeID', label: 'EmployeeID', type: 'number', operators: [{ key: 'Equal', value: 'equal' },
{ key: 'Greater than', value: 'greaterthan' }, { key: 'Less than', value: 'lessthan' }], step: 10
},
{ field: 'FirstName', label: 'FirstName', type: 'string' },
{ field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
{ field: 'Title', label: 'Title', type: 'string' },
{ field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
{ field: 'Country', label: 'Country', type: 'string' },
{ field: 'City', label: 'City', type: 'string' }
];
let importRules: RuleModel = {
'condition': 'and',
'rules': [{
'label': 'HireDate',
'field': 'HireDate',
'type': 'date',
'operator': 'equal',
'value': '07/05/1991'
},
{
'label': 'Title',
'field': 'Title',
'type': 'string',
'operator': 'equal',
'value': 'Sales Manager'
}]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: employeeData,
columns: columnData,
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="//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>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-query-builder {
margin: 0 auto;
}
Validation allows you to validate the conditions and it display errors for invalid fields while using the validateFields
method. To enable validation in the query builder , set the allowValidation to true. Column fields are validated after setting allowValidation
to true. So, you should manually configure the validation for Operator and Value fields through validation
.
Set
isRequired
validation for Operator and Value fields. Setmin
,max
values for number values.
import { QueryBuilder, ColumnsModel } from '@syncfusion/ej2-querybuilder';
import { Button } from '@syncfusion/ej2-buttons';
let employeeData: Object[] = [{
'EmployeeID': 1,
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'City': 'Seattle',
'Country': 'USA'
},
{
'EmployeeID': 2,
'FirstName': 'Andrew',
'Title': 'Vice President',
'TitleOfCourtesy': 'Dr.',
'HireDate': '21/04/2003',
'City': 'Tacoma',
'Country': 'USA'
},
{
'EmployeeID': 3,
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'HireDate': '22/07/2001',
'City': 'Kirkland',
'Country': 'USA'
}];
let columnData: ColumnsModel[] = [
{ field: 'EmployeeID', label: 'EmployeeID', type: 'number', validation: { isRequired: true } },
{ field: 'FirstName', label: 'FirstName', type: 'string' },
{ field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
{ field: 'Title', label: 'Title', type: 'string' , validation: { isRequired: true } },
{ field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
{ field: 'Country', label: 'Country', type: 'string', validation: { isRequired: true } },
{ field: 'City', label: 'City', type: 'string', validation: { isRequired: true } }
];
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: employeeData,
columns: columnData,
allowValidation: true
});
qryBldrObj.appendTo('#querybuilder');
let button: Button = new Button({cssClass: `e-primary`, content:'Validation'}, '#qbbutton');
document.getElementById('qbbutton').onclick = (): void => {
qryBldrObj.validateFields();
}
<!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 class='e-qb-button'>
<button id='qbbutton' class='e-btn e-primary'> Validate Fields </button>
</div>
</div>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-qb-button {
margin: 2% 0 0 15%;
}
.e-qb-button button {
margin-right: 20px;
}
.e-query-builder {
margin: 0 auto;
}
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.
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 coulumnData: 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: coulumnData,
width: '70%',
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="//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>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-query-builder {
margin: 0 auto;
}
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.
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'));
});
}
<!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>
#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;
}