Grid Template with ComboBox

[Joel]

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

[Joel]

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.

[Georgi Denchev]

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