Telerik MVC Grid - Show SelectListItem Text instead of Value

[Stefan]

Hello,

we have some dropdown fields (List<SelectListItem>) for which we would like to show the SelectListItem-Text (instead of Value) in the grid.

The grid is NOT in edit mode.

The column renders as 'undefined':

(Info: if we switch to edit-mode in the grid, the dropdown is working correctly, it's just the display of the Text in the cell that's not working.)

How do we need to configure this?

 

This ist the List<SelectListItem>:

public class Dropdowns
{        
    public static List<SelectListItem> Status
    {
        get
        {
            return new List<SelectListItem>()
            {
                new SelectListItem()
                {
                    Text = Resource.ACTIVE,
                    Value = "Aktiv"
                },
                new SelectListItem()
                {
                    Text = Resource.DELETED,
                    Value = "Gelöscht"
                },
                new SelectListItem()
                {
                    Text = Resource.EXPIRED,
                    Value = "Ausgelaufen"
                }
            };
        }
    }
}

This is the field in the model:

[Required]
[UIHint("STATUSEditor")]        
[Display(Name = "STATUS", ResourceType = typeof(Resource))]
public string STATUS { get; set; }

This is the editor template:

@using Kendo.Mvc.UI
@model Models.IDTB_CHARGE

@(
Html.Kendo().DropDownListFor(m => m.STATUS)
    .Name("STATUS")
    .DataValueField("Value")
    .DataTextField("Text")
    .ValuePrimitive(true)    
    .BindTo(Areas.Chargen.Helper.Dropdowns.Status)
)

This is the column in the grid:

 columns.Bound(c => c.STATUS).ClientTemplate("#=STATUS.Text#").Width(130);

[Mihaela]

Hello Stefan,

Since the "STATUS" is a string property, the "Text" property is not available. I would recommend:

• Removing the ClientTemplate() of the column:

columns.Bound(p => p.STATUS);

• Adding the "data-bind" attribute through the HtmlAttributes() option to ensure that the editor binds correctly to the "Status" field:

@(
Html.Kendo().DropDownListFor(m => m.STATUS)
    .HtmlAttributes(new { data_bind = "value: STATUS" })
    .DataValueField("Value")
    .DataTextField("Text")
    .ValuePrimitive(true)    
    .BindTo(Areas.Chargen.Helper.Dropdowns.Status)
)

As a result, the respective option text should be displayed as expected when the cell is not in edit mode:

Would you apply these changes and let me know how the behavior changes at your end?

Regards,
Mihaela
Progress Telerik

[Stefan]

Hello Mihaela,

thank you for the example. We have implemented the changes as follows:

Column:

columns.Bound(c => c.STATUS).Width(160);

Editor-Template:

@(
Html.Kendo().DropDownListFor(m => m.STATUS)
    .HtmlAttributes(new { data_bind = "value: STATUS" })
    .DataValueField("Value")
    .DataTextField("Text")
    .ValuePrimitive(true)
    .BindTo(Areas.Chargen.Helper.Dropdowns.Status)
)

 

Unfortunately in non-edit mode still the value is shown in the grid:

If we set editable to 'incell' and click the cell, the text is correctly shown:

How can we tell the grid to use the text instead of the value even when in non-edit mode?

Kind regards.

[Mihaela]

Hi Stefan,

The values of the "STATUS" field match the values of the "Value" field (i.e., "Aktiv", "Gelöscht", etc). For this reason, when the cell is not in edit mode, the displayed value corresponds to the respective "Value" field.

Having this in mind, you can add an additional Model property that holds the "Text" value and add it in the ClientTemplate() of the "STATUS" column. For example:

• Grid Model

[Required]
[UIHint("STATUSEditor")]        
[Display(Name = "STATUS", ResourceType = typeof(Resource))]
public string STATUS { get; set; }

public string STATUS_TEXT { get; set; }

• Grid definition

columns.Bound(c => c.STATUS).ClientTemplate("#=STATUS_TEXT#");

This way, the column will bind to the "STATUS" field and update its value, but the user will review the corresponding "STATUS_TEXT" field.

Another option is to define the "STATUS" column as a ForeignKey column, as demonstrated in the online demo:

• Grid ForeignKey Column Demo

For example:

columns.ForeignKey(p => p.STATUS, (System.Collections.IEnumerable)ViewData["statuses"], "Value", "Text");

//Controller
public ActionResult Index() // The Action that returns the View with the Grid
{            
  ViewData["statuses"] = Areas.Chargen.Helper.Dropdowns.Status;
  return View();
}

//Model
[Required]
[Display(Name = "STATUS", ResourceType = typeof(Resource))]
public string STATUS { get; set; }

By default, the ForeignKey column will use the "GridForeignKey.cshtml" editor located in the ~/Views/Shared/EditorTempaltes/ folder:

@model object

@(
 Html.Kendo().DropDownListFor(m => m)
        .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
        .HtmlAttributes(new { title = Html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName("")})
)

To define a custom editor, use the ForeignKey(System.Linq.Expressions.Expression,System.Action,System.String,System.String,System.Boolean) overload and set the "useServerEditor" parameter to "true":

columns.ForeignKey(p => p.STATUS, ds => ds.Read(r => r.Action("ReadStatuses", "Home")), "Value", "Text", true);

Set the custom editor through the UIHint attribute:

[Required]
[UIHint("STATUSEditor")]        
[Display(Name = "STATUS", ResourceType = typeof(Resource))]
public string STATUS { get; set; }

Would you give any of these examples a try and let me know how it goes?

Best,

Mihaela

[Stefan]

Hi Mihaela,

adding an additional column containing the text value is displaying it correctly. But sorting throws an error (I guess because the column does not exist in the database):
System.NotSupportedException: "The specified type member 'STATUS_TEXT' is not supported in LINQ to Entities. Only initializers, entity members, and entity navigation properties are supported."

Using the foreign key on the other hand seems to work quite well, even without a custom editor.

Thank you for the help. :)

Kind regards.

[Mihaela]

Thank you for the update, Stefan.

I am glad that the ForeignKey column helped you to resolve the issue :)

Best,

Mihaela