Inline edit grid with dropdown lists

2 posts, 0 answers
  1. Matias
    Matias  avatar
    24 posts
    Member since:
    Mar 2016

    Posted 26 Oct Link to this post

    I've been trying to accomplish this following several forum threads and this guide: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/templating/editor-templates but so far I can't make it work. I don't know what I'm doing wrong, since if I use my dropdown list outside the grid it works normally. I can't seem to understand how to bind the dropdown list to a grid column.

    This is my grid:
    @model IEnumerable<RECON.DAL.Models.Traducciones>
    @(Html.Kendo().Grid(Model)
            .Name("Traducciones")
            .Columns(columns =>
            {
                columns.Bound(foo => foo.OrigenId).Title(Global.Origen).EditorTemplateName("_FiltrosTraducciones");
                columns.Bound(foo => foo.Campo).Title(Global.Campo);
                columns.Bound(foo => foo.ValorOrigen).Title(Global.ValorOrigen);
                columns.Bound(foo => foo.ValorDestino).Title(Global.ValorDestino);
                columns.Command(commands =>
                {
                    commands.Edit().Text(" ").UpdateText(" ").CancelText(" ");
                    commands.Destroy().Text(" ");
                }).Title("Acciones").Width(200);
            })
            .ToolBar(toolbar => toolbar.Create().Text("Nuevo"))
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .DataSource(dataSource =>
                dataSource.Ajax()
                .Model(model =>
                {
                    model.Id(m => m.Id);
                })
                .Create(create => create.Action("Create", "Traduccion"))
                .Read(read => read.Action("Read", "Traduccion"))
                .Update(update => update.Action("Edit", "Traduccion"))
                .Destroy(destroy => destroy.Action("Delete", "Traduccion"))
            ))

     

    This is my partial view with the dropdown list:
    @model IEnumerable<RECON.DAL.ViewModels.TraduccionesOrigenes>

    @(Html.Kendo().DropDownList()
            //.Name("origenes")
            .HtmlAttributes(new { style = "width: 250px" })
            .DataTextField("Descripcion")
            .DataValueField("Id")
            .DataSource(source => source.Read(read => read.Action("GetTraduccionesOrigenes", "Traduccion")))
    )

    I fill the dropdown list with a stored procedure and outside the grid it works fine.

    Now, I don't know if I have to use the EditorTemplateName in the column I want the dropdown list or not, I'd just would like a step by step how to do it so that I can achieve what I want.

    Thanks in advance.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Oct Link to this post

    Hello Matias,

    Please ensure that the custom editor template is placed in the ~/Views/Shared/EditorTemplates folder. Also, add the UIHint attribute to the corresponding field in the model. The string passed as argument to UIHint should match exactly the name of the editor template cshtml file.

    With that said, try to populate the data for the DropDownList in the Controller and bind it via the BindTo() method as in the article.

    Give the modifications a try and let me know how they work for you.

    Regards,
    Viktor Tachev
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top