Checkbox selection for grid with child grids

[Tuan Minh]

Hi Kendo Team,
I have a grid with multiple child grids. I'm having troubles trying to do checkbox selection for the grid and its child grids with the requirements: selecting one record from parent grid should select all records of its child grid and select one record of the child grid should select its parent record accordingly.
The main grid:

@(Html.Kendo().Grid<PendDetailRecordDTO>()
        .Name("pendDetailRecord_grid")
        .Columns(columns =>
        {
        columns.Bound(c => c.DetailRecord.ID).HeaderTemplate(@<input type="checkbox" id="selectAll" />)
            .ClientTemplate(@"
                                # if (StatusText=='Failed') { #
                                <input type=""checkbox"" class=""app_select"" data-refid='#: DetailRecord.ID #'/>
                                # } #
                        ").Sortable(false).Width(20);
            columns.Bound(c => c.DetailRecord.StorageLoc).Title("Storage Location").Width(105);
            columns.Bound(c => c.StorageLocationText).Title("Store Name").Sortable(false).Width(105);
            columns.Bound(c => c.DetailRecord.MainMaterialNo).Title("Main Stockcode").Sortable(true).Width(95);
            columns.Bound(c => c.DetailRecord.Qty).Title("Qty").Sortable(true).Width(35);
            columns.Bound(c => c.DetailRecord.ErrMsg).Title("Error Message").Sortable(false);
            columns.Bound(c => c.StatusText).Title("Status").Sortable(false).Width(55);
            columns.Bound(c => c.DocNo).Title("Doc No").Sortable(false).Width(75);
            columns.Bound(c => c.FileName).Title("File Name").Sortable(true).Width(250);
        }

            )
            .Pageable()
            .Sortable(sort => sort.AllowUnsort(false))
            .Scrollable(scr => scr.Height(400))
            .Resizable(resizable => resizable.Columns(true))
            .DataSource(dataSource =>
            dataSource.Ajax()
                .PageSize(20)
                .Batch(true)
                .ServerOperation(true)
                .Read(read => read.Action("GetPendDetailRecord", "Inventory", new { stockCode = Model.StockCode, storeID = Model.StoreID, fromDate = Model.FromDate, toDate = Model.ToDate, status = (Model.Status == null) ? string.Empty : string.Join(",", Model.Status), error = Model.Error}))
        )
        .ClientDetailTemplateId("DetailSectionTemplate")
        )

 
The child grid template:

@(Html.Kendo().Grid<PendDetailSectionDTO>()
    .Name("pendDetailSectionGrid_\\#=DetailSection.ID\\#")
    .Columns(columns =>
    {
        columns.Bound(c => c.DetailSection.ID).HeaderTemplate(@<input type="checkbox" id="selectAllSection" />)
        .ClientTemplate("\\# if (StatusText=='Failed') { \\# <input type='checkbox' class='app_select_Section' data-refid='\\#: DetailSection.ID \\#'/> \\# } \\#")
        .Sortable(false).Width(20);
        columns.Bound(c => c.DetailSection.ID).Title("ID");
        columns.Bound(c => c.DetailSection.MaterialNo).Title("Stockcode").Width(90);
        columns.Bound(c => c.DetailSection.UID).Title("UID").Sortable(false).ClientTemplate("\\#if (DetailSection.UID!=null&&DetailSection.UID!='') {\\#<a href='" + @Url.Content("~/Inventory/InventoryDetail") + "?SerialNo=\\#=DetailSection.UID\\#'>\\#=DetailSection.UID\\#</a>\\#}\\#");
        columns.Bound(c => c.DetailSection.ManufacturePartNo).Title("Part No").Width(90);
        columns.Bound(c => c.StatusText).Title("Status").Width(55);
        columns.Bound(c => c.DetailSection.ErrMsg).Title("Error Message");
    }
    )
    .Pageable()
    .DataSource(source => source.Ajax()
        .PageSize(5)
        .ServerOperation(false)
        .Read(read => read.Action("GetPendDetailSection", "Inventory", new { detailRecordId = "#=DetailRecord.ID#" }))
    )

 
Both grid models:

public class PendDetailRecordDTO
{
    public string StatusText { get; set; }
    public string StorageLocationText { get; set; }
    public string DocNo { get; set; }
    public string FileName { get; set; }
    public SAP_DetailRecord_STG DetailRecord { get; set; }
    public PendDetailRecordDTO(SAP_DetailRecord_STG detailRecord)
    {
        DetailRecord = detailRecord;
    }
}
public class PendDetailSectionDTO
{
    public string StatusText { get; set; }
    public SAP_DetailSection_STG DetailSection { get; set; }
    public PendDetailSectionDTO(SAP_DetailSection_STG detailSection)
    {
        DetailSection = detailSection;
    }
}

 
Also I'm having troubles extracting the property using

.Name("pendDetailSectionGrid_\\#=DetailSection.ID\\#")

and

data-refid='\\#: DetailSection.ID \\#'

Which throws "Invalid Template" error. Is it because the property is not of the model but of the wrapped class? But then the following works just fine:

.ClientTemplate("\\#if (DetailSection.UID!=null&&DetailSection.UID!='') {\\#<a href='" + @Url.Content("~/Inventory/InventoryDetail") + "?SerialNo=\\#=DetailSection.UID\\#'>\\#=DetailSection.UID\\#</a>\\#}\\#")

 
Thank you and regards,
Michael Pham.

[Eyup]

Hello Michael,

Yes, use the ID of the main model to set the Name of the inner grid:
http://demos.telerik.com/aspnet-mvc/grid/hierarchy

As for the hierarchical selection implementation, you will need to use your custom javascript logic to achieve this requirement. You can use the click or change event handler of the checkbox element to do that. You can use this article to get some ideas:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox

I am also sending the MVC equivalent of this checkbox column implementation.

Another thing which may prove immensely helpful and crucial for this scenario: if you check the rendering of a hierarchical grid, you will notice that the main grid's row has a class applied to them - "k-master-row". And the container of the inner grid has another class - "k-detail-row". You can use this info in combination with some jQuery to determine where is the clicked checkbox is located.

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress

[Tuan Minh]

Hi Eyup,

I was able to achieve the hierarchical selection using following:

$("#pendDetailRecord_grid").on("change", ".app_select", function (e) {
    if ($(this).prop("checked")) {
        $(".app_select_Section" + $(this).data("refid")).prop("checked", true);
    } else {
        $(".app_select_Section" + $(this).data("refid")).prop("checked", false);
    }
});

$("#pendDetailRecord_grid").on("change", ".app_select_Section", function (e) {
    if ($(this).prop("checked")) {
        $(this).parents("tr.k-detail-row").prev("tr.k-master-row").find("input.app_select").prop("checked", true);
    } else {
        if (!$(".app_select_Section").is(":checked")) {
            $(this).parents("tr.k-detail-row").prev("tr.k-master-row").find("input.app_select").prop("checked", false);
        }
    }

Thanks for the reply though.

Michael Pham.

 

[Eyup]

Hello Michael,

I'm glad you've managed to find a viable solution for your specific case.
Please feel free to turn to us if new questions arise.

Regards,
Eyup
Telerik by Progress