This is a migrated thread and some comments may be shown as answers.

Dropdown column to show text on view

4 Answers 432 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Man
Top achievements
Rank 1
Man asked on 08 Nov 2015, 01:27 PM

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. 

4 Answers, 1 is accepted

Sort by
0
Man
Top achievements
Rank 1
answered on 09 Nov 2015, 10:12 AM
Also, on a similar note, please advise how we can format the date value on the grid's view mode
0
Boyan Dimitrov
Telerik team
answered on 10 Nov 2015, 03:41 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Man
Top achievements
Rank 1
answered on 11 Nov 2015, 09:35 AM

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

0
Boyan Dimitrov
Telerik team
answered on 13 Nov 2015, 08:17 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Man
Top achievements
Rank 1
Answers by
Man
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or