@@ -190,7 +190,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
+
@@ -199,7 +199,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
+
@@ -208,7 +208,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
+
@@ -324,7 +324,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
@@if (igxName === 'IgxGrid') {
-
+
@@ -333,7 +333,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
}
@@if (igxName === 'IgxTreeGrid') {
-
+
@@ -342,7 +342,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
diff --git a/en/components/list.md b/en/components/list.md
index e9da27c2c8..6fdb988107 100644
--- a/en/components/list.md
+++ b/en/components/list.md
@@ -321,6 +321,47 @@ toggleFavorite(item: IgxListItem) {
}
```
+Let's also allow the user to choose the display density of the list by using its [`displayDensity`]({environment:angularApiUrl}/classes/igxlistcomponent.html#displaydensity) input. We will do this by importing the `IgxButtonGroupModule` and using the [**IgxButtonGroup**](buttonGroup.md) to display all density values. This way whenever one gets selected, we will update our own **density** property that is bound to the [`displayDensity`]({environment:angularApiUrl}/classes/igxlistcomponent.html#displaydensity) of the list.
+
+```typescript
+// app.module.ts
+...
+import { IgxButtonGroupModule } from 'igniteui-angular';
+
+@NgModule({
+ imports: [..., IgxButtonGroupModule]
+})
+```
+
+```html
+
+
+
+...
+
+ ...
+
+```
+
+```typescript
+// contacts.component.ts
+
+public density = "comfortable";
+public displayDensities;
+
+public ngOnInit() {
+this.displayDensities = [
+ { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+ { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+ { label: 'compact', selected: this.density === 'compact', togglable: true }
+];
+}
+
+public selectDensity(event) {
+ this.density = this.displayDensities[event.index].label;
+}
+```
+
And here's the result of all that work:
diff --git a/jp/components/grids_templates/excel_style_filtering.md b/jp/components/grids_templates/excel_style_filtering.md
index 4f9010b576..761a76dfd5 100644
--- a/jp/components/grids_templates/excel_style_filtering.md
+++ b/jp/components/grids_templates/excel_style_filtering.md
@@ -30,7 +30,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Excel ライク
#### デモ
@@if (igxName === 'IgxGrid') {
-
+
@@ -39,7 +39,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Excel ライク
}
@@if (igxName === 'IgxTreeGrid') {
-
+
@@ -48,7 +48,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Excel ライク
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
@@ -193,7 +193,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
@@if (igxName === 'IgxGrid') {
-
+
@@ -202,7 +202,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
}
@@if (igxName === 'IgxTreeGrid') {
-
+
@@ -211,7 +211,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
@@ -327,7 +327,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
@@if (igxName === 'IgxGrid') {
-
+
@@ -336,7 +336,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
}
@@if (igxName === 'IgxTreeGrid') {
-
+
@@ -345,7 +345,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
diff --git a/jp/components/list.md b/jp/components/list.md
index 755baccd24..24b11ce683 100644
--- a/jp/components/list.md
+++ b/jp/components/list.md
@@ -320,6 +320,47 @@ toggleFavorite(item: IgxListItem) {
}
```
+Let's also allow the user to choose the display density of the list by using its [`displayDensity`]({environment:angularApiUrl}/classes/igxlistcomponent.html#displaydensity) input. We will do this by importing the `IgxButtonGroupModule` and using the [**IgxButtonGroup**](buttonGroup.md) to display all density values. This way whenever one gets selected, we will update our own **density** property that is bound to the [`displayDensity`]({environment:angularApiUrl}/classes/igxlistcomponent.html#displaydensity) of the list.
+
+```typescript
+// app.module.ts
+...
+import { IgxButtonGroupModule } from 'igniteui-angular';
+
+@NgModule({
+ imports: [..., IgxButtonGroupModule]
+})
+```
+
+```html
+
+
+
+...
+
+ ...
+
+```
+
+```typescript
+// contacts.component.ts
+
+public density = "comfortable";
+public displayDensities;
+
+public ngOnInit() {
+this.displayDensities = [
+ { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+ { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+ { label: 'compact', selected: this.density === 'compact', togglable: true }
+];
+}
+
+public selectDensity(event) {
+ this.density = this.displayDensities[event.index].label;
+}
+```
+
結果は以下のようになります。
diff --git a/kr/components/grids_templates/excel_style_filtering.md b/kr/components/grids_templates/excel_style_filtering.md
index 70320d1142..f132c8dd62 100644
--- a/kr/components/grids_templates/excel_style_filtering.md
+++ b/kr/components/grids_templates/excel_style_filtering.md
@@ -27,7 +27,7 @@ The @@igComponent component in Ignite UI for Angular provides filter UI similar
#### Demo
@@if (igxName === 'IgxGrid') {
-
+
@@ -36,7 +36,7 @@ The @@igComponent component in Ignite UI for Angular provides filter UI similar
}
@@if (igxName === 'IgxTreeGrid') {
-
+
@@ -45,7 +45,7 @@ The @@igComponent component in Ignite UI for Angular provides filter UI similar
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
@@ -190,7 +190,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
@@if (igxName === 'IgxGrid') {
-
+
@@ -199,7 +199,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
}
@@if (igxName === 'IgxTreeGrid') {
-
+
@@ -208,7 +208,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
@@ -324,7 +324,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
@@if (igxName === 'IgxGrid') {
-
+
@@ -333,7 +333,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
}
@@if (igxName === 'IgxTreeGrid') {
-
+
@@ -342,7 +342,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
diff --git a/kr/components/list.md b/kr/components/list.md
index 553913c062..059d5eac4f 100644
--- a/kr/components/list.md
+++ b/kr/components/list.md
@@ -322,6 +322,47 @@ toggleFavorite(item: IgxListItem) {
}
```
+Let's also allow the user to choose the display density of the list by using its [`displayDensity`]({environment:angularApiUrl}/classes/igxlistcomponent.html#displaydensity) input. We will do this by importing the `IgxButtonGroupModule` and using the [**IgxButtonGroup**](buttonGroup.md) to display all density values. This way whenever one gets selected, we will update our own **density** property that is bound to the [`displayDensity`]({environment:angularApiUrl}/classes/igxlistcomponent.html#displaydensity) of the list.
+
+```typescript
+// app.module.ts
+...
+import { IgxButtonGroupModule } from 'igniteui-angular';
+
+@NgModule({
+ imports: [..., IgxButtonGroupModule]
+})
+```
+
+```html
+
+
+
+...
+
+ ...
+
+```
+
+```typescript
+// contacts.component.ts
+
+public density = "comfortable";
+public displayDensities;
+
+public ngOnInit() {
+this.displayDensities = [
+ { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+ { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+ { label: 'compact', selected: this.density === 'compact', togglable: true }
+];
+}
+
+public selectDensity(event) {
+ this.density = this.displayDensities[event.index].label;
+}
+```
+
And here's the result of all that work: