Fixes #15

Author: sowvikroy-asl

README.md

@@ -55,8 +55,26 @@ Get data change event with parameters.
          console.log("Row: ",valueChanged.row,"Column: ",valueChanged.column, "Data: ",,valueChanged.data );
        }
    ```
+#### dataFiltered [event] 
+Get data change event with parameters.
+
+**_HTML_**
+```html
+  <data-grid [pagination]="pagination" [theme]="theme"
+                  [columnDefs]="columnDefs" [rowData]="rowData" (dataFiltered)="filterChanged($event)" ></data-grid>
+  ```
+ **_JavaScript_**
+ ```javascript
+   filterChanged (filterChanged){
+         console.log("IsCommon: ",filterChanged.isCommon, "Column: ",filterChanged.column, "Data: ",filterChanged.filterOptions );
+       }
+   ```
+   ##### Filter Change Event Parameters
+   **_isCommon[boolean]:_** If filter triggered through common filter.
+   **_column[number]:_** If the filter tiggered from any particular column. This field exists if only _isCommon=false_.
+   **_data[Array]:_** Filter values.
 ### Themes
-* **theme [string]:** Themebased table. The available themes are as follows
+* **theme [string]:** Theme based table. The available themes are as follows
 1. Matrial Theme (metrial-theme)
 2. Dark Theme (dark-theme)
 3. Standard Theme (standard-theme)

projects/angular-open-datagrid/README.md

@@ -55,8 +55,26 @@ Get data change event with parameters.
          console.log("Row: ",valueChanged.row,"Column: ",valueChanged.column, "Data: ",,valueChanged.data );
        }
    ```
+#### dataFiltered [event] 
+Get data change event with parameters.
+
+**_HTML_**
+```html
+  <data-grid [pagination]="pagination" [theme]="theme"
+                  [columnDefs]="columnDefs" [rowData]="rowData" (dataFiltered)="filterChanged($event)" ></data-grid>
+  ```
+ **_JavaScript_**
+ ```javascript
+   filterChanged (filterChanged){
+         console.log("IsCommon: ",filterChanged.isCommon, "Column: ",filterChanged.column, "Data: ",filterChanged.filterOptions );
+       }
+   ```
+   ##### Filter Change Event Parameters
+   **_isCommon[boolean]:_** If filter triggered through common filter.
+   **_column[number]:_** If the filter tiggered from any particular column. This field exists if only _isCommon=false_.
+   **_data[Array]:_** Filter values.
 ### Themes
-* **theme [string]:** Themebased table. The available themes are as follows
+* **theme [string]:** Theme based table. The available themes are as follows
 1. Matrial Theme (metrial-theme)
 2. Dark Theme (dark-theme)
 3. Standard Theme (standard-theme)

projects/angular-open-datagrid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-open-datagrid",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "license": "(MIT)",
   "homepage": "https://github.com/sowvikr/angular-open-datagrid-lilb",
   "bugs": {

projects/angular-open-datagrid/src/lib/data-table/data-table.component.ts

@@ -62,6 +62,12 @@ interface  DataChangeEventData {
   data: any
 }
 
+interface  DataFilteredEventData {
+  column?: number,
+  isCommon: boolean,
+  filterOptions: any
+}
+
 
 @Component({
   selector: 'data-grid',
@@ -87,6 +93,7 @@ export class DataTableComponent implements OnInit {
 
 
   @Output() dataChanged = new EventEmitter<DataChangeEventData>();
+  @Output() dataFiltered = new EventEmitter<DataFilteredEventData>();
   @Input() pagination;
   private pageSize;
   public dragTheme;
@@ -211,8 +218,8 @@ export class DataTableComponent implements OnInit {
     }
   }
 
-  public onOutsideClick(event){
-    if(event.target.className === "options-menu button button-options" ||
+  public onOutsideClick(event) {
+    if (event.target.className === "options-menu button button-options" ||
       event.target.className === "fa fa-bars" ||
       event.target.className === "checkmark" ||
       event.srcElement.id === "commonCacheCheckbox" ||
@@ -314,6 +321,8 @@ export class DataTableComponent implements OnInit {
 
 // Filters data based on CONTAINS.
   filter(column, text) {
+    let filterEventData:DataFilteredEventData = {column: column, filterOptions: [text], isCommon: false};
+    this.dataFiltered.emit(filterEventData);
     this.FilterData[column] = this.FilterData[column] || {values: []};
     this.FilterData[column].values = [{
       operator: FilterService.OR,
@@ -356,6 +365,11 @@ export class DataTableComponent implements OnInit {
   checkedColumnFilter(filterEventArgs) {
 
     this.FilterData[filterEventArgs.column].values = [];
+    let filterEventData:DataFilteredEventData = {
+      isCommon: false,
+      column: filterEventArgs.column,
+      filterOptions: filterEventArgs.filteredData
+    };
     for (let i = 0; i < filterEventArgs.filteredData.length; ++i) {
       this.FilterData[filterEventArgs.column].values.push({
         comparator: StringUtilsService.equals,
@@ -364,6 +378,7 @@ export class DataTableComponent implements OnInit {
       });
       this.FilterData[filterEventArgs.column].filterApplied = this.cacheFilter;
     }
+    this.dataFiltered.emit(filterEventData);
     this.applyFilter(this.FilterData, this.TableRows);
   }
 
@@ -536,7 +551,8 @@ export class DataTableComponent implements OnInit {
    * @param text: String to be searched across the table data.
    */
   onCommonFilter(text) {
-
+    let filteredEventData:DataFilteredEventData = {filterOptions: [text], isCommon: true};
+    this.dataFiltered.emit(filteredEventData);
     if (text === undefined || text === "") {
       for (let i = 0; i < this.columnDefs.length; ++i) {
         if (!this.FilterData[i]) {

src/app/pages/red-theme/red-theme.component.html

@@ -1,5 +1,5 @@
 
 <div *ngFor="let dataTable of dataTables">
   <data-grid [pagination]="dataTable.pagination" [theme]="dataTable.theme"
-                  [columnDefs]="dataTable.columnDefs" [rowData]="dataTable.rowData"></data-grid>
+                  [columnDefs]="dataTable.columnDefs" [rowData]="dataTable.rowData" (dataFiltered)="filterChanged($event)"></data-grid>
 </div>

src/app/pages/red-theme/red-theme.component.ts

@@ -6,6 +6,9 @@ import {Component, OnInit} from '@angular/core';
   styleUrls: ['./red-theme.component.scss']
 })
 export class RedThemeComponent implements OnInit {
+  filterChanged (valueChanged){
+    console.log("Change Triggered",valueChanged);
+  }
   dataTables: Array<any> = [
     {
       pagination: true, theme: 'red-theme',