Cannot place radios as template value

[carlos mendez]

HI, im trying to do the following. 

i have a field Called "sexo" which is string (len1) (F or M)  so my  and another field  called "contract type"  (Full/Eventual/Freelance) so on the query builder for the value when i select the field i want to use radios instead of dropdown (auto or customized) . Now i have the following code : 

<ejs-querybuilder

ref="myQBuilder" width="100%" :dataSource="dataRelated.sampledata" :ruleChange="updateContentTemplate" sortDirection="Ascending"

@change="checkChange"

@ruleChange="checkRuleChange"

>

<e-columns>

<e-column field="sexo" label="Sexo" type="boolean" :sexoOperators="qbData.sexoOperators" />

<e-column field="sexo_b" label="Sexo B" type="string" :template="'sexoColumn'" :sexoOperators="qbData.sexoOperators" />

<e-column field="sexo_c" label="Sexo C" type="string" :template="'sexoAltColumn'" :sexoOperators="qbData.sexoOperators" />

</e-columns>

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

<div class="e-rule-value e-value" >

<div>{{ data }}</div>

<ejs-radiobutton label="Masculino x" value="M" name="value" :change="onSexoChange" />

<ejs-radiobutton label="Femenino x" value="F" name="value" :change="onSexoChange" />

</div>

</template>

<template v-slot:sexoAltColumn="">

<div class="e-rule-value e-value e-custom-value" >

<div>

<ejs-dropdownlist

placeholder='Seleccione Tipo salario'

:dataSource="[{id: 'M', label: 'Masculino'},{id: 'F', label: 'Femenino'}]" :fields="{ text:'label', value:'id'}"

:change="onSexoChange" />

</div>

</div>

</template>

</ejs-querybuilder>

in the script part i have 

methods:{

onSexoChange( event ){

this.$refs.myQBuilder.notifyChange(event.value, event.element, "value");

},

testRules () {

var myRules = this.$refs.myQBuilder.getRules()

console.log(myRules)

},

checkChange( changeArgs ) {

console.log('checkChange')

console.log(changeArgs)

},

checkRuleChange( eventArgs ) {

console.log('checkRuleChange')

console.log(eventArgs)

},

}

so when i click on the radios  on field sexo_b  as a test ,  the querybuilder crashes and all i get is:  

Uncaught TypeError: Cannot read properties of undefined (reading 'closest').  

So , i tried to replicate as much as possible checking the boolean value but no idea what im doing wrong, if its a bug , or simply i cannot use radios as options for value cause checking the event args   

event.value, event.element, "value"

event.value is always "" , event.element is always null  

IMAGE 

any pointers or ideas ? 

[carlos mendez]

Another doubts : 

1.- How can i place a date column with min. and max dates  for select cause also i have used the same method as radios (custom template with 2 datepickers) but no luck  for "between" operator  , other conditions worked fine on custom template. 

[alent1268 my]

@escape road 2 The error "Cannot read properties of undefined (reading 'closest')" suggests that the event is not properly referencing the DOM element.

1. Check Event Binding: Ensure that the @change event on the <ejs-radiobutton> is correctly bound. Instead of using :change="onSexoChange", try using @change="onSexoChange" to ensure the event is captured properly.

2. Accessing Event Values: In your onSexoChange method, log the entire event object to see its structure. It might provide insights into what properties are available.

3. Template Structure: Ensure that the structure of your templates is correct. Sometimes, if the template is not rendering as expected, it can lead to issues with event handling.

4. Debugging: Add console logs inside onSexoChange to check what values are being passed. For example:

   Copy
   onSexoChange(event) {
       console.log('Event:', event);
       this.$refs.myQBuilder.notifyChange(event.value, event.element, "value");
   }
   

5. Default Values: Make sure that the sexo field has a default value that matches one of the radio button values. If it’s empty, it might cause issues when trying to read it.

6. Check for Null Values: Before calling methods on event.element, check if it’s not null to avoid the TypeError:

   Copy
   if (event.element) {
       this.$refs.myQBuilder.notifyChange(event.value, event.element, "value");





[YuvanShankar Arunagiri]

Hi Carlos,

Query: issue in radio button value change event?

We have reviewed your reported query related to using a Radio Button template within the Query Builder component. Each Syncfusion component exposes different event argument structures, and in the case of the RadioButton, the target element is available within the event property of the Change event.

To resolve the issue you're facing, please refer to the following code snippet that demonstrates how to correctly access the target element in the Change event of the RadioButton:

<e-column field='Country' label='Country' type='string' :template="'countryTemplate'">

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

                        <div class="e-rule e-rule-template">

                            <ejs-radiobutton label="American" value="American" name="value" :change="onCtyChange" :checked="data.rule.value === 'American'"/>

                            <ejs-radiobutton label="India" value="India" name="value" :change="onCtyChange" :checked="data.rule.value === 'India'" />

                            <ejs-radiobutton label="Russia" value="Russia" name="value" :change="onCtyChange" :checked="data.rule.value === 'Russia'"/>

                        </div>

                    </template>

                    </e-column>

,…..

onCtyChange: function (args) {

                var qryBldrObj = getComponent(document.getElementById("querybuilder"),"query-builder");

                qryBldrObj.notifyChange(args.value, args.event.target, "value");

            }

Query: date type with min, max support and between operators queries?

By default, the Query Builder component supports the between operator for date-type columns. When this operator is selected, the component automatically renders two DatePicker controls to allow users to select the respective start and end dates.

Additionally, you can customize the behavior of these DatePicker controls using the valueModel property of the QueryBuilder component. This allows you to set properties such as min, max, and other configurations for the date pickers.

UG link: https://ej2.syncfusion.com/vue/documentation/query-builder/model-binding

<ejs-querybuilder ref="querybuilder" id="querybuilder" :rule="importRules" width="100%" :valueModel = "{

            datePickerModel: {

                cssClass: 'e-custom',

                min: '01/01/2025',

                max: '31/12/2025'

            }}">

 

Output screenshot:

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

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

Regards,

YuvanShankar A

[carlos mendez]

thanks for the reply, gonna try asap

[YuvanShankar Arunagiri]

You are welcome, Carlos. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.