Change the xCircleIcon to xIcon in kendo-multiselect dropdown

0 Answers 345 Views
MultiSelect
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
Jyothi asked on 26 Jul 2023, 06:12 PM

Hi,

In the previous release we did not have a circle over the delete button in the kendo multi select dropdown. Here is the image.

Previous release of kendo-multiselect.

 

 

In the current release, there is a circle around the X.  We have a requirement that no dark circle should be shown around the 'X'.

 

I tried looking at the document and even extended the service and that doesn't work. Any suggestions?

 

Here is my class extending the IconSettingsService . But it never hits this service.

import { Injectable } from '@angular/core';
import { IconSettingsService } from '@progress/kendo-angular-icons';
import { SVGIcon } from '@progress/kendo-svg-icons';
import * as allSVGIcons from'@progress/kendo-svg-icons';

@Injectable()
export class MultiDropdownIconService extends IconSettingsService {
    private svgDictionary: { [key: string]: SVGIcon } = {
        "xCircle": allSVGIcons.xIcon
    };

    public getSvgIcon(svgIconName: string): SVGIcon {
        return this.svgDictionary[svgIconName] || super.getSvgIcon(svgIconName);
    }
}

 

In the latest release I see that kendo is using svg.

Georgi
Telerik team
commented on 31 Jul 2023, 08:44 AM

Hi Jyothi, 

Thank you very much for the screenshots provided. 

Indeed, the suggested approach in our Icon Settings article is the valid way that our team recommends for changing the built-in icons of the Kendo components to custom ones. 

I have thoroughly examined the provided code snippet and what I would suggest would be to slightly modify the selector that is used for targeting the xCircleIcon

private svgDictionary: { [key: string]: SVGIcon } = {
    'x-circle': allSVGIcons.xIcon,
};

For your convenience, I am sending you a StackBlitz demo that implements the suggested modification: 

https://stackblitz.com/edit/angular-c18mwr

I hope this helps. Please, let me know if you need additional assistance with this case. 

Regards,
Georgi
Progress Telerik
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 31 Jul 2023, 11:49 AM

Hi Georgi,

Thank you for the response. 

It is working now.

Regards,

Jyothi

No answers yet. Maybe you can help?

Tags
MultiSelect
Asked by
Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or