Multiple grid on one page

[Michael]

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

 

 

 

[Tsvetomir]

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