Our blazing fast Grid component built with pure JavaScript


Post by kerstin »

Hi,

We are using Tooltip beforeShow listener to show tooltip. How can I retrieve resource id and column id from the function argument?

Best regards,
Kerstin

Post by pmiklashevich »

Please show how you add and use the tooltip. For example using CellTooltip feature you have record and column in the arguments. Please see Cell tooltip demo for reference.
examples/celltooltip/app.js
    features : {
        // enable CellTooltip and configure a default renderer
        cellTooltip : ({ record, column }) => record[column.field]
    },

Pavlo Miklashevych
Sr. Frontend Developer


Post by kerstin »

var tooltip = window.bryntum.grid.Tooltip({
  hideOnDelegateChange: 700,
  forSelector         : '.activity',
  showOnHover         : false,
  listeners: {
    beforeShow: function(_ref) {
      // Here is the tooltip code, html to show is fetched remote via an ajax call
    }
  }
});

Post by pmiklashevich »

I have no idea what .activity is in your application. You can receive target element using tip.activeTarget property.
    beforeShow: function({ source : tip }) {
      console.log(tip.activeTarget)
    }
But without a full context I cannot tell more. Please explain better what you're trying to achieve and attach a screenshot that shows your tooltip. Providing a small runnable testcase based on one of our demos is the best way to get the fastest support. Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by kerstin »

Here is an updated "examples/groupedheaders/app.umd.js", instead of '.activity', class used here is '.name'. Hover over the lightblue names for console log.
"use strict";

function nameRender(_ref) {
  var value = _ref.value,
      cellElement = _ref.cellElement;
  cellElement.innerHTML = '<div class="names" style="background-color: lightblue">' + value + '</div>';
}

new bryntum.grid.Grid({
  appendTo: 'container',
  minHeight: '20em',
  features: {
    columnPicker: true,
    regionResize: true
  },
  columns: [{
    text: 'Customer#',
    field: 'id',
    width: 150,
    locked: true,
    editor: false
  }, {
    text: 'Contact',
    children: [{
      text: 'First name',
      field: 'firstName',
      width: 150,
      htmlEncode: false,
      renderer: nameRender,
    }, {
      text: 'Surname',
      field: 'surName',
      width: 150,
      htmlEncode: false,
      renderer: nameRender,
    }, {
      text: 'City',
      field: 'city',
      width: 150
    }]
  }, {
    text: 'Favorites',
    children: [{
      text: 'Food',
      field: 'food',
      flex: 1
    }, {
      text: 'Color',
      field: 'color',
      flex: 1,
      htmlEncode: false,
      renderer: function renderer(_ref) {
        var value = _ref.value,
            cellElement = _ref.cellElement;
        cellElement.innerHTML = '<div class="color-box"></div>' + value;
        cellElement.firstElementChild.style.backgroundColor = value;
      }
    }]
  }],
  data: bryntum.grid.DataGenerator.generateData(50)
});

new bryntum.grid.Tooltip({
    hideOnDelegateChange: 700,
    forSelector         : '.names',
    showOnHover         : false,
    listeners: {
        beforeShow: function(_ref) {
            console.log("_ref", _ref);
        }
    }
});
Best regards,
Kerstin

Post by pmiklashevich »

Hello Kerstin,

Please see getColumnFromElement and getRecordFromElement functions. They accept an element that is somewhere in a grid cell and return column/record accordingly. Please see the code snippet. I've changed selector to '.b-grid-cell .names' to make sure that activeTarget is inside a grid cell, so I don't need to check if column/record are there before use them.
function nameRender({ value, cellElement }) {
    cellElement.innerHTML = '<div class="names" style="background-color: lightblue">' + value + '</div>';
}

new Tooltip({
    hideOnDelegateChange : 700,
    forSelector          : '.b-grid-cell .names',
    showOnHover          : false,
    listeners            : {
        beforeShow : function({ source : tip }) {
            const
                column = grid.getColumnFromElement(tip.activeTarget),
                record = grid.getRecordFromElement(tip.activeTarget);

            tip.html = `${column.id} ${record.id}`;
        }
    }
});
Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply