This is a migrated thread and some comments may be shown as answers.
Kendo Grid UI Html helper enum substitution on row value
7 Answers 197 Views
This is a migrated thread and some comments may be shown as answers.
Francesco
Top achievements
Rank 1
Francesco asked on 02 Oct 2017, 08:08 AM
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
}

7 Answers, 1 is accepted

Sort by
0
Francesco
Top achievements
Rank 1
answered on 02 Oct 2017, 08:23 AM

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();
    }
}
0
Stefan
Telerik team
answered on 04 Oct 2017, 05:02 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Francesco
Top achievements
Rank 1
answered on 04 Oct 2017, 02:54 PM
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?
0
Stefan
Telerik team
answered on 05 Oct 2017, 10:43 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Brian
Top achievements
Rank 1
answered on 01 Mar 2018, 10:25 AM
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??
0
Accepted
Stefan
Telerik team
answered on 05 Mar 2018, 07:06 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Suad
Top achievements
Rank 1
answered on 24 Jun 2020, 08:44 PM
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;
    }
Tags
Grid
Asked by
Francesco
Top achievements
Rank 1
Answers by
Francesco
Top achievements
Rank 1
Stefan
Telerik team
Brian
Top achievements
Rank 1
Suad
Top achievements
Rank 1
Share this question
or