Drag and drop in EJ2 TypeScript Query builder control

13 Jun 20246 minutes to read

The Query Builder provides the functionality to reposition rules or groups within the component effortlessly. This enhancement provides a more intuitive and flexible way to construct and modify queries. You can use allowDragAndDrop to perform drag and drop functionality. And we have events support for drag and drop features that, indicates the dragStart, drag and drop actions.

import { QueryBuilder, ColumnsModel, RuleModel } 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 dateOperators: any = [
  { value: 'equal', key: 'Equal' },
  { value: 'greaterthan', key: 'Greater Than' },
  { value: 'greaterthanorequal', key: 'Greater Than Or Equal' },
  { value: 'lessthan', key: 'Less Than' },
  { value: 'lessthanorequal', key: 'Less Than Or Equal' },
  { value: 'notequal', key: 'Not Equal' },
  { value: 'between', key: 'Between' },
  { value: 'notbetween', key: 'Not Between' }
];
let boolOperators: any = [
  { value: 'equal', key: 'Equal' },
];
let columns: ColumnsModel[] = [
  { field: "EmployeeID", label: "Employee ID", type: "number" },
  { field: "FirstName", label: "First Name", type: "string" },
  { field: "LastName", label: "Last Name", type: "string" },
  { field: "Age", label: "Age", type: "number" },
  { field: "IsDeveloper", label: "Is Developer", type: "boolean", operators: boolOperators },
  { field: "PrimaryFramework", label: "Primary Framework", type: "string" },
  { field: "HireDate", label: "Hire Date", type: "date", format: "MM/dd/yyyy", operators: dateOperators },
  { field: "Country", label: "Country", type: "string" }
]
let importRules: RuleModel = {
  condition: "and",
  rules: [
    { label: "First Name", field: "FirstName", type: "string", operator: "startswith", value: "Andre" },
    { label: "Last Name", field: "LastName", type: "string", operator: "in", value: ['Davolio', 'Buchanan'] },
    { label: "Age", field: "Age", type: "number", operator: "greaterthan", value: 29 },
    {
      condition: "or", rules: [
        { label: "Is Developer", field: "IsDeveloper", type: "boolean", operator: "equal", value: true },
        { label: "Primary Framework", field: "PrimaryFramework", type: "string", operator: "equal", value: "React" }
      ]
    },
    { label: "Hire Date", field: "HireDate", type: "date", operator: "between", value: ["11/22/2023", "11/30/2023"] },
  ],
};
let qryBldrObj: QueryBuilder = new QueryBuilder({
  dataSource: employeeData,
  columns: columns,
  rule: importRules,
  allowDragAndDrop: true
});
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/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/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>
</body>
</html>