Add conditionally disabled rows - grids samples

live-editing/configs/GridConfigGenerator.ts

@@ -55,6 +55,9 @@ import {
 import {
     GridConditionalCellStyleComponent
 } from "../../src/app/grid/grid-conditional-cell-style/grid-conditional-cell-style.component";
+import {
+    GridConditionalRowSelectorsComponent
+} from "../../src/app/grid/grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component";
 import { ContextmenuComponent } from "../../src/app/grid/grid-contextmenu-sample/contextmenu/contextmenu.component";
 import {
     GridContextmenuSampleComponent
@@ -79,6 +82,7 @@ import {
 } from "../../src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component";
 import {
     GridExcelStyleFilteringLoadOnDemandComponent
+// tslint:disable-next-line: max-line-length
 } from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component";
 import { RemoteValuesService } from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service";
 import {
@@ -124,7 +128,8 @@ import {
 import {
     GridMultiRowLayoutConfigurationComponent
 } from "../../src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component";
-import { GridMultiRowLayoutStylingComponent
+import {
+    GridMultiRowLayoutStylingComponent
 } from "../../src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component";
 import { GridMultiRowLayoutComponent } from "../../src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component";
 import { GridNestedDataBindComponent } from "../../src/app/grid/grid-nested-data-binding/grid-nested-data-bind";
@@ -189,8 +194,6 @@ import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
 
-// tslint:enable:max-line-length
-
 export class GridConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
@@ -1034,6 +1037,17 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: GridConditionalRowSelectorsComponent,
+            additionalFiles: ["/src/app/data/customers.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [
+                    IgxGridModule, GridConditionalRowSelectorsComponent, IgxCheckboxModule],
+                ngDeclarations: [GridConditionalRowSelectorsComponent],
+                ngImports: [IgxGridModule, IgxCheckboxModule],
+                ngProviders: []
+            })
+        }));
         return configs;
     }
 }

live-editing/configs/HierarchicalGridConfigGenerator.ts

