chore(*): adding checkbox toggle event

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html

@@ -20,7 +20,7 @@ <h4 [attr.id]='titleID' class="igx-column-actions__header-title" *ngIf="title">{
             | sortActionColumns:columnDisplayOrder:pipeTrigger;"
         class="igx-column-actions__columns-item"
 
-        (change)="actionsDirective.toggleColumn(column)"
+        (change)="toggleColumn($event, column)"
         [checked]="actionsDirective.columnChecked(column)"
         [style.margin-left.px]="column.level * indentation">
         {{ column.header || column.field }}

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts

@@ -5,12 +5,15 @@ import {
     ViewChildren,
     QueryList,
     DoCheck,
-    KeyValueDiffers
+    KeyValueDiffers,
+    EventEmitter,
+    Output
 } from '@angular/core';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from '../common/enums';
 import { IgxColumnActionsBaseDirective } from './column-actions-base.directive';
-import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
+import { IgxCheckboxComponent, IChangeCheckboxEventArgs } from '../../checkbox/checkbox.component';
+import { IColumnToggledEventArgs } from '../common/events';
 
 let NEXT_ID = 0;
 /**
@@ -271,24 +274,14 @@ export class IgxColumnActionsComponent implements DoCheck {
     public indentation = 30;
 
     /**
-     * An event that is emitted after the columns visibility is changed.
-     * Provides references to the `column` and the `newValue` properties as event arguments.
+     * An event that is emitted after a column's checked state is changed.
+     * Provides references to the `column` and the `checked` properties as event arguments.
      * ```html
-     *  <igx-column-hiding (onColumnVisibilityChanged) = "onColumnVisibilityChanged($event)"></igx-column-hiding>
+     *  <igx-column-actions (onColumnToggled)="onColumnToggled($event)"></igx-column-actions>
      * ```
      */
-    // @Output()
-    // public onColumnVisibilityChanged = new EventEmitter<IColumnVisibilityChangedEventArgs>();
-
-    /**
-     * Gets the count of the hidden columns.
-     * ```typescript
-     * let hiddenColumnsCount =  this.columnHiding.hiddenColumnsCount;
-     * ```
-     */
-    // public get hiddenColumnsCount() {
-    //    return (this.columns) ? this.columns.filter((col) => col.hidden).length : 0;
-    // }
+    @Output()
+    public onColumnToggled = new EventEmitter<IColumnToggledEventArgs>();
 
     /**
      * @hidden @internal
@@ -406,4 +399,15 @@ export class IgxColumnActionsComponent implements DoCheck {
     public checkAllColumns() {
         this.actionsDirective.checkAll();
     }
+
+    /**
+     * @hidden @internal
+     */
+    public toggleColumn(event: IChangeCheckboxEventArgs, column: IgxColumnComponent) {
+        this.onColumnToggled.emit({
+            column: column,
+            checked: event.checked
+        });
+        this.actionsDirective.toggleColumn(column);
+    }
 }

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -162,3 +162,14 @@ export interface IGridScrollEventArgs extends IBaseEventArgs {
     /** The new scroll position */
     scrollPosition: number;
 }
+
+/**
+ * Event emitted when a checkbox in the checkbox
+ * list of an IgxColumnActions component is clicked.
+ */
+export interface IColumnToggledEventArgs extends IBaseEventArgs {
+    /** The column that is toggled. */
+    column: IgxColumnComponent;
+    /** The checked state after the action. */
+    checked: boolean;
+}

projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts

@@ -148,6 +148,35 @@ describe('Column Hiding UI #grid', () => {
             verifyCheckbox('Released', false, false, columnChooserElement, fix);
         });
 
+        it('onColumnToggled event is fired on toggling checkboxes.', () => {
+            spyOn(columnChooser.onColumnToggled, 'emit').and.callThrough();
+
+            GridFunctions.clickColumnChooserItem(columnChooserElement, 'ReleaseDate');
+
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(1);
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
+                { column: grid.getColumnByName('ReleaseDate'), checked: undefined });
+
+            GridFunctions.clickColumnChooserItem(columnChooserElement, 'ReleaseDate');
+
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(2);
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
+                { column: grid.getColumnByName('ReleaseDate'), checked: undefined });
+
+            GridFunctions.clickColumnChooserItem(columnChooserElement, 'Downloads');
+
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(3);
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
+                { column: grid.getColumnByName('Downloads'), checked: undefined });
+
+
+            GridFunctions.clickColumnChooserItem(columnChooserElement, 'Downloads');
+
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(4);
+            expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
+                { column: grid.getColumnByName('Downloads'), checked: undefined });
+        });
+
         it('does not show any items when all columns disabled is true.', () => {
             grid.columns.forEach((col) => col.disableHiding = true);
             fix.detectChanges();

src/app/grid-column-actions/grid-column-actions.sample.html

@@ -15,7 +15,8 @@ <h4>Hiding Action</h4>
                 <igx-column-actions
                 igxColumnHiding
                 [columns]="grid1.columns"
-                [title]="grid1.columnHidingTitle">
+                [title]="grid1.columnHidingTitle"
+                (onColumnToggled)="columnToggled($event)">
                 </igx-column-actions>
             </div>
         </article>

src/app/grid-column-actions/grid-column-actions.sample.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IgxGridComponent, IColumnToggledEventArgs } from 'igniteui-angular';
 
 @Component({
     providers: [],
@@ -15,6 +15,10 @@ export class GridColumnActionsSampleComponent implements OnInit {
     data: any[];
     columns: any[];
 
+    columnToggled(event: IColumnToggledEventArgs) {
+        console.log(event);
+    }
+
     ngOnInit(): void {
         this.columns = [
             { field: 'ID', width: '200px', hidden: false },