Search results

Importing and Exporting in Vue QueryBuilder component

30 Jul 2021 / 6 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.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div class="control-section">
        <div class="col-lg-12 querybuilder-control">
            <ejs-querybuilder width="70%" :dataSource="dataSource" :rule="importRules">
                <e-columns>
                  <e-column field="TaskID" label="Task ID" type="number"></e-column>
                  <e-column field="Name" label="Name" type="string"></e-column>
                  <e-column field="Category" label="Category" type="string"></e-column>
                  <e-column field="SerialNo" label="SerialNo" type="string"></e-column>
                  <e-column field="InvoiceNo" label="InvoiceNo" type="string"></e-column>
                  <e-column field="Status" label="Status" type="string"></e-column>
                </e-columns>
            </ejs-querybuilder>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
Vue.use(QueryBuilderPlugin);

export default {
    data: function() {
        return {
            dataSource: hardwareData,
            importRules:  {
        '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
            }]
        }]
    }
        };
    }
}
var hardwareData = [{
      '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'
  }];
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
    .e-query-builder {
        margin: 0 auto;
    }
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.employeeData = [{
      'EmployeeID': 1,
      'LastName': 'Davolio',
      'FirstName': 'Nancy',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '507 - 20th Ave. E.\r\nApt. 2A',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98122',
      'Country': 'USA'
    },
    {
      'EmployeeID': 2,
      'LastName': 'Fuller',
      'FirstName': 'Andrew',
      'Title': 'Vice President',
      'TitleOfCourtesy': 'Dr.',
      'HireDate': '21/04/2003',
      'Address': '908 W. Capital Way',
      'City': 'Tacoma',
      'Region': 'WA',
      'PostalCode': '98401',
      'Country': 'USA'
    },
    {
      'EmployeeID': 3,
      'LastName': 'Leverling',
      'FirstName': 'Janet',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '722 Moss Bay Blvd.',
      'City': 'Kirkland',
      'Region': 'WA',
      'PostalCode': '98033',
      'Country': 'USA'
    },
    {
      'EmployeeID': 4,
      'LastName': 'Peacock',
      'FirstName': 'Margaret',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mrs.',
      'HireDate': '22/07/2004',
      'Address': '4110 Old Redmond Rd.',
      'City': 'Redmond',
      'Region': 'WA',
      'PostalCode': '98052',
      'Country': 'USA'
    },
    {
      'EmployeeID': 5,
      'LastName': 'Buchanan',
      'FirstName': 'Steven',
      'Title': 'Sales Manager',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '02/04/2001',
      'Address': '14 Garrett Hill',
      'City': 'London',
      'Region': null,
      'PostalCode':
      'SW1 8JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 6,
      'LastName': 'Suyama',
      'FirstName': 'Michael',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/01/2003',
      'Address': 'Coventry House\r\nMiner Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'EC2 7JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 7,
      'LastName': 'King',
      'FirstName': 'Robert',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/07/2001',
      'Address': 'Edgeham Hollow\r\nWinchester Way',
      'City': 'London',
      'Region': null,
      'PostalCode': 'RG1 9SP',
      'Country': 'UK'
    },
    {
      'EmployeeID': 8,
      'LastName': 'Callahan',
      'FirstName': 'Laura',
      'Title': 'Inside Sales Coordinator',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '4726 - 11th Ave. N.E.',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98105',
      'Country': 'USA'
    },
    {
      'EmployeeID': 9,
      'LastName': 'Dodsworth',
      'FirstName': 'Anne',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '7 Houndstooth Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'WG2 7LT',
      'Country': 'UK'
    }];
    exports.hardwareData = [{
      'TaskID': 1,
      'Name': 'Lenovo Yoga',
      'Category': 'Laptop',
      'SerialNo': 'CB27932009',
      'InvoiceNo': 'INV-2878',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'John Doe',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 2,
      'Name': 'Acer Aspire',
      'Category': 'Others',
      'SerialNo': 'CB35728290',
      'InvoiceNo': 'INV-3456',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 3,
      'Name': 'Apple MacBook',
      'Category': 'Laptop',
      'SerialNo': 'CB35628728',
      'InvoiceNo': 'INV-2763',
      'DOP': '04/10/2018',
      'WEO': '04/03/2021',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 4,
      'Name': 'Lenovo ThinkPad',
      'Category': 'Laptop',
      'SerialNo': 'CB56209872',
      'InvoiceNo': 'INV-2980',
      'DOP': '03/09/2018',
      'WEO': '05/12/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 5,
      'Name': 'Dell Inspiron',
      'Category': 'Laptop',
      'SerialNo': 'CB56289036',
      'InvoiceNo': 'INV-3782',
      'DOP': '01/10/2018',
      'WEO': '04/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'David Anto',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 6,
      'Name': 'HP Pavilion',
      'Category': 'Laptop',
      'SerialNo': 'CB56289305',
      'InvoiceNo': 'INV-2712',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'Mary Saveley',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 7,
      'Name': 'Asus ZenBook',
      'Category': 'Laptop',
      'SerialNo': 'CB25637891',
      'InvoiceNo': 'INV-0984',
      'DOP': '06/16/2018',
      'WEO': '09/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 8,
      'Name': 'HP EliteBook',
      'Category': 'Laptop',
      'SerialNo': 'CB27819726',
      'InvoiceNo': 'INV-2561',
      'DOP': '02/19/2018',
      'WEO': '05/21/2021',
      'Status': 'Ordered',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 9,
      'Name': 'Apple MacBook Air',
      'Category': 'Laptop',
      'SerialNo': 'CB05262880',
      'InvoiceNo': 'INV-8970',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 10,
      'Name': 'Apple iPad Air',
      'Category': 'Tablet',
      'SerialNo': 'CB45262777',
      'InvoiceNo': 'INV-4555',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  }];
  exports.expenseData = [{
    'UniqueId': 'T100001',
    'Category': 'Food',
    'PaymentMode': 'Credit Card',
    'TransactionType': 'Expense',
    'Description': 'Boiled peanuts',
    'Amount': '7',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/01/2017 09:12 AM'
  }, {
    'UniqueId': 'T100024',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Peanuts in Coke',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 02:43 PM'
  }, {
    'UniqueId': 'T100025',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Palmetto Cheese, Mint julep',
    'Amount': '11',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 08:35 PM'
  }, {
    'UniqueId': 'T100026',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Cars and trucks, used',
    'Amount': '9',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:25 AM'
  }, {
    'UniqueId': 'T100027',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Public and other transportation',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 03:55 PM'
  }, {
    'UniqueId': 'T100028',
    'Category': 'Shopping',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Household things \u0026 Utilities',
    'Amount': '160',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:22 AM'
  },
{
    'UniqueId': 'T101284',
    'Category': 'Extra income',
    'PaymentMode': 'Cash',
    'TransactionType': 'Income',
    'Description': 'Income from Sale',
    'Amount': '110',
    'MonthShort': 'Nov',
    'MonthFull': 'November, 2017',
    'FormattedDate': '11/30/2017 02:42 PM'
  }];
});

