Import export in EJ2 TypeScript Query builder control
26 Jul 202324 minutes to read
Importing allows you to view or edit the predefined conditions which is available in JSON or SQL. You can import the conditions either initial rendering or post rendering.
Initial rendering
To apply conditions initially, you can define the rule
. Here, you can import structured JSON object by defining the rule
property.
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
let hardwareData: Object[] = [{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'Status': 'Assigned'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'Status': 'In-repair'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'Status': 'In-repair'
}];
let columnData: ColumnsModel[] = [
{ field: 'TaskID', label: 'Task ID', type: 'number' },
{ field: 'Name', label: 'Name', type: 'string' },
{ field: 'Category', label: 'Category', type: 'string' },
{ field: 'SerialNo', label: 'Serial No', type: 'string' },
{ field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
{ field: 'Status', label: 'Status', type: 'string' }
];
let importRules: RuleModel = {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
},
{
'condition': 'and',
'rules': [{
'label': 'Status',
'field': 'Status',
'type': 'string',
'operator': 'notequal',
'value': 'Pending'
},
{
'label': 'Task ID',
'field': 'TaskID',
'type': 'number',
'operator': 'equal',
'value': 5675
}]
}]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: hardwareData,
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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='querybuilder'></div>
<div id='property'> </div>
</div>
</body>
</html>
Post rendering
Importing from JSON
You can set the conditions from structured JSON object through the setRules
method.
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { Button } from '@syncfusion/ej2-buttons';
let hardwareData: Object[] = [{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'Status': 'Assigned'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'Status': 'In-repair'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'Status': 'In-repair'
}];
let columnData: ColumnsModel[] = [
{ field: 'TaskID', label: 'Task ID', type: 'number' },
{ field: 'Name', label: 'Name', type: 'string' },
{ field: 'Category', label: 'Category', type: 'string' },
{ field: 'SerialNo', label: 'Serial No', type: 'string' },
{ field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
{ field: 'Status', label: 'Status', type: 'string' }
];
let importRules: RuleModel = {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
},
{
'condition': 'and',
'rules': [{
'label': 'Status',
'field': 'Status',
'type': 'string',
'operator': 'notequal',
'value': 'Pending'
},
{
'label': 'Task ID',
'field': 'TaskID',
'type': 'number',
'operator': 'equal',
'value': 5675
}]
}]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: hardwareData,
columns: columnData
});
qryBldrObj.appendTo('#querybuilder');
let button: Button = new Button({cssClass: `e-primary`, content:'set Rules'}, '#importjson');
document.getElementById('importjson').onclick = (): void => {
qryBldrObj.setRules(importRules);
}
<!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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='querybuilder'></div>
<div class='e-qb-button'>
<button id='importjson' class='e-btn e-primary' >Set Rules</button>
</div>
</div>
</body>
</html>
Importing from SQL
You can set the conditions from SQL query through the setRulesFromSql
method.
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { Button } from '@syncfusion/ej2-buttons';
let hardwareData: Object[] = [{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'Status': 'Assigned'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'Status': 'In-repair'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'Status': 'In-repair'
}];
let columnData: ColumnsModel[] = [
{ field: 'TaskID', label: 'Task ID', type: 'number' },
{ field: 'Name', label: 'Name', type: 'string' },
{ field: 'Category', label: 'Category', type: 'string' },
{ field: 'SerialNo', label: 'Serial No', type: 'string' },
{ field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
{ field: 'Status', label: 'Status', type: 'string' }
];
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: hardwareData,
columns: columnData,
});
qryBldrObj.appendTo('#querybuilder');
let button: Button = new Button({cssClass: `e-primary`, content:'set Rules'}, '#importsql');
document.getElementById('importsql').onclick = (): void => {
qryBldrObj.setRulesFromSql("TaskID = 1 and Status LIKE ('Assigned%')");
}
<!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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='querybuilder'></div>
<div class='e-qb-button'>
<button id='importsql' class='e-btn e-primary'>Set Rules</button>
</div>
</div>
</body>
</html>
Exporting
Exporting allows you to save or maintain the created conditions through the Query Builder. You can export the defined conditions by the following ways.
Exporting to JSON
You can export the defined conditions to structured JSON object through the getRules
method.
Exporting to SQL
You can export the defined conditions to SQL query through the getSqlFromRules
method.
import { QueryBuilder, ColumnsModel, RuleModel } from '@syncfusion/ej2-querybuilder';
import { Button } from '@syncfusion/ej2-buttons';
import { Dialog } from '@syncfusion/ej2-popups';
let hardwareData: Object[] = [{
'TaskID': 1,
'Name': 'Lenovo Yoga',
'Category': 'Laptop',
'SerialNo': 'CB27932009',
'InvoiceNo': 'INV-2878',
'Status': 'Assigned'
},
{
'TaskID': 2,
'Name': 'Acer Aspire',
'Category': 'Others',
'SerialNo': 'CB35728290',
'InvoiceNo': 'INV-3456',
'Status': 'In-repair'
},
{
'TaskID': 3,
'Name': 'Apple MacBook',
'Category': 'Laptop',
'SerialNo': 'CB35628728',
'InvoiceNo': 'INV-2763',
'Status': 'In-repair'
}];
let columnData: ColumnsModel[] = [
{ field: 'TaskID', label: 'Task ID', type: 'number' },
{ field: 'Name', label: 'Name', type: 'string' },
{ field: 'Category', label: 'Category', type: 'string' },
{ field: 'SerialNo', label: 'Serial No', type: 'string' },
{ field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
{ field: 'Status', label: 'Status', type: 'string' }
];
let importRules: RuleModel = {
'condition': 'or',
'rules': [{
'label': 'Category',
'field': 'Category',
'type': 'string',
'operator': 'equal',
'value': 'Laptop'
}]
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
width: '70%',
dataSource: hardwareData,
columns: columnData,
rule: importRules
});
qryBldrObj.appendTo('#querybuilder');
let dialogObj: Dialog = new Dialog({
header: 'Query builder',
height: 'auto',
animationSettings: { effect: 'Zoom', duration: 400 },
showCloseIcon: true,
width: '50%',
visible: false
});
dialogObj.appendTo('#defaultdialog');
let button: Button = new Button({cssClass: `e-primary`, content:'get sql'}, '#getsql');
document.getElementById('getsql').onclick = (): void => {
dialogObj.content = qryBldrObj.getSqlFromRules(qryBldrObj.getRules());
dialogObj.show();
}
button = new Button({cssClass: `e-primary`, content:'get rule'}, '#getrule');
document.getElementById('getrule').onclick = (): void => {
let validRule: RuleModel = qryBldrObj.getValidRules(qryBldrObj.rule);
dialogObj.content = '<pre>' + JSON.stringify(validRule, null, 4) + '</pre>';
dialogObj.show();
}
<!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="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.2.4/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id='querybuilder'></div>
<div class='e-qb-button'>
<button id='getsql' class='e-btn e-primary'>get sql </button>
<button id='getrule' class='e-btn e-primary'> get rule</button>
</div>
<div id="defaultdialog">
</div>
</body>
</html>