Using ClientTemplate with enum and badge

2 posts, 1 answers
  1. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 14 May 2020 Link to this post

    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?

     

  2. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 19 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top