Changing of text in 'APPLY" and "CANCEL" buttons

[Grzegorz Golen]

Dear Sirs, 

I have used element "ColorPicker" in our application. I would like to change the text in butons "APPLY" and "CANCEL" of this element (respectively for "PICK THIS" and "LOOK FURTHER"). It is not the issue of region (no localization) - I would like to change it permanently for all users. 

I have not found in documentation way how to do this. Could you please describe how this change to ColorPicker can be done?

Kind regards, 

Grzegorz Goleń 

[Silambarasan I]

Hi Grzegorz, 

 

Thank you for contacting Syncfusion support. 

 

Your requirement “To change the text in butons "APPLY" and "CANCEL"” can be achievable in ColorPicker by localize it using our localization library. Please refer the below code example. 

 

Stackblitz sample: 

https://stackblitz.com/edit/angular-f3lwqw-jpqtfr?file=default.component.ts 

 

component.ts 

 

//… 

import { L10n } from '@syncfusion/ej2-base'; 

 

//… 

 

L10n.load({ 

    'en-US': { 

        'colorpicker': { 

            'Apply': 'PICK THIS', 

            'Cancel': 'LOOK FURTHER', 

        } 

    } 

}); 

 

 

Please refer the below our help documentation for more details. 

https://ej2.syncfusion.com/angular/documentation/color-picker/localization 

 

Regards, 

Silambarasan 

[Grzegorz Golen]

Hi Silambarasan, 

thank you for your response, however please note that I have stressed that I cannot change it by localization because this feature should not be the matter of localization, it would be poor design, because the intention and the reasons for such project is to have it changed regardless of localization. It should be an easily editable property of element Color Picker. Does this element proivde the simple possibility to change the text in buutons without implementation of the localization mechanismus?

Kind regards, 

Grzegorz 

[Silambarasan I]

Hi Grzegorz, 

Thanks for your update. 

We would like to let you know that, the recommended way to achieve your requirement “To change the text in ‘APPLY’ & ‘CANCEL’ buttons” by localize it using our localization library. However, as based on your request – we have changed the button text by using ‘open’ client-side event in ColorPicker. Please refer the below code example. 

Stackblitz Sample: 

https://stackblitz.com/edit/angular-qolx18-maigcs?file=default.component.ts 

HTML 

<input ejs-colorpicker #colorpicker id='color-picker' (open)="onOpen($event)" type='color' /> 

COMPONENT.TS 

public onOpen(args: OpenEventArgs): void {       

  var applyBtnElem, cancelBtnElem; 

   

  applyBtnElem = args.element.querySelector(".e-apply"); 

  cancelBtnElem = args.element.querySelector(".e-cancel"); 

 

  applyBtnElem.textContent = 'PICK THIS'; 

  applyBtnElem.title = 'Pick This'; 

 

  cancelBtnElem.textContent = 'LOOK FURTHER'; 

  cancelBtnElem.title = "Look Further"; 

 

} 

Could you please check the above sample and get back to us if you need any further assistance? 

Regards, 

Silambarasan