Change Wijmo5 Tooltip background Color Dynamically

Change Wijmo5 Tooltip background Color Dynamically

Posted by: ajeeshs on 14 September 2017, 11:41 am EST

• 

  ajeeshs

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 11:41 am EST

  Hi,
  
  How to change Wijmo5 Tooltip background color dynamically in angular2?
  
  thanks in advance
  
  Regards
  
  Ajeesh S

• 

  skochan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:41 am EST

  Hi Ajeesh,

  Sorry for the late reply. I assume that you are trying to change the ToolTip that is displayed for a column. You could do it by setting the tipContent as it contains HTML content.

  Please see the code for reference

  
  
  <div class="container">
          <div class="col-md-6">           
              <wj-flex-grid #flexGrid [itemsSource]="data" [allowAddNew]="true">
                  <wj-flex-grid-column header="Id" binding="id"></wj-flex-grid-column>
                  <wj-flex-grid-column header="Country" binding="country">
                     
                  </wj-flex-grid-column>
                  <wj-flex-grid-column header="Date" binding="date">
                     
                  </wj-flex-grid-column>
                  <wj-flex-grid-column header="Amount" binding="amount" format="'n0'">
                          
                  </wj-flex-grid-column>
              </wj-flex-grid>
              
          </div>
  </div>

  ///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
  
  // Angular
  import { Component, View, EventEmitter, provide, Input, Inject, enableProdMode, AfterViewInit , ViewChild} from 'angular2/core';
  import { CORE_DIRECTIVES } from 'angular2/common';
  import { bootstrap } from 'angular2/platform/browser';
  import * as wjNg2Grid from 'wijmo/wijmo.angular2.grid';
  import * as wjNg2Input from 'wijmo/wijmo.angular2.input';
  import { AppTab, AppTabPane } from './components/AppTab';
  import { DataSvc } from './services/DataSvc';
  'use strict';
  
  // The application root component.
  @Component({
      selector: 'app-cmp',
      templateUrl: 'src/app.html',   
      directives: [CORE_DIRECTIVES, AppTab, AppTabPane,
          wjNg2Grid.WjFlexGrid, wjNg2Grid.WjFlexGridColumn, wjNg2Grid.WjFlexGridCellTemplate, wjNg2Grid.WjTemplateCmp,
          wjNg2Input.WjInputNumber, wjNg2Input.WjMenu, wjNg2Input.WjMenuItem]
  })
  
  export class AppCmp implements AfterViewInit {
      protected dataSvc: DataSvc;
      data: wijmo.collections.CollectionView;
      
      @ViewChild('flexGrid') flexGrid: wijmo.grid.FlexGrid;
      constructor( @Inject(DataSvc) dataSvc: DataSvc) {
          this.dataSvc = dataSvc;
          this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(10));        
      }
      ngAfterViewInit(): void {
          
          if (this.flexGrid) {
              let flex = this.flexGrid,
                  toolTip = new wijmo.Tooltip();
              flex.hostElement.addEventListener('mousemove', function (e) {
                  let ht = flex.hitTest(e),
                      rng = null;
                  
                  if (!ht.range.equals(rng)) {
                      if (ht.cellType == wijmo.grid.CellType.Cell) {
                          rng = ht.range;
                          let data = flex.getCellData(rng.row, rng.col, true),
                              tipContent = <code><span style=&quot;background-color:&quot;yellow&quot;><b>Column ${rng.col} </b>: ${data} <span></code>,
                              cellElement = document.elementFromPoint(e.clientX, e.clientY),
                              cellBounds = wijmo.Rect.fromBoundingRect(cellElement.getBoundingClientRect());
                          toolTip.show(flex.hostElement, tipContent, cellBounds);
                      }
                  }
  
              });
              flex.hostElement.addEventListener('mouseout', function (e) {
                  toolTip.hide();                
              });
          }
      }   
  }
  
  enableProdMode();
  // Bootstrap application with hash style navigation and global services.
  bootstrap(AppCmp, [
      DataSvc
  ]);

  Thanks,
  
  Abhishek

• 

  dbakshi

  • Post Options:
  • Link
    Copy

  Posted 1 November 2017, 3:26 am EST

  Hi,
  
  I am using wijmo 5 flexsheet using angular 2.I want to show tooltip on cells of column.How can i show that?

  Regards
  
  Dharna