DropDownListFor in Grid shows textfields instead of dropdown

2 posts, 0 answers
  1. Andre
    Andre avatar
    1 posts
    Member since:
    Dec 2019

    Posted 23 Dec 2019 Link to this post

    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"])
    )
  2. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 24 Dec 2019 Link to this post

    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.
Back to Top