From 649881dbd07d2ec49fcf29d26d5edf6b701a4185 Mon Sep 17 00:00:00 2001 From: Kendo Bot Date: Mon, 22 Jul 2024 17:52:46 +0300 Subject: [PATCH] Added new kb article grid-kb-customize-hierarchy-expand-column-blazor-grid (#2240) * Added new kb article grid-kb-customize-hierarchy-expand-column-blazor-grid * docs(grid): updates * Update knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * chore(grid): address feedback --------- Co-authored-by: KB Bot Co-authored-by: Nadezhda Tacheva Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/hierarchy.md | 1 + ...ize-hierarchy-expand-column-blazor-grid.md | 188 ++++++++++++++++++ 2 files changed, 189 insertions(+) create mode 100644 knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md diff --git a/components/grid/hierarchy.md b/components/grid/hierarchy.md index 3dccac6b4..d3d5cbe6c 100644 --- a/components/grid/hierarchy.md +++ b/components/grid/hierarchy.md @@ -123,5 +123,6 @@ The following articles and sample projects can be helpful when implementing hier ## See Also * [Live Demo: Grid Hierarchy](https://demos.telerik.com/blazor-ui/grid/hierarchy) + * [KB: Customize Hierarchy Expand Column in Blazor Grid]({%slug grid-kb-customize-hierarchy-expand-column-blazor-grid%}) diff --git a/knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md b/knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md new file mode 100644 index 000000000..db6174340 --- /dev/null +++ b/knowledge-base/grid-customize-hierarchy-expand-column-blazor-grid.md @@ -0,0 +1,188 @@ +--- +title: How to Reorder, Lock or Resize the Hierarchy Expand/Collapse Column in Telerik Blazor Grid +description: Learn how to customize the hierarchy expand/collapse column in Telerik Blazor Grid, including changing its position, locking it, and setting its width and title. +type: how-to +page_title: How to Reorder, Lock or Resize the Hierarchy Expand/Collapse Column in Telerik Blazor Grid +slug: grid-kb-customize-hierarchy-expand-column-blazor-grid +tags: blazor, grid, hierarchy, expand, collapse, column +res_type: kb +ticketid: 1658470,1642380,1638466,1635003,1630238 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +This KB article answers the following questions: + +* Can I change the position of the hierarchy expand/collapse column? +* Is it possible to lock/freeze the expand column for a hierarchical grid? +* Can I add a title to the hierarchy expand/collapse column? +* How can I change the width of the expand column in a hierarchical Grid? + +## Solution + +By default, the hierarchy expand/collapse column in the Telerik UI for Blazor [Grid]({%slug grid-overview%}) is not declared in the markup like the other data-bound columns. It renders automatically when a `DetailTemplate` is added to the Grid. At the time of writing (UI for Blazor **6.0.2**), this built-in hierarchy expand/collapse column does not support being locked or other common configurations like managing its position, setting its width, or adding a title. + +>tip In a future UI for Blazor version, the Grid will support [controlling the position of the expand column](https://feedback.telerik.com/blazor/1647135-ability-to-control-the-position-of-the-expand-column-in-a-hierarchical-grid). + +To customize the hierarchy expand/collapse column, follow these steps: + +1. Hide the default hierarchy expand column using [custom CSS]({%slug themes-override%}). +2. Add another [column with a template]({%slug grid-templates-column%}) for expanding and collapsing the detail templates through the [Grid state]({%slug components/grid/features/hierarchy%}#expand-rows-from-code). +3. Do not set `Field` for the column, so the data operations for this column (filtering, sorting, etc.) are disabled. +4. Toggle the icon in the custom hierarchy expand column based on the item's expanded state. +5. Configure the custom hierarchy expand column. For example, set its order in the `GridColumns` declaration or enable the `ColumnMenu` to lock the column. + +>caption Using a custom Grid hierarchy expand/collapse column + +````CSHTML + + + + + + @{ + var employee = context as MainModel; + + + + + + + + } + + + + + + + + + + + + + + +@code { + private TelerikGrid? GridRef { get; set; } + + private List GridData { get; set; } = new List(); + + private async Task OnButtonClick(MainModel dataItem) + { + var gridState = GridRef.GetState(); + + if (gridState.ExpandedItems.Contains(dataItem)) + { + gridState.ExpandedItems.Remove(dataItem); + } + else + { + gridState.ExpandedItems.Add(dataItem); + } + + await GridRef.SetStateAsync(gridState); + } + + private ISvgIcon GetButtonIcon(MainModel dataItem) + { + var gridState = GridRef.GetState(); + + return GetButtonIcon(gridState.ExpandedItems.Contains(dataItem)); + } + + private ISvgIcon GetButtonIcon(bool isExpanded) + { + if (isExpanded) + { + return SvgIcon.Minus; + } + else + { + return SvgIcon.Plus; + } + } + + protected override void OnInitialized() + { + GridData = GenerateData(); + } + + private List GenerateData() + { + List data = new List(); + for (int i = 0; i < 5; i++) + { + MainModel mdl = new MainModel { Id = i, Name = $"Name {i}", Address = $"Address {i}", Email = $"example{i}@mail.com" }; + mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList(); + data.Add(mdl); + } + return data; + } + + public class MainModel + { + public int Id { get; set; } + public string Name { get; set; } + public string Address { get; set; } + public string Email { get; set; } + public List Orders { get; set; } + + //override the Equals() method of the Grid model to ensure the items are properly expanded in case their references are changed + public override bool Equals(object obj) + { + if (obj is MainModel) + { + return this.Id == (obj as MainModel).Id; + } + return false; + } + } + + public class DetailsModel + { + public int OrderId { get; set; } + public double DealSize { get; set; } + } +} +```` + +## See Also + +- [Telerik Blazor Grid - Overview]({%slug grid-overview%}) +- [Telerik Blazor Grid - Column Templates]({%slug grid-templates-column%}) +- [Telerik Blazor Grid - Hierarchy]({%slug components/grid/features/hierarchy%}) +- [Telerik Documentation - Styling and Themes]({%slug themes-override%}) \ No newline at end of file