diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.component.html b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.html
new file mode 100644
index 00000000..61a8104e
--- /dev/null
+++ b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.html
@@ -0,0 +1,34 @@
+
Actions displayed on top as inline bar
+
+ This is the default display configuration used by datagrid if no display config is provided. When displayed inline,
+ Contextual actions that are marked as featured are shown towards the left outside the dropdown containing all the
+ contextual actions
+
+
+
+Contextual actions displayed in rows as inline bar
+Only contextual actions are displayed in rows and static actions are always displayed on top
+
+
+Contextual actions displayed in rows as dropdown
+Only contextual actions are displayed in rows and static actions are always displayed on top
+
diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.component.scss b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.scss
new file mode 100644
index 00000000..2409a221
--- /dev/null
+++ b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.scss
@@ -0,0 +1,7 @@
+vcd-datagrid ::ng-deep .inline-actions-container {
+ & .inline-action-dropdown {
+ & ::ng-deep .nested-dropdown > .first-dropdown-toggle {
+ margin-top: 0 !important;
+ }
+ }
+}
diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.component.ts b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.ts
new file mode 100644
index 00000000..f4468d71
--- /dev/null
+++ b/projects/examples/src/components/datagrid/datagrid-action-display.example.component.ts
@@ -0,0 +1,159 @@
+/*!
+ * Copyright 2019 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ ActionDisplayConfig,
+ ActionItem,
+ ActionStyling,
+ ActionType,
+ DatagridActionDisplayConfig,
+ DatagridComponent,
+ DatagridContextualActionPosition,
+ getDefaultDatagridActionDisplayConfig,
+ GridColumn,
+ GridDataFetchResult,
+ GridSelectionType,
+ GridState,
+ TextIcon,
+} from '@vcd/ui-components';
+
+interface Record {
+ value: string;
+ paused: boolean;
+}
+
+interface Blah {
+ foo: string;
+ bar: string;
+}
+
+type HandlerData = Record[] | Blah;
+
+/**
+ *
+ */
+@Component({
+ selector: 'vcd-datagrid-action-display-example',
+ templateUrl: `./datagrid-action-display.example.component.html`,
+ styleUrls: ['datagrid-action-display.example.component.scss'],
+})
+export class DatagridActionDisplayExampleComponent {
+ @ViewChild(DatagridComponent, { static: true }) dg: DatagridComponent;
+
+ gridData: GridDataFetchResult = {
+ items: [],
+ };
+
+ singleSelectionType = GridSelectionType.Single;
+
+ columns: GridColumn[] = [
+ {
+ displayName: 'Some Value',
+ renderer: 'value',
+ },
+ ];
+
+ actions: ActionItem[] = [
+ {
+ textKey: 'Add',
+ handler: () => {
+ console.log('Adding stuff!');
+ },
+ class: 'add',
+ actionType: ActionType.STATIC_FEATURED,
+ isTranslatable: false,
+ },
+ {
+ textKey: 'Custom handler data',
+ handler: (rec: R[], data: Blah) => {
+ console.log('Custom handler data ' + JSON.stringify(data));
+ },
+ handlerData: { foo: 'foo', bar: 'bar' },
+ class: 'b',
+ icon: 'pause',
+ actionType: ActionType.STATIC,
+ isTranslatable: false,
+ },
+ {
+ textKey: 'Contextual action',
+ handler: () => {
+ console.log('Contextual action output');
+ },
+ availability: (rec: R[]) => rec.length === 1,
+ isTranslatable: false,
+ },
+ {
+ textKey: 'power.actions',
+ children: [
+ {
+ textKey: 'Start',
+ handler: (rec: R[]) => {
+ console.log('Starting ' + rec[0].value);
+ rec[0].paused = false;
+ },
+ availability: (rec: R[]) => rec.length === 1 && rec[0].paused,
+ actionType: ActionType.CONTEXTUAL_FEATURED,
+ isTranslatable: false,
+ },
+ {
+ textKey: 'Stop',
+ handler: (rec: R[]) => {
+ console.log('Stopping ' + (rec as R[])[0].value);
+ rec[0].paused = true;
+ },
+ availability: (rec: R[]) => rec.length === 1 && !rec[0].paused,
+ actionType: ActionType.CONTEXTUAL_FEATURED,
+ isTranslatable: false,
+ },
+ ],
+ },
+ {
+ textKey: 'grouped.actions',
+ children: [
+ {
+ textKey: 'Contextual featured',
+ actionType: ActionType.CONTEXTUAL_FEATURED,
+ handler: () => null,
+ isTranslatable: false,
+ },
+ {
+ textKey: 'Contextual 2',
+ handler: () => null,
+ isTranslatable: false,
+ },
+ ],
+ isTranslatable: true,
+ },
+ ];
+
+ topAndInlineActionDisplayConfig: DatagridActionDisplayConfig = getDefaultDatagridActionDisplayConfig();
+
+ rowAndInlineActionDisplayConfig: DatagridActionDisplayConfig = {
+ contextual: {
+ styling: ActionStyling.INLINE,
+ position: DatagridContextualActionPosition.ROW,
+ },
+ };
+
+ rowAndDropdownActionDisplayConfig: DatagridActionDisplayConfig = {
+ contextual: {
+ styling: ActionStyling.DROPDOWN,
+ position: DatagridContextualActionPosition.ROW,
+ },
+ };
+
+ refresh(eventData: GridState): void {
+ this.gridData = {
+ items: [
+ { value: 'a', paused: false },
+ { value: 'b', paused: true },
+ { value: 'a', paused: true },
+ { value: 'b', paused: false },
+ ],
+ totalItems: 2,
+ };
+ }
+}
diff --git a/projects/examples/src/components/datagrid/datagrid-action-display.example.module.ts b/projects/examples/src/components/datagrid/datagrid-action-display.example.module.ts
new file mode 100644
index 00000000..9090c2e9
--- /dev/null
+++ b/projects/examples/src/components/datagrid/datagrid-action-display.example.module.ts
@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2019 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ClarityModule } from '@clr/angular';
+import { VcdComponentsModule } from '@vcd/ui-components';
+import { DatagridActionDisplayExampleComponent } from './datagrid-action-display.example.component';
+
+@NgModule({
+ declarations: [DatagridActionDisplayExampleComponent],
+ imports: [CommonModule, ClarityModule, VcdComponentsModule],
+ exports: [DatagridActionDisplayExampleComponent],
+ entryComponents: [DatagridActionDisplayExampleComponent],
+})
+export class DatagridActionDisplayExampleModule {}
diff --git a/projects/examples/src/components/datagrid/datagrid.examples.module.ts b/projects/examples/src/components/datagrid/datagrid.examples.module.ts
index 81c15ceb..1185d2b6 100644
--- a/projects/examples/src/components/datagrid/datagrid.examples.module.ts
+++ b/projects/examples/src/components/datagrid/datagrid.examples.module.ts
@@ -6,6 +6,8 @@
import { NgModule } from '@angular/core';
import { DatagridComponent } from '@vcd/ui-components';
import { Documentation } from '@vmw/ng-live-docs';
+import { DatagridActionDisplayExampleComponent } from './datagrid-action-display.example.component';
+import { DatagridActionDisplayExampleModule } from './datagrid-action-display.example.module';
import { DatagridActionMenuTrackingExampleComponent } from './datagrid-action-menu-tracking-example.component';
import { DatagridActionMenuTrackerExampleModule } from './datagrid-action-menu-tracking.example.module';
import { DatagridActivityReporterExampleComponent } from './datagrid-activity-reporter.example.component';
@@ -156,6 +158,12 @@ Documentation.registerDocumentationEntry({
title: 'Set the width of columns through CSS class names',
urlSegment: 'datagrid-column-width',
},
+ {
+ component: DatagridActionDisplayExampleComponent,
+ forComponent: null,
+ title: 'Action menu display configurations',
+ urlSegment: 'datagrid-action-display',
+ },
],
});
/**
@@ -181,6 +189,7 @@ Documentation.registerDocumentationEntry({
DatagridLoadingPlaceholderExampleModule,
DatagridDetailPaneExampleModule,
DatagridColumnWidthExampleModule,
+ DatagridActionDisplayExampleModule,
],
})
export class DatagridExamplesModule {}