diff --git a/knowledge-base/grid-transposed.md b/knowledge-base/grid-transposed.md new file mode 100644 index 0000000000..46c4ac0073 --- /dev/null +++ b/knowledge-base/grid-transposed.md @@ -0,0 +1,272 @@ +--- +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 +@using System.Reflection + +

Form

+ + + + + + +

Editable HTML Table in Form FormItemsTemplate

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

Read-Only HTML Table

+ +
+
+
+
+ + + + + + + + + + + +
Property Name Read-Only 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%})