From d0da27d867e3826ef601dfe8abdf6d931ee59eff Mon Sep 17 00:00:00 2001 From: KB Bot Date: Wed, 9 Apr 2025 14:53:13 +0000 Subject: [PATCH 1/2] Added new kb article grid-remove-group-indent --- knowledge-base/grid-remove-group-indent.md | 91 ++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 knowledge-base/grid-remove-group-indent.md diff --git a/knowledge-base/grid-remove-group-indent.md b/knowledge-base/grid-remove-group-indent.md new file mode 100644 index 000000000..d5270ac3a --- /dev/null +++ b/knowledge-base/grid-remove-group-indent.md @@ -0,0 +1,91 @@ +--- +title: Removing Group Indent in Grid for Blazor +description: This article demonstrates how to remove the group indent in the Grid for Blazor by overriding the default theme styles. +type: how-to +page_title: How to Remove Group Indentation in Blazor Grid +slug: grid-kb-remove-group-indent +tags: grid, blazor, grouping, indentation +res_type: kb +ticketid: 1684110 +--- + +## Description + +This knowledge base article also answers the following questions: + +- Is there a way to remove the group indent and adjust the spacing without compromising the Grid behavior? +- How can I customize the grouping appearance in a Blazor Grid? +- How to hide the group indent and group header icons in a Blazor Grid? +- What is the best way to adjust the appearance of grouped headers in a Blazor Grid? + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Solution + +To remove the group indent in the [Grid for Blazor](slug:components/grid/overview) and adjust the appearance of grouped headers, you will need to override the default theme styles. This solution involves applying custom CSS to the Grid. Run the example below to remove the default grouping indentation: + +````RAZOR` + + + + + + + + + + +@code { + private List? GridData { get; set; } + + protected override void OnInitialized() + { + GridData = new List(); + var rand = new Random(); + for (int i = 0; i < 15; i++) + { + GridData.Add(new Employee() + { + EmployeeId = i, + Name = "Employee " + i.ToString(), + Team = "Team " + i % 3, + IsOnLeave = i % 2 == 0 + }); + } + } + + public class Employee + { + public int EmployeeId { get; set; } + public string Name { get; set; } = string.Empty; + public string Team { get; set; } = string.Empty; + public bool IsOnLeave { get; set; } + } +} +```` + +## See Also + +- [Grid Overview](slug:components/grid/overview) +- [Customizing Theme Styles](slug:override-theme-styles) From afe4ee7db6b31132d76f89731e6ec57c8aaebf19 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 9 Apr 2025 18:06:19 +0300 Subject: [PATCH 2/2] chore: fix example and slugs --- knowledge-base/grid-remove-group-indent.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/knowledge-base/grid-remove-group-indent.md b/knowledge-base/grid-remove-group-indent.md index d5270ac3a..751d75998 100644 --- a/knowledge-base/grid-remove-group-indent.md +++ b/knowledge-base/grid-remove-group-indent.md @@ -31,9 +31,9 @@ This knowledge base article also answers the following questions: ## Solution -To remove the group indent in the [Grid for Blazor](slug:components/grid/overview) and adjust the appearance of grouped headers, you will need to override the default theme styles. This solution involves applying custom CSS to the Grid. Run the example below to remove the default grouping indentation: +To remove the group indent in the [Grid for Blazor](slug:grid-overview) and adjust the appearance of grouped headers, you will need to override the default theme styles. This solution involves applying custom CSS styles to the Grid component. Run the example below and group the Grid by some of the columns to see the removed group indentation: -````RAZOR` +````RAZOR