Checkbox selection for grid with child grids

4 posts, 0 answers
  1. Tuan Minh
    Tuan Minh avatar
    7 posts
    Member since:
    Aug 2016

    Posted 19 Jan 2017 Link to this post

    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.
  2. Eyup
    Admin
    Eyup avatar
    4075 posts

    Posted 23 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tuan Minh
    Tuan Minh avatar
    7 posts
    Member since:
    Aug 2016

    Posted 23 Jan 2017 Link to this post

    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.

     

  4. Eyup
    Admin
    Eyup avatar
    4075 posts

    Posted 25 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top