Dashboard for Web Forms - How to Obtain Underlying Data for a Clicked Visual Element in a Custom Item

This example shows how to obtain underlying data in a custom dashboard item when a user clicks the item's visual element. The custom item is based on the dashboard-extension-funnel-d3-item. The DashboardControl's API is used to get underlying data and display it in the dxPopup DevExtreme UI component:

FunnelD3ItemViewer.prototype._showUnderlyingData = function (arguments) {
	if(!this.viewerApiExtension)
		return;

	var clientData = this.viewerApiExtension.getItemData(this.getName());
	var columns = clientData.getDataMembers();
	var requestParameters = {
		dataMembers: columns,
		uniqueValuesByAxisName: { "Default": arguments }
	};

	this.viewerApiExtension.requestUnderlyingData(this.getName(), requestParameters, function (data) {
		var underlyingData = [];
		dataMembers = data.getDataMembers();
		for (var i = 0; i < data.getRowCount() ; i++) {
			var dataTableRow = {};
			dataMembers.forEach(function(dataMember) {
				dataTableRow[dataMember] = data.getRowValue(i, dataMember);
			});
			underlyingData.push(dataTableRow);
		}

		new dxPopup(document.getElementById('myPopup'), {
			height: 800,
			showTitle: true,
			title: "Underlying Data",
			visible: true,
			contentTemplate: function () {
				var div = document.createElement('div');
				new dxDataGrid(div, {
					height: 800,
					scrolling: {
						mode: 'virtual'
					},
					dataSource: underlyingData
				});
				return div;
			}
		});
	});
}

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)
• funnel.js (VB: funnel.js)

Documentation

• ASP.NET Web Forms Dashboard Control - Client-Side API Overview
• Obtain Underlying and Displayed Data in ASP.NET Web Forms Dashboard Control
• Create a Custom Item
• Extensions Overview
• ViewerApiExtension

More Examples

• Dashboard for Web Forms - How to show underlying data in a custom grid dashboard item
• Dashboard for Web Forms - How to get data from a clicked dashboard item
• Dashboard for Web Forms - How to obtain a dashboard item's underlying data for a clicked visual element
• Dashboard for Web Forms - How to obtain underlying data for the specified dashboard item
• Dashboard for ASP.NET Core - How to obtain a dashboard item's client data
• Dashboard for ASP.NET Core - How to obtain a dashboard item's underlying data for a clicked visual element
• Dashboard for ASP.NET Core - How to obtain underlying data for the specified dashboard item
• Dashboard for MVC - How to obtain a dashboard item's client data
• Dashboard for MVC - How to obtain underlying data for the specified dashboard item
• Dashboard for MVC - How to obtain a dashboard item's underlying data for a clicked visual element

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)