Skip to content

Commit 97110e6

Browse files
NansiYanchevadimodi
NansiYancheva
and
dimodi
authored
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 <[email protected]> * Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/grid-compact-grid-with-small-elements.md Co-authored-by: Dimo Dimov <[email protected]> * docs(Grid): update after review * docs(Grid): remove ShowInEdit --------- Co-authored-by: Dimo Dimov <[email protected]>
1 parent fb0cab9 commit 97110e6

File tree

1 file changed

+176
-0
lines changed

1 file changed

+176
-0
lines changed

‎knowledge-base/grid-compact-grid-with-small-elements.md‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
---
2+
title: Make Compact Grid Elements Smaller
3+
description: How to reduce the size of elements and icons in a Compact Grid.
4+
type: how-to
5+
page_title: How to Make Compact Grid Elements Smaller
6+
slug: grid-compact-grid-with-small-elements
7+
position:
8+
tags: telerik, blazor, grid, compact
9+
ticketid: 1650305
10+
res_type: kb
11+
---
12+
13+
# Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product</td>
19+
<td>Grid for Blazor</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
24+
## Description
25+
26+
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:
27+
* Change the size of all icons in the Grid?
28+
* Set smaller font size to all elements in the Grid?
29+
30+
## Solution
31+
32+
1. Set the [Grid `Class` parameter]({%slug grid-overview%}#grid-parameters) to a custom CSS class. This allows you to target specific Grid instances.
33+
1. Use the defined class to [override the theme styles]({%slug themes-override%}) of the desired elements in the Grid.
34+
35+
>caption Change Blazor Grid Elements Styles
36+
37+
````CSHTML
38+
<div>
39+
<div class="demo-small-grid">
40+
<TelerikGrid Size="@ThemeConstants.Grid.Size.Small"
41+
Data="@GridData"
42+
Sortable="true"
43+
PageSize="5"
44+
Pageable="true"
45+
Resizable="true"
46+
FilterMode="@GridFilterMode.FilterRow"
47+
Class="small-grid">
48+
<GridToolBarTemplate>
49+
<span>Small Grid Size</span>
50+
<span class="k-toolbar-spacer"></span>
51+
<GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
52+
</GridToolBarTemplate>
53+
<GridColumns>
54+
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
55+
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
56+
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
57+
<GridColumn Field="@nameof(Product.Discontinued)" />
58+
<GridCommandColumn>
59+
<GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
60+
</GridCommandColumn>
61+
</GridColumns>
62+
</TelerikGrid>
63+
</div>
64+
<p>@CustomCommandResult</p>
65+
<div class="demo-default-grid">
66+
<TelerikGrid Data="@GridData"
67+
Sortable="true"
68+
PageSize="5"
69+
Pageable="true"
70+
Resizable="true"
71+
FilterMode="@GridFilterMode.FilterRow">
72+
<GridToolBarTemplate>
73+
<span>Default Grid Size</span>
74+
<span class="k-toolbar-spacer"></span>
75+
<GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
76+
</GridToolBarTemplate>
77+
<GridColumns>
78+
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
79+
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
80+
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
81+
<GridColumn Field="@nameof(Product.Discontinued)" />
82+
<GridCommandColumn>
83+
<GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
84+
</GridCommandColumn>
85+
</GridColumns>
86+
</TelerikGrid>
87+
</div>
88+
</div>
89+
90+
<TelerikMediaQuery Media="(max-width: 960px)" OnChange="@(matchesQuery => OnMediaQueryChange(matchesQuery, screenIsSmall: true))" />
91+
<TelerikMediaQuery Media="(min-width: 961px)" OnChange="@(matchesQuery => OnMediaQueryChange(matchesQuery, screenIsSmall: false))" />
92+
93+
<style>
94+
/* reduce the size of the icons */
95+
.small-grid .k-button .k-svg-icon
96+
/* or you can target specific icons
97+
.small-grid .k-svg-i-filter */ {
98+
width: 10px;
99+
height: 10px;
100+
}
101+
102+
/* reduce the size of the button icons */
103+
.small-grid .k-icon-button .k-button-icon {
104+
min-width: 0px;
105+
}
106+
107+
/* reduce the font size of the compact grid */
108+
:root .small-grid {
109+
--kendo-font-size: 9px;
110+
}
111+
112+
/* handle width of both grids */
113+
.demo-small-grid .k-grid,
114+
.demo-default-grid .k-grid {
115+
width: @(ScreenIsSmall ? "100%" : "49%");
116+
}
117+
</style>
118+
119+
@code {
120+
private bool ScreenIsSmall { get; set; }
121+
122+
private void OnMediaQueryChange(bool matchesQuery, bool screenIsSmall)
123+
{
124+
if (matchesQuery && ScreenIsSmall != screenIsSmall)
125+
{
126+
ScreenIsSmall = screenIsSmall;
127+
}
128+
}
129+
130+
private MarkupString CustomCommandResult;
131+
132+
private List<Product> GridData { get; set; }
133+
134+
private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args)
135+
{
136+
CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", ((Product)args.Item).Id));
137+
138+
Console.WriteLine("The Custom command fired. Please wait for the long operation to finish");
139+
}
140+
141+
protected override async Task OnInitializedAsync()
142+
{
143+
GridData = new List<Product>();
144+
145+
var rnd = new Random();
146+
147+
for (int i = 1; i <= 30; i++)
148+
{
149+
GridData.Add(new Product
150+
{
151+
Id = i,
152+
Name = "Product name " + i,
153+
Price = (decimal)(rnd.Next(1, 50) * 3.14),
154+
Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date,
155+
Discontinued = i % 5 == 0
156+
});
157+
}
158+
159+
base.OnInitialized();
160+
}
161+
162+
public class Product
163+
{
164+
public int Id { get; set; }
165+
public string Name { get; set; }
166+
public decimal Price { get; set; }
167+
public DateTime Released { get; set; }
168+
public bool Discontinued { get; set; }
169+
}
170+
}
171+
````
172+
173+
## See Also
174+
175+
* [Compact Grid]({%slug grid-sizing%})
176+
* [Customize CSS Theme Styles]({%slug themes-override%})

0 commit comments

Comments
 (0)