DropDownListFor in Grid shows textfields instead of dropdown

[Andre]

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"])
)

[Tsvetomir]

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

[Vishu]

I am facing the same issue, even after adding UIHint. Can you help us? Thanks

[Anton Mironov]

Hi Vishu,

The described behavior is probably caused by a JavaScript error.

As the implementation of a custom editor is specific, it will be great if you could provide a runnable sample of your application.

The following demo represents the correct implementation(in the View Source tab) and the resulting behavior:

• https://demos.telerik.com/aspnet-mvc/grid/editing-custom

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov