Dropdown column to show text on view

[Man]

I have a keno grid which contains 3 columns 

ID, Description and Status where status is a dropdown list

I am using a custom editortemplate for the popup form 

The dropdown is populated using the ViewData 

 

When the row is added, I can see the selected value of the dropdown in the status column grid's view mode

 

How do I show the text as opposed to the view ?

 

I have tried using the example on http://demos.telerik.com/aspnet-mvc/grid/editing-custom 

but it does not seem to help. 

[Man]

Also, on a similar note, please advise how we can format the date value on the grid's view mode

[Boyan Dimitrov]

Hello Man,

 

By default the value binding for the select widgets(AutoComplete, DropDownList, ComboBox, MultiSelect) uses the value of the selected item from the data to update the View-Model field. This is the reason why the model field value is updated with the value of the selected item instead of the text. 

 

The easiest way to achieve the desired behavior is to set the dataValueField to the the text field of the data item. 

 

One alternative way is to use a complex object that have nested text and value fields. When an item is selected the model field is updated with the entire item (text and value). This way using columns.template you can show the text value. The approach is demonstrated in the Grid / Editing custom editor demo for the Category field. Please note that this solution does have a limitation: sorting / filtering / grouping of columns that are bound to a complex property from the model is not supported out-of-the-box as the Grid didn't have the information about which of the nested fields should be used for these operations. 

 

Other solution would be to use ForeignKey approach demonstrated in the Grid / ForeignKey column demo. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[Man]

Hi Boyan,

   I have tried using the example on the Custom Editing demo

 This is my grid as below

@model Projects.Data.Models.Documentation

@(Html.Kendo().Grid<PMTK.Data.Models.PMTDocument>()
    .Name("DocumentationGrid")
    .Columns(columns =>
    {        
        columns.Bound(p => p.DocumentID)
        .ClientTemplate(
                      "<a href='"
                      + Url.Action("Download", "Home")
                      + "/#= DocumentID #'"
                      + ">#= DocumentID #</a>")
        .Width(30);
        columns.Bound(p => p.DocumentType).ClientTemplate("#=DocumentType.Text#").Width(100);
        columns.Bound(p => p.CreatedBy).Width(300);
        columns.Bound(p => p.IsCurrent).Width(30);
    })
    .ToolBar(toolbar => toolbar.Create().Text("Add new Document"))    
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("document"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:600px;" })    
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Model(doc =>
        {
            doc.Id(d => d.DocumentID);
            doc.Field(d => d.DocumentID).Editable(false);
        })
        .Read(read => read.Action("DocumentationGrid_Read", "Documentation"))
        .Create(create => create
                        .Action("DocumentationGrid_ManageDocuments", "Documentation")
                        .Data("updateDocumentData"))        
    )
)

 

HOwever, it does not seem to work. Can you please assist

[Boyan Dimitrov]

Hello Man,

 

In order to investigate the case I would need the code for the editor template as well. The configuration code for the Kendo UI Grid for ASP.NET MVC looks fine. 

 

Regards,
Boyan Dimitrov
Telerik