htmlAttributes "data-name" gets not added to CheckBox

[Laurin S]

Hi,

I'm using the following piece of code to add the "data-name" html-property to my CheckBoxComponent, however, the data-name property does not get added to the input-field:

<CheckBoxComponent

      id="isAllDay"

      checked={true}

      className="e-field"

      htmlAttributes={{ "data-name": "isAllDay" }}

      label="Is all day?"

    />

For other components, like textbox or dropdownbox, the htmlAttributes are working perfectly to add the "data-name" property to the html input fields.

Any ideas?

[Janakiraman Sakthivel]

Hi Laurin, 

 

We have checked your query. We can achieve your requirement using created event. Please refer below code snippets. 

 

CODE SNIPPETS: 

 

<CheckBoxComponent 

                checked={true} 

                label="CheckBox" 

                ref={scope => { 

                  this.checkboxObj = scope; 

                }} 

                created={this.created.bind(this)} 

              /> 

 

created(args) { 

       this.checkboxObj.element.setAttribute('data-name', 'isAllDay'); 

  } 

 

 

For your reference, we have prepared a sample based on this, please refer below link. 

 

Sample Link: https://stackblitz.com/edit/react-sasp4w  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Janakiraman S. 

[Laurin S]

Thanks for the quick reply, the provided solution works.

However, it seems to me like a workaround ;-), since I don't understand why the property "htmlAttributes" exists, if it doesn't work for such purposes...

[Aravinthan Seetharaman]

Hi Laurin, 

 

We have checked your query. We need to validate more on this and need to ensure multiple cases regarding this. So, we will update the further details on 4^th August 2021. We appreciate your patience until then. 

 

Regards, 

Aravinthan S 

[Aravinthan Seetharaman]

Hi Laurin, 

 

Sorry for the inconvenience caused. 

 

We are facing more complexity on validating this query. And need to ensure more cases regarding this. So, we will update further details on 6^th August 2021. We appreciate your patience until then. 

 

Regards, 

Aravinthan S

[Aravinthan Seetharaman]

Hi Laurin, 

 

Thanks for the patience. 

 

We have checked your query. We can able to achieve your requirement by mentioning required attribute inside the CheckBoxComponent tag attribute. Please refer the below code snippet and sample. 

 

 

<CheckBoxComponent 

                checked={true} 

                label="CheckBox" 

                ref={scope => { 

                  this.checkboxObj = scope; 

                }} 

                data-name="isAllDay" 

              /> 

 

 

Sample: https://stackblitz.com/edit/react-sasp4w-q2mrxh  

 

Please let us know if you have any concern on this. 

 

Regards, 

Aravinthan S 

[Laurin S]

Somehow it still doesn't explain to me why there is the attribute "htmlAttributes", if I cannot use it exactly for such purposes (can't explain another use case...).
In addition, this solution causes a little confusion, since for the majority of the other UI components the desired goal can simply be achieved with the "htmlAttributes" field. But ok.

[Aravinthan Seetharaman]

Hi Laurin, 

 

We have checked your query. We would like to let you know that the htmlAttributes is generic API that our Syncfusion components are using to add required attributes. But, for CheckBox you can add attributes in tag level. Please let us know if you have any concern on this. 

 

Regards, 

Aravinthan S