Checkboxes design custmization

1 Answer 23 Views
Checkbox CheckBoxGroup
samadhan
Top achievements
Rank 1
samadhan asked on 05 Jul 2021, 04:08 AM

Hi, 

Need customization of  Checkboxes on focus need to add arrow showing below options. 

Currently having close ( X ) icon. Need to be add down arrow as per attachment design.

Please assist. 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 07 Jul 2021, 11:07 AM

Hi Samadhan,

If you need to show an icon next to the checkbox when it is focused you could use the jQuery focus event. Then you could add an element holding the icon. Below is an example:

 $('.k-checkbox').focus(function(e){
	  $('.custom').remove()
          $("<span class='custom'><i class='arrow right'></i></span>").insertAfter($(e.target).next());
 })

And here is a Dojo example where this is demonstrated.

However, from the provided screenshot it seems that the checkbox is configured in another widget. Could you please send us more information about the exact scenario? This way we could get a better idea of the issue and provide appropriate assistance. 

Looking forward to your reply.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Checkbox CheckBoxGroup
Asked by
samadhan
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or