A standalone layout is a page layout for a page that holds exactly one widget. The widget fills the width and height of the page canvas, so it suits pages such as a full-page grid or a single detail chart.
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgStudio } from "ag-studio-angular";
import {
AgDataEngine,
AgDataSourcesDefinition,
AgReportHistory,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
AgStudioTheme,
enableStudioDevValidations,
studioTheme,
} from "ag-studio";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
@Component({
selector: "my-app",
standalone: true,
imports: [AgStudio],
template: `<div style="display: flex; flex-direction: column; height: 100%">
<ag-studio
style="width: 100%; height: 100%;"
class="my-studio-container"
[initialState]="initialState"
[mode]="mode"
[theme]="theme"
[data]="data"
(apiReady)="onApiReady($event)"
/>
</div> `,
})
export class AppComponent {
initialState: AgReportState | AgReportHistory = {
pages: [
{
id: "a",
layout: {
type: "standalone",
},
widgets: {
grid: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.country" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
{ id: "medals.total", aggregation: "sum" },
],
},
sort: [
{
field: { id: "medals.total", aggregation: "sum" },
direction: "desc",
},
],
},
},
},
],
selectedPageId: "a",
panels: {
filters: { collapsed: true },
edit: { collapsed: true },
data: { collapsed: true },
},
};
mode: AgStudioMode = "edit";
theme: AgStudioTheme = studioTheme.withParams({
studioMinWidth: 0,
studioMinHeight: 0,
});
constructor(private http: HttpClient) {}
onApiReady(params: AgStudioApiReadyEvent) {
this.http
.get("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.subscribe((data) => (this.data = { sources: [{ id: "medals", data }] }));
}
}
Setting a Standalone Layout Copy Link
Set type to 'standalone' in the layout of a page in the report state:
<ag-studio
[initialState]="initialState"
/* other studio properties ... */ />
this.initialState = {
pages: [
{
id: 'medals',
layout: {
type: 'standalone',
},
widgets: {
grid: {
type: 'grid',
dataMapping: {
cols: [{ id: 'medals.country' }, { id: 'medals.gold', aggregation: 'sum' }],
},
},
},
},
],
selectedPageId: 'medals',
};To use a standalone layout for every page, set type in the Studio-wide layout property instead. A page's own layout takes precedence over the Studio-wide value. For a page that holds more than one widget, see More Than One Widget.
<ag-studio
[layout]="layout"
/* other studio properties ... */ />
this.layout = {
type: 'standalone',
};In a standalone layout:
- The widget cannot be moved or resized.
- The page's
widgetLayoutis not used, so it can be left out. - The
columnsandrowHeightproperties have no effect, because the widget is not placed on a grid.
Width and Height Copy Link
The outer Studio component has a default Min Width and Min Height of 600px. In a standalone layout, consider overriding the studioMinWidth and studioMinHeight theme parameters (for example, setting them to 0) to avoid double scrollbars when the widget fills the page.
Canvas Width Copy Link
A standalone layout takes its default canvas width from two theme parameters, in place of the Canvas Min Width and Canvas Max Width used by other pages:
- Canvas Standalone Min Width (
studioCanvasStandaloneMinWidth) defaults to0, so there is no minimum width. - Canvas Standalone Max Width (
studioCanvasStandaloneMaxWidth) defaults to the value ofstudioCanvasMaxWidth, which has no maximum unless set.
The minWidth and maxWidth layout properties override these theme parameters. A value set on the page is used first, then a value set in the Studio-wide layout property, then the theme parameter.
More Than One Widget Copy Link
A page with a standalone layout must hold exactly one widget. This applies whether the page sets the layout in its own layout or inherits it from the Studio-wide layout property.
When such a page holds more than one widget, Studio reports a state error and shows only the first widget. What happens to the other widgets in the report state depends on the mode:
- In edit mode, they are removed from the report state.
- In view mode, they are kept in the report state but are not shown, and the state error is fatal.
See Invalid State for how to handle state errors.