Displaying enum values in grid using custom binding

Hello Nick Pepper,

There are two ways to do this:

1. Create another object which will have the same properties as ContractsSummaryViewModel except the enum. Create a property of string type and same name as the enum property. Map the enum value to that property and return the new object when doing ajax binding. Continue to use ContractsSummaryViewModel when defining the grid in order to trick the grid that there is an enum.
2. Use a client template for the enum column in order to display it as string. You will need a helper javascript array containing all enum values. Here is a code snippet:
   
   <script type="text/javascript">
    var enumValues = ["FirstValue", "SecondValue"];
   </script>
   ....
   column.ClientTemplate = "<#= enumValues[EnumProperty] #>"

Regards,
Atanas Korchev
the Telerik team

I tried the first solution which seems to work fine.

Many thanks

Nick

Has functionality here changed at all with the release of Q2 beta?

Hello David,

I do not believe that there are any major changes in this functionality.

Greetings,
Georgi Krustev
the Telerik team

Hi,

I have a similar issue. And your 2nd suggestion works fine. However, when I add the inline edit functionality, the enum field does not show as dropdownlist. It shows as an edit text box. Any suggestion?

Thank you,
Alex

I am surprised that I cannot annotate my enum with a UIHint("SomeTemplateName") and drop a DisplayTemplate in the Shared Views that renders the Enum for me in the way I want, especially since it appears that I can do that for an Editor Template.

If I do that the display template appears to be ignored, and the default rendering is the enum's integer value.

Hello Atanas,
can you please submit a short example for the first solution?

Thanks,
Julian

Hello Iulian,

Here is a simple example:

<script type="text/javascript">
 var enumValues = ["FirstValue", "SecondValue"];
</script>

<%: Html.Telerik().Grid<MyModel>()
                .Columns(columns =>
                {
                      columns.Bound(o => o.EnumProperty).ClientTemplate("<#= enumValues[EnumProperty] #>");
                })
                .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Home"))
%> 

Regards,
Atanas Korchev
the Telerik team

Thank you,

this example is for the second solution, right?
What about the first solution, how to map the enum value to the property?

Regards,
Iulian

Hi Lulian,

Try this...

 

Your object data
public EnumType YourEnumType { get; set; }

public string YourEnumTypeName

 {

get { return Enum.GetName(typeof(EnumType ), YourEnumType ); }

}

Your mvc codes:
columns.Bound(c => c.YourEnumTypeName).Title("Your Column Title")

let me know if this works for you.
Alex

 

Thanks Alex,

it shows ok but the filtering doesn't work.
Is there a workaround for that too?

Regards,
Iulian

Alex,
     I have the same problem as lulian. Basically, I wan't the Enum descriptions to show up in the grid column and the column should be filterable as it is for normal enum. That is, the filter should display enum descriptions to select from and when selected the filter should be applied based on that descrption of the enum. Any trick that can help me?

Currently with your solution, I can display the enum descriptions but the filtering does not work the way it works for any enum column.

regards,
Nirvan

Hello Atanas,

is there a way to use your ClientTemplate solution with AutoGenerated colums?

Thanks,
Iulian

Hello Iulian,

 Yes, my solution will work with auto generated columns. Find attached a sample project.

Best wishes,
Atanas Korchev
the Telerik team

Hi Guys,

I am using enums in the telerik grid and have implemented it client side using the 2nd solution above. It is displaying properly however Filtering is not working for the enum column only. It works for all my other columns including other client template columns. I get a 

Microsoft JScript runtime error: Object doesn't support property or method 'toLowerCase' that occurs in the telerik.common.min.js  

in the line 

e=function(aE){return aE.toLowerCase()}

Below is my code. Where Deliverable is come object with a property of type enum CompletionStatus containing two statuses "Active" and "Complete". Any help would be appreciated as this is the main field that gets filtered.

<script type="text/javascript">
function(var CompletionStatus)
{
    var enumValues = ["Active", "Complete"];    
}
</script> 
 
<h2>MyDeliverables</h2>
<div class="Main-Grid">
 
@( Html.Telerik().Grid <DeliverableModel.Deliverable>()
        .Name("Grid")
        .Columns(columns =>
        {           

            columns.Bound(o => o.CompletionStatus).ClientTemplate("<#= enumValues[CompletionStatus] #>").Width(15).Title("Status");
            columns.Command(commands =>
            {  
                              
                commands.Delete();
            }).Width(100);
        })
        .DataKeys(keys => keys.Add(o=> o.Id))
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax().OperationMode(GridOperationMode.Client)
                .Select("_MyDeliverablesGrid", "Deliverables")
                .Delete("_MyDeliverablesDelete", "Deliverables");
            //dataBinding.Server().Select("MyDeliverablesIndex", "Deliverables");
            
        })
        .Sortable()
        .Filterable()
        .Pageable(p=>p.PageSize(20))  
        .Resizable(r=>r.Columns(true))     
        .NoRecordsTemplate("You have no deliverables at this time.")    
       
)

Hi Tim,

Indeed, we are aware of this issue when client operation mode is enabled. The fix will be available with next official release and in the next internal build.

Regards,
Rosen
the Telerik team

Hi there,

I'm trying to extend the sample code provided here to allow dropdown editing in the grid of the enum as well; but I don't seem to be succeeding.

My view is defined like so:

I have an editor template for ForeignCountry:


And my ViewModel is pasted below:


Could you please help?

Hi Ankur,

Could you please provide a bit more information about what is the exact issue you are facing? Also a small sample which demonstrate it will be appreciated.

All the best,
Rosen
the Telerik team