Post rendering

Importing from JSON

You can set the conditions from structured JSON object through the setRules method.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div class="control-section">
        <div class="col-lg-12 querybuilder-control">
            <ejs-querybuilder width="70%" ref="querybuilder" :dataSource="dataSource" >
                <e-columns>
                  <e-column field="TaskID" label="Task ID" type="number"></e-column>
                  <e-column field="Name" label="Name" type="string"></e-column>
                  <e-column field="Category" label="Category" type="string"></e-column>
                  <e-column field="SerialNo" label="SerialNo" type="string"></e-column>
                  <e-column field="InvoiceNo" label="InvoiceNo" type="string"></e-column>
                  <e-column field="Status" label="Status" type="string"></e-column>
                </e-columns>
            </ejs-querybuilder>
              <ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="btnClick">Set Rules</ejs-button>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";

Vue.use(ButtonPlugin);
Vue.use(QueryBuilderPlugin);

export default {
    data: function() {
        return {
            dataSource: hardwareData,
            importRules:  {
        '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
            }]
        }]
    }
        };
    },
      methods: {
    btnClick: function(event) {
      this.$refs.querybuilder.ej2Instances.setRules(this.importRules);
    }
  }
}
var hardwareData = [{
      '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'
  }];
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
    .e-query-builder {
        margin: 0 auto;
    }
     .e-qb-button {
  margin: 2% 1% 0 15%;
}
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.employeeData = [{
      'EmployeeID': 1,
      'LastName': 'Davolio',
      'FirstName': 'Nancy',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '507 - 20th Ave. E.\r\nApt. 2A',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98122',
      'Country': 'USA'
    },
    {
      'EmployeeID': 2,
      'LastName': 'Fuller',
      'FirstName': 'Andrew',
      'Title': 'Vice President',
      'TitleOfCourtesy': 'Dr.',
      'HireDate': '21/04/2003',
      'Address': '908 W. Capital Way',
      'City': 'Tacoma',
      'Region': 'WA',
      'PostalCode': '98401',
      'Country': 'USA'
    },
    {
      'EmployeeID': 3,
      'LastName': 'Leverling',
      'FirstName': 'Janet',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '722 Moss Bay Blvd.',
      'City': 'Kirkland',
      'Region': 'WA',
      'PostalCode': '98033',
      'Country': 'USA'
    },
    {
      'EmployeeID': 4,
      'LastName': 'Peacock',
      'FirstName': 'Margaret',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mrs.',
      'HireDate': '22/07/2004',
      'Address': '4110 Old Redmond Rd.',
      'City': 'Redmond',
      'Region': 'WA',
      'PostalCode': '98052',
      'Country': 'USA'
    },
    {
      'EmployeeID': 5,
      'LastName': 'Buchanan',
      'FirstName': 'Steven',
      'Title': 'Sales Manager',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '02/04/2001',
      'Address': '14 Garrett Hill',
      'City': 'London',
      'Region': null,
      'PostalCode':
      'SW1 8JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 6,
      'LastName': 'Suyama',
      'FirstName': 'Michael',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/01/2003',
      'Address': 'Coventry House\r\nMiner Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'EC2 7JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 7,
      'LastName': 'King',
      'FirstName': 'Robert',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/07/2001',
      'Address': 'Edgeham Hollow\r\nWinchester Way',
      'City': 'London',
      'Region': null,
      'PostalCode': 'RG1 9SP',
      'Country': 'UK'
    },
    {
      'EmployeeID': 8,
      'LastName': 'Callahan',
      'FirstName': 'Laura',
      'Title': 'Inside Sales Coordinator',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '4726 - 11th Ave. N.E.',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98105',
      'Country': 'USA'
    },
    {
      'EmployeeID': 9,
      'LastName': 'Dodsworth',
      'FirstName': 'Anne',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '7 Houndstooth Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'WG2 7LT',
      'Country': 'UK'
    }];
    exports.hardwareData = [{
      'TaskID': 1,
      'Name': 'Lenovo Yoga',
      'Category': 'Laptop',
      'SerialNo': 'CB27932009',
      'InvoiceNo': 'INV-2878',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'John Doe',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 2,
      'Name': 'Acer Aspire',
      'Category': 'Others',
      'SerialNo': 'CB35728290',
      'InvoiceNo': 'INV-3456',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 3,
      'Name': 'Apple MacBook',
      'Category': 'Laptop',
      'SerialNo': 'CB35628728',
      'InvoiceNo': 'INV-2763',
      'DOP': '04/10/2018',
      'WEO': '04/03/2021',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 4,
      'Name': 'Lenovo ThinkPad',
      'Category': 'Laptop',
      'SerialNo': 'CB56209872',
      'InvoiceNo': 'INV-2980',
      'DOP': '03/09/2018',
      'WEO': '05/12/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 5,
      'Name': 'Dell Inspiron',
      'Category': 'Laptop',
      'SerialNo': 'CB56289036',
      'InvoiceNo': 'INV-3782',
      'DOP': '01/10/2018',
      'WEO': '04/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'David Anto',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 6,
      'Name': 'HP Pavilion',
      'Category': 'Laptop',
      'SerialNo': 'CB56289305',
      'InvoiceNo': 'INV-2712',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'Mary Saveley',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 7,
      'Name': 'Asus ZenBook',
      'Category': 'Laptop',
      'SerialNo': 'CB25637891',
      'InvoiceNo': 'INV-0984',
      'DOP': '06/16/2018',
      'WEO': '09/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 8,
      'Name': 'HP EliteBook',
      'Category': 'Laptop',
      'SerialNo': 'CB27819726',
      'InvoiceNo': 'INV-2561',
      'DOP': '02/19/2018',
      'WEO': '05/21/2021',
      'Status': 'Ordered',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 9,
      'Name': 'Apple MacBook Air',
      'Category': 'Laptop',
      'SerialNo': 'CB05262880',
      'InvoiceNo': 'INV-8970',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 10,
      'Name': 'Apple iPad Air',
      'Category': 'Tablet',
      'SerialNo': 'CB45262777',
      'InvoiceNo': 'INV-4555',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  }];
  exports.expenseData = [{
    'UniqueId': 'T100001',
    'Category': 'Food',
    'PaymentMode': 'Credit Card',
    'TransactionType': 'Expense',
    'Description': 'Boiled peanuts',
    'Amount': '7',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/01/2017 09:12 AM'
  }, {
    'UniqueId': 'T100024',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Peanuts in Coke',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 02:43 PM'
  }, {
    'UniqueId': 'T100025',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Palmetto Cheese, Mint julep',
    'Amount': '11',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 08:35 PM'
  }, {
    'UniqueId': 'T100026',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Cars and trucks, used',
    'Amount': '9',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:25 AM'
  }, {
    'UniqueId': 'T100027',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Public and other transportation',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 03:55 PM'
  }, {
    'UniqueId': 'T100028',
    'Category': 'Shopping',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Household things \u0026 Utilities',
    'Amount': '160',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:22 AM'
  },
{
    'UniqueId': 'T101284',
    'Category': 'Extra income',
    'PaymentMode': 'Cash',
    'TransactionType': 'Income',
    'Description': 'Income from Sale',
    'Amount': '110',
    'MonthShort': 'Nov',
    'MonthFull': 'November, 2017',
    'FormattedDate': '11/30/2017 02:42 PM'
  }];
});

