Separate Connector in EJ2 JavaScript Query builder control

13 Jun 20248 minutes to read

The Query Builder provides the functionality to integrate standalone connectors between rules or groups within the same group. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction. You can use enableSeparateConnector to perform separate connector functionality.

/**
     * Default querybuilder sample
     */
    var dateOperators = [
      { 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' }
    ];
    var boolOperators = [
      { value: 'equal', key: 'Equal' },
    ];
    var columns = [
      { 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" }
    ];
    var importRules = {
      condition: "",
      rules: [
        { label: "First Name", field: "FirstName", type: "string", operator: "startswith", value: "Andre", condition: "and" },
        { label: "Last Name", field: "LastName", type: "string", operator: "in", value: ['Davolio', 'Buchanan'], condition: "or" },
        { label: "Age", field: "Age", type: "number", operator: "greaterthan", value: 29, condition: "and" },
        {
          condition: "or", rules: [
            { label: "Is Developer", field: "IsDeveloper", type: "boolean", operator: "equal", value: true, condition: "and" },
            { 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"] },
      ],
    };
    var employeeData = [{
      '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'
    }];
    var qryBldrObj = new ej.querybuilder.QueryBuilder({
      dataSource: employeeData,
      columns: columns,
      rule: importRules,
      enableSeparateConnector: 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.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-querybuilder/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
    
<script src="https://cdn.syncfusion.com/ej2/29.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id='querybuilder'></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>