Multiple Radio Buttons in single Column of Datatable

edited November 3 in Technical questions

Hello, I am trying to create a datatable with two columns. One shows a user / person name, another column to show 3 radio buttons (None, User, Admin).

I want "None" to be the default selected value. Later, I should be able to select any one of the three buttons in that column. Also able to select multiple rows.

Eg.

UserName Level
ABC None User Admin ---- One of the three to be selected
MNO None User Admin ---- One of the three to be selected

Being a beginner, I couldn't google and find a solution yet. Here is the snippet of my code.

https://snippet.webix.com/w7gbtdcs

Please help. Thank You.

Tagged:

Comments

  • Hello @Mythili,
    In your example, you tried to change data in the template but it can't be done. Please note that the template should be used only for data rendering,
    so you can't change data and set default value like "None" in the template
    Because you worked with three fields in the template (one for each “level”), would be appropriate:
    - create a column for each field
    - insert a radio into each column (might be used custom radio)
    - add logic which would leave only one check radio
    Please check the snippet:
    https://snippet.webix.com/5i1ptl9m
    To set the "none" value as default one, you can use method $init data scheme to set "default" value.

  • Hello annazankevich,

    Thank you so much for the clear explanation and the helpful snippet. This helps.

  • Hello annazankevich,

    I tried to implement your code in the snippet (with just a little modification of pushing the columns in the grid instead of directly declaring in the datatable configuration). The radio buttons are not seen in the page. instead the columns are blank. Could you please advice?

    https://snippet.webix.com/87nnrtz4

  • Hello @Mythili,
    1. Because template depends on data, please check the values of the fields used in the template (perhaps it is incorrect).
    2. In you example, the logic of the templates is the same, so it would be better to write it into a separate function.
    Please check the snippet:
    https://snippet.webix.com/rr2ye6am

  • Hello annazankevich,

    Thank you so much. I just logged in to say that I got to fix it few hours before (though in a bit different way).

    https://snippet.webix.com/811kkdcq

    Now I am behind another issue. The radio button gets unchecked when the mouse is just moved over it. I am yet to google through webix forum. Please help (and save my time). Thanks in advance for your help.

  • Fixed. Thank you.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!