Importing from SQL

You can set the conditions from SQL query through the setRulesFromSql method.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div class="control-section">
        <div class="col-lg-12 querybuilder-control">
            <ejs-querybuilder width="70%" ref="querybuilder" :dataSource="dataSource" :rule="importRules">
                <e-columns>
                  <e-column field="TaskID" label="Task ID" type="number"></e-column>
                  <e-column field="Name" label="Name" type="string"></e-column>
                  <e-column field="Category" label="Category" type="string"></e-column>
                  <e-column field="SerialNo" label="SerialNo" type="string"></e-column>
                  <e-column field="InvoiceNo" label="InvoiceNo" type="string"></e-column>
                  <e-column field="Status" label="Status" type="string"></e-column>
                </e-columns>
            </ejs-querybuilder>
            <ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="btnClick">Set Rules</ejs-button>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";

Vue.use(ButtonPlugin);
Vue.use(QueryBuilderPlugin);

export default {
    data: function() {
        return {
            dataSource: hardwareData,
            importRules: {
        'condition': 'or',
        'rules': [{
            'label': 'Category',
            'field': 'Category',
            'type': 'string',
            'operator': 'equal',
            'value': 'Laptop'
        }]
    }
        };
    },
    methods: {
    btnClick: function(event) {
     this.$refs.querybuilder.ej2Instances.setRulesFromSql("TaskID = 1 and Status LIKE ('Assigned%')");
    }
  }
}
var hardwareData = [{
      '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'
  }];
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
    .e-query-builder {
        margin: 0 auto;
    }
     .e-qb-button {
     margin: 2% 1% 0 15%;
}
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.employeeData = [{
      'EmployeeID': 1,
      'LastName': 'Davolio',
      'FirstName': 'Nancy',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '507 - 20th Ave. E.\r\nApt. 2A',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98122',
      'Country': 'USA'
    },
    {
      'EmployeeID': 2,
      'LastName': 'Fuller',
      'FirstName': 'Andrew',
      'Title': 'Vice President',
      'TitleOfCourtesy': 'Dr.',
      'HireDate': '21/04/2003',
      'Address': '908 W. Capital Way',
      'City': 'Tacoma',
      'Region': 'WA',
      'PostalCode': '98401',
      'Country': 'USA'
    },
    {
      'EmployeeID': 3,
      'LastName': 'Leverling',
      'FirstName': 'Janet',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '722 Moss Bay Blvd.',
      'City': 'Kirkland',
      'Region': 'WA',
      'PostalCode': '98033',
      'Country': 'USA'
    },
    {
      'EmployeeID': 4,
      'LastName': 'Peacock',
      'FirstName': 'Margaret',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mrs.',
      'HireDate': '22/07/2004',
      'Address': '4110 Old Redmond Rd.',
      'City': 'Redmond',
      'Region': 'WA',
      'PostalCode': '98052',
      'Country': 'USA'
    },
    {
      'EmployeeID': 5,
      'LastName': 'Buchanan',
      'FirstName': 'Steven',
      'Title': 'Sales Manager',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '02/04/2001',
      'Address': '14 Garrett Hill',
      'City': 'London',
      'Region': null,
      'PostalCode':
      'SW1 8JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 6,
      'LastName': 'Suyama',
      'FirstName': 'Michael',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/01/2003',
      'Address': 'Coventry House\r\nMiner Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'EC2 7JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 7,
      'LastName': 'King',
      'FirstName': 'Robert',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/07/2001',
      'Address': 'Edgeham Hollow\r\nWinchester Way',
      'City': 'London',
      'Region': null,
      'PostalCode': 'RG1 9SP',
      'Country': 'UK'
    },
    {
      'EmployeeID': 8,
      'LastName': 'Callahan',
      'FirstName': 'Laura',
      'Title': 'Inside Sales Coordinator',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '4726 - 11th Ave. N.E.',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98105',
      'Country': 'USA'
    },
    {
      'EmployeeID': 9,
      'LastName': 'Dodsworth',
      'FirstName': 'Anne',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '7 Houndstooth Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'WG2 7LT',
      'Country': 'UK'
    }];
    exports.hardwareData = [{
      'TaskID': 1,
      'Name': 'Lenovo Yoga',
      'Category': 'Laptop',
      'SerialNo': 'CB27932009',
      'InvoiceNo': 'INV-2878',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'John Doe',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 2,
      'Name': 'Acer Aspire',
      'Category': 'Others',
      'SerialNo': 'CB35728290',
      'InvoiceNo': 'INV-3456',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 3,
      'Name': 'Apple MacBook',
      'Category': 'Laptop',
      'SerialNo': 'CB35628728',
      'InvoiceNo': 'INV-2763',
      'DOP': '04/10/2018',
      'WEO': '04/03/2021',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 4,
      'Name': 'Lenovo ThinkPad',
      'Category': 'Laptop',
      'SerialNo': 'CB56209872',
      'InvoiceNo': 'INV-2980',
      'DOP': '03/09/2018',
      'WEO': '05/12/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 5,
      'Name': 'Dell Inspiron',
      'Category': 'Laptop',
      'SerialNo': 'CB56289036',
      'InvoiceNo': 'INV-3782',
      'DOP': '01/10/2018',
      'WEO': '04/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'David Anto',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 6,
      'Name': 'HP Pavilion',
      'Category': 'Laptop',
      'SerialNo': 'CB56289305',
      'InvoiceNo': 'INV-2712',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'Mary Saveley',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 7,
      'Name': 'Asus ZenBook',
      'Category': 'Laptop',
      'SerialNo': 'CB25637891',
      'InvoiceNo': 'INV-0984',
      'DOP': '06/16/2018',
      'WEO': '09/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 8,
      'Name': 'HP EliteBook',
      'Category': 'Laptop',
      'SerialNo': 'CB27819726',
      'InvoiceNo': 'INV-2561',
      'DOP': '02/19/2018',
      'WEO': '05/21/2021',
      'Status': 'Ordered',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 9,
      'Name': 'Apple MacBook Air',
      'Category': 'Laptop',
      'SerialNo': 'CB05262880',
      'InvoiceNo': 'INV-8970',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 10,
      'Name': 'Apple iPad Air',
      'Category': 'Tablet',
      'SerialNo': 'CB45262777',
      'InvoiceNo': 'INV-4555',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  }];
  exports.expenseData = [{
    'UniqueId': 'T100001',
    'Category': 'Food',
    'PaymentMode': 'Credit Card',
    'TransactionType': 'Expense',
    'Description': 'Boiled peanuts',
    'Amount': '7',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/01/2017 09:12 AM'
  }, {
    'UniqueId': 'T100024',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Peanuts in Coke',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 02:43 PM'
  }, {
    'UniqueId': 'T100025',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Palmetto Cheese, Mint julep',
    'Amount': '11',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 08:35 PM'
  }, {
    'UniqueId': 'T100026',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Cars and trucks, used',
    'Amount': '9',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:25 AM'
  }, {
    'UniqueId': 'T100027',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Public and other transportation',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 03:55 PM'
  }, {
    'UniqueId': 'T100028',
    'Category': 'Shopping',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Household things \u0026 Utilities',
    'Amount': '160',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:22 AM'
  },
{
    'UniqueId': 'T101284',
    'Category': 'Extra income',
    'PaymentMode': 'Cash',
    'TransactionType': 'Income',
    'Description': 'Income from Sale',
    'Amount': '110',
    'MonthShort': 'Nov',
    'MonthFull': 'November, 2017',
    'FormattedDate': '11/30/2017 02:42 PM'
  }];
});

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 getRulesFromSQL method.

