From 292333142634477dd24c1152c56aac6fa7e2bbc6 Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Fri, 4 Oct 2024 17:35:37 +0300 Subject: [PATCH 1/7] docs(Grid):Add KB for small elements in Compact Grid --- .../grid-compact-grid-with-small-elements.md | 224 ++++++++++++++++++ 1 file changed, 224 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 0000000000..2e03955eb3 --- /dev/null +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -0,0 +1,224 @@ +--- +title: Make Compact Grid Elements Smaller +description: How to make all elements in a Compact Grid smaller. +type: how-to +page_title: Make Compact Grid elements smaller +slug: grid-compact-grid-with-small-elements +position: +tags: telerik, blazor, grid, compact, elements +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 instance. +1. Use the defined class to [override the theme styles]({%slug themes-override%}). +1. Set the required CSS styles to the desired elements in the Grid. + +>caption Change Blazor Grid Elements Styles + +````CSHTML +
+
+ + + Small Grid Size + + Export to Excel + + + + + + + + Edit + Update + Cancel + + + +
+
+ + + Default Grid Size + + Export to Excel + + + + + + + + Edit + Update + Cancel + + + +
+
+ + + + + + +@code { + private bool ScreenIsSmall { get; set; } + + private void OnMediaQueryChange(bool matchesQuery, bool screenIsSmall) + { + if (matchesQuery && ScreenIsSmall != screenIsSmall) + { + ScreenIsSmall = screenIsSmall; + } + } + + private List GridData { get; set; } + + private async Task MyOnUpdateHandler(GridCommandEventArgs args) + { + Product theUpdatedItem = (Product)args.Item; + await MyService.Update(theUpdatedItem); + await GetGridData(); + } + + private async Task GetGridData() + { + GridData = await MyService.Read(); + } + + protected override async Task OnInitializedAsync() + { + await GetGridData(); + } + + public static class MyService + { + private static List _data { get; set; } = new List(); + + public static async Task> Read() + { + if (_data.Count < 1) + { + var rnd = new Random(); + for (int i = 1; i < 50; i++) + { + _data.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 + }); + } + } + + return await Task.FromResult(_data); + } + + public static async Task Update(Product itemToUpdate) + { + var index = _data.FindIndex(i => i.Id == itemToUpdate.Id); + if (index != -1) + { + _data[index] = itemToUpdate; + } + } + } + + 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%}) From af962205ff14e5b002e99145310505c894d17234 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Mon, 7 Oct 2024 09:29:41 +0300 Subject: [PATCH 2/7] Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-compact-grid-with-small-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-compact-grid-with-small-elements.md b/knowledge-base/grid-compact-grid-with-small-elements.md index 2e03955eb3..dee3e08a96 100644 --- a/knowledge-base/grid-compact-grid-with-small-elements.md +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -2,7 +2,7 @@ title: Make Compact Grid Elements Smaller description: How to make all elements in a Compact Grid smaller. type: how-to -page_title: Make Compact Grid elements smaller +page_title: How to Make Compact Grid Elements Smaller slug: grid-compact-grid-with-small-elements position: tags: telerik, blazor, grid, compact, elements From 30f1c3576457143486e6186297a8feb4c4ed4822 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Mon, 7 Oct 2024 09:29:48 +0300 Subject: [PATCH 3/7] Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-compact-grid-with-small-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-compact-grid-with-small-elements.md b/knowledge-base/grid-compact-grid-with-small-elements.md index dee3e08a96..a69c493a12 100644 --- a/knowledge-base/grid-compact-grid-with-small-elements.md +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -5,7 +5,7 @@ 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, elements +tags: telerik, blazor, grid, compact ticketid: 1650305 res_type: kb --- From 8ae363b764bf897d3d4cfdc240fa11c622b7e2e0 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Mon, 7 Oct 2024 09:29:57 +0300 Subject: [PATCH 4/7] Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-compact-grid-with-small-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-compact-grid-with-small-elements.md b/knowledge-base/grid-compact-grid-with-small-elements.md index a69c493a12..7140bd0093 100644 --- a/knowledge-base/grid-compact-grid-with-small-elements.md +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -23,7 +23,7 @@ res_type: kb ## 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: +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? From 3988ea84a5043dd2f96935824e6aed2032946365 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Mon, 7 Oct 2024 09:30:03 +0300 Subject: [PATCH 5/7] Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-compact-grid-with-small-elements.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-compact-grid-with-small-elements.md b/knowledge-base/grid-compact-grid-with-small-elements.md index 7140bd0093..485fb85db7 100644 --- a/knowledge-base/grid-compact-grid-with-small-elements.md +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -29,7 +29,7 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp ## Solution -1. Set [the Grid `Class` parameter]({%slug grid-overview%}#grid-parameters) to a custom CSS class. This allows you to target specific Grid instance. +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%}). 1. Set the required CSS styles to the desired elements in the Grid. From 89ef195ad7f7d0ffd976a762a3f7f42a4a170286 Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Mon, 7 Oct 2024 10:53:21 +0300 Subject: [PATCH 6/7] docs(Grid): update after review --- .../grid-compact-grid-with-small-elements.md | 144 ++++++------------ 1 file changed, 48 insertions(+), 96 deletions(-) diff --git a/knowledge-base/grid-compact-grid-with-small-elements.md b/knowledge-base/grid-compact-grid-with-small-elements.md index 485fb85db7..662104b20d 100644 --- a/knowledge-base/grid-compact-grid-with-small-elements.md +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -1,6 +1,6 @@ --- title: Make Compact Grid Elements Smaller -description: How to make all elements in a Compact Grid 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 @@ -30,24 +30,20 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp ## 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%}). -1. Set the required CSS styles to the desired elements in the Grid. +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 @@ -55,42 +51,36 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp Export to Excel - - - - - - Edit - Update - Cancel + + + + + + My Command
+

