Can I define my value through HTML code if I want to customize it?

[xu zhi bin]

Can I define my value through HTML code if I want to customize it?

Defining through JavaScript code seems a bit difficult and not easy to understand.

Can I customize the value to use a time selector such as ElementUI? Dropdown selector?

https://ej2.syncfusion.com/vue/demos/#/material3/query-builder/template.html

[Keerthikaran Venkatachalam]

Hi xu zhi bin,

We have checked your reported query and prepared a sample based on your requirements. By using the rule property of the QueryBuilder, you can set your own date value to the date picker. Please refer to the code snippet and sample below.

<e-column field='Date' label='Date' type='date' :template="'dateTemplate'">

           <template v-slot:dateTemplate="{data}">

                   <ejs-datepicker :change='fieldChange' :value="data.rule.value"></ejs-datepicker>

           </template>

</e-column>

…..

importRules: {

            condition: "and",

            rules: [

                {

                label: "Date",

                field: "Date",

                type: "date",

                operator: "equal",

                value: "23/11/2022",

                }

            ],

Sample link: https://stackblitz.com/edit/r5soce-hfplev?file=src%2FApp.vue

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[xu zhi bin]

If you use custom components, there may be bugs

The prompt is not defined. All injected attributes are undefined.

why？

[Keerthikaran Venkatachalam]

Hi xu zhi bin,

We checked your reported query, and we can’t understand your issue exactly. Can you provide more information about this query? For further validation, could you please share the issue's replicable working sample or replicate the issue in our sample with replication steps and a video demonstration? Based on that, we will check and provide you with a better solution quickly.

Regards,

KeerthiKaran K V

[xu zhi bin]

Please take a look at my code, it will cause errors. console. log (this. $store. state. m token);

Attachment: testsyncfusion_ab942eaf.zip

[xu zhi bin]

On the index page, the output is normal, as long as all components in the e-column are missing injection properties.

[Keerthikaran Venkatachalam]

Hi xu zhi bin,

We apologized for the delay caused.

We have checked your reported query, and while using the template as a child component, the $store instances value is not available. However, we recommend using an external template to access the $store instance value. Please refer to the below code snippet and sample.

  <ejs-querybuilder :rule="importRules" :plugins="store" ref="querybuilder" width="100%">

    <e-columns>

      <e-column field='Date' label='Date' type='date' :template="cTemplate">

      </e-column>

    </e-columns>

  </ejs-querybuilder>

…….

import externalTemplate from '../components/my.vue'

import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";

  data(){

    return {

      store: [this.$store],

      cTemplate: function() {

        return { template: externalTemplate, data: {$store: this.$store} };

      },

    }

  },

UG link: https://ej2.syncfusion.com/vue/documentation/common/template#external-template

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: QueryBuilder_c7db04e0.zip

[xu zhi bin]

Can I implement it in HTML? Do I have to use a function?

[xu zhi bin]

I tried your code and it can run normally without writing plugins.

So the key to the code must be to bind a method? Is there data: {$store: this. $store} in the method?

[xu zhi bin]

I want to use HTML to identify it, which feels clearer and easier

[xu zhi bin]

This way, there won't be any errors. It seems that the key to the code is just to return the component through the method, and cannot be returned using a template?

[xu zhi bin]

Does it also not support asynchronous components? My page references many custom components, which can consume a lot of performance. Can't it be asynchronous?

I also want to bind custom properties to my components, it seems difficult to implement?

[Keerthikaran Venkatachalam]

Hi xu zhi bin,,

We have checked the reported query, and you can ignore the plugins and pass the $store instances value in the HTML template. In the same way, you can use this. $ax instances value also. Please refer to the below code snippet and sample.

[index.vue]

  <ejs-querybuilder :rule="importRules" ref="querybuilder" width="100%">

    <e-columns>

      <e-column field='Date' label='Date' type='date' :template="'dateTemplate'">

        <template v-slot:dateTemplate="{data}">

          <my :store='$store'></my>

        </template>

      </e-column>

    </e-columns>

  </ejs-querybuilder>

[my.vue]

export default {

  name: "my",

  props: ['store'],

  mounted() {

    console.log(this.store.state.m.token);

  }

}

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: QueryBuilder_180ced2.zip