Next
Update
Prev

The user-defined Datatips at the data cell can be set by using the dataTipJsFunction attribute in <DataGridColumn>. Mouse over any cells of the Seoul, Tokyo, Singapore columns, then you will find that the user-defined Datatips pops up.

...
<DataGridColumn ... dataField="Seoul" dataTipJsFunction="dataTip" ... />
<DataGridColumn ... dataField="Singapore" dataTipJsFunction="dataTip2" ... />
<DataGridColumn ... dataField="NewYork" dataTipJsFunction="dataTipA" ... />
...
					
function dataTip(item, value, column) {
  if (item["getDataTipFunction"])
    return item.getDataField()+" header";

  if (value < 30000)
    return column.colNum+1+"th column"+" less than 30000";
    
  return column.colNum+1+"th column"+" 30000 or higher";
}

function dataTip2(item, value, column) {
  if (item["getDataTipFunction"])
    return "Performance";

  if (value < 50000)
    return "Behind Target";
    
  return "Target Accomplished";
}

function dataTipA(item, value, column) {
  if (item["getDataTipFunction"])
    return item.getDataField()+"\n header";

  var s = insertComma(value);
  
  return s;
}

function insertComma(n) {
  var reg = /(^[+-]?\d+)(\d{3})/;
  n += "";
  while (reg.test(n))
    n = n.replace(reg, '$1' + "," + '$2');

  return n;
}

© 2017 KoolChart. All rights reserved.