@@ -26,13 +26,18 @@ import { HGridColumnMovingSampleComponent } from "../../src/app/hierarchical-gri
 import { HGridPinningSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-pinning.component";
 import { HGridToolbarPinningComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component";
 import { HGridColumnResizingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-resizing/hierarchical-grid-resizing.component";
+import {
+    HGridConditionalRowSelectorsComponent
+} from "../../src/app/hierarchical-grid/hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component";
 import { HGridCustomKBNavigationComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-custom-kb-navigation/hierarchical-grid-custom-kb-navigation-sample.component";
 import { HGridDisplayDensitySampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-display-density/hierarchical-grid-density.component";
 import { HGridEditingEventsComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing-events/hierarchical-grid-editing-events.component";
 import { HGridEditingStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component";
 import { HGridEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component";
 import { HierarchicalGridExcelStyleFilteringLoadOnDemandComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component";
-import { RemoteValuesService } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service";
+import {
+    RemoteValuesService
+} from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service";
 import {
     HGridExcelStyleFilteringSample1Component
 } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component";
@@ -67,7 +72,7 @@ import { HGridDragSampleComponent } from "../../src/app/hierarchical-grid/hierar
 import { HGridRowEditStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component";
 import { HGridRowEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-editing/hierarchical-grid-row-editing.component";
 import { HGridRowReorderComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component";
-import { HGridSelectionTemplateNumbersSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component"
+import { HGridSelectionTemplateNumbersSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component";
 import { HGridSelectionSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component";
 import { HGridSortingStylingComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sorting-styling/hierarchical-grid-sorting-styling.component";
 import { HGridContextmenuComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sorting/hgrid-contextmenu/hgrid-contextmenu.component";
@@ -580,9 +585,17 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
         }));
 
         configs.push(new Config({
-            additionalFiles: [
-                "/src/app/hierarchical-grid/data.ts"
-            ],
+            additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxHierarchicalGridModule, HGridConditionalRowSelectorsComponent, IgxCheckboxModule],
+                ngDeclarations: [HGridConditionalRowSelectorsComponent],
+                ngImports: [IgxHierarchicalGridModule, IgxCheckboxModule]
+            }),
+            component: HGridConditionalRowSelectorsComponent
+        }));
+
+        configs.push(new Config({
+            additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: [IgxCheckboxModule, IgxHierarchicalGridModule, HGridSelectionTemplateNumbersSampleComponent],
                 ngDeclarations: [HGridSelectionTemplateNumbersSampleComponent],

live-editing/configs/TreeGridConfigGenerator.ts

@@ -37,6 +37,9 @@ import { TreeGridPinningToolbarSampleComponent } from "../../src/app/tree-grid/t
 import { TreeGridCellSelectionComponent } from "../../src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component";
 import { TreeGridColumnResizingSampleComponent } from "../../src/app/tree-grid/tree-grid-column-resizing-sample/tree-grid-column-resizing-sample.component";
 import { TreeGridConditionalCellStyleComponent } from "../../src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component";
+import {
+    TreeGridConditionalRowSelectorsSampleComponent
+} from "../../src/app/tree-grid/tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component";
 import { TreeGridDisplaydensitySampleComponent } from "../../src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component";
 import { TreeGridEditingEventsComponent } from "../../src/app/tree-grid/tree-grid-editing-events/tree-grid-editing-events.component";
 import { TreeGridEditingSampleComponent } from "../../src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component";
@@ -791,6 +794,17 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        // TreeGrid Conditional Row Selection Template actions sample
+        configs.push(new Config({
+            additionalFiles: ["/src/app/tree-grid/data/employees-flat.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxTreeGridModule, TreeGridConditionalRowSelectorsSampleComponent, IgxCheckboxModule],
+                ngDeclarations: [TreeGridConditionalRowSelectorsSampleComponent],
+                ngImports: [IgxTreeGridModule, IgxCheckboxModule]
+            }),
+            component: TreeGridConditionalRowSelectorsSampleComponent
+        }));
+
         // TreeGrid Row Selectors Template - Numbers
         configs.push(new Config({
             additionalFiles: [

src/app/grid/grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component.html

@@ -0,0 +1,22 @@
+<div class="grid__wrapper">
+    <igx-grid [data]="data"
+            height="530px"
+            width="100%"
+            cellSelection="none"
+            primaryKey="ID"
+            rowSelection="multiple" [paging]="true"
+            (onRowSelectionChange)="onRowSelect($event)">
+        <igx-column field="ContactName" width="20%"></igx-column>
+        <igx-column field="Country" width="20%"></igx-column>
+        <igx-column field="City" width="20%" dataType="number"></igx-column>
+        <igx-column field="PostalCode" width="20%" dataType="number"></igx-column>
+        <igx-column field="CompanyName" width="20%" dataType="number"></igx-column>
+
+        <ng-template igxRowSelector let-rowContext>
+            <igx-checkbox [readonly]="true" [checked]="rowContext.selected"
+                [disabled]="!isSelectionAllowed(rowContext.rowID)"
+                [aria-label]="rowContext.selected ? 'Deselect row' : 'Select row'">
+            </igx-checkbox>
+        </ng-template>
+    </igx-grid>
+</div>

src/app/grid/grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component.scss

@@ -0,0 +1,4 @@
+.grid__wrapper {
+    margin: 0 16px;
+    padding-top: 10px;
+}

src/app/grid/grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component.ts

@@ -0,0 +1,45 @@
+import { Component } from "@angular/core";
+import { IRowSelectionEventArgs } from "igniteui-angular";
+import { DATA } from "../../data/customers";
+
+@Component({
+    selector: "grid-conditional-row-selectors",
+    styleUrls: ["./grid-conditional-row-selectors-sample.component.scss"],
+    templateUrl: "grid-conditional-row-selectors-sample.component.html"
+})
+
+export class GridConditionalRowSelectorsComponent {
+    public data: any[];
+    public disabledCollection: string[] = [];
+
+    constructor() {
+        this.data = DATA;
+        this.data.filter(dataItem => dataItem.ID.indexOf("A") === -1).map((item) => {
+            this.disabledCollection.push(item.ID);
+        });
+    }
+
+    public isSelectionAllowed(newRowID: string) {
+        return this.disabledCollection.indexOf(newRowID) === -1;
+    }
+
+    public onRowSelect(event: IRowSelectionEventArgs) {
+        if (!event.added.length && event.removed.length) {
+            // ignore deselect
+            return;
+        }
+        const originalAddedLength = event.added.length;
+        event.added = event.added.filter(x => this.isSelectionAllowed(x));
+
+        // update selection to contain only allowed rows
+        event.newSelection = event.newSelection.filter(x => this.isSelectionAllowed(x));
+
+        // cleanup selection if all conditionally selectable rows are already selected
+        if (event.added.length === 0
+            && !event.newSelection.filter(x => event.oldSelection.indexOf(x) === -1).length
+            && originalAddedLength > 1) {
+                // all selected from header, deselect instead
+                event.newSelection = [];
+        }
+    }
+}

src/app/grid/grid-routes-data.ts

@@ -77,5 +77,6 @@ export const gridsRoutesData = {
     "grid-filtering-style": { displayName: "Grid Filtering Style", parentName: "Grid" },
     "grid-cell-selection": { displayName: "Grid Cell Selection", parentName: "Grid" },
     "grid-excel-style-filtering-load-on-demand":
-        { displayName: "Grid Excel Style Filtering Load On Demand", parentName: "Grid" }
+        { displayName: "Grid Excel Style Filtering Load On Demand", parentName: "Grid" },
+    "grid-conditional-row-selectors": { displayName: "Grid Conditional Row Selectors", parentName: "Grid" }
 };

src/app/grid/grids-routing.module.ts

@@ -71,6 +71,9 @@ import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-co
 
 import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
 import { GridCellSelectionComponent } from "./grid-cellSelection-sample/grid-cellSelection.component";
+import {
+    GridConditionalRowSelectorsComponent
+} from "./grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component";
 import { GridEditingEventsComponent } from "./grid-editing-events/grid-editing-events.component";
 import { GridEditingStyleSample } from "./grid-editing-style-sample/grid-editing-style-sample.component";
 import { GridMRLCustomNavigationComponent } from "./grid-mrl-custom-navigation/grid-mrl-custom-navigation.component";
@@ -458,6 +461,11 @@ export const gridsRoutes: Routes = [
         component: GridCellSelectionComponent,
         data: gridsRoutesData["grid-cell-selection"],
         path: "grid-cell-selection"
+    },
+    {
+        component: GridConditionalRowSelectorsComponent,
+        data: gridsRoutesData["grid-conditional-row-selectors"],
+        path: "grid-conditional-row-selectors"
     }
 ];
 

src/app/grid/grids.module.ts

@@ -23,6 +23,7 @@ import { GridColumnHidingToolbarSampleComponent } from "./grid-column-hiding-too
 import { GridColumnHidingToolbarStyleComponent } from "./grid-column-hiding-toolbar-style/grid-column-hiding-toolbar-style.component";
 import { GridCompositeDataComponent } from "./grid-composite-data-binding/grid-composite-data.component";
 import { GridConditionalCellStyleComponent } from "./grid-conditional-cell-style/grid-conditional-cell-style.component";
+import { GridConditionalRowSelectorsComponent } from "./grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component";
 import { ContextmenuComponent } from "./grid-contextmenu-sample/contextmenu/contextmenu.component";
 import { GridContextmenuSampleComponent } from "./grid-contextmenu-sample/grid-contextmenu-sample.component";
 import { GridCustomFilteringComponent } from "./grid-custom-filtering/grid-custom-filtering.component";
@@ -95,7 +96,6 @@ import { GridMultiColumnHeaderTemplateComponent } from "./multi-column-header-te
 import { GridMultiColumnHeadersStylingComponent } from "./multi-column-headers-styling/multi-column-headers-styling.component";
 import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-column-headers";
 import { DataService } from "./services/data.service";
-// tslint:enable:max-line-length
 
 @NgModule({
     declarations: [
@@ -179,7 +179,8 @@ import { DataService } from "./services/data.service";
         GridMultiRowLayoutStylingComponent,
         PinningStylingComponent,
         GridGroupByStyling,
-        GridCellSelectionComponent
+        GridCellSelectionComponent,
+        GridConditionalRowSelectorsComponent
     ],
     imports: [
         CommonModule,

src/app/hierarchical-grid/hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component.html

@@ -0,0 +1,40 @@
+<div class="grid__wrapper">
+    <igx-hierarchical-grid [data]="singers"
+                rowSelection="multiple"
+                cellSelection="none"
+                [autoGenerate]="false" height="600px" width="100%" [paging]="true"
+                primaryKey="Artist"
+                (onRowSelectionChange)="onRowSelect($event)">
+        <igx-column field="Artist"></igx-column>
+        <igx-column field="Debut"></igx-column>
+        <igx-column field="GrammyNominations" header="Grammy Nominations"></igx-column>
+        <igx-column field="GrammyAwards" header="Grammy Awards"></igx-column>
+
+        <igx-row-island key="Albums" [autoGenerate]="false" rowSelection="multiple">
+            <igx-column field="Album"></igx-column>
+            <igx-column field="LaunchDate" header="Launch Date"></igx-column>
+            <igx-column field="BillboardReview" header="Billboard Review"></igx-column>
+            <igx-column field="USBillboard200" header="US Billboard 200"></igx-column>
+            <igx-row-island key="Songs" [autoGenerate]="false" rowSelection="multiple">
+                <igx-column field="Number" header="No."></igx-column>
+                <igx-column field="Title"></igx-column>
+                <igx-column field="Released"></igx-column>
+                <igx-column field="Genre"></igx-column>
+            </igx-row-island>
+        </igx-row-island>
+
+        <igx-row-island key="Tours" [autoGenerate]="false" rowSelection="multiple">
+            <igx-column field="Tour"></igx-column>
+            <igx-column field="StartedOn" header="Started on"></igx-column>
+            <igx-column field="Location"></igx-column>
+            <igx-column field="Headliner"></igx-column>
+        </igx-row-island>
+
+        <ng-template igxRowSelector let-rowContext>
+            <igx-checkbox [readonly]="true" [checked]="rowContext.selected"
+                [disabled]="!isSelectionAllowed(rowContext.rowID)"
+                [aria-label]="rowContext.selected ? 'Deselect row' : 'Select row'">
+            </igx-checkbox>
+        </ng-template>
+    </igx-hierarchical-grid>
+</div>

src/app/hierarchical-grid/hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component.scss

@@ -0,0 +1,4 @@
+.grid__wrapper {
+    margin: 0 16px;
+    padding-top: 10px;
+}

src/app/hierarchical-grid/hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from "@angular/core";
+import { IRowSelectionEventArgs } from "igniteui-angular";
+import { SINGERS } from "../data";
+
+@Component({
+    selector: "hierarchical-grid-conditional-row-selectors",
+    styleUrls: ["./hierarchical-grid-conditional-row-selectors.component.scss"],
+    templateUrl: "hierarchical-grid-conditional-row-selectors.component.html"
+})
+
+export class HGridConditionalRowSelectorsComponent implements OnInit {
+    public singers;
+    public disabledCollection: string[] = [];
+
+    public ngOnInit(): void {
+        this.singers = SINGERS;
+        this.disabledCollection =
+            this.singers.filter(singer => singer.HasGrammyAward === false).map(singer => singer.Artist);
+    }
+
+    public isSelectionAllowed(newRowID: string) {
+        return this.disabledCollection.indexOf(newRowID) === -1;
+    }
+
+    public onRowSelect(event: IRowSelectionEventArgs) {
+        if (!event.added.length && event.removed.length) {
+            // ignore deselect
+            return;
+        }
+        const originalAddedLength = event.added.length;
+        event.added = event.added.filter(x => this.isSelectionAllowed(x));
+
+        // update selection to contain only allowed rows
+        event.newSelection = event.newSelection.filter(x => this.isSelectionAllowed(x));
+
+        // cleanup selection if all conditionally selectable rows are already selected
+        if (event.added.length === 0
+            && !event.newSelection.filter(x => event.oldSelection.indexOf(x) === -1).length
+            && originalAddedLength > 1) {
+                // all selected from header, deselect instead
+                event.newSelection = [];
+        }
+    }
+}