ejs-radiobuton not deselecting the radio previously selected one

[Bogdan Burlica]

Hi,

I have a problem with ejs-radiobuton.

Behaves like a checkbox. when clicked instead of deselecting the radio previously selected one it remains selected. So if a have four radio options and a click for times all radio are checkd. I use a v-for to show the values. How can I fix this?

[Gayathri KarunaiAnandam]

Hi Bogdan Burlica, 

  

We have checked your reported query. We would like to let you know that RadioButton name property is used to group RadioButton. We have achieved your requirement by using the name property. Please check the below code snippet. 

  

<template> 

  <div id="app"> 

    <ul v-for="user_status in status_radio_buttons" :key="user_status.text"> 

      <ejs-radiobutton 

        :label="user_status.text" 

        name="defaults" 

        :value="user_status.text" 

      ></ejs-radiobutton> 

    </ul> 

  </div> 

</template> 

  

<script> 

import Vue from "vue"; 

import { enableRipple } from "@syncfusion/ej2-base"; 

import { RadioButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

  

Vue.use(RadioButtonPlugin); 

  

enableRipple(false); 

  

export default Vue.extend({ 

  data: function () { 

    return { 

      status_radio_buttons: [ 

        { text: "Active", value: true }, 

        { text: "Inactive", value: false }, 

        { text: "normal", value: false }, 

        { text: "difficult", value: false }, 

      ], 

    }; 

  }, 

}); 

</script> 

  

  

For your convenience, we have prepared a sample based on your requirement. Please check the below sample. 

  

Sample: https://codesandbox.io/s/vue-template-forked-utrmv?file=/src/App.vue 

  

To know more about RadioButton, please check the below links. 

  

Documentation: https://ej2.syncfusion.com/vue/documentation/radio-button/how-to/name-and-value-in-form-submit/ 

  

API : https://ej2.syncfusion.com/vue/documentation/api/radio-button/#name 

  

Please check the above links and get back to us, if you need further assistance. 

  

Regards, 

Gayathri K 

[Bogdan Burlica]

We use a v-for in a v-for, I can save the date corectly, the issue is that on click it dosen't deselect the previous checked option.

This are the values that are passed to the ejs-radiobuton : [ "en", "de", "fr", "es" ]

[Aravinthan Seetharaman]

Hi Bogdan, 

 

We have checked your query. We suspect that this issue occurs due to not setting name attribute which makes all RadioButton as a single group and same ref is defined for all RadioButton. So, we suggest you please use name attribute and bind individual ref for each RadioButton. Please refer the below code snippet and sample. 

 

 

<ul v-for="user_status in status_radio_buttons" :key="user_status.text"> 

      <ejs-radiobutton 

        :label="user_status.text" 

        name="defaults" 

        :change="radioChange" 

        :value="user_status.text" 

        :ref="user_status.text" 

      ></ejs-radiobutton> 

    </ul> 

 

. . .  

  methods: { 

    radioChange: function (args) { 

      console.log(args.value); 

      console.log(this.$refs[args.value][0].value); 

    }, 

  }, 

 

    

Sample: https://codesandbox.io/s/vue-template-forked-l9it1?file=/src/App.vue  

 

If you are still facing the issue, kindly share the below details. 

 

• If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample.
• Please share us the video demonstration of this issue.
• Please share us the Syncfusion Package Version.

 

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Aravinthan S

[Bogdan Burlica]

We have create a function that create a object and than returns it to the v-for. It's working, thank you.

We have face another issue now, we try to implement custom design to checkbox for example. we write the css from the component, the problem is that the css is overwritten by the fabric.css

[Aravinthan Seetharaman]

Hi Bogdan, 

 

Thanks for the update. 

 

Query: Regarding override css in CheckBox 

 

Ans: We have checked this query. We can achieve your requirement by overriding existing css using required custom css. Please refer the below code snippet and sample. 

 

 

.e-radio:checked + label::before { 

  background-color: #fff; 

  border-color: green; 

} 

.e-radio:checked + label::after { 

  background-color: green; 

  color: green; 

} 

 

 

Sample: https://codesandbox.io/s/vue-template-forked-e3cy5?file=/src/App.vue  

 

For more details, please refer the below UG link. 

 

https://ej2.syncfusion.com/vue/documentation/radio-button/style-and-appearance/ 

 

https://ej2.syncfusion.com/vue/documentation/radio-button/how-to/customize-radiobutton-appearance/  

  

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

 

Regards, 

Aravinthan S