@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
204 lines (203 loc) • 6.34 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { TemplateRef, ViewContainerRef } from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor } from "@progress/kendo-angular-buttons";
import { ActionsLayout, DialogAnimation, DialogThemeColor } from "@progress/kendo-angular-dialog";
import { Orientation } from "@progress/kendo-angular-inputs";
import { SVGIcon } from "@progress/kendo-svg-icons";
import { FieldDataType } from "../../common/field-datatype";
/**
* @hidden
*/
export interface FormControlSettings {
name: string;
label?: string;
hint?: string;
errors?: {
[key: string]: string;
};
dataType: FieldDataType;
formControl: FormControl;
orientation?: Orientation;
template?: TemplateRef<any>;
templateContext?: any;
}
/**
* Configures the built-in external editing form.
*
* @example
* ```typescript
* const settings: FormSettings = {
* orientation: 'vertical',
* showErrors: true,
* floatingLabels: false,
* fields: {
* name: { label: 'Name', hint: 'Enter a name.' }
* }
* };
* ```
*/
export interface FormSettings {
/**
* Customizes the label, hint, and error messages for each form control.
*/
fields?: {
[key: string]: FormFieldSettings;
};
/**
* Sets the orientation of the elements in the form.
*
*/
orientation?: Orientation;
/**
* Shows validation errors for each form control.
*
*/
showErrors?: boolean;
/**
* Renders FloatingLabel components instead of the default Label components.
*
*/
floatingLabels?: boolean;
}
/**
* Configures the form fields in the built-in external editing form.
*
* @example
* ```typescript
* const fieldSettings: FormFieldSettings = {
* label: 'Email',
* hint: 'Enter a valid email address.',
* errors: { required: 'Email is required.' }
* };
* ```
*/
export interface FormFieldSettings {
/**
* Passes custom error messages as key-value pairs. The key is the error name in the `FormControl` validators, and the value is the error message shown when the control is invalid.
*
* The default error message is `The "{fieldName}" field has "{errorName}" validation error.`
*/
errors?: {
[key: string]: string;
};
/**
* Provides custom hint text. By default, no hint message appears.
*/
hint?: string;
/**
* Provides a custom label for the form control. By default, the column `title` or `field` appears.
*/
label?: string;
}
/**
* Configures the external editing Dialog.
*
* @example
* ```typescript
* const dialogSettings: FormDialogSettings = {
* title: 'Edit Item',
* width: 400,
* themeColor: 'primary'
* };
* ```
*/
export interface FormDialogSettings {
/**
* Sets the title of the Dialog. If the title is omitted, the Dialog does not render a **Close** button.
*/
title?: string;
/**
* Sets the CSS classes for the Dialog wrapper element. Supports the union type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) accepts.
*/
cssClass?: any;
/**
* Configures the Dialog opening animation ([see example]({% slug animations_dialog %})). By default, the animation type is `translate` and its duration is `300ms`.
*/
animation?: boolean | DialogAnimation;
/**
* Sets the HTML attributes of the Dialog wrapper element. Accepts string key-value pairs.
*/
htmlAttributes?: {
[key: string]: string;
};
/**
* Sets the width of the Dialog. A number sets the width in pixels. A string sets the width in arbitrary units, for example, `50%`.
*/
width?: number | string;
/**
* Sets the minimum width of the Dialog. A number sets the minimum width in pixels. A string sets the minimum width in arbitrary units, for example, `50%`.
*/
minWidth?: number | string;
/**
* Sets the maximum width of the Dialog. A number sets the maximum width in pixels. A string sets the maximum width in arbitrary units, for example, `50%`.
*/
maxWidth?: number | string;
/**
* Sets the height of the Dialog. A number sets the height in pixels. A string sets the height in arbitrary units, for example, `50%`.
*/
height?: number | string;
/**
* Sets the minimum height of the Dialog. A number sets the minimum height in pixels. A string sets the minimum height in arbitrary units, for example, `50%`.
*/
minHeight?: number | string;
/**
* Sets the maximum height of the Dialog. A number sets the maximum height in pixels. A string sets the maximum height in arbitrary units, for example, `50%`.
*/
maxHeight?: number | string;
/**
* Defines the container for the Dialog. Setting this option changes where the Dialog appears in the page hierarchy. The Dialog styling stays the same.
*/
appendTo?: ViewContainerRef;
/**
* Sets the title of the close button.
*/
closeTitle?: string;
/**
* Sets the layout of the action buttons in the Dialog.
*/
actionsLayout?: ActionsLayout;
/**
* Sets the theme color of the Dialog.
*/
themeColor?: DialogThemeColor;
}
/**
* @hidden
*/
export interface FormActionButton {
actionType: FormActionButtonType;
text?: string;
clickHandler?: FormActionCallback;
icon?: string;
svgIcon?: SVGIcon;
fillMode?: ButtonFillMode;
rounded?: ButtonRounded;
size?: ButtonSize;
themeColor?: ButtonThemeColor;
}
/**
* @hidden
*/
export type FormActionButtonType = 'submit' | 'reset' | 'button';
/**
* @hidden
*/
export type FormActionCallback = (event?: FormActionEvent) => any;
/**
* @hidden
*/
export interface FormActionEvent {
originalEvent: Event;
actionType: FormActionButtonType;
}
/**
* @hidden
*/
export interface FormSubmitEvent {
originalEvent: any;
formGroup: FormGroup;
}