Install Syncfusion Popup packages using below command.

Copied to clipboard
npm install @syncfusion/ej2-vue-popups --save
Source
Preview
app.vue
datasource.js
Copied to clipboard
<template>
    <div class="control-section">
        <div class="col-lg-12 querybuilder-control">
            <ejs-querybuilder width="70%"  ref="querybuilder" :dataSource="dataSource" :rule="importRules">
                <e-columns>
                  <e-column field="TaskID" label="Task ID" type="number"></e-column>
                  <e-column field="Name" label="Name" type="string"></e-column>
                  <e-column field="Category" label="Category" type="string"></e-column>
                  <e-column field="SerialNo" label="SerialNo" type="string"></e-column>
                  <e-column field="InvoiceNo" label="InvoiceNo" type="string"></e-column>
                  <e-column field="Status" label="Status" type="string"></e-column>
                </e-columns>
            </ejs-querybuilder>
            <ejs-button cssClass="e-qb-button" :isPrimary="true" v-on:click.native="getSql">Get SQL</ejs-button>
            <ejs-button cssClass="e-qbr-button" :isPrimary="true" v-on:click.native="getJson">Get JSON</ejs-button>
            <ejs-dialog ref="dialogObj" :header="header" :animationSettings="animationSettings" :showCloseIcon="true" :visible="false" width="500px" height="80%">
            </ejs-dialog>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { DialogPlugin } from '@syncfusion/ej2-vue-popups';
