From 97110e69624b1a1807edf3b4642629c045845080 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Mon, 7 Oct 2024 18:45:04 +0300 Subject: [PATCH] docs(Grid):Add KB for small elements in Compact Grid (#2413) * docs(Grid):Add KB for small elements in Compact Grid * Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(Grid): update after review * docs(Grid): remove ShowInEdit --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../grid-compact-grid-with-small-elements.md | 176 ++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 knowledge-base/grid-compact-grid-with-small-elements.md diff --git a/knowledge-base/grid-compact-grid-with-small-elements.md b/knowledge-base/grid-compact-grid-with-small-elements.md new file mode 100644 index 000000000..63aca3322 --- /dev/null +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -0,0 +1,176 @@ +--- +title: Make Compact Grid Elements Smaller +description: How to reduce the size of elements and icons in a Compact Grid. +type: how-to +page_title: How to Make Compact Grid Elements Smaller +slug: grid-compact-grid-with-small-elements +position: +tags: telerik, blazor, grid, compact +ticketid: 1650305 +res_type: kb +--- + +# Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Compact Grid. I want to reduce the size of all elements in the Grid. How can I: +* Change the size of all icons in the Grid? +* Set smaller font size to all elements in the Grid? + +## Solution + +1. Set the [Grid `Class` parameter]({%slug grid-overview%}#grid-parameters) to a custom CSS class. This allows you to target specific Grid instances. +1. Use the defined class to [override the theme styles]({%slug themes-override%}) of the desired elements in the Grid. + +>caption Change Blazor Grid Elements Styles + +````CSHTML +
+
+ + + Small Grid Size + + Export to Excel + + + + + + + + My Command + + + +
+

@CustomCommandResult

+
+ + + Default Grid Size + + Export to Excel + + + + + + + + My Command + + + +
+
+ + + + + + +@code { + private bool ScreenIsSmall { get; set; } + + private void OnMediaQueryChange(bool matchesQuery, bool screenIsSmall) + { + if (matchesQuery && ScreenIsSmall != screenIsSmall) + { + ScreenIsSmall = screenIsSmall; + } + } + + private MarkupString CustomCommandResult; + + private List GridData { get; set; } + + private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args) + { + CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("
Custom command triggered for item {0}", ((Product)args.Item).Id)); + + Console.WriteLine("The Custom command fired. Please wait for the long operation to finish"); + } + + protected override async Task OnInitializedAsync() + { + GridData = new List(); + + var rnd = new Random(); + + for (int i = 1; i <= 30; i++) + { + GridData.Add(new Product + { + Id = i, + Name = "Product name " + i, + Price = (decimal)(rnd.Next(1, 50) * 3.14), + Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date, + Discontinued = i % 5 == 0 + }); + } + + base.OnInitialized(); + } + + public class Product + { + public int Id { get; set; } + public string Name { get; set; } + public decimal Price { get; set; } + public DateTime Released { get; set; } + public bool Discontinued { get; set; } + } +} +```` + +## See Also + +* [Compact Grid]({%slug grid-sizing%}) +* [Customize CSS Theme Styles]({%slug themes-override%})