Select one of available icons

[milenkovicstefan]

How can I create custom editor to select one of available icons from ..\wwwroot\Content\site\custom\images for example? I'd like to create it like RadioButtonEditor but with images instead of text.

[wezmag]

You can create a custom editor inherit from RadioButtonEditor, and then override constructor and addRadio methods.

BTW, it's better to load data (id, image url, and etc...) from the database, rather than get file info directly from the directory.

namespace YourProjectName {

    @Serenity.Decorators.element('<div />')
    @Serenity.Decorators.registerEditor([Serenity.IStringValue, Serenity.IReadOnly])
    export class IconSelectEditor extends Serenity.RadioButtonEditor {

        constructor(div: JQuery, opt: any) {
            super(div, opt);

            //load data from backend
            //Common.IconService.ListIcons({}, response => {
            //    response.Icons.forEach(icon => {
            //        this.addRadio(icon.Value, icon.ImageUrl);
            //    });
            //});

            let images = [
                { value: '1', imageUrl: '/Content/site/custom/images/download_applicationnote.png' },
                { value: '2', imageUrl: '/Content/site/custom/images/download_compatibility.png' },
                { value: '3', imageUrl: '/Content/site/custom/images/download_datasheet.png' },
                { value: '4', imageUrl: '/Content/site/custom/images/download_driver.png' },
                { value: '5', imageUrl: '/Content/site/custom/images/download_manuls.png' }
            ];

            images.forEach(image => {
                this.addRadio(image.value, image.imageUrl);
            });
        }

        protected addRadio(value: string, imageUrl: string) {
            var label = $('<label/>').html(Q.format('<img src="{0}" />', imageUrl));
            $('<input type="radio"/>').attr('name', this.uniqueName)
                .attr('id', this.uniqueName + '_' + value)
                .attr('value', value).prependTo(label);
            label.appendTo(this.element);
        }
    }
}

[milenkovicstefan]

Thank you, @wezmag! Just what I needed.