Create custom drill-through functionality to show details about a value cell

Other

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>
    Create custom drill-through functionality to show details about a value cell
  </h2>
  <p>
    In this example, we've created custom drill-through functionality using the
    <a href="https://www.flexmonster.com/api/celldoubleclick/"
    >celldoubleclick</a> event and the
    <a href="https://www.flexmonster.com/api/field-mapping-object/#id-type"
    >id field type</a>. To avoid conflict with the built-in drill-through feature, 
    we've disabled it by setting the
    <a href="https://www.flexmonster.com/api/options-object/#drillthrough"
    >options.drillThrough</a> to <code>false</code>.
  </p>
  <p>
    Double-click a grid cell to see the data records that compose it and output
    the records under the component.
  </p>
</div>

<div id="pivot-container"></div>

<div class="output" id="output">Output will appear here</div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "accountId": {
          type: "id"
        },
      },
    },
    slice: {
      rows: [{
        uniqueName: "status"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
          uniqueName: "purchases"
        },
      ]
    },
    options: {
      drillThrough: false,
    },
  },
  celldoubleclick: customDrillThrough,
});

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));
}

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

function showOutput(content) {
  document.getElementById("output").innerText = content;
}

function getData() {
  return [{
      accountId: 23,
      name: "My test acccount XYZ",
      status: "Active",
      address: "321 Michigan Sq., #55",
      purchases: 210,
    }, 
    {
      accountId: 32,
      name: "My test acccount ABC",
      status: "Inactive",
      address: "123 Oxford Av., #23",
      purchases: 932,
    },
    {
      accountId: 33,
      name: "My test acccount DEF",
      status: "Active",
      address: "456 Capitol Str., #46",
      purchases: 1504,
    },
    {
      accountId: 12,
      name: "My test acccount GHI",
      status: "Inactive",
      address: "789 Seattle Blvd., #90",
      purchases: 568,
    },
  ]
}