problems when I use ejRadioButton into ejGrid

[Luis Carlos]

Hi.

I use the component "ejRadioButton" into the component "ejGrid", however it doesn't work. As you can see in the first image all of them are selected, in addition, in the second picture all of them have the same name in order to select only one option.   

IMAGE 1

IMAGE 2

For further info, in the third image I change the name of the input in order to have the same name and choose only one option, also I build the component.

IMAGE 3

Finally, as you can see in the first image the radiobutton cheked sign is nor center.

I hope your reply as soon as possible, thanks in advance.

Luis Carlos.

[Berly Christopher]

Hi Luis, 

Thanks for contacting Syncfusion support. 

We were unable to reproduce the reported issue in our side. But we have suspect that reported issue may be caused in your application due to CSS Styles get override with any other styles. So, can you provide below details that will help us to provide exact solution.  

1.       Please provide the information about if you are using any other CSS styles in your project. 

2.       What are the properties are used in your project? 

3.       Code example of the view page. (OR) 

4.       Issue reproducing sample (you can reproduce the issue with given sample (below link) and revert us) 

  

We have prepared the sample based on your requirement with editing template and without editing template. Please get the sample form the below link. 

Without using Editing Template: http://jsplayground.syncfusion.com/pbuti4fr 

 

With using Editing Template: http://jsplayground.syncfusion.com/1nfkfpmv 

 

Please make use of the given sample and check with your project. If still you are facing issue, please get back to us with issue reproducing sample that will help us to provide exact solution.  

 

Regards, 

Berly B.C 

[Luis Carlos]

The example without using editing template doesn't work, as you can see in the next image.

Both are selected, however only one must be selected.

Please, could you provide me another sample without using editing template?

Thanks again.

Regards, Luis Carlos.

[Sureshkumar P]

Hi Luis, 

 

Sorry for inconvenience caused. 

 

We have prepared another sample without editing template. Here we have added the same name attribute to the all three radioButtons. 

 

Sample: http://jsplayground.syncfusion.com/yrhbc1jt  

 

Regards, 

Sureshkumar P 

[Luis Carlos]

Hi again.

Finally, the "ejRadioButton" component works well, however when I click on the save button and stop it into "actionBegin" function (as you can see in the next image), I realise there is only two attributes in the variable "args.data" (OrderID: 1223, radButton: "true"). How can I know which one is selected? It should show four attributes (OrderID: 1223, Verified: "false", RadioButton2: "true", RadioButton3: "false") in order to let me know the value of each cell.

Please, let me know, as soon as possible, how can I fix it. Thanks in advance.

 Regards, Luis Carlos.

[Mani Sankar Durai]

Hi Luis, 

We have analyzed your query and we are able to reproduce the reported issue. The cause of the issue is due to setting the same name attribute for those radio button elements. Normally the args.data will be returned based on the name attribute of the element with its value and it is the default behaviour. So having the same attribute name it returns like that. To set the value in the args.data we suggest you to follow the below code example 

  actionBegin: function (args) { 

                    if (args.requestType == "save") { 

                        args.data.Verified = $("#GridVerified").ejRadioButton("model.checked") ? "true" : "false"; 

                        args.data.RadioButton2 = $("#GridRadioButton2").ejRadioButton("model.checked") ? "true" : "false"; 

                        args.data.RadioButton3 = $("#GridRadioButton3").ejRadioButton("model.checked") ? "true" : "false"; 

                     } 

                } 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Luis Carlos]

Hi again.

Finally, I could get the values of each radiobutton with your support, however, In the event "ActionComplete" the requestType is "cancel" and I was expecting "save". 

Why is the value "cancel"? It should be "save" because I click on the button "save". 

I will be awaiting for your reply, thanks in advance.

Regards, Luis Carlos.

[Renjith Singh Rajendran]

Hi Luis,

 

We have analyzed your query and we are able to reproduce the reported issue. The issue is because of having the same name attribute for the radio button elements. Having same name attribute for multiple columns affects the normal behavior of editing. Hence the row is not considered as edited, and its prevented from saved. Hence the requestType is returned as “cancel”.

 

You can avoid this issue by setting the _isEditChangesApplied as true. Also we suggest you to update the other columns based on the radio button.

 

actionBegin: function (args) {

     if (args.requestType == "save") {

        this._isEditChangesApplied = true;

       var obj = $("#GridVerified").ejRadioButton("instance");

        args.data.Verified = obj.model.checked;

        var obj = $("#GridRadioButton2").ejRadioButton("instance");

        args.data.RadioButton2 = obj.model.checked;

        var obj = $("#GridRadioButton3").ejRadioButton("instance");

        args.data.RadioButton3 = obj.model.checked;

    }

},

 

We have also prepared a JSPlayground sample based on your requirement, please refer the link below,

Link : http://jsplayground.syncfusion.com/x4lrdljp

 

Regards,

Renjith Singh Rajendran.