@CustomCommandResult

+ FilterMode="@GridFilterMode.FilterRow"> Default Grid Size Export to Excel - - - - - - Edit - Update - Cancel + + + + + + My Command @@ -102,44 +92,28 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp @code { @@ -153,58 +127,36 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp } } + private MarkupString CustomCommandResult; + private List GridData { get; set; } - private async Task MyOnUpdateHandler(GridCommandEventArgs args) + private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args) { - Product theUpdatedItem = (Product)args.Item; - await MyService.Update(theUpdatedItem); - await GetGridData(); - } + CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("
Custom command triggered for item {0}", ((Product)args.Item).Id)); - private async Task GetGridData() - { - GridData = await MyService.Read(); + Console.WriteLine("The Custom command fired. Please wait for the long operation to finish"); } protected override async Task OnInitializedAsync() { - await GetGridData(); - } + GridData = new List(); - public static class MyService - { - private static List _data { get; set; } = new List(); + var rnd = new Random(); - public static async Task> Read() + for (int i = 1; i <= 30; i++) { - if (_data.Count < 1) - { - var rnd = new Random(); - for (int i = 1; i < 50; i++) + GridData.Add(new Product { - _data.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 - }); - } - } - - return await Task.FromResult(_data); + 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 + }); } - public static async Task Update(Product itemToUpdate) - { - var index = _data.FindIndex(i => i.Id == itemToUpdate.Id); - if (index != -1) - { - _data[index] = itemToUpdate; - } - } + base.OnInitialized(); } public class Product From 3d1dec16dee7dfe71eb081659e56442dfbf5735d Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Mon, 7 Oct 2024 18:34:07 +0300 Subject: [PATCH 7/7] docs(Grid): remove ShowInEdit --- knowledge-base/grid-compact-grid-with-small-elements.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/grid-compact-grid-with-small-elements.md b/knowledge-base/grid-compact-grid-with-small-elements.md index 662104b20d..63aca3322d 100644 --- a/knowledge-base/grid-compact-grid-with-small-elements.md +++ b/knowledge-base/grid-compact-grid-with-small-elements.md @@ -56,7 +56,7 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp - My Command + My Command @@ -80,7 +80,7 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp - My Command + My Command