@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
197 lines (196 loc) • 6.48 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;
}
/**
* The configurable settings of the built-in external editing form.
*/
export interface FormSettings {
/**
* Allows customizing the label, hint, and error messages for each form control.
*/
fields?: {
[key: string]: FormFieldSettings;
};
/**
* Sets the orientation of the elements within the form.
*
* @default 'vertical'
*/
orientation?: Orientation;
/**
* Determines whether to display validation errors for each form control.
*
* @default true
*/
showErrors?: boolean;
/**
* Determines whether to render `FloatingLabel` components instead of the default `Label` components.
*
* @default false
*/
floatingLabels?: boolean;
}
/**
* The configurable settings of the form fields in the built-in external editing form.
*/
export interface FormFieldSettings {
/**
* Use this option to pass custom error messages as key-value pairs where the key is the name of the error in
* the `FormControl` validators, and the value is the desired error message to be displayed in the form when the control is invalid.
*
* The default error message will follow the pattern `The "{fieldName}" field has "{errorName}" validation error`.
*/
errors?: {
[key: string]: string;
};
/**
* Use this option to provide custom hint text. By default, no hint message will be displayed.
*/
hint?: string;
/**
* Use this option to provide custom label for the respective form control.
* By default, the column `title` (or `field` when there is no `title` set) will be displayed.
*/
label?: string;
}
/**
* The settings of the external editing Dialog.
*/
export interface FormDialogSettings {
/**
* Sets the title of the Dialog. If `title` is omitted,
* the Dialog will not render a **Close** button.
*/
title?: string;
/**
* Sets the CSS classes that will be rendered on 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 set to `translate` and its duration is `300ms`.
*/
animation?: boolean | DialogAnimation;
/**
* Sets the HTML attributes of the Dialog wrapper element.
* The property accepts string key-value based pairs.
*/
htmlAttributes?: {
[key: string]: string;
};
/**
* Specifies the width of the Dialog.
* A numeric value sets the width in pixels.
* A string value sets the width in arbitrary units—for example, `50%`.
*/
width?: number | string;
/**
* Specifies the minimum width of the Dialog.
* A numeric value sets the minimum width in pixels.
* A string value sets the minimum width in arbitrary units—for example, `50%`.
*/
minWidth?: number | string;
/**
* Specifies the maximum width of the Dialog.
* A numeric value sets the maximum width in pixels.
* A string value sets the maximum width in arbitrary units—for example, `50%`.
*/
maxWidth?: number | string;
/**
* Specifies the height of the Dialog.
* A numeric value sets the height in pixels.
* A string value sets the height in arbitrary units—for example, `50%`.
*/
height?: number | string;
/**
* Specifies the minimum height of the Dialog.
* A numeric value sets the minimum height in pixels.
* A string value sets the minimum height in arbitrary units—for example, `50%`.
*/
minHeight?: number | string;
/**
* Specifies the maximum height of the Dialog.
* A numeric value sets the maximum height in pixels.
* A string value sets the maximum height in arbitrary units—for example, `50%`.
*/
maxHeight?: number | string;
/**
* Defines the container in which the Dialog will be inserted.
* Specifying this option changes the place in the page hierarchy where the Dialog will be inserted.
* The styling of the Dialog will remain the same.
*/
appendTo?: ViewContainerRef;
/**
* Specifies the title of the close button.
*/
closeTitle?: string;
/**
* Specifies the layout of the action buttons in the Dialog.
*/
actionsLayout?: ActionsLayout;
/**
* Specifies 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;
}