Create DropDownList using Custom Template in Grid View

3 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Jan 2015

    Posted 26 Jan 2015 Link to this post

    Hi all,

    I currently have a Grid view of rows with several properties. We have the ability to reuse components from a table and I wish to implement these feature using a dropdownlist (ideally that would show up only via inline editing). This DropDownList must be populated by a specific row's ID, so my approach is to create a custom template that will call the controller and passing the row's ID. Is it possible to call a custom template like in this Detail Template Demo?

    http://demos.telerik.com/aspnet-mvc/grid/detailtemplate

    Here is my HTML thus far,

    @(Html.Kendo().Grid<LexViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.LEXId).Hidden(true);
            columns.Bound(p => p.LEXName).Title("Name");
            columns.Bound(p => p.LEXDescription).Title("Description");
            columns.Bound(p => p.ComponentName1).Title("Comp1");
            columns.Bound(p => p.ProximityTranche1).Title("Tranche 1");
            columns.Bound(p => p.ComponentName2).Title("Comp2");
            columns.Bound(p => p.ProximityTranche2).Title("Tranche 2");
            columns.Bound(p => p.ComponentName3).Title("Comp3");
            columns.Bound(p => p.ProximityTranche3).Title("Tranche 3");
            columns.Bound(p => p.ComponentName4).Title("Comp4");
            columns.Bound(p => p.LEXId).ClientTemplate("myDropDownCustomTemplate");
                 
            columns.Bound(p => p.IsActive);
     
            columns.Command(cmd => cmd.Edit()).Title("Update");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Model(m =>
                {
                    m.Id(p => p.LEXId);
                    m.Field(p => p.LEXId).Editable(false);
                    m.Field(p => p.LEXName);
                    m.Field(p => p.LEXDescription);
                    m.Field(p => p.AllComponents);
                    m.Field(p => p.IsActive);
                })
                .Read(read => read.Action("Read", "Home"))
                .Update(update => update.Action("EditingCustom_LexUpdate", "Home"))
                )
        .Pageable()
        .Sortable()
        .Editable(ed => ed.Mode(GridEditMode.InLine))
        .Filterable()
        .Groupable()
    )
     
    <script id="myDropDownCustomTemplate" type="text/kendo-tmpl">
        @(Html.Kendo().DropDownList()
            .Name("ReuseableComponents")
            .SelectedIndex(0)
            .Items(items =>
            {
                //Call Controller and Popuplate Dropdown
                //    Based on LEXId
            })
            .ToClientTemplate()
        )
    </script>
  2. John
    John avatar
    3 posts
    Member since:
    Jan 2015

    Posted 27 Jan 2015 in reply to John Link to this post

    So I figured out that I can create an inline grid template like this, but the read.Action() is NOT calling my controller. Why is this?

    @(Html.Kendo().Grid<LexViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.LEXId).Hidden(true);
            columns.Bound(p => p.LEXName).Title("Name");
            columns.Bound(p => p.LEXDescription).Title("Description");
            columns.Bound(p => p.ComponentName1).Title("Comp1");
            columns.Bound(p => p.ProximityTranche1).Title("Tranche 1");
            columns.Bound(p => p.ComponentName2).Title("Comp2");
            columns.Bound(p => p.ProximityTranche2).Title("Tranche 2");
            columns.Bound(p => p.ComponentName3).Title("Comp3");
            columns.Bound(p => p.ProximityTranche3).Title("Tranche 3");
            columns.Bound(p => p.ComponentName4).Title("Comp4");
            columns.Bound(p => p.LEXId).Template(@<text></text>).HtmlAttributes(new {@class = "templateCell"}).ClientTemplate(
                Html.Kendo().DropDownList()
                    .Name("components_#=LEXId#")
                    .HtmlAttributes(new {style = "width: 200px"})
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetComponents", "Home", "#=LEXId#");
                        });
                    })
            .ToClientTemplate().ToHtmlString()
        ).Title("All Comps");
            columns.Bound(p => p.IsActive);
     
            columns.Command(cmd => cmd.Edit()).Title("Update");
        })
            .Events(ev => ev.DataBound("initComponents"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Model(m =>
                    {
                        m.Id(p => p.LEXId);
                        m.Field(p => p.LEXId).Editable(false);
                        m.Field(p => p.LEXName);
                        m.Field(p => p.LEXDescription);
                        m.Field(p => p.AllComponents);
                        m.Field(p => p.IsActive);
                    })
                    .Read(read => read.Action("Read", "Home"))
                    .Update(update => update.Action("EditingCustom_LexUpdate", "Home"))
                    )
            .Pageable()
            .Sortable()
            .Editable(ed => ed.Mode(GridEditMode.InLine))
            .Filterable()
            .Groupable()
    )
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 28 Jan 2015 Link to this post

    Hi John,

    I would recommend using the ForeignKey column builder instead of a template. That would guarantee that the Grid's items are properly updated and the DropDownList will be shown only when the entire row is being edited. I would also suggest checking our offline demos, which are located in the Kendo UI installation path, under the \wrappers\aspnetmvc\Examples directory.  The files you would be interested in are:
    • Areas\razor\Views\grid\foreignkeycolumn.cshtml
    • Controllers\Grid\ForeignKeyColumnController.cs
    • Views\Shared\EditorTemplates\GridForeignKey.cshtml

    Regards,
    Alexander Popov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top