Using dropdownTree as queryBuilder Fields List

[Damien Taylor]

How to configure the querybuilder fields list to be a dropdowntree?

I am trying to change the mode to dropdowntree in the vue component, but it doesn't seem to render the dropdowntree.

<template>
    <div style="text-align: left;">
        <ejs-querybuilder :fieldMode="fieldMode" :fieldModel="fieldModel" :columns="columns"></ejs-querybuilder>
        <div style="margin-left: 280px; margin-top:20px;">Field Mode: {{ fieldMode }}</div>
        <div style="margin-left: 280px;">Field Model: <pre>{{ fieldModel }}</pre></div>
        <div style="margin-left: 280px;">Columns: <pre>{{ columns }}</pre></div>
    </div>
</template>
<script>
import {QueryBuilderComponent} from "@syncfusion/ej2-vue-querybuilder";
export default {
    name: 'HelloWorld',
    data() {
        return {
            fieldMode: 'DropDownTree',
            fieldModel: {
                text: 'label',
                value: 'value',
                parentValue: 'parent',
                hasChildren: 'hasChild'
            },
            columns: [
                {
                    label: 'Employee ID',
                    value: 'EmployeeID',
                    category: 'first',
                    hasChild: true
                },
                {
                    label: 'Test Child',
                    value: 'test1',
                    parent: 'EmployeeID'
                },
                {
                    label: 'Test Child',
                    value: 'test2',
                    parent: 'EmployeeID'
                },
                {
                    label: 'First Name',
                    value: 'FirstName',
                    category: 'second'
                }
            ]
        }
    },
    components: {
        "ejs-querybuilder": QueryBuilderComponent
    }
}
</script>

<style>
@import "@syncfusion/ej2-base/styles/material.css";
@import "@syncfusion/ej2-buttons/styles/material.css";
@import "@syncfusion/ej2-splitbuttons/styles/material.css";
@import "@syncfusion/ej2-dropdowns/styles/material.css";
@import "@syncfusion/ej2-inputs/styles/material.css";
@import "@syncfusion/ej2-lists/styles/material.css";
@import "@syncfusion/ej2-popups/styles/material.css";
@import "@syncfusion/ej2-calendars/styles/material.css";
@import "@syncfusion/ej2-vue-querybuilder/styles/material.css";
</style>

Attachment: example_53c4eacb.zip

[YuvanShankar Arunagiri]

Hi Damien,

We are validating your query and will update you the details on or before 5th August 2022.

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Damien,

Sorry for the delay.

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet and sample link.

[App.vue]:

fieldMode: 'DropdownTree'

    column : [

        {

            label: 'Employee ID',

            field: 'EmployeeID',

            type: 'string',

            columns:[

       

        {

            label: 'Test Child',

            field: 'test1',

            type: 'string'

        },

        {

            label: 'Test Child',

            field: 'test2',

            type: 'string'

        },

        {

            label: 'First Name',

            field: 'FirstName',

            type: 'string'

        }

    ]

    }

Sample link: https://codesandbox.io/s/vue-3-qb-drpdwnbtn-forked-1kmnog?file=/src/App.vue

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Damien Taylor]

YuvanShankar,

The code sample does not represent the problem.  I am trying to get the querybuilder to display a dropdowntree for the fields.  I also tried a few minor changes from your snippet, and it did not seem to work.

Note: We are using Vue 3 with Webpack 5.

[YuvanShankar Arunagiri]

Hi Damien,

Sorry for the delay.

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet to how to set the fieldModel of dropdowntree to query builder.

[App.vue]:

fieldMode: 'DropdownTree',

            fieldModel: { fields: {dataSource: [

            {

                code: 'AF', name: 'Africa', countries: [

                    { code: 'NGA', name: 'Nigeria' },

                    { code: 'EGY', name: 'Egypt' },

                    { code: 'ZAF', name: 'South Africa' }

                ]

            },

            {

                code: 'AS', name: 'Asia', expanded: true, countries: [

                    { code: 'CHN', name: 'China' },

                    { code: 'IND', name: 'India' },

                    { code: 'JPN', name: 'Japan' }

                ]

            }

            ], value: 'code', text: 'name', child: 'countries'}},

            column: [

                {field: 'NGA', label: 'Nigeria', type: 'string'},

                {field: 'EGY', label: 'Egypt', type: 'string'},

                {field: 'ZAF', label: 'South Africa', type: 'string'},

                {field: 'CHN', label: 'China', type: 'string'},

                {field: 'IND', label: 'India', type: 'string'},

                {field: 'JPN', label: 'Japan', type: 'string'}

            ]

        }

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: App_6db84d00.zip

[Damien Taylor]

This latest example has resolved the problem for me.  I appreciate your help. Thank you so much!

[YuvanShankar Arunagiri]

You are welcome, Damien. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.