Ticket T1034363
Visible to All Users

RadioGroup - How to deselect a selected item

created 3 years ago

I have found some topics regarding my question but all of them are from 5 or more years ago.

I would like to offer my users the possibility to de-select a dxRadioGroup option, when double-clicking on it.
I know how to reset a field's value, but how can I intercept double-clicking event on a specific editor?

I want to enable this feature for optional fields were a value was selected by mistake.

Answers approved by DevExpress Support

created 3 years ago (modified 3 years ago)

Hello Anton,

You can reset the RadioGroup component's value by setting the component's value option to undefined when an end user clicks the selected item once. Unfortunately, the component does not have an API to check if the selected item was clicked or double-clicked as you specified in your request.
UPDATED:
However, you can use the multi-purpose onOptionChanged callback and track the changes of the fullName and value parameters as demonstrated in the following code snippet:

JavaScript
data() { return { priorities, valueChanged: false, }; }, methods: { handlePropertyChange: function (e) { if (e.name === "isActive" && e.value === false) { if (this.valueChanged) { this.valueChanged = false; } else { e.component.resetOption("value"); } } if (e.name === "value" && e.value !== e.previousValue) { this.valueChanged = true; } }, },

The code inside the if condition will be executed when you click a selected item once.

Here is a complete example that demonstrates how this code works: https://codesandbox.io/s/overview-devextreme-radio-group-forked-vwoto?file=/App.vue:351-807

Please note that the values of these parameters are not documented. So, if you decide to use this code, I recommend that you thoroughly test it in case we change these values in future updates.

Thanks,
Alisher

    Comments (3)

      Hello Alisher and thank you for sharing.
      Clicking a selected item is also a suitable solution for us.

      The code example you shared works for de-selecting. But onnce an item has been deselected it is impossible to select an item again.

      Best regards

      Alisher (DevExpress Support) 3 years ago

        Hello Anton,

        Thank you for your reply. Please modify the handlePropertyChanged function in the following manner:

        JavaScript
        data() { return { priorities, valueChanged: false, }; }, methods: { handlePropertyChange: function (e) { if (e.name === "isActive" && e.value === false) { if (this.valueChanged) { this.valueChanged = false; } else { e.component.resetOption("value"); } } if (e.name === "value" && e.value !== e.previousValue) { this.valueChanged = true; } }, },

        Here is a modified project illustrating this change: https://codesandbox.io/s/overview-devextreme-radio-group-forked-vwoto?file=/App.vue:351-807

        I also updated my answer.

          Dear Alisher,

          thank you very much for your help!

          This solution works.

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.