From b36b91d9420221e2892c998d5e9e29f40d10d358 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 6 Aug 2024 18:08:26 +0300 Subject: [PATCH 1/5] kb(grid): Add KB for transposed Grid --- knowledge-base/grid-transposed.md | 270 ++++++++++++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 knowledge-base/grid-transposed.md diff --git a/knowledge-base/grid-transposed.md b/knowledge-base/grid-transposed.md new file mode 100644 index 0000000000..5995875839 --- /dev/null +++ b/knowledge-base/grid-transposed.md @@ -0,0 +1,270 @@ +--- +title: Transpose Grid +description: Learn how to show transposed Grid data in a table or a Form. The transposed data may or may not support editing. +type: how-to +page_title: How to Transpose the Telerik Grid for Blazor +slug: grid-kb-transposed +tags: telerik, blazor, grid, transposed +ticketid: 1569198, 1639288, 1660386 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +This KB article answers the following questions: + +* How to transpose the data Grid component? +* How to convert the Grid columns to rows and the Grid rows to columns? +* How to achieve a horizontal Grid configuration? +* How to switch the Grid orientation? The model properties should display vertically and the model values should display horizontally. + +## Solution + +The Telerik Grid for Blazor does not support transposing. A transposed Grid requires a different architecture, implementation and UI. Thus, a transposed Grid must be a separate component, such as the [Telerik PropertyGrid for Blazor](https://feedback.telerik.com/blazor/1468343-propertygrid-property-grid-vertical-oriented-grid-with-cell-labels-in-column-1). Vote for the feature request and follow it to receive future status updates. + +## Suggested Workarounds + +Here are a few possible ways to display transposed data: + +* Use the [Telerik Form component for Blazor]({%slug form-overview%}) instead of a Grid. The Form does not provide Grid features, but it can be databound to a model object and supports editing. +* Render static HTML markup, which uses the Grid CSS classes. This will produce Grid-like UI, but without any additional built-in features. +* Combine the previous two options to achieve a Form that looks like a Grid. Use the Grid's HTML markup in a [Form `FormItemsTemplate`]({%slug form-formitems-formitemstemplate%}). Optionally, remove the [built-in Form submit button by using an empty `` tag]({%slug form-formitems-buttons%}). + +Alternatively, shape the data structure, so that it's suitable to display in a regular non-transposed Grid. + +The following example demonstrates all options. + +>caption Implement a PropertyGrid or a transposed Grid + +````CSHTML +

Form

+ + + + + + +

Editable HTML Table in Form FormItemsTemplate

+ + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + +
Property Name Editable Value
+
+
+
+
+ + + + + + + @{ int counter = 1; } + + @foreach (IFormItem item in context.Items) + { + + + + + } + +
@item.Field + +
+
+
+
+
+ + + + + +

Readonly HTML Table

+ +
+
+
+
+ + + + + + + + + + + +
Property Name Readonly Value
+
+
+
+
+ + + + + + + @{ + int counter = 1; + foreach (var prop in GridItemProps) + { + + + + + } + } + +
@prop.Name @prop.GetValue(DataItem)
+
+
+
+
+ +

Editable Grid

+ + + + + + + + + + + +@code { + private TelerikGrid? GridRef { get; set; } + + private List GridData { get; set; } = new(); + private List GridItemProps { get; set; } = new(); + + private GridItem DataItem { get; set; } = new GridItem() + { + Id = 1, + Name = "Sample Name 1", + Description = "Dummy Descrition 1", + Quantity = 123, + Active = true + }; + + private void OnGridUpdate(GridCommandEventArgs args) + { + var updatedItem = (GridItem)args.Item; + + DataItem.Active = updatedItem.Active; + DataItem.Description = updatedItem.Description; + DataItem.Id = updatedItem.Id; + DataItem.Name = updatedItem.Name; + DataItem.Quantity = updatedItem.Quantity; + } + + protected override void OnInitialized() + { + GridData = new List() { DataItem }; + + GridItemProps = typeof(GridItem).GetProperties().ToList(); + + base.OnInitialized(); + } + + public class GridItem + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + public string Description { get; set; } = string.Empty; + public int Quantity { get; set; } + public bool Active { get; set; } + } +} +```` + +## See Also + +* [Grid Overview]({%slug grid-overview%}) +* [Form FormItemsTemplate]({%slug form-formitems-formitemstemplate%}) From 5e77e2695cae796a533d507a7d2a7a8ba7abc099 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 6 Aug 2024 18:16:50 +0300 Subject: [PATCH 2/5] Update knowledge-base/grid-transposed.md --- knowledge-base/grid-transposed.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/knowledge-base/grid-transposed.md b/knowledge-base/grid-transposed.md index 5995875839..626bf555af 100644 --- a/knowledge-base/grid-transposed.md +++ b/knowledge-base/grid-transposed.md @@ -48,6 +48,8 @@ The following example demonstrates all options. >caption Implement a PropertyGrid or a transposed Grid ````CSHTML +@using System.Reflection +

Form

Date: Wed, 7 Aug 2024 11:35:00 +0300 Subject: [PATCH 3/5] Update knowledge-base/grid-transposed.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-transposed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-transposed.md b/knowledge-base/grid-transposed.md index 626bf555af..ca24f8f69e 100644 --- a/knowledge-base/grid-transposed.md +++ b/knowledge-base/grid-transposed.md @@ -160,7 +160,7 @@ The following example demonstrates all options. } -

Readonly HTML Table

+

Read-Only HTML Table

From 57f4ac5d9ca81662ac319fd135a73a27ba13d288 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 7 Aug 2024 11:35:08 +0300 Subject: [PATCH 4/5] Update knowledge-base/grid-transposed.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-transposed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-transposed.md b/knowledge-base/grid-transposed.md index ca24f8f69e..d6042937c4 100644 --- a/knowledge-base/grid-transposed.md +++ b/knowledge-base/grid-transposed.md @@ -174,7 +174,7 @@ The following example demonstrates all options. Property Name - Readonly Value + Read-Only Value From 4a87b1f6908b95a078aaa6e33ccc1ac7e678b29a Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 7 Aug 2024 11:36:17 +0300 Subject: [PATCH 5/5] Update knowledge-base/grid-transposed.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-transposed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-transposed.md b/knowledge-base/grid-transposed.md index d6042937c4..46c4ac0073 100644 --- a/knowledge-base/grid-transposed.md +++ b/knowledge-base/grid-transposed.md @@ -24,7 +24,7 @@ res_type: kb This KB article answers the following questions: -* How to transpose the data Grid component? +* How to transpose the data grid component? * How to convert the Grid columns to rows and the Grid rows to columns? * How to achieve a horizontal Grid configuration? * How to switch the Grid orientation? The model properties should display vertically and the model values should display horizontally.