Grid group headers don't span entire width of grid when using RowDraggable.

1 Answer 20 Views
Grid
Diederik
Top achievements
Rank 1
Diederik asked on 16 Dec 2021, 09:34 AM

Hi,

I've noticed a problem with the Grid when using grouping as well as grid row drag and drop functionality.

If both are enabled, the group headers don't span the entire width of the grid. The rendered data cell that represents the group header gets a colspan attribute that is 1 below the desired number. For example, if my Grid has grouping enabled and has 2 GridColums and 1 GridCheckboxColumn, the colspan should be 4 (see first attachment), which is correct.

But, when I also enable the drag and drop functionality (using RowDraggable), the computed colspan is still 4, even though it should be scaled up to 5 (see second attachment).

Is there any way we can override this behaviour, or is there any other work-around?

Kind regards,

Diederik

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 18 Dec 2021, 09:06 AM

Hello Diederik,

The Groupable feature cannot work with draggable rows, this is listed as its limitation: https://docs.telerik.com/blazor-ui/components/grid/row-drag-drop#limitations. If you enable both there will be an exception thrown.

 

Regards,
Marin Bratanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Diederik
Top achievements
Rank 1
commented on 07 Jan 2022, 10:19 AM | edited

Hi Marin,

I'm not using the "default" grouping feature. Instead, I'm using static grouping (where Groupable = false).
This is working perfectly fine in combination with draggable rows and no exception is thrown.
The only (visual) problem that arises is with the group header colspan as described above.

The following simple example will reproduce the problem:

@using Telerik.DataSource
<TelerikGrid
Data="@_gridData"
OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
Groupable="false"
RowDraggable="true"
Height="100%"
Pageable="true"
SelectionMode="@GridSelectionMode.Multiple">
<GridColumns>
<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.All"/>
<GridColumn Field="@nameof(Group.GroupId)" FieldType="@typeof(int)" Visible="false">
<GroupHeaderTemplate>
@{
var groupedData = _grouping[(int)context.Value];
}
<div>
City: <span class="bold">@groupedData.City</span>
</div>
</GroupHeaderTemplate>
</GridColumn>
<GridColumn Title="Name" Field="@($"Employee.{nameof(EmployeeModel.Name)}")"/>
<GridColumn Title="Age" Field="@($"Employee.{nameof(EmployeeModel.Age)}")"/>
<GridColumn Title="City" Field="@($"Employee.{nameof(EmployeeModel.City)}")"/>
</GridColumns>
</TelerikGrid>

@code {
private record EmployeeModel
{
public string Name { get; init; } = string.Empty;
public int Age { get; init; }
public string City { get; init; } = string.Empty;
}

private Dictionary<int, GroupData> _grouping = new();

private class GroupData
{
public int GroupId { get; init; }
public string City { get; init; } = string.Empty;
}

private List<EmployeeModel> _employees = new()
{
new EmployeeModel { Name = "Brian", Age = 25, City = "London" },
new EmployeeModel { Name = "Jason", Age = 29, City = "London" },
new EmployeeModel { Name = "Sarah", Age = 28, City = "Berlin" },
new EmployeeModel { Name = "Dorothy", Age = 31, City = "Berlin" }
};

private class Group
{
public int GroupId { get; set; }
public EmployeeModel? Employee { get; init; }
}

private List<Group> _gridData = new();

private void OnStateInitHandler(GridStateEventArgs<object> args)
{
args.GridState = new GridState<object>()
{
GroupDescriptors = new List<GroupDescriptor>
{
new()
{
Member = nameof(Group.GroupId),
MemberType = typeof(int),
}
}
};

_grouping = _employees
.GroupBy(g => new { g.City })
.Select((grouping, index) => new GroupData()
{
GroupId = index,
City = grouping.Key.City
})
.ToDictionary(s => s.GroupId);

var groupedEmployees = _employees.Select(employeeModel => new Group
{
Employee = employeeModel
}).ToList();

foreach (var group in groupedEmployees)
{
var groupId = _grouping.First(kv => kv.Value.City == group.Employee!.City).Key;
group.GroupId = groupId;
}

_gridData = groupedEmployees;
}
}

 

Marin Bratanov
Telerik team
commented on 08 Jan 2022, 09:44 AM

That's still a grouped grid, Diederik, so it is not supported. You are likely getting an exception, too.
Diederik
Top achievements
Rank 1
commented on 10 Jan 2022, 04:08 PM

I'm not getting any exception with the example above. This only happens when dynamic grouping is enabled (Groupable = true), which I don't use.

For others encountering this problem, it is "solvable" by adding an extra column with an empty title and a width set to 0:

<GridColumn Title="" Width="0"/>

Kind regards,

Diederik

Tags
Grid
Asked by
Diederik
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or