Get enum value in Kendo grid

[Zoran]

I have an enum in my model for Currency, like so

 

public class Project
    {
        public Currencies Money { get; set; }
       
        public int CurrencyId { get; set; }
        public string CurrencyName { get; set; }
        public string ContractPerson { get; set; }

        public enum Currencies
        {
            [Display(Name = "Euro")]
            Euro = 1,
            [Display(Name = "USD")]
            USD = 2,
            [Display(Name = "MKD")]
            MKD = 3
        }
}

and I am trying to display the text instead of the id in my Kendo grid but I am not sure how to proceed. I can show the currencyId but not sure how to show the actual text. This is my grid

 

<div class="clearfix">
        @(Html.Kendo().Grid<Projects.Domain.Project>()
                    .Name("projectsGrid")
                    .ToolBar(toolbar => toolbar.Create())
                    .ToolBar(e =>
                    {
                        e.Custom().Text("Export to excel").HtmlAttributes(new { id = "excelButton" });
                    })
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Pageable(pageable => pageable.Input(true).Numeric(false))
                    .PersistSelection()
                    .Scrollable()
                    .Sortable()
                    .Events(ev => ev.Change("onChange"))
                    .Filterable()
                    .ColumnMenu()
                    .Groupable(false)
                    .Columns(columns =>
                    {
                        columns.Select().Width(50);
                        columns.Bound(c => c.CurrencyId).Title("currency").Width("200px");
                        columns.Bound(c => c.ContractPerson).Title("ContractPerson").Width("200px");
                        columns.Bound(c => c.UrlWiki).Title("UrlWiki").Width("200px");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Events(events => events.Error("error_handler"))
                    .Model(model => model.Id(p => p.Id))
                    .Create(update => update.Action("EditingPopup_Create", "Projects"))
                    .Read(read => read.Action("GetProjects", "Projects"))
                    .Update(update => update.Action("EditingPopup_Update", "Projects"))
                    .Destroy(update => update.Action("EditingPopup_Destroy", "Projects"))
                    )
        )
    </div>

Any pointers on how to proceed?

[Stoyan]

Hello Zoran,

Thank you for the provided code snippets.

To replace the Id number with custom text utilize the ClientTemplateId configuration method. It allows you to pass a Kendo Template to the column field:

 columns.Bound(p => p.CurrencyId).Title("Currency").ClientTemplateId("currencyTemplate");

Then define the Template in a script tag with an Id equal to the string passed to the ClientTemplateId method:

<script id="currencyTemplate" type="text/x-kendo-template">
    # if(data.CurrencyId == 1){ #
        USD
    # } else if(data.CurrencyId == 2){#
        EUR
    #} else {# 
        MKD
    #}#
</script>

I hope the information above is helpful.

Regards,
Stoyan
Progress Telerik

[NPL IT]

If I change my enums will the UI break?  Using the solution above?

[Stoyan]

Hi Drew,

It depends based on the applied changes.

For example, if you keep the Enum type and only change the values the configuration should keep working.

However, if you change the type of the Model field bound to the column you might need to also change the configuration.

Finally, please consider sharing some additional information about the scenario at hand such a the desired outcome or the code snippets of the configuration on your side. This will enable me to give more detailed suggestions.