Using ClientTemplate with enum and badge

[Dario]

Hi to all,

I'm trying to use a badge to show a value of enum with a color for each items.

this is a enum

public enum ContactSourceTypes
{
    [Display(Name = "Telefono")]
    Phone = 0,
    [Display(Name = "Mail")]
    Mail = 1,
    [Display(Name = "Sistema di Marketing")]
    Mautic = 2,
    [Display(Name = "Altro")]
    Other = 3
}

 

Actually it shows a Display Value of item into a grid

[...]
columns.Bound(product => product.SouceType)
[...]

 

Now, I would obtain a badge with a specific color and displayvalue of item's enum type. To do this I try to change column setup in this way.

columns.Bound(product => product.SouceType).ClientTemplate("<span id='badge_#=SouceType#' class='sourceTypeBadgeTemplate'>#=SouceType#</span>");

 

And relative script

function onDataBound(e) {
        var grid = this;
        grid.table.find("tr").each(function () {
            var dataItem = grid.dataItem(this);

            //Formattazione tipo origine
            var sourceType = dataItem.SouceType;

            var type = 'primary';
            //alert(sourceType);
            switch (sourceType) {
                case 0:
                    type = 'primaty';
                    break;
                case 1:
                    type = 'info';
                    break;
                case 2:
                    type = 'success';
                    break;
                case 3:
                    type = 'warning';
                    break;
            }

            var text = sourceType;

            $(this).find('script').each(function () {
                eval($(this).html());
            });

            $(this).find(".badgeTemplate").kendoBadge({
                type: type,
                value: text,
            });


            kendo.bind($(this), dataItem);
        });
    }

 

But it's wrong.....where I wrong?

 

[Anton Mironov]

Hi, Dario,

Thank you for provided code snippets.

When iterating the rows in the DataBound event handler and not setting the "text" variable will cause a JavaScript exception. If a value from the switch block is needed, set it to the "type" variable. In order to apply the Kendo UI Badge widget functionality the selector class needs to be the same as into the template:

function onDataBound(e) {
        var grid = this;
        grid.table.find("tr").each(function () {
            var dataItem = grid.dataItem(this);

            //Formattazione tipo origine
            var sourceType = dataItem.SouceType;

            var type = 'primary';
            console.log(sourceType);
            switch (sourceType) {
                case 0:
                    type = 'primaty';
                    break;
                case 1:
                    type = 'info';
                    break;
                case 2:
                    type = 'success';
                    break;
                case 3:
                    type = 'warning';
                    break;
            }

            var text = type;

            $(this).find('script').each(function () {
                eval($(this).html());
            });

            $(this).find(".sourceTypeBadgeTemplate").kendoBadge({
                type: type,
                value: text,
            });


            kendo.bind($(this), dataItem);
        });
    }

Let me know if I can help you with anything else.

 

Regards,
Anton Mironov
Progress Telerik