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

Multiple grid on one page

1 Answer 67 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 01 Nov 2020, 09:52 PM

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

 

 

 

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 04 Nov 2020, 10:17 AM

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

Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or