Grid Template with ComboBox

3 posts, 0 answers
  1. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 29 Oct 2020 Link to this post

    How do I include and populate a ComboBox inside a Grid template?  I have it list my Templates successfully as defined.  But, I need a ComboBox that lists the Template's Items.  The data is served up from the Model.

    Then, on selection of the items in the ComboBox, I need to store the Item index to a local array/list (because we don't know how many templates there are) for consumption on a button press.

    Template:

    public partial class SessionOptionTemplate
    {
        public int Id { get; set; }
     
        [MaxLength(50)]
        public string Name { get; set; }
        [MaxLength(128)]
        public string Description { get; set; }
     
        public int Order { get; set; }
     
        public DateTime AddTimestamp { get; set; } = DateTime.UtcNow;
        public DateTime? DeactivateTimestamp { get; set; }
     
        public ICollection<SessionOptionItem> SessionOptionItems { get; set; } = new HashSet<SessionOptionItem>();
    }

    Items:

    public partial class SessionOptionItem
    {
        [Key]
        public int Id { get; set; }
        public int SessionOptionTemplateId { get; set; }
     
        [MaxLength(50)]
        public string Name { get; set; }
        [MaxLength(128)]
        public string Description { get; set; }
     
        public DateTime AddTimestamp { get; set; } = DateTime.UtcNow;
        public DateTime? DeactivateTimestamp { get; set; }
    }

     

    Grid:

    @(Html.Kendo().Grid((IEnumerable<SessionOptionTemplate>)Model.SessionOptionTemplates)
        .Name("template-grid")
        .HtmlAttributes(new { @class = "GridNoHeader" })
        .Columns(columns =>
        {
            columns.Template(" ").Title("Name").Width(200);
        })
        .ClientRowTemplate(@"
            <div style='margin-bottom: 10px;'>
                <input class='select' type='checkbox' #=IsSelected ? " + @"checked='checked' " + @" : '' # />
                <span class='name'>#: Name #</span><br />
                <span class='desc'>#: Description #</span>
            </div>")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false))
        )
  2. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 29 Oct 2020 Link to this post

    Arguably, what I'm doing here could be served up using a PanelBar or a ListViewer.  If you have an opinion about what would be better I am interested in hearing it.
  3. Georgi Denchev
    Admin
    Georgi Denchev avatar
    86 posts

    Posted 03 Nov 2020 Link to this post

    Hi Joel,

    Thank you for providing code snippets.

    I am not quite certain what the desired result is. We have a grid that is bound to a Model which has a HashSet of another model that contains multiple properties inside. In this scenario a hierarchical grid with a detail template might be a better call. You can then enable checkbox selection on the child grids(Template items) and store each of the selected rows inside the array.

    In the demo, the detail grids retrieve their data from a controller action, however it is possible to obtain the data from an ICollection property inside the master's grid model.

    The detail template should be something similar to this:

    <script type="x-kendo/template" id="detailTemplate">
        @(Html.Kendo().Grid<SessionOptionItem>()
            .Name("detail_#=Id#")
            .Columns(columns =>
            {
                columns.Select();
                columns.Bound(c => c.Id);
                columns.Bound(c => c.Name);
                columns.Bound(c => c.Description);
                columns.Bound(c => c.DeactivateTimestamp);
                columns.Bound(c => c.AddTimestamp);
                columns.Bound(c => c.SessionOptionTemplateId);
            })
            .ToClientTemplate())
    </script>

     

    And then you attach it to the main grid:

    @(Html.Kendo().Grid <SessionOptionTemplate>()
                                .Name("grid")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.Id).Width(50);
                                    columns.Bound(c => c.Name).Width(150);
                                    columns.Bound(c => c.Order).Width(150);
                                    columns.Bound(c => c.Description).Width(150);
                                    columns.Bound(c => c.AddTimestamp).Width(150);
                                    columns.Bound(c => c.DeactivateTimestamp).Width(150);
                                })
                                .ClientDetailTemplateId("detailTemplate")
                                .Events(events => events.DetailInit("onDetailInit"))

     

    Now in order to bind the child grid to the ICollection<SessionOptionItem> we can utilize the DetailInit event in this manner:

    function onDetailInit(e) {
            // Get the child grid for the current row
            var grid = $("#detail_" + e.data.Id).data("kendoGrid");
            
            // Get all of the items and parse them to JSON.
            var items = e.data.SessionOptionItems.toJSON();
    
            // Get all of the fields of the child grid.
            let fields = grid.getOptions().dataSource.schema.model.fields;
     
            // Create the DataSource for the child grid.
            var dataSource = new kendo.data.DataSource({
                data: items,
                schema: {
                    model: {
                        fields: fields
                    }
                }
            });
           
            // Set the DataSource for the child grid.
            grid.setDataSource(dataSource);
            grid.dataSource.read();
        }

     

    If the above approach is not acceptable, could you please provide me with a bit more information regarding the task and what the grid should look like?

     

    Best Regards,
    Georgi Denchev
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top