Vue.use(DialogPlugin);
Vue.use(ButtonPlugin);
Vue.use(QueryBuilderPlugin);

export default {
    data: function() {
        return {
            dataSource: hardwareData,
            importRules: {
        'condition': 'or',
        'rules': [{
            'label': 'Category',
            'field': 'Category',
            'type': 'string',
            'operator': 'equal',
            'value': 'Laptop'
        }]
    },
    header: 'Querybuilder rule',
      animationSettings: { effect: 'Zoom', duration: 400 },
        };
    },
    methods: {
    getSql: function(event) {
         this.$refs.dialogObj.content = this.$refs.querybuilder.ej2Instances.getSqlFromRules(this.$refs.querybuilder.ej2Instances.getRules());
         this.$refs.dialogObj.show();
    }
    getJson: function(event) {
         var validRule = this.$refs.querybuilder.ej2Instances.getValidRules(this.$refs.querybuilder.ej2Instances.rule);
         this.$refs.dialogObj.content =  '<pre>' + JSON.stringify(validRule, null, 4) + '</pre>';
         this.$refs.dialogObj.show();
    }
  }
}
var hardwareData = [{
      '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'
  }];
</script>
<style>
    @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
    @import "../node_modules/@syncfusion/ej2-vue-querybuilder/styles/material.css";
    .e-query-builder {
        margin: 0 auto;
    }
    .e-qb-button {
       margin: 2% 1% 0 15%;
   }
   .e-qbr-button {
       margin: 2% 1% 0 1%;
   }
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.employeeData = [{
      'EmployeeID': 1,
      'LastName': 'Davolio',
      'FirstName': 'Nancy',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '507 - 20th Ave. E.\r\nApt. 2A',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98122',
      'Country': 'USA'
    },
    {
      'EmployeeID': 2,
      'LastName': 'Fuller',
      'FirstName': 'Andrew',
      'Title': 'Vice President',
      'TitleOfCourtesy': 'Dr.',
      'HireDate': '21/04/2003',
      'Address': '908 W. Capital Way',
      'City': 'Tacoma',
      'Region': 'WA',
      'PostalCode': '98401',
      'Country': 'USA'
    },
    {
      'EmployeeID': 3,
      'LastName': 'Leverling',
      'FirstName': 'Janet',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '722 Moss Bay Blvd.',
      'City': 'Kirkland',
      'Region': 'WA',
      'PostalCode': '98033',
      'Country': 'USA'
    },
    {
      'EmployeeID': 4,
      'LastName': 'Peacock',
      'FirstName': 'Margaret',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mrs.',
      'HireDate': '22/07/2004',
      'Address': '4110 Old Redmond Rd.',
      'City': 'Redmond',
      'Region': 'WA',
      'PostalCode': '98052',
      'Country': 'USA'
    },
    {
      'EmployeeID': 5,
      'LastName': 'Buchanan',
      'FirstName': 'Steven',
      'Title': 'Sales Manager',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '02/04/2001',
      'Address': '14 Garrett Hill',
      'City': 'London',
      'Region': null,
      'PostalCode':
      'SW1 8JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 6,
      'LastName': 'Suyama',
      'FirstName': 'Michael',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/01/2003',
      'Address': 'Coventry House\r\nMiner Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'EC2 7JR',
      'Country': 'UK'
    },
    {
      'EmployeeID': 7,
      'LastName': 'King',
      'FirstName': 'Robert',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Mr.',
      'HireDate': '22/07/2001',
      'Address': 'Edgeham Hollow\r\nWinchester Way',
      'City': 'London',
      'Region': null,
      'PostalCode': 'RG1 9SP',
      'Country': 'UK'
    },
    {
      'EmployeeID': 8,
      'LastName': 'Callahan',
      'FirstName': 'Laura',
      'Title': 'Inside Sales Coordinator',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '4726 - 11th Ave. N.E.',
      'City': 'Seattle',
      'Region': 'WA',
      'PostalCode': '98105',
      'Country': 'USA'
    },
    {
      'EmployeeID': 9,
      'LastName': 'Dodsworth',
      'FirstName': 'Anne',
      'Title': 'Sales Representative',
      'TitleOfCourtesy': 'Ms.',
      'HireDate': '22/07/2001',
      'Address': '7 Houndstooth Rd.',
      'City': 'London',
      'Region': null,
      'PostalCode': 'WG2 7LT',
      'Country': 'UK'
    }];
    exports.hardwareData = [{
      'TaskID': 1,
      'Name': 'Lenovo Yoga',
      'Category': 'Laptop',
      'SerialNo': 'CB27932009',
      'InvoiceNo': 'INV-2878',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'John Doe',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 2,
      'Name': 'Acer Aspire',
      'Category': 'Others',
      'SerialNo': 'CB35728290',
      'InvoiceNo': 'INV-3456',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 3,
      'Name': 'Apple MacBook',
      'Category': 'Laptop',
      'SerialNo': 'CB35628728',
      'InvoiceNo': 'INV-2763',
      'DOP': '04/10/2018',
      'WEO': '04/03/2021',
      'Status': 'In-repair',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 4,
      'Name': 'Lenovo ThinkPad',
      'Category': 'Laptop',
      'SerialNo': 'CB56209872',
      'InvoiceNo': 'INV-2980',
      'DOP': '03/09/2018',
      'WEO': '05/12/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 5,
      'Name': 'Dell Inspiron',
      'Category': 'Laptop',
      'SerialNo': 'CB56289036',
      'InvoiceNo': 'INV-3782',
      'DOP': '01/10/2018',
      'WEO': '04/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'David Anto',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 6,
      'Name': 'HP Pavilion',
      'Category': 'Laptop',
      'SerialNo': 'CB56289305',
      'InvoiceNo': 'INV-2712',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Assigned',
      'AssignedTo': 'Mary Saveley',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 7,
      'Name': 'Asus ZenBook',
      'Category': 'Laptop',
      'SerialNo': 'CB25637891',
      'InvoiceNo': 'INV-0984',
      'DOP': '06/16/2018',
      'WEO': '09/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 8,
      'Name': 'HP EliteBook',
      'Category': 'Laptop',
      'SerialNo': 'CB27819726',
      'InvoiceNo': 'INV-2561',
      'DOP': '02/19/2018',
      'WEO': '05/21/2021',
      'Status': 'Ordered',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 9,
      'Name': 'Apple MacBook Air',
      'Category': 'Laptop',
      'SerialNo': 'CB05262880',
      'InvoiceNo': 'INV-8970',
      'DOP': '02/12/2018',
      'WEO': '03/01/2023',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  },
  {
      'TaskID': 10,
      'Name': 'Apple iPad Air',
      'Category': 'Tablet',
      'SerialNo': 'CB45262777',
      'InvoiceNo': 'INV-4555',
      'DOP': '04/10/2018',
      'WEO': '05/01/2021',
      'Status': 'Pending',
      'AssignedTo': '',
      'Note': 'Remarks are noted'
  }];
  exports.expenseData = [{
    'UniqueId': 'T100001',
    'Category': 'Food',
    'PaymentMode': 'Credit Card',
    'TransactionType': 'Expense',
    'Description': 'Boiled peanuts',
    'Amount': '7',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/01/2017 09:12 AM'
  }, {
    'UniqueId': 'T100024',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Peanuts in Coke',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 02:43 PM'
  }, {
    'UniqueId': 'T100025',
    'Category': 'Food',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Palmetto Cheese, Mint julep',
    'Amount': '11',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 08:35 PM'
  }, {
    'UniqueId': 'T100026',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Cars and trucks, used',
    'Amount': '9',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:25 AM'
  }, {
    'UniqueId': 'T100027',
    'Category': 'Transportation',
    'PaymentMode': 'Debit Card',
    'TransactionType': 'Expense',
    'Description': 'Public and other transportation',
    'Amount': '8',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 03:55 PM'
  }, {
    'UniqueId': 'T100028',
    'Category': 'Shopping',
    'PaymentMode': 'Cash',
    'TransactionType': 'Expense',
    'Description': 'Household things \u0026 Utilities',
    'Amount': '160',
    'MonthShort': 'Jun',
    'MonthFull': 'June, 2017',
    'FormattedDate': '06/04/2017 10:22 AM'
  },
{
    'UniqueId': 'T101284',
    'Category': 'Extra income',
    'PaymentMode': 'Cash',
    'TransactionType': 'Income',
    'Description': 'Income from Sale',
    'Amount': '110',
    'MonthShort': 'Nov',
    'MonthFull': 'November, 2017',
    'FormattedDate': '11/30/2017 02:42 PM'
  }];
});