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
+
+
+
+
+ Product |
+ Grid 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%})