Two grids on one page with .Select() columns

[Alex]

So I have an issue where if there are two grids on the same page using different names and both having a column that uses the ".Select()" method for checkboxes, the "select all" checkbox in the header of one of the grids works correctly, but the second one will only select the first one's rows and not it's own.

Here is some sample code:

<div class="row">
        <div class="col-xs-12 col-md-6">
            <h2 class="text-center">Users in rule</h2>
            @(Html.Kendo().Grid<UserViewModel>()
                .Name("UsersInRule")
                .Columns(columns =>
                {
                    columns.Select().Width(50);
                    columns.Bound(c => c.Name).Width(300);
                    columns.Bound(c => c.Username).Width(200);
                })
                .Sortable()
                .Resizable(resize => resize.Columns(true))
                .ToolBar(toolbar => toolbar.Create())
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("ListUsersInRule", "User", new { Area = "Admin", id = Model.Id }))
            )
            )
        </div>
        <div class="col-xs-12 col-md-6">
            <h2 class="text-center">Available users</h2>
           @(Html.Kendo().Grid<UserViewModel>()
                .Name("AvailableUsers")
                .Columns(columns =>
                {
                    columns.Select().Width(50);
                    columns.Bound(c => c.Name).Width(300);
                    columns.Bound(c => c.Username).Width(200);
                })
                .Sortable()
                .Resizable(resize => resize.Columns(true))
                .ToolBar(toolbar => toolbar.Create())
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("ListUsersNotInRule", "User", new { Area = "Admin", id = Model.Id }))
            )
        )
        </div>
    </div>

 

 

What happens is when I click on the header checkbox for the "AvailableUsers" grid, it will select the rows in the "UsersInRule" grid. The header checkbox in the "UsersInRule" grid works just fine in selecting rows in its own grid. How do I configure it so that the header checkboxes will only select the rows in their own grid?

Currently using Kendo UI v2017.3.1026 (kendo.all.min.js and kendo.aspnetmvc.min.js) that I grabbed from the telerik.ui.for.aspnet.core commercial zip.

[Viktor Tachev]

Hello Alex,

I have examined the behavior and it seems that it is caused by a bug. I have notified the developers and they will address the issue as soon as possible. 

I apologize for any inconvenience this may cause you. As a token of gratitude for bringing the issue to our attention you will find your Telerik points updated. 

Regards,
Viktor Tachev
Progress Telerik

[nicolaken]

Has the bug been fixed? 

I have the Kendo UI version: "2017.3.1026" and I have the same problem. I have a vertical splitter with one table in the upper pane and one in the bottom pane. If I use the select all box in the bottom table It selects the upper table rows.

Marco

 

[Viktor Tachev]

Hi Marco,

The issue has been fixed and is not present in the latest version of the components. The current release is 2018.1.117, please upgrade to it and selection with multiple Grid components would work as expected. 

You can also test the behavior in the example below:

• http://dojo.telerik.com/eWuHAB/6

Regards,
Viktor Tachev
Progress Telerik

[dmc]

Does this fix also apply to a grid in grid hierarchy? I have nested grid using MVC for .Net and find that the wrong grid is selected when using the select all checkbox.  I have updated to latest release with hopes it would fix but no change.

[dmc]

It seems like issue is with the "select all" checkbox in the grid header.  When I look at the child grids with unique ids, they share the same id for the checkbox in the header:

<th class="k-header" scope="col" data-index="0"><input aria-checked="false" aria-label="Select all rows" class="k-checkbox" data-role="checkbox" id="4c1b3339-2527-4a1d-9faa-285eca7cba40" type="checkbox"><label class="k-checkbox-label k-no-text" for="4c1b3339-2527-4a1d-9faa-285eca7cba40">&#8203;</label></th>

 

 

[Stefan]

Hello, Dan,

I made an example with a Hierarchical Grid and it is working as expected with the latest version:

https://dojo.telerik.com/iGOCib

Please advised if I missed something.

Regards,
Stefan
Progress Telerik