We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

problems when I use ejRadioButton into ejGrid

Thread ID:

Created:

Updated:

Platform:

Replies:

131919 Aug 3,2017 10:32 AM UTC Sep 6,2017 01:22 PM UTC JavaScript 7
loading
Tags: ejGrid
Luis Carlos
Asked On August 3, 2017 10:32 AM UTC

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 [Syncfusion]
Replied On August 4, 2017 06:55 PM UTC

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
Replied On August 14, 2017 11:57 AM UTC

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 [Syncfusion]
Replied On August 15, 2017 04:24 PM UTC

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. 
 
 
Regards, 
Sureshkumar P 


Luis Carlos
Replied On August 16, 2017 08:57 AM UTC

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 [Syncfusion]
Replied On August 17, 2017 12:02 PM UTC

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
Replied On September 5, 2017 12:50 PM UTC

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 [Syncfusion]
Replied On September 6, 2017 01:22 PM UTC

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.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;