Conditional image/glyph or html based on model property value (enum)

[Paul]

I have a model with an enum as a data type on a property.  In the grid I want to show an image representation for this enum.  Whats the best way to do this?

I've tried using the ClientTemplate to do this.  I'm not sure what I need.  I have tried the following without success:

@(Html.Kendo().Grid<BatchEditModel>()
        .Name("mygrid")
        .Columns(columns =>
        {
            columns.Bound(bem => bem.MyInfo.Number).ClientTemplate(
                    "# if (MyStatus == " + MyStatusConstants.Complete + ") { #
                    <span class="icon-oo-my-img-32" style="font-size: 1.2em; color: green"></span>
                    "# } #"
                    "# else if (MyStatus == " + MyStatusConstants.PWHTRequired + ") { #"
                    <span class="icon-oo-my-img-32" style="font-size: 1.2em; color: darkcyan"></span>
                    "# } #"
                    "# else if (MyStatus == " + MyStatusConstants.Myed + ") { #"
                    <span class="icon-oo-my-img-32" style="font-size: 1.2em; color: blue"></span>
                    "# } #"
                )

This has errors in the razor page.  I had the all the text wrapped in quotes and used + to concatenate them. 

The question is, I have an enum as a value, but I want to display an image - which is a custom glyph icon on the span.  What is the best way to implement this?

Thanks

Andez

[Dimiter Madjarov]

Hello Paul,

Indeed concatenating the strings is required if the template spans on multiple lines. You could find an example on the following documentation page.

Regards,
Dimiter Madjarov
Telerik

[Paul]

Hi Dimiter,

That's what I was looking at.  I think issue was I was concatenating strings, but given I had an enum - enum.ToString() uses the string description - not the int.  Additionally, the "" in the string itself I wasn't sure if that was the cause.  There was a post on stack overflow that did not have concatenation.  Anyway, it is working now by making sure I had the enum integer values - and also replaced the internal double quote with single quote.

I thought potentially it might have been the combinations of if's I had.  The demos show simple if... else's.  Might be worth making combinations more obvious on demo's. 

Thanks

Andez

[Dimiter Madjarov]

Hello Paul,

Thanks for the update. Let us know if you experience other difficulties.

Regards,
Dimiter Madjarov
Telerik