A drill through opens a detail report filtered to the item the user chose, such as a row in a table or a bar in a chart. Your application builds the filter and decides where the report opens: in place of the current one, in a popup, or anywhere else. Studio applies the filter to every widget in that report.
Drill Through in Place Copy Link
Right-click a sport in Medals by Sport, such as Swimming, and choose Drill Through to Swimming. The detail report replaces the summary report and shows only that sport.
"use client";
import type {
AgConditionDefinition,
AgContextMenuItem,
AgDataSourcesDefinition,
AgDrillThroughOptions,
AgFilterDefinition,
AgGetContextMenuParams,
AgLogicalDefinition,
AgReportState,
} from "ag-studio";
import { enableStudioDevValidations } from "ag-studio";
import type { AgStudioRef } from "ag-studio-react";
import { AgStudio } from "ag-studio-react";
import React, {
StrictMode,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { createRoot } from "react-dom/client";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
const INITIAL_STATE: AgReportState = {
pages: [
{
id: "summary",
widgets: {
instructions: {
type: "text",
dataMapping: {},
format: {
style: {
text: "Right-click a sport to drill through.",
typography: { fontWeight: "normal" },
},
},
},
"medals-by-sport": {
type: "grid",
dataMapping: {
cols: [
{
id: "medals.sport",
},
{
id: "medals.gold",
aggregation: "sum",
},
{
id: "medals.silver",
aggregation: "sum",
},
{
id: "medals.bronze",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Medals by Sport",
},
},
},
"medals-by-country": {
type: "bar-chart-grouped",
dataMapping: {
categoryKey: [
{
id: "medals.country",
},
],
valueKey: [
{
id: "medals.total",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Medals by Country",
},
},
sort: [
{
field: {
id: "medals.total",
aggregation: "sum",
},
direction: "desc",
},
],
},
},
widgetLayout: {
instructions: {
xTrack: 0,
yTrack: 0,
xSpan: 24,
ySpan: 4,
},
"medals-by-sport": {
xTrack: 0,
yTrack: 4,
xSpan: 24,
ySpan: 16,
},
"medals-by-country": {
xTrack: 0,
yTrack: 20,
xSpan: 24,
ySpan: 16,
},
},
filter: {
page: [],
widget: {
"medals-by-country": [
{
field: {
id: "medals.total",
},
view: {
expanded: true,
viewTypeId: "rank",
},
model: {
operator: "rank",
value: [10, null],
},
},
],
},
},
},
],
selectedPageId: "summary",
panels: {
filters: {
collapsed: true,
},
edit: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
const DRILL_THROUGH_STATE: AgReportState = {
pages: [
{
id: "drillThrough",
widgets: {
grid: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.athlete" },
{ id: "medals.country" },
{ id: "medals.sport" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
],
},
format: {
title: {
enabled: true,
text: "Medal Table",
},
},
},
"bar-chart": {
type: "bar-chart-grouped",
dataMapping: {
categoryKey: [{ id: "medals.country" }],
valueKey: [{ id: "medals.gold", aggregation: "sum" }],
tooltipKey: [],
},
format: {
title: {
enabled: true,
text: "Gold Medals by Country",
},
},
sort: [
{
field: {
id: "medals.gold",
aggregation: "sum",
},
direction: "desc",
},
],
},
},
widgetLayout: {
grid: {
xTrack: 0,
yTrack: 0,
xSpan: 24,
ySpan: 16,
},
"bar-chart": {
xTrack: 0,
yTrack: 16,
xSpan: 24,
ySpan: 16,
},
},
filter: {
page: [],
widget: {
"bar-chart": [
{
field: {
id: "medals.gold",
},
view: {
expanded: true,
viewTypeId: "rank",
},
model: {
operator: "rank",
value: [10, null],
},
},
],
},
},
},
],
selectedPageId: "drillThrough",
panels: {
filters: {
collapsed: true,
},
edit: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
function isLogicalDefinition(
filter: AgFilterDefinition,
): filter is AgLogicalDefinition {
return (filter as AgLogicalDefinition).conditions != null;
}
function getSportCondition(
filter: AgFilterDefinition,
): AgConditionDefinition | undefined {
if (!isLogicalDefinition(filter)) {
return filter.field.id === "medals.sport" ? filter : undefined;
}
return filter.conditions.length === 1
? getSportCondition(filter.conditions[0])
: undefined;
}
const StudioExample = () => {
const studioRef = useRef<AgStudioRef>(null);
const savedStateRef = useRef<AgReportState | undefined>(undefined);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [data, setData] = useState<AgDataSourcesDefinition>();
const [drillThrough, setDrillThrough] = useState<AgDrillThroughOptions>();
useEffect(() => {
fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: any[]) => setData({ sources: [{ id: "medals", data }] }));
}, []);
const drillThroughTo = useCallback((filter: AgFilterDefinition) => {
const { api } = studioRef.current!;
savedStateRef.current = api.getState();
api.setState(DRILL_THROUGH_STATE);
setDrillThrough({ filter });
}, []);
const goBack = useCallback(() => {
const savedState = savedStateRef.current;
if (!savedState) {
return;
}
studioRef.current!.api.setState(savedState);
setDrillThrough(undefined);
savedStateRef.current = undefined;
}, []);
const getContextMenuItems = useCallback(
({ filter }: AgGetContextMenuParams): AgContextMenuItem[] => {
if (filter == null) {
return [];
}
const sportCondition = getSportCondition(filter);
if (!sportCondition) {
return [];
}
return [
{
name: `Drill Through to ${sportCondition.value}`,
action: () => drillThroughTo(filter),
},
];
},
[drillThroughTo],
);
return (
<div style={containerStyle}>
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<div className="example-controls">
<div className="controls-row">
{drillThrough && <button onClick={goBack}>Go Back</button>}
</div>
</div>
<AgStudio
ref={studioRef}
style={studioStyle}
className="my-studio-container"
data={data}
initialState={INITIAL_STATE}
mode="edit"
drillThrough={drillThrough}
getContextMenuItems={getContextMenuItems}
/>
</div>
</div>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<StudioExample />
</StrictMode>,
);
The menu item action:
- Saves the summary report state with
api.getState(). - Sets the detail report state.
- Sets the
drillThroughproperty to{ filter: params.filter }, the clicked item only.
Click Go Back to return. It restores the saved state and sets drillThrough to undefined.
A country selected in Medals by Country is not carried into the detail report, because the action passes only the clicked item. See Choosing What to Pass On to apply it too.
Triggering From the Context Menu Copy Link
Anything in your application, such as a button or a link, can start a drill through by setting the drillThrough property. To start one from a right-click, return an item from getContextMenuItems, as described in Context Menu, and in its action, set the drillThrough property:
const getContextMenuItems = (params) => {
if (params.filter == null) {
return [];
}
return [
{
name: 'Drill Through',
action: () => params.api.setProperty('drillThrough', { filter: params.filter }),
},
];
};
<AgStudio getContextMenuItems={getContextMenuItems} />params.filter holds the field values of the clicked item. When the right-click is not on a row or data point, params.filter is not set, so the snippet returns no items and no menu opens. See Using the Callback Params for the full list of params.
The Drill-Through Filter Copy Link
Set the drillThrough property with a filter to constrain the report to that filter:
const drillThrough = {
filter: {
field: { id: 'medals.sport' },
operator: 'equals',
value: 'Swimming',
},
};
<AgStudio drillThrough={drillThrough} />The filter constrains every widget in the report. The user sees it as a read-only card in the Filters Panel, and cannot edit or remove it. To see the card, drill through in the first example, then open the Filters Panel.
The filter is not included when the report's state is read or saved.
Set it when the report is created, or later with api.setProperty('drillThrough', { filter }). Clear it with api.setProperty('drillThrough', undefined).
Choosing What to Pass On Copy Link
The context menu callback supplies two kinds of filter:
params.filterholds the field values of the clicked item, such as the sport in a grid row.params.getActiveFiltersForWidget()returns the filters currently constraining the widget's data:pagefor the page filters,widgetfor the widget's own filters andcrossFilterfor selections made in other widgets. Selections the widget shows only as a highlight are incrossFilterHighlight.
Studio applies only the filter you pass to drillThrough, so your application chooses which of these to apply. Pass only the clicked item to show all of its data, whatever the user had filtered. Combine it with the active filters to show only the data the user was looking at.
Rank conditions, such as a top 10 filter, are not supported in a drill-through filter. Studio ignores them, applies the rest of the filter and reports a warning. Remove them before passing on widget filters.
The example below combines the clicked item with the page, widget and cross filters into one AND filter. It removes the rank condition of the Top Medals by Sport chart.
"use client";
import type {
AgActiveFilters,
AgConditionDefinition,
AgContextMenuItem,
AgDataSourcesDefinition,
AgDrillThroughOptions,
AgFilterDefinition,
AgGetContextMenuParams,
AgLogicalDefinition,
AgReportState,
} from "ag-studio";
import { enableStudioDevValidations } from "ag-studio";
import type { AgStudioRef } from "ag-studio-react";
import { AgStudio } from "ag-studio-react";
import React, {
StrictMode,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { createRoot } from "react-dom/client";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
const INITIAL_STATE: AgReportState = {
pages: [
{
id: "summary",
widgets: {
instructions: {
type: "text",
dataMapping: {},
format: {
style: {
text: "Right-click a sport to drill through.",
typography: {
fontWeight: "normal",
},
},
},
},
"medals-by-sport": {
type: "grid",
dataMapping: {
cols: [
{
id: "medals.sport",
},
{
id: "medals.gold",
aggregation: "sum",
},
{
id: "medals.silver",
aggregation: "sum",
},
{
id: "medals.bronze",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Medals by Sport",
},
},
},
"top-medals-by-sport": {
type: "column-chart-grouped",
dataMapping: {
categoryKey: [
{
id: "medals.sport",
},
],
valueKey: [
{
id: "medals.total",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Top Medals by Sport",
},
},
sort: [
{
field: {
id: "medals.total",
aggregation: "sum",
},
direction: "desc",
},
],
},
"medals-by-country": {
type: "bar-chart-grouped",
dataMapping: {
categoryKey: [
{
id: "medals.country",
},
],
valueKey: [
{
id: "medals.total",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Medals by Country",
},
},
sort: [
{
field: {
id: "medals.total",
aggregation: "sum",
},
direction: "desc",
},
],
},
},
widgetLayout: {
instructions: {
xTrack: 0,
yTrack: 0,
xSpan: 24,
ySpan: 4,
},
"medals-by-sport": {
xTrack: 0,
yTrack: 4,
xSpan: 24,
ySpan: 16,
},
"top-medals-by-sport": {
xTrack: 0,
yTrack: 20,
xSpan: 12,
ySpan: 16,
},
"medals-by-country": {
xTrack: 12,
yTrack: 20,
xSpan: 12,
ySpan: 16,
},
},
filter: {
page: [],
widget: {
"top-medals-by-sport": [
{
field: {
id: "medals.total",
},
view: {
expanded: true,
viewTypeId: "rank",
},
model: {
operator: "rank",
value: [10, null],
},
},
],
"medals-by-country": [
{
field: {
id: "medals.total",
},
view: {
expanded: true,
viewTypeId: "rank",
},
model: {
operator: "rank",
value: [10, null],
},
},
],
},
},
},
],
selectedPageId: "summary",
panels: {
filters: {
collapsed: true,
},
edit: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
const DRILL_THROUGH_STATE: AgReportState = {
pages: [
{
id: "drillThrough",
widgets: {
grid: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.athlete" },
{ id: "medals.country" },
{ id: "medals.sport" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
],
},
format: {
title: {
enabled: true,
text: "Medal Table",
},
},
},
"bar-chart": {
type: "bar-chart-grouped",
dataMapping: {
categoryKey: [{ id: "medals.country" }],
valueKey: [{ id: "medals.gold", aggregation: "sum" }],
tooltipKey: [],
},
format: {
title: {
enabled: true,
text: "Gold Medals by Country",
},
},
sort: [
{
field: {
id: "medals.gold",
aggregation: "sum",
},
direction: "desc",
},
],
},
},
widgetLayout: {
grid: {
xTrack: 0,
yTrack: 0,
xSpan: 24,
ySpan: 16,
},
"bar-chart": {
xTrack: 0,
yTrack: 16,
xSpan: 24,
ySpan: 16,
},
},
filter: {
page: [],
widget: {
"bar-chart": [
{
field: {
id: "medals.gold",
},
view: {
expanded: true,
viewTypeId: "rank",
},
model: {
operator: "rank",
value: [10, null],
},
},
],
},
},
},
],
selectedPageId: "drillThrough",
panels: {
filters: {
collapsed: true,
},
edit: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
function isLogicalDefinition(
filter: AgFilterDefinition,
): filter is AgLogicalDefinition {
return (filter as AgLogicalDefinition).conditions != null;
}
function getSportCondition(
filter: AgFilterDefinition,
): AgConditionDefinition | undefined {
if (!isLogicalDefinition(filter)) {
return filter.field.id === "medals.sport" ? filter : undefined;
}
return filter.conditions.length === 1
? getSportCondition(filter.conditions[0])
: undefined;
}
function withoutRankConditions(
filter?: AgFilterDefinition,
): AgFilterDefinition | undefined {
if (filter == null) {
return undefined;
}
if (!isLogicalDefinition(filter)) {
return filter.operator === "rank" ? undefined : filter;
}
const conditions = filter.conditions
.map(withoutRankConditions)
.filter((condition) => condition != null);
return conditions.length > 1 ? { ...filter, conditions } : conditions[0];
}
// Combines the clicked item with every filter active on the widget. Rank conditions are not
// supported in a drill-through filter, so they are removed from the widget filters.
function getDrillThroughFilter(
filter: AgFilterDefinition,
activeFilters: AgActiveFilters = {},
): AgFilterDefinition {
const { page, widget, crossFilter } = activeFilters;
const conditions = [
filter,
page,
withoutRankConditions(widget),
crossFilter,
].filter((condition) => condition != null);
return conditions.length > 1 ? { operator: "AND", conditions } : filter;
}
const StudioExample = () => {
const studioRef = useRef<AgStudioRef>(null);
const savedStateRef = useRef<AgReportState | undefined>(undefined);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [data, setData] = useState<AgDataSourcesDefinition>();
const [drillThrough, setDrillThrough] = useState<AgDrillThroughOptions>();
useEffect(() => {
fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: any[]) => setData({ sources: [{ id: "medals", data }] }));
}, []);
const drillThroughTo = useCallback((filter: AgFilterDefinition) => {
const { api } = studioRef.current!;
savedStateRef.current = api.getState();
api.setState(DRILL_THROUGH_STATE);
setDrillThrough({ filter });
}, []);
const goBack = useCallback(() => {
const savedState = savedStateRef.current;
if (!savedState) {
return;
}
studioRef.current!.api.setState(savedState);
setDrillThrough(undefined);
savedStateRef.current = undefined;
}, []);
const getContextMenuItems = useCallback(
({
filter,
getActiveFiltersForWidget,
}: AgGetContextMenuParams): AgContextMenuItem[] => {
if (filter == null) {
return [];
}
const sportCondition = getSportCondition(filter);
if (!sportCondition) {
return [];
}
return [
{
name: `Drill Through to ${sportCondition.value}`,
action: () =>
drillThroughTo(
getDrillThroughFilter(filter, getActiveFiltersForWidget?.()),
),
},
];
},
[drillThroughTo],
);
return (
<div style={containerStyle}>
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<div className="example-controls">
<div className="controls-row">
{drillThrough && <button onClick={goBack}>Go Back</button>}
</div>
</div>
<AgStudio
ref={studioRef}
style={studioStyle}
className="my-studio-container"
data={data}
initialState={INITIAL_STATE}
mode="edit"
drillThrough={drillThrough}
getContextMenuItems={getContextMenuItems}
/>
</div>
</div>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<StudioExample />
</StrictMode>,
);
Click a country in Medals by Country, then right-click Swimming in Medals by Sport and choose Drill Through to Swimming. The detail report shows only Swimming medals for that country. Open the Filters Panel to see both conditions on the read-only card. Click Go Back to return.
Destination and Return Copy Link
Studio applies the drill-through filter to the report it is given. Your application decides where the detail report opens and how the user returns.
In Place Copy Link
The first example replaces the current report. It saves the report state before drilling through, and its Go Back button restores it and clears the drillThrough property.
Popup Copy Link
This example opens the detail report in a Popup titled Drill-Through Detail. The popup holds a second Studio that shares the data engine of the first. Right-click a sport in Medals by Sport, such as Swimming, and choose Drill Through to Swimming to open it.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
import {
AgConditionDefinition,
AgContextMenuItem,
AgDataEngine,
AgDataSourcesDefinition,
AgFilterDefinition,
AgGetContextMenuParams,
AgLogicalDefinition,
AgReportHistory,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
enableStudioDevValidations,
} from "ag-studio";
import { PopupContentParams } from "./interfaces.tsx";
import PopupContent from "./popupContent.tsx";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
const drillThroughState: AgReportState = {
pages: [
{
id: "drillThrough",
layout: {
type: "standalone",
},
widgets: {
grid: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.athlete" },
{ id: "medals.country" },
{ id: "medals.sport" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
],
},
},
},
widgetLayout: {
grid: {
xTrack: 0,
yTrack: 0,
xSpan: 0,
ySpan: 0,
},
},
},
],
selectedPageId: "drillThrough",
};
const isLogicalDefinition: (
filter: AgFilterDefinition,
) => filter is AgLogicalDefinition = (filter: AgFilterDefinition) => {
return (filter as AgLogicalDefinition).conditions != null;
};
const getSportCondition: (
filter: AgFilterDefinition,
) => AgConditionDefinition | undefined = (filter: AgFilterDefinition) => {
if (!isLogicalDefinition(filter)) {
return filter.field.id === "medals.sport" ? filter : undefined;
}
return filter.conditions.length === 1
? getSportCondition(filter.conditions[0])
: undefined;
};
const StudioExample = () => {
const studioRef = useRef<AgStudioRef>(null);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
const initialState = useMemo<AgReportState | AgReportHistory>(() => {
return {
pages: [
{
id: "summary",
widgets: {
instructions: {
type: "text",
dataMapping: {},
format: {
style: {
text: "Right-click a sport to drill through.",
typography: { fontWeight: "normal" },
},
},
},
"medals-by-sport": {
type: "grid",
dataMapping: {
cols: [
{
id: "medals.sport",
},
{
id: "medals.gold",
aggregation: "sum",
},
{
id: "medals.silver",
aggregation: "sum",
},
{
id: "medals.bronze",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Medals by Sport",
},
},
},
"top-medals-by-sport": {
type: "column-chart-grouped",
dataMapping: {
categoryKey: [
{
id: "medals.sport",
},
],
valueKey: [
{
id: "medals.total",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Top Medals by Sport",
},
},
sort: [
{
field: {
id: "medals.total",
aggregation: "sum",
},
direction: "desc",
},
],
},
"medals-by-country": {
type: "bar-chart-grouped",
dataMapping: {
categoryKey: [
{
id: "medals.country",
},
],
valueKey: [
{
id: "medals.total",
aggregation: "sum",
},
],
},
format: {
title: {
enabled: true,
text: "Medals by Country",
},
},
sort: [
{
field: {
id: "medals.total",
aggregation: "sum",
},
direction: "desc",
},
],
},
},
widgetLayout: {
instructions: {
xTrack: 0,
yTrack: 0,
xSpan: 24,
ySpan: 4,
},
"medals-by-sport": {
xTrack: 0,
yTrack: 4,
xSpan: 24,
ySpan: 16,
},
"top-medals-by-sport": {
xTrack: 0,
yTrack: 20,
xSpan: 12,
ySpan: 16,
},
"medals-by-country": {
xTrack: 12,
yTrack: 20,
xSpan: 12,
ySpan: 16,
},
},
filter: {
page: [],
widget: {
"top-medals-by-sport": [
{
field: {
id: "medals.total",
},
view: {
expanded: true,
viewTypeId: "rank",
},
model: {
operator: "rank",
value: [10, null],
},
},
],
"medals-by-country": [
{
field: {
id: "medals.total",
},
view: {
expanded: true,
viewTypeId: "rank",
},
model: {
operator: "rank",
value: [10, null],
},
},
],
},
},
},
],
selectedPageId: "summary",
panels: {
filters: {
collapsed: true,
},
edit: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
}, []);
const onApiReady = useCallback((params: AgStudioApiReadyEvent) => {
fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: any[]) => setData({ sources: [{ id: "medals", data }] }));
}, []);
const openDrillThroughPopup = useCallback(
(
filter: AgFilterDefinition,
restoreFocusOnClose: AgGetContextMenuParams["restoreFocusOnClose"],
) => {
const engine = studioRef.current!.api.getDataEngine();
if (!engine) {
return;
}
studioRef.current!.api.createPopup<PopupContentParams>({
comp: PopupContent,
title: "Drill-Through Detail",
movable: true,
maximizable: true,
resizable: true,
minHeight: 500,
compParams: ({ closePopup }) => ({
filter,
closePopup,
engine,
state: drillThroughState,
}),
closedCallback: () => {
restoreFocusOnClose?.();
},
});
},
[PopupContent, drillThroughState],
);
const getContextMenuItems = useCallback(
(params: AgGetContextMenuParams): AgContextMenuItem[] => {
const { filter, restoreFocusOnClose } = params;
if (filter == null) {
return [];
}
const sportCondition = getSportCondition(filter);
if (!sportCondition) {
return [];
}
return [
{
name: `Drill Through to ${sportCondition.value}`,
action: () => openDrillThroughPopup(filter, restoreFocusOnClose),
},
];
},
[openDrillThroughPopup],
);
return (
<div style={containerStyle}>
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<AgStudio
ref={studioRef}
style={studioStyle}
className="my-studio-container"
data={data}
initialState={initialState}
mode={"edit"}
getContextMenuItems={getContextMenuItems}
onApiReady={onApiReady}
/>
</div>
</div>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<StudioExample />
</StrictMode>,
);
When the popup closes, the example calls restoreFocusOnClose so focus returns to the widget, as described in Context Menu - Restoring Focus.
If launching Studio in a popup, override the Min Width and Min Height based on the size of the popup to avoid unnecessary scrollbars. The popup already has the Studio theming variables set from the parent Studio instance, which will override any set via the theme property in the popup instance. Set the theme variables on the popup instance via CSS, e.g. --ag-studio-min-width: 0px; --ag-studio-min-height: 0px. This is demonstrated in the example above.
Custom Copy Link
The menu item action can do anything your application needs. This action opens another page of the application and passes the clicked sport in the URL:
const getContextMenuItems = (params) => {
const { filter } = params;
if (filter == null) {
return [];
}
// The clicked item is one condition, or an AND of one condition per field
const conditions = filter.operator === 'AND' ? filter.conditions : [filter];
const sportCondition = conditions.find((condition) => condition.field && condition.field.id === 'medals.sport');
const sport = sportCondition && sportCondition.value;
if (sport == null) {
return [];
}
return [
{
name: `Drill Through to ${sport}`,
action: () => window.location.assign(`/sports?sport=${encodeURIComponent(sport)}`),
},
];
};
<AgStudio getContextMenuItems={getContextMenuItems} /> Highlighting Rows in a Table Copy Link
A table can show the drill-through rows in context instead of filtering them out. Set its Drill Through > Mode setting in the Compose Panel to Highlight, or set format.drillThrough to 'highlight'. The table then shows every row, with the rows matching the drill-through filter selected. The setting appears only while the report has a drillThrough property.
The report below is opened with a drill-through filter on Swimming. The Filters Panel shows the filter as a read-only card. The Medal Table shows every row, with the Swimming rows selected. Gold Medals by Country is filtered to Swimming.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
import {
AgDataEngine,
AgDataSourcesDefinition,
AgDrillThroughOptions,
AgReportHistory,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
enableStudioDevValidations,
} from "ag-studio";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
const StudioExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
const initialState = useMemo<AgReportState | AgReportHistory>(() => {
return {
pages: [
{
id: "drillThrough",
widgets: {
grid: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.athlete" },
{ id: "medals.country" },
{ id: "medals.sport" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
],
},
format: {
title: {
enabled: true,
text: "Medal Table",
},
drillThrough: "highlight",
},
sort: [
{
field: { id: "medals.gold", aggregation: "sum" },
direction: "desc",
},
],
},
"bar-chart": {
type: "bar-chart-grouped",
dataMapping: {
categoryKey: [{ id: "medals.country" }],
valueKey: [{ id: "medals.gold", aggregation: "sum" }],
tooltipKey: [],
},
format: {
title: {
enabled: true,
text: "Gold Medals by Country",
},
},
sort: [
{
field: {
id: "medals.gold",
aggregation: "sum",
},
direction: "desc",
},
],
},
},
filter: {
page: [],
widget: {
"bar-chart": [
{
field: { id: "medals.gold" },
view: { expanded: true, viewTypeId: "rank" },
model: { operator: "rank", value: [10, null] },
},
],
},
},
widgetLayout: {
grid: {
xTrack: 0,
yTrack: 0,
xSpan: 24,
ySpan: 16,
},
"bar-chart": {
xTrack: 0,
yTrack: 16,
xSpan: 24,
ySpan: 16,
},
},
},
],
selectedPageId: "drillThrough",
panels: {
edit: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
}, []);
const drillThrough = useMemo<AgDrillThroughOptions>(() => {
return {
filter: {
field: { id: "medals.sport" },
operator: "equals",
value: "Swimming",
},
};
}, []);
const onApiReady = useCallback((params: AgStudioApiReadyEvent) => {
fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: any[]) => setData({ sources: [{ id: "medals", data }] }));
}, []);
return (
<div style={containerStyle}>
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<AgStudio
style={studioStyle}
className="my-studio-container"
data={data}
initialState={initialState}
mode={"edit"}
drillThrough={drillThrough}
onApiReady={onApiReady}
/>
</div>
</div>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<StudioExample />
</StrictMode>,
);
To switch the mode, select the Medal Table, open the Compose Panel and change Drill Through > Mode between Filter and Highlight.
Drill-Through API Copy Link
Properties Copy Link
Supplies an inbound drill-through filter to constrain the report, for example when the
user has navigated in from another report or page.
The filter is applied alongside the page filters on every data request, and is shown to
the user in the Filters Panel, but cannot be edited or removed there. It is not included
when the report's state is read or saved. Rank filters are not supported in a drill-through filter
and are ignored with a warning. |
Drill-Through Options Copy Link
Properties available on the AgDrillThroughOptions<TRegistry extends AgCoreBaseRegistry = AgCoreDefaultRegistry> interface.
A filter that constrains every data request the report makes, apart from a table widget whose Drill Through setting is set to highlight: such a table requests its full data set and shows the rows matching this filter as selected rows instead. Each condition names its own field, so a context may span several fields, for example country and year together. The filter is shown to the user in the Filters Panel, but cannot be edited or removed there, and is not included when the report's state is read or saved. Rank filters are not supported in a drill-through filter: any rank condition (operator: 'rank') is ignored, the rest of the filter still applies, and a warning is reported.
|