Multiple grid on one page

2 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Jan 2009

    Posted 01 Nov 2020 Link to this post

    Hi everyone,

     

    I have a page with two grids on the page and each grid has grouping.  I want to collapse the groups in both grids and also allow the user to click on the labels to expand and collapse the groups.  I am using version 2020.2.513

    So what is happening is that grid 1 is collapsing as expected, but grid 2 is not collapsing at all.  What do I have wrong?

    My code is below:

    Grid 1

    @(Html.Kendo().Grid<VwFormSubmissionMenuListActive>()
        .Name("ActiveForms")
        .Groupable()
        .Columns(columns =>
        {
            columns.Bound(p => p.FormSubmissionId).Hidden(true);
            columns.Bound(p => p.FormName).Title("Form Name").Width(200).Hidden(true);
            columns.Bound(p => p.SubjectName).Title("Subject").Width(200).MinScreenWidth(800);
            columns.Group(group => group
                .Title("Form Agreement")
                .Columns(info =>
                {
                    info.Bound(x => x.AgreementRequired).Title("Required").Width(75);
                    info.Bound(x => x.AgreementStatusDescription).Title("Status").Width(75);
                })
            );
            columns.Bound(p => p.AgreementStatusId).Hidden(true);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Search();
        })
        .HtmlAttributes(new { style = "height:650px;" })
        .Navigatable()
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .Sortable()
        .Groupable(true)
        .Events(events => events.DataBound("collapseGroupRows_Forms"))
        .Events(ev => ev.Change("onChange"))
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .GroupPaging(true)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.FormSubmissionId))
            .Read("vwFormSubmissionMenuList_Active", "Grid", new { StudentId = -1 })
            .Group(x =>
            {
                x.Add(y => y.FormName);
            })
        )
     
    )

     

    Grid 2

    @(Html.Kendo().Grid<VwSubjectChange>()
        .Name("SubjectChange")
        .Groupable()
        .Columns(columns =>
        {
            columns.Bound(p => p.SubjectChangeId).Hidden(true);
            columns.Bound(p => p.Timetable).Title("Timetable").Width(200).Hidden(true);
            columns.Bound(p => p.Surname).Title("Surname").Width(100);
            columns.Bound(p => p.Preferred).Title("Preferred").Width(100).MinScreenWidth(800);
            columns.Bound(p => p.Yearlevel).Title("Current Year").Width(50);
            columns.Bound(p => p.Studentnumber).Title("Student Id").Width(50);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Search();
        })
        .HtmlAttributes(new { style = "height:650px;" })
        .Navigatable()
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .Sortable()
        .Groupable(true)
        .Events(events => events.DataBound("collapseGroupRows_SubjectChange"))
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .GroupPaging(true)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.SubjectChangeId))
            .Read("VwSubjectChange", "Grid", new { username = @User.Identity.Name })
            .Group(x =>
            {
                x.Add(y => y.Timetable);
                x.Add(y => y.CurrentStatus);
            })
        )
     
    )

     

    Javascript code:

    function collapseGroupRows_SubjectChange() {
        var grid = $("#SubjectChange").data("kendoGrid");
     
        $(".k-grouping-row").each(function (e) {
            var expanded = $(this).find(".k-i-collapse").length > 0;
     
            if (expanded) {
                grid.collapseGroup(this);
            }
            else {
                grid.expandGroup(this);
            }
     
            //grid.collapseGroup(this);
        });
     
        $(".k-grouping-row").click(function () {
            var expanded = $(this).find(".k-i-collapse").length > 0;
     
            if (expanded) {
                grid.collapseGroup(this);
            }
            else {
                grid.expandGroup(this);
            }
        });
     
    }
     
    function collapseGroupRows_Forms() {
     
        var grid = $("#ActiveForms").data("kendoGrid");
         
        $(".k-grouping-row").each(function (e) {
            var expanded = $(this).find(".k-i-collapse").length > 0;
     
            if (expanded) {
                grid.collapseGroup(this);
            }
            else {
                grid.expandGroup(this);
            }
     
        });
     
        $(".k-grouping-row").click(function () {
            var expanded = $(this).find(".k-i-collapse").length > 0;
     
            if (expanded) {
                grid.collapseGroup(this);
            }
            else {
                grid.expandGroup(this);
            }
        });
    }

     

     

     

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 04 Nov 2020 Link to this post

    Hi Michael,

    The jQuery selector that targets the grouping rows is too generic and takes place for the two grids. Therefore, you should make the selector specific per-grid:

    $("#ActiveForms .k-grouping-row") // Same goes for the second grid

     

    Kind regards,
    Tsvetomir
    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