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

DropDownListFor in Grid shows textfields instead of dropdown

1 Answer 9 Views
This is a migrated thread and some comments may be shown as answers.
Andre
Top achievements
Rank 1
Andre asked on 23 Dec 2019, 09:35 AM

Im trying to make a Grid with inCell editing with a DropdownList in one cell.

The DropDownList is not shown correcty. When i click the cell i see a textfield for the id and the name.

@{
    ViewBag.Title = "Roles";
}
 
<h2>Roles</h2>
 
@(Html.Kendo().Grid<GridRole>()
    .Name("grid")
 
    // Die Spalten definieren
    .Columns(column =>
    {
        column.Bound(r => r.Id);
        column.Bound(r => r.Name);
        column.Bound(r => r.Description);
        column.Bound(r => r.App).ClientTemplate("#=App.AppName#").Sortable(false).Width(180);
        column.Command(command => command.Destroy()).Width(150);
    })
 
    // Toolbar definieren
    .ToolBar(toolbar =>
    {
        toolbar.Create();
         // toolbar.Save();
    })
 
    // Das editieren findet innerhalb der Zeile statt
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Filterable()
    .Selectable()
    .Sortable()
    .Scrollable()
    .AutoBind(true)
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.Id);
            model.Field(p => p.Id).Editable(false);
            model.Field(p => p.Name).Editable(true);
            model.Field(p => p.App).DefaultValue(
                ViewData["defaultApp"] as SelectedApp);
        })
        .PageSize(20)
        .Read(read => read.Action("Roles_Read", "Roles"))
        .Create(create => create.Action("Roles_Create", "Roles"))
    // .Update(update => update.Action("EditingCustom_Update", "Grid"))
    // .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))
    )
)
 
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>
 
 
 
public class GridRole
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public Guid AppId { get; set; }
        public SelectedApp App {get; set;}
    }
 
    public class SelectedApp
    {
        public Guid AppId { get; set; }
        public string AppName { get; set; }
    }
 
@model SelectedApp
 
@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("AppId")
        .DataTextField("AppName")
        .BindTo((System.Collections.IList)ViewData["apps"])
)

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 24 Dec 2019, 03:11 PM

Hi Andre,

There are two inputs rendered within the specific cell due to the fact that the custom editor template is not referenced. And the default editors are rendered for the App field. One for the AppName and one for the AppId fields. 

What I can recommend is that you decorate the field declaration of the model with the UIHint and passing the name of the editor template:

 [UIHint("EditorName")]
public SelectedApp App {get; set;}

Feel free to contact me back in case the issue persists.

 

Regards,
Tsvetomir
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Grid
Asked by
Andre
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or