Kendo Grid UI Html helper enum substitution on row value

[Francesco]

I've got this example and i want to change a numeric value with a string value using an enum. I've tried a few methods, like .ClientTemplate and .EditorTemplateName. How can i use an enum to format the rows? Here is a grid example:

@(Html.Kendo().Grid<TelerikAspNetCoreApp2.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight).EditorTemplateName("Test"); //This is the value to change
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName).Filterable(f => f.UI("shipName"));
                columns.Bound(p => p.ShipCity).Filterable(f => f.UI("shipCity"));
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Navigatable()
            .Pageable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

 

And this is the example enum

public enum Test
{
    zero = 0,
    one = 10,
    two = 20,
    three = 30,
    four = 40,
    five = 50
}

[Francesco]

Also i tried to use function inside of the ClientTemplate method passing the value, but it does not work

...
columns.Bound(p => p.Freight).ClientTemplate("#UseEnum(# " + "#=Freight#" + "#)#");
...


@functions {
    public string UseEnum(string x)
    {
        return Enum.Parse(typeof(TelerikAspNetCoreApp2.Enums.Test), x).ToString();
    }
}

[Stefan]

Hello, Francesco,

Thank you for the provided information.

I can suggest checking the following forum post on a similar subject which contains code snippets and runnable examples:

http://www.telerik.com/forums/issue-displaying-enum-description-on-kendo-grid-

If the issue still occurs, please use one of the examples as a starting point, send it to us and we will gladly assist.

Regards,
Stefan
Progress Telerik

[Francesco]

Thanks for the response.
I tried the method you said, that is usefull if i need to use a dropdown to show the enum value for filtering, and it works, but the problem is that i want to show the Text value of the enum on the grid, and not the numeric value as in the picture. Is there a way to show the text value instead of the numeric one using the HtmlHelper?

[Stefan]

Hello, Francesco,

When the provided approach is used the text value will be shown in the Grid. The DropDown will be shown only if the Grid is editable.

If only the value has to be changed in read-only mode, I can recommend having the same key-value table as the enum on the client and then to use the ClientTemplate:

ClientTemplate("#=customFunction(fieldName)#");

<script>
function customFunction(fieldNameValue){
// The values array should have the same values as the Enum
var values = [
      { text: "Beverages", value: 1 },
      { text: "Food", value: 2 }
    ]
values.forEach(function(element) {
   if(element.value ==fieldName ){
  return element.text
}
});

}
</script>

If this does not achieve the desired result,  please provide a fully runnable example reproducing the issue and I will gladly provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik

[Brian]

Hi, I have exactly this problem in my code, this function seems to return the correct data while debugging but when it actually displays on screen I am seeing "undefined" in the grid??

[Stefan]

Hello, Brian,

The returned value should be the same as the one logged in the console just before returning it:

values.forEach(function(element) {
   if(element.value ==fieldName ){
  console.log(element.text) // the same value should be logged
  return element.text
}
});

If the values are different, please provide a runnable example as the issue could be caused by a factor which we are overlooking at this moment.

Regards,
Stefan
Progress Telerik

[Suad]

function GetProjectType(ProjectType) {
        var ReturnValue = "";
        // The values array should have the same values as the Enum
        var values = [
            { text:"Project", value:1 },
            { text:"Assignment", value:2 }
        ]
        values.forEach(function (element) {
            if (element.value == ProjectType) {
                ReturnValue = element.text.toString();
            }
        });
        return ReturnValue;
    }