Merge pull request #7022 from IgniteUI/ddimitrov/fix-6940-9.0.x

feat(grid): add support for column title

Author: DiyanDimitrov

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 9.0.9
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - The `title` attribute of the columns and the column groups is now used as `title` for the header text.
+
 ## 9.0.1
 - **Breaking Changes** 
     - Remove `$base-color` from igx-typography. The igx-typography class now inherits the parent color.

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

@@ -10,6 +10,7 @@ import {
     TemplateRef,
     Output,
     EventEmitter,
+    ElementRef,
 } from '@angular/core';
 import { notifyChanges } from '../watch-changes';
 import { WatchColumnChanges } from '../watch-changes';
@@ -1238,7 +1239,7 @@ export class IgxColumnComponent implements AfterContentInit {
     protected collapseIndicatorTemplate:  IgxCollapsibleIndicatorTemplateDirective;
 
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef,
-        public rowIslandAPI: IgxRowIslandAPIService) { }
+        public rowIslandAPI: IgxRowIslandAPIService, public elementRef: ElementRef) { }
 
     /**
      * @hidden

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

@@ -1569,6 +1569,23 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         expect(grid.columnList.length).toEqual(10);
     });
+
+    it('should set title attribute on column group header spans', () => {
+        const fixture = TestBed.createComponent(ColumnGroupTestComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.grid;
+        const generalGroup = grid.columnList.find(c => c.header === 'General Information');
+        generalGroup.elementRef.nativeElement.title = 'General Information Title';
+        fixture.detectChanges();
+
+        const headers = fixture.debugElement.queryAll(By.css('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));
+        const generalHeader = headers.find(h => h.nativeElement.textContent === 'General Information');
+        const addressHeader = headers.find(h => h.nativeElement.textContent === 'Address Information');
+
+        expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
+        expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
+    });
 });
 
 @Component({

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

@@ -375,6 +375,29 @@ describe('IgxGrid - Column properties #grid', () => {
         const row = grid.getRowByIndex(0);
         row.cells.forEach(cell => expect(cell.nativeElement.getAttribute('style')).toMatch('background: black'));
     });
+
+    it('should set title attribute on column header spans', () => {
+        const fix = TestBed.createComponent(ColumnsFromIterableComponent);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.instance;
+        const idColumn = grid.getColumnByName('ID');
+        const nameColumn = grid.getColumnByName('Name');
+
+        idColumn.header = 'ID Header';
+        idColumn.elementRef.nativeElement.title = 'ID Title';
+        nameColumn.header = 'Name Header';
+        fix.detectChanges();
+
+        const headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+        const idHeader = headers[0].nativeElement;
+        const nameHeader = headers[1].nativeElement;
+        expect(idHeader.textContent).toBe('ID Header');
+        expect(idHeader.firstElementChild.firstElementChild.title).toBe('ID Title');
+        expect(nameHeader.textContent).toBe('Name Header');
+        expect(nameHeader.firstElementChild.firstElementChild.title).toBe('Name Header');
+    });
+
 });
 
 @Component({

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

@@ -22,7 +22,7 @@
 
 
 <ng-template #defaultColumn>
-    <span class="igx-grid__th-group-title" [attr.title]="column.header">{{column.header}}</span>
+    <span class="igx-grid__th-group-title" [attr.title]="columnTitle">{{column.header}}</span>
 </ng-template>
 
 <ng-template #defaultCollapseIndicator>

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

@@ -204,6 +204,13 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         return this.element.nativeElement.getBoundingClientRect().height;
     }
 
+    /**
+     * @hidden
+     */
+    get columnTitle() {
+        return this.column.elementRef.nativeElement.getAttribute('title') || this.column.header;
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html

@@ -1,5 +1,5 @@
 <ng-template #defaultColumn>
-    <span [attr.title]="column.header || column.field">{{ column.header || column.field }}</span>
+    <span [attr.title]="columnTitle">{{ column.header || column.field }}</span>
 </ng-template>
 
 <span class="igx-grid__th-title">

projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts

@@ -112,6 +112,11 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
         return this.column.filteringExpressionsTree ? 'igx-excel-filter__icon--filtered' : 'igx-excel-filter__icon';
     }
 
+    get columnTitle() {
+        return this.column.elementRef.nativeElement.getAttribute('title') ||
+            this.column.header || this.column.field;
+    }
+
     @HostBinding('attr.role')
     public hostRole = 'columnheader';
 

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

@@ -6,8 +6,8 @@
             </ng-template>
         <igx-grid [allowFiltering]="true" [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [showToolbar]="true" [allowAdvancedFiltering]="true" [columnHiding]="true">
             <igx-column [movable]="true"  [resizable]="true" [pinned]="true" field="Missing"></igx-column>
-            <igx-column-group [movable]="true" header="General Information" [collapsible]="true" [expanded]="true" [hidden]="true">
-                <igx-column [movable]="true" [filterable]="false" [hidden]="true" sortable="true" resizable="true" field="CompanyName" width="200px" [visibleWhenCollapsed]="false"></igx-column>
+            <igx-column-group [movable]="true" header="General Information" title="General Company Information" [collapsible]="true" [expanded]="true" [hidden]="true">
+                <igx-column [movable]="true" [filterable]="false" [hidden]="true" sortable="true" resizable="true" field="CompanyName" title="Company Name" width="200px" [visibleWhenCollapsed]="false"></igx-column>
                 <igx-column  field="Missing"></igx-column>
                 <igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expanded]="false" [visibleWhenCollapsed]="true">
                     <igx-column [movable]="true" [visibleWhenCollapsed]="false" [hidden]="true" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>