Merge remote-tracking branch 'origin/master' into dkamburov/mrl

en/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') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="grid-sample-1-iframe" src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -36,7 +36,7 @@ The @@igComponent component in Ignite UI for Angular provides filter UI similar
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="tree-grid-sample-1-iframe" src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -45,7 +45,7 @@ The @@igComponent component in Ignite UI for Angular provides filter UI similar
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="hierarchical-grid-sample-1-iframe" src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -190,7 +190,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
 <div class="divider--half"></div>
 
 @@if (igxName === 'IgxGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -199,7 +199,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="tree-grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -208,7 +208,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="hierarchical-grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -324,7 +324,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
 <div class="divider--half"></div>
 
 @@if (igxName === 'IgxGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="grid-sample-2-iframe" src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -333,7 +333,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="tree-grid-sample-2-iframe" src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -342,7 +342,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="hierarchical-grid-sample-2-iframe" src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>

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
+<!--contacts.component.html-->
+
+<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
+...
+<igx-list [displayDensity]="density">
+    ...
+</igx-list>
+```
+
+```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:
 
 <div class="sample-container loading" style="height: 477px">

jp/components/grids_templates/excel_style_filtering.md

@@ -30,7 +30,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Excel ライク
 #### デモ
 
 @@if (igxName === 'IgxGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="grid-sample-1-iframe" src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -39,7 +39,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Excel ライク
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="tree-grid-sample-1-iframe" src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -48,7 +48,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、Excel ライク
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="hierarchical-grid-sample-1-iframe" src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -193,7 +193,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
 <div class="divider--half"></div>
 
 @@if (igxName === 'IgxGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -202,7 +202,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="tree-grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -211,7 +211,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="hierarchical-grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -327,7 +327,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
 <div class="divider--half"></div>
 
 @@if (igxName === 'IgxGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="grid-sample-2-iframe" src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -336,7 +336,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="tree-grid-sample-2-iframe" src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -345,7 +345,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="hierarchical-grid-sample-2-iframe" src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>

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
+<!--contacts.component.html-->
+
+<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
+...
+<igx-list [displayDensity]="density">
+    ...
+</igx-list>
+```
+
+```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;
+}
+```
+
 結果は以下のようになります。
 
 <div class="sample-container loading" style="height: 477px">

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') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="grid-sample-1-iframe" src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -36,7 +36,7 @@ The @@igComponent component in Ignite UI for Angular provides filter UI similar
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="tree-grid-sample-1-iframe" src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -45,7 +45,7 @@ The @@igComponent component in Ignite UI for Angular provides filter UI similar
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:950px">
     <iframe id="hierarchical-grid-sample-1-iframe" src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -190,7 +190,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
 <div class="divider--half"></div>
 
 @@if (igxName === 'IgxGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -199,7 +199,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="tree-grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -208,7 +208,7 @@ In the sample below 'Artist' column have all four features enabled, 'Debut' have
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="hierarchical-grid-sample-2-iframe" data-src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2' width="100%" height="100%" seamless="" frameBorder="0" class="lazyload"></iframe>
 </div>
 <br/>
@@ -324,7 +324,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
 <div class="divider--half"></div>
 
 @@if (igxName === 'IgxGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="grid-sample-2-iframe" src='{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -333,7 +333,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
 </div>
 }
 @@if (igxName === 'IgxTreeGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="tree-grid-sample-2-iframe" src='{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>
@@ -342,7 +342,7 @@ If you want to keep the sorting, moving, pinning and hiding features of the colu
 </div>
 }
 @@if (igxName === 'IgxHierarchicalGrid') {
-<div class="sample-container loading" style="height:850px">
+<div class="sample-container loading" style="height:900px">
     <iframe id="hierarchical-grid-sample-2-iframe" src='{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3' width="100%" height="100%" seamless frameBorder="0" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <br/>

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
+<!--contacts.component.html-->
+
+<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
+...
+<igx-list [displayDensity]="density">
+    ...
+</igx-list>
+```
+
+```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:
 
 <div class="sample-container loading" style="height: 477px">