Need a special offer?Find out if your project fits.
+
All documentation
API reference
  • API Reference for older versions
  • celldoubleclick

    [starting from version: 2.3]

    It is triggered when a cell is double-clicked on the grid. For CSV and JSON data, the event is also triggered for the drill-through view.

    Data passed to the handler

    Parameter/Type Description
    cell
    CellDataObject
    Contains information about the clicked cell.

    Examples

    1) Display an alert on a cell double-click:

    flexmonster.on('celldoubleclick', function (cell) {
              alert(
                "Double-clicked a cell - row: "
                + cell.rowIndex + ", column: "
                + cell.columnIndex 
                + ", label: "
                + cell.label);
    });

    Open the example on JSFiddle.

    2) Create custom drill-through functionality using the celldoubleclick event.

    First, disable the built-in drill-through feature using the options.drillThrough:

    const pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 300,
      report: {
        dataSource: {
          data: getData(),
        },
        slice: {
          // Slice configuration
        },
        options: {
          drillThrough: false,
        },
      },
    });
    

    Then, specify the id field type in the mapping:

    const pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 300,
      report: {
        dataSource: {
          data: getData(),
          mapping: {
            "accountId": {
              type: "id"
            }
          },
        },
        // Report configuration
      },
    });

    Add a celldoubleclick event handler:

    const pivot = new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      height: 300,
      report: {
        // Report configuration
      },
      celldoubleclick: customDrillThrough,
    });
    
    // Event handler
    function customDrillThrough(cell) {
    }

    In the handler, get recordIds of the cell that was double-clicked:

    function customDrillThrough(cell) {
      const ids = cell.recordId;
    }

    Create a function that will find a record in the dataset based on the id:

    function getRecords(id) {
      const data = getData();
      for(let i = 0; i < data.length; i++) {
        if(data[i].accountId === id) {
          return data[i];
        }
      }
      return null;
    }

    Get records that compose the double-clicked cell. You can show the records in a pop-up window, save them in a file, or print them to the console:

    function customDrillThrough(cell) {
      const ids = cell.recordId;
      const records = [];
      for(let i = 0; i < ids.length; i++) {
      	records.push(getRecord(ids[i]));
      }
      showOutput(JSON.stringify(records, null, 2));
    }

    See the full code on JSFiddle.