Skip to content

Commit 16d1404

Browse files
mddragnevmddragnev
authored
Polish grid lite topics (#1805)
1 parent 9b6ce36 commit 16d1404

File tree

4 files changed

+109
-39
lines changed

4 files changed

+109
-39
lines changed

‎doc/en/components/grid-lite/binding.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,15 @@ grid.columns = [...];
4242
```
4343

4444
```razor
45+
<IgbGridLite Data="data" Columns="columns" />
4546
@code {
46-
grid.Data = new List<T>
47+
this.data = new List<T>
4748
{
4849
// records follow
4950
};
5051
5152
// Update the column configuration to represent the new data.
52-
grid.Columns = new List<IgbColumnConfiguration>
53+
this.columns = new List<IgbColumnConfiguration>
5354
{
5455
// column definitions
5556
};
@@ -74,14 +75,15 @@ grid.data = [];
7475
```
7576

7677
```razor
78+
<IgbGridLite Data="data" AutoGenerate="true" Columns="columns" />
79+
7780
@code {
78-
grid.AutoGenerate = true;
7981
8082
// Reset the previous column collection
81-
grid.Columns = new List<IgbColumnConfiguration>();
83+
this.columns = new List<IgbColumnConfiguration>();
8284
8385
// After the new binding the grid will infer the column collection from the bound data.
84-
grid.Data = new List<T>();
86+
this.data = new List<T>();
8587
}
8688
```
8789
<!-- React, WebComponents -->

‎doc/en/components/grid-lite/sorting.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -342,7 +342,7 @@ After the grid applies the new sorting state, a `sorted` event is emitted. It co
342342
grid.addEventListener('sorting', (event: CustomEvent<SortExpression<T>>) => { ... });
343343
grid.addEventListener('sorted', (event: CustomEvent<SortExpression<T>>) => { ... });
344344
```
345-
<!-- End: React, WebComponents -->
345+
<!-- end: React, WebComponents -->
346346

347347
<!-- Blazor -->
348348
When a sorting operation is performed through the UI, the component raises `Sorting` and `Sorted` events. The `Sorting` event is cancellable and if cancelled will stop the current sort operation.
@@ -369,6 +369,7 @@ After the grid applies the new sorting state, a `Sorted` event is raised. It con
369369
In the following sample, when you try to sort the **Name** and **Rating** columns, the operation will be cancelled. Watch the event log below to see it in action.
370370

371371
`sample="/{GridLiteSample}/sort-config-events", height="600", alt="{Platform} {GridLiteTitle} Sorting Config Events"`
372+
372373
<!-- React, WebComponents -->
373374
## Remote sort operations
374375

‎doc/en/components/grid-lite/theming.md‎

Lines changed: 12 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -38,43 +38,22 @@ In the sample below, you can preview all the default base themes.
3838

3939
## Creating Custom Themes
4040

41-
Aside from the default themes shipped with the {GridLiteTitle} package, you can also create and modify your own to match your project identity and branding.
41+
Aside from the default themes shipped with the {GridLiteTitle} package, you can further customize the look and feel of your data grid by using an alternate set of CSS custom properties.
4242

43-
---
44-
45-
Refer to the <a href="https://github.com/IgniteUI/igniteui-theming#readme" target="_blank">Ignite UI theming package</a> wiki
46-
for documentation and usage of both the SCSS and CSS interfaces.
47-
48-
---
43+
Refer to the [theming topic](../grids/theming-grid.md) for more details.
4944

50-
```scss
51-
@use 'node_modules/igniteui-theming' as *;
52-
53-
// Our dark theme
54-
$my_dark_palette: palette(
55-
$primary: #dab785,
56-
$secondary: #d5896f,
57-
$surface: #031d44,
58-
$gray: #04395e,
59-
);
60-
61-
// Our light theme
62-
$my-light-palette: palette(
63-
$primary: #c1292e,
64-
$secondary: #f1d302,
65-
$surface: #fdfffc,
66-
$gray: #235789,
67-
);
68-
69-
.custom-light {
70-
@include palette($my_light_palette);
71-
@include typography('"Roboto Condensed", sans-serif', $bootstrap-type-scale);
45+
```css
46+
.grid-sample {
47+
--header-background: #494949;
48+
--header-text-color: #f2c43c;
49+
--cell-active-border-color: #f2c43c;
50+
--row-hover-background: #707070;
51+
--row-hover-text-color: #f2c43c;
7252
}
53+
```
7354

74-
.custom-dark {
75-
@include palette($my_dark_palette);
76-
@include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale);
77-
}
55+
```razor
56+
<IgbGridLite class="grid-lite-sample" />
7857
```
7958

8059
Here is an example showcasing the custom theming from above.

‎doc/en/components/grids/theming-grid.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,94 @@ In addition to predefined themes and palettes, you can further customize the loo
2121
</head>
2222
```
2323

24+
## Available Theming Properties
25+
26+
| Property name | Type | Description |
27+
|------------------------------------------|--------------------------|----------------------------------------------------------------------------------------------|
28+
| --grid-elevation | number between 0-24 | The elevation level, to be used for the grid |
29+
| --drag-elevation | number between 0-24 | The elevation level, to be used for movable elements (ex. column header) |
30+
| --grouparea-color | color | The grid group area text color |
31+
| --grouparea-background | color | The grid group area text color |
32+
| --drop-area-text-color | color | The drop area text color |
33+
| --drop-area-icon-color | color | The drop area icon color |
34+
| --drop-area-background | color | The drop area background color |
35+
| --drop-area-on-drop-background | color | The drop area background on drop color |
36+
| --header-background | color | The grid header background color |
37+
| --header-text-color | color | The grid header text color |
38+
| --header-selected-background | color | The grid header background color when selected (ex. column selection). |
39+
| --header-selected-text-color | color | The grid header text color when selected (ex. column selection). |
40+
| --sortable-header-icon-hover-color | color | The icon color on hover in grid header when the column is sortable. |
41+
| --sorted-header-icon-color | color | The sorted table header icon color |
42+
| --header-border-width | border-width | The border width used for header borders. |
43+
| --header-border-style | border-style | The border style used for header borders. Can be 'dotted', 'dashed' or 'solid' |
44+
| --header-border-color | color | The color used for header borders. |
45+
| --ghost-header-background | color | The dragged header background color. |
46+
| --ghost-header-text-color | color | The dragged header text color. |
47+
| --ghost-header-icon-color | color | The dragged header icon color. |
48+
| --filtering-background-and | color | The background color of advanced filtering "AND" condition. |
49+
| --filtering-background-or | color | The background color on focus/selected of advanced filtering "AND" condition. |
50+
| --filtering-background-and--focus | color | The background color of advanced filtering "OR" condition. |
51+
| --filtering-background-or--focus | color | The background color on focus/selected of advanced filtering "OR" condition. |
52+
| --grid-border-color | color | The border color surrounding the grid. |
53+
| --content-background | color | The grid body background color. |
54+
| --content-text-color | color | The grid body text color. |
55+
| --row-odd-background | color | The background color of odd rows. |
56+
| --row-even-background | color | The background color of even rows. |
57+
| --row-odd-text-color | color | The text color of odd rows. |
58+
| --row-even-text-color | color | The text color of even rows. |
59+
| --row-selected-background | color | The selected row background color. |
60+
| --tree-selected-filtered-row-text-color | color | The selected/filtered row text color |
61+
| --row-selected-text-color | color | The selected row text color. |
62+
| --cell-selected-within-background | color | The background of the selected cell inside a selected row/column. |
63+
| --cell-selected-within-text-color | color | The color of the selected cell inside a selected row/column. |
64+
| --row-selected-hover-background | color | The selected row hover background. |
65+
| --row-selected-hover-text-color | color | The selected row hover tex |
66+
| --row-hover-background | color | The hover row background color. |
67+
| --row-hover-text-color | color | The hover row text color. |
68+
| --row-border-color | color | The border color between the grid body rows. |
69+
| --pinned-border-width | border-width | The border width of the pinned rows/columns. |
70+
| --pinned-border-style | border-style | The border style of the pinned rows/columns. Can be 'dotted', 'dashed' or 'solid' |
71+
| --pinned-border-color | color | The border color of the pinned rows/columns. |
72+
| --cell-active-border-color | color | The active(focused) cell border color. |
73+
| --cell-selected-background | color | The selected cell background color. |
74+
| --tree-selected-filtered-cell-text-color | color | The selected/filtered cell text color |
75+
| --cell-selected-text-color | color | The selected cell text color. |
76+
| --cell-editing-background | color | The background color of a cell in edit mode. |
77+
| --edit-mode-color | color | The text color in edit mode |
78+
| --edited-row-indicator | color | The indicator's color of edited row. |
79+
| --cell-new-color | color | The text color of a new, unedited cell. Used when adding new row in a grid. |
80+
| --cell-edited-value-color | color | The color of cell edited value. |
81+
| --cell-disabled-color | color | The text color of a disabled cell. |
82+
| --resize-line-color | color | The grid header resize line color. |
83+
| --drop-indicator-color | color | The color of the drop indicator. |
84+
| --group-label-column-name-text | color | The grid group row column name text color. |
85+
| --group-label-icon | color | The grid group row icon color. |
86+
| --group-label-text | color | The grid group row text color. |
87+
| --expand-all-icon-color | color | The grid header expand all group rows icon color. |
88+
| --expand-all-icon-hover-color | color | The grid header expand all group rows icon hover color. |
89+
| --expand-icon-color | color | The grid row expand icon color. |
90+
| --expand-icon-hover-color | color | The grid row expand icon hover color. |
91+
| --active-expand-icon-color | color | The drop area background on drop color. |
92+
| --active-expand-icon-hover-color | color | The drop area background on drop color. |
93+
| --group-count-background | color | The grid group row cont badge background color. |
94+
| --group-count-text-color | color | The grid group row cont badge text color. |
95+
| --group-row-background | color | The grid group row background color. |
96+
| --group-row-selected-background | color | The drop area background on drop color. |
97+
| --filtering-header-background | color | The background color of the filtered column header. |
98+
| --filtering-header-text-color | color | The text color color of the filtered column header. |
99+
| --filtering-row-background | color | The background color of the filtering row. |
100+
| --filtering-row-text-color | color | The text-color color of the filtering row. |
101+
| --tree-filtered-text-color | color | The grouping row background color on focus. |
102+
| --body-summaries-background | color | The background color of the summary groups located the body. |
103+
| --body-summaries-text-color | color | The text color of the summary groups located the body. |
104+
| --root-summaries-background | color | The background color of the summary groups located the footer. |
105+
| --root-summaries-text-color | color | The text color of the summary groups located the footer. |
106+
| --row-highlight | color | The grid row highlight color. |
107+
| --row-ghost-background | color | The background color of the dragged row. |
108+
| --row-drag-color | color | The color of the drag handle. |
109+
| --drop-area-border-radius | number between 0 and 1 | The border radius used for drop-area. Can be a fraction between 0 and 1, pixels, or percent. |
110+
111+
24112
## Additional Resources
25113

26114
<!-- Angular -->

0 commit comments

Comments
 (0)