This is a migrated thread and some comments may be shown as answers.

Grid Template with ComboBox

2 Answers 7 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 29 Oct 2020, 05:14 PM

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 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 29 Oct 2020, 05:16 PM
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.
0
Georgi Denchev
Telerik team
answered on 03 Nov 2020, 03:34 PM

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/.

Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Georgi Denchev
Telerik team
Share this question
or