@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
718 lines (715 loc) • 40.9 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, HostBinding, Input, Inject, Optional, TemplateRef } from '@angular/core';
import { EditService } from '../editing/edit.service';
import { isSpanColumn, isCheckboxColumn, isRowReorderColumn } from '../columns/column-base';
import { CommandColumnComponent } from '../columns/command-column.component';
import { isColumnComponent } from '../columns/column.component';
import { columnsToRender } from "../columns/column-common";
import { ReactiveFormsModule } from '@angular/forms';
import { isPresent, isNullOrEmptyString, extractFormat } from '../utils';
import { CELL_CONTEXT } from './common/cell-context';
import { IdService } from '../common/id.service';
import { minusIcon, plusIcon, reorderIcon } from '@progress/kendo-svg-icons';
import { ContextService } from '../common/provider.service';
import { FieldAccessorPipe } from './common/field-accessor.pipe';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { SelectionCheckboxDirective } from '../selection/selection-checkbox.directive';
import { FocusableDirective } from '../navigation/focusable.directive';
import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
import { CheckBoxComponent, NumericTextBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
import { TemplateContextDirective } from '@progress/kendo-angular-common';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { DetailTemplateDirective } from './details/detail-template.directive';
import { DetailsService } from './details/details.service';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import * as i0 from "@angular/core";
import * as i1 from "../editing/edit.service";
import * as i2 from "../common/id.service";
import * as i3 from "../common/provider.service";
import * as i4 from "./details/details.service";
import * as i5 from "@progress/kendo-angular-l10n";
import * as i6 from "@angular/forms";
/**
* @hidden
*/
export class CellComponent {
editService;
idService;
ctx;
detailsService;
localization;
cellContext;
get commandCellClass() {
return this.isCommand(this.column);
}
get dragHandleCellClass() {
return isRowReorderColumn(this.column);
}
get dragRowHandleLabel() {
return isRowReorderColumn(this.column) ? this.ctx.localization.get('dragRowHandleLabel') : undefined;
}
column;
columns;
columnIndex;
isNew = false;
isLoading = false;
isVirtual = false;
loadingTemplate;
detailTemplate;
item;
set rowIndex(index) {
this._rowIndex = index;
this.updateCellContext();
}
get rowIndex() {
return this._rowIndex;
}
dataItem;
reorderIcon = reorderIcon;
minusIcon = minusIcon;
plusIcon = plusIcon;
detailButtonIconName(viewItem) {
return viewItem.isExpanded ? 'minus' : 'plus';
}
detailButtonSvgIcon(viewItem) {
return viewItem.isExpanded ? this.minusIcon : this.plusIcon;
}
detailButtonText(viewItem) {
return viewItem.isExpanded ? this.localization.get('detailCollapse') : this.localization.get('detailExpand');
}
toggleRow(index, dataItem) {
this.detailsService.toggleRow(index, dataItem);
return false;
}
get stackedRowClass() {
const columnsLength = this.ctx.grid.stackedColumns?.columns.length;
if (this.ctx.grid.stackedColumns.areDefault && columnsLength > 1) {
return `k-grid-cols-${columnsLength}`;
}
}
get stackedRowStyle() {
const columnsWidths = this.ctx.grid.stackedColumns.columns.map(c => c.width).join(' ');
if (!this.ctx.grid.stackedColumns.areDefault && columnsWidths) {
return {
'grid-template-columns': `${columnsWidths}`
};
}
}
isEdited(column) {
const currentColumn = column || this.column;
if (!(this.editService.isEditing() || this.isNew) || !this.isColumnEditable(column)) {
return false;
}
const editContext = this.editService.columnContext(this.rowIndex, currentColumn);
return this.isFieldEditable(editContext, currentColumn);
}
get showLoading() {
return this.isVirtual && this.isLoading;
}
get formGroup() {
return this.editService.context(this.rowIndex).group;
}
getTemplateContext(column) {
this._templateContext.isNew = this.isNew;
this._templateContext.column = column || this.column;
this._templateContext.dataItem = this.dataItem;
this._templateContext.rowIndex = this.rowIndex;
this._templateContext.columnIndex = this.columnIndex;
this._templateContext.$implicit = this.dataItem;
return this._templateContext;
}
get isStackedLayoutMode() {
return this.ctx.grid?.isStacked;
}
getEditTemplateContext(column) {
this._editTemplateContext.$implicit = this.formGroup;
this._editTemplateContext.isNew = this.isNew;
this._editTemplateContext.column = column || this.column;
this._editTemplateContext.dataItem = this.dataItem;
this._editTemplateContext.formGroup = this.formGroup;
this._editTemplateContext.rowIndex = this.rowIndex;
return this._editTemplateContext;
}
get rowReorderTemplateContext() {
this._rowReorderTemplateContext.$implicit = this.dataItem;
this._rowReorderTemplateContext.columnIndex = this.columnIndex;
this._rowReorderTemplateContext.rowIndex = this.rowIndex;
return this._rowReorderTemplateContext;
}
get format() {
if (isColumnComponent(this.column) && !isNullOrEmptyString(this.column.format)) {
return extractFormat(this.column.format);
}
return undefined;
}
isBoundColumn(column) {
const currentColumn = column || this.column;
return currentColumn.field && !currentColumn.templateRef;
}
isCheckboxColumn(column) {
const currentColumn = column || this.column;
return isCheckboxColumn(currentColumn) && !currentColumn.templateRef;
}
get selectionCheckboxId() {
return this.idService.selectionCheckboxId(this.rowIndex);
}
get selectionCheckboxLabel() {
return this.ctx.localization.get('selectionCheckboxLabel');
}
get isSpanColumn() {
return isSpanColumn(this.column) && !this.column.templateRef;
}
get children() {
return columnsToRender([this.column]);
}
isRowReorderColumn(column) {
const currentColumn = column || this.column;
return isRowReorderColumn(currentColumn) && !currentColumn.templateRef;
}
isRowSelectable(column) {
const currentColumn = column || this.column;
return currentColumn.rowSelectable(this._rowIndex);
}
_rowIndex;
isColumnEditable(column) {
const currentColumn = column || this.column;
if (!currentColumn || this.isCommand(currentColumn)) {
return false;
}
return currentColumn.editable !== false;
}
_templateContext = {};
_editTemplateContext = {};
_rowReorderTemplateContext = {};
constructor(editService, idService, ctx, detailsService, localization, cellContext) {
this.editService = editService;
this.idService = idService;
this.ctx = ctx;
this.detailsService = detailsService;
this.localization = localization;
this.cellContext = cellContext;
}
ngDoCheck() {
this.updateCellContext();
}
isCommand(column) {
return column instanceof CommandColumnComponent;
}
isFieldEditable(editContext, column) {
if (!isPresent(editContext)) {
return false;
}
if (isPresent(column.editTemplate)) {
return true;
}
return isPresent(editContext.group) && isPresent(editContext.group.get(column.field));
}
updateCellContext() {
if (this.cellContext) {
this.cellContext.rowIndex = this._rowIndex;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.IdService }, { token: i3.ContextService }, { token: i4.DetailsService }, { token: i5.LocalizationService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columns: "columns", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", detailTemplate: "detailTemplate", item: "item", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
@if (isStackedLayoutMode) {
<div class="k-grid-stack-row"
[ngClass]="stackedRowClass"
[ngStyle]="stackedRowStyle">
@for (col of columns; track $index) {
<div class="k-grid-stack-cell"
[class.k-grid-stack-edit-cell]="isEdited(col)"
[class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
[class.k-command-cell]="isCommand(col)"
[kendoGridFocusable]="!isCommand(col)">
<div class="k-grid-stack-header">
@if (!col.headerTemplateRef) {
{{col.displayTitle}}
} @else {
<ng-template #headerTemplate
[templateContext]="{
templateRef: col.headerTemplateRef,
columnIndex: col.leafIndex,
column: col,
$implicit: col
}">
</ng-template>
}
</div>
<div class="k-grid-stack-content">
@if (!isEdited(col)) {
@if (!col.templateRef) {
@if (isBoundColumn(col)) {{{ dataItem | valueOf: col.field: col.format}}}
@if (isCheckboxColumn(col) && !isNew) {
@if (isRowSelectable(col)) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel">
</kendo-checkbox>
} @else {
@if (col.showDisabledCheckbox) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel"
[disabled]="true"
></kendo-checkbox>
}
}
}
@if (isRowReorderColumn(col) && !isNew) {
@if (!col.dragHandleTemplate?.first) {
<kendo-icon-wrapper
name="reorder"
[svgIcon]="reorderIcon">
</kendo-icon-wrapper>
} @else {
<ng-template
[ngTemplateOutlet]="col.rowDragHandleTemplateRef"
[ngTemplateOutletContext]="rowReorderTemplateContext">
</ng-template>
}
}
} @else {
<ng-template #template
[ngTemplateOutlet]="col.templateRef"
[ngTemplateOutletContext]="getTemplateContext(col)">
</ng-template>
}
}
@if (isEdited(col)) {
@if (!col.editTemplateRef) {
@switch (col.editor) {
@case ('numeric') {
<kendo-numerictextbox
[format]="format"
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-numerictextbox>
}
@case ('date') {
<kendo-datepicker
[format]="format"
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-datepicker>
}
@case ('boolean') {
<kendo-checkbox
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-checkbox>
}
@default {
<kendo-textbox
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-textbox>
}
}
} @else {
<ng-template
[ngTemplateOutlet]="col.editTemplateRef"
[ngTemplateOutletContext]="getEditTemplateContext(col)">
</ng-template>
}
}
</div>
</div>
}
@if (detailTemplate?.showIf(item.data, $any(item).index)) {
<div class="k-grid-stack-cell" [attr.aria-expanded]="item.isExpanded">
<div class="k-grid-stack-content">
<button kendoButton
fillMode="flat"
themeColor="primary"
[icon]="detailButtonIconName(item)"
[svgIcon]="detailButtonSvgIcon(item)"
(click)="toggleRow($any(item).index, item.data)">
{{ detailButtonText(item) }}
</button>
</div>
</div>
}
</div>
}
@if (!isStackedLayoutMode) {
@switch (isEdited()) {
@case (false) {
@if (!showLoading) {
@if (column.templateRef) {
<ng-template
[ngTemplateOutlet]="column.templateRef"
[ngTemplateOutletContext]="getTemplateContext()">
</ng-template>
}
@if (isSpanColumn) {
@for (childColumn of children; track $index) {
{{ dataItem | valueOf: childColumn.field: childColumn.format}}
}
}
@if (isBoundColumn()) {{{ dataItem | valueOf: column.field: column.format}}}
@if (isCheckboxColumn() && !isNew) {
@if (isRowSelectable()) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel">
</kendo-checkbox>
} @else {
@if (column.showDisabledCheckbox) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel"
[disabled]="true"
></kendo-checkbox>
}
}
}
@if (isRowReorderColumn() && !isNew) {
@if (!column.dragHandleTemplate?.first) {
<kendo-icon-wrapper
name="reorder"
[svgIcon]="reorderIcon">
</kendo-icon-wrapper>
} @else {
<ng-template
[ngTemplateOutlet]="column.rowDragHandleTemplateRef"
[ngTemplateOutletContext]="rowReorderTemplateContext">
</ng-template>
}
}
} @else {
@if (loadingTemplate) {
<ng-template
[ngTemplateOutlet]="loadingTemplate"
[ngTemplateOutletContext]="{$implicit: column}">
</ng-template>
} @else {
<div class="k-skeleton-text k-skeleton"></div>
}
}
}
@case (true) {
@if (column.editTemplateRef) {
<ng-template
[ngTemplateOutlet]="column.editTemplateRef"
[ngTemplateOutletContext]="getEditTemplateContext()">
</ng-template>
} @else {
@switch (column.editor) {
@case ('numeric') {
<kendo-numerictextbox
[format]="format"
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-numerictextbox>
}
@case ('date') {
<kendo-datepicker
[format]="format"
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-datepicker>
}
@case ('boolean') {
<kendo-checkbox
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-checkbox>
}
@default {
<kendo-textbox
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-textbox>
}
}
}
}
}
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellComponent, decorators: [{
type: Component,
args: [{
selector: '[kendoGridCell]',
template: `
@if (isStackedLayoutMode) {
<div class="k-grid-stack-row"
[ngClass]="stackedRowClass"
[ngStyle]="stackedRowStyle">
@for (col of columns; track $index) {
<div class="k-grid-stack-cell"
[class.k-grid-stack-edit-cell]="isEdited(col)"
[class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
[class.k-command-cell]="isCommand(col)"
[kendoGridFocusable]="!isCommand(col)">
<div class="k-grid-stack-header">
@if (!col.headerTemplateRef) {
{{col.displayTitle}}
} @else {
<ng-template #headerTemplate
[templateContext]="{
templateRef: col.headerTemplateRef,
columnIndex: col.leafIndex,
column: col,
$implicit: col
}">
</ng-template>
}
</div>
<div class="k-grid-stack-content">
@if (!isEdited(col)) {
@if (!col.templateRef) {
@if (isBoundColumn(col)) {{{ dataItem | valueOf: col.field: col.format}}}
@if (isCheckboxColumn(col) && !isNew) {
@if (isRowSelectable(col)) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel">
</kendo-checkbox>
} @else {
@if (col.showDisabledCheckbox) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel"
[disabled]="true"
></kendo-checkbox>
}
}
}
@if (isRowReorderColumn(col) && !isNew) {
@if (!col.dragHandleTemplate?.first) {
<kendo-icon-wrapper
name="reorder"
[svgIcon]="reorderIcon">
</kendo-icon-wrapper>
} @else {
<ng-template
[ngTemplateOutlet]="col.rowDragHandleTemplateRef"
[ngTemplateOutletContext]="rowReorderTemplateContext">
</ng-template>
}
}
} @else {
<ng-template #template
[ngTemplateOutlet]="col.templateRef"
[ngTemplateOutletContext]="getTemplateContext(col)">
</ng-template>
}
}
@if (isEdited(col)) {
@if (!col.editTemplateRef) {
@switch (col.editor) {
@case ('numeric') {
<kendo-numerictextbox
[format]="format"
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-numerictextbox>
}
@case ('date') {
<kendo-datepicker
[format]="format"
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-datepicker>
}
@case ('boolean') {
<kendo-checkbox
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-checkbox>
}
@default {
<kendo-textbox
[formControl]="$any(formGroup.get(col.field))"
kendoGridFocusable
></kendo-textbox>
}
}
} @else {
<ng-template
[ngTemplateOutlet]="col.editTemplateRef"
[ngTemplateOutletContext]="getEditTemplateContext(col)">
</ng-template>
}
}
</div>
</div>
}
@if (detailTemplate?.showIf(item.data, $any(item).index)) {
<div class="k-grid-stack-cell" [attr.aria-expanded]="item.isExpanded">
<div class="k-grid-stack-content">
<button kendoButton
fillMode="flat"
themeColor="primary"
[icon]="detailButtonIconName(item)"
[svgIcon]="detailButtonSvgIcon(item)"
(click)="toggleRow($any(item).index, item.data)">
{{ detailButtonText(item) }}
</button>
</div>
</div>
}
</div>
}
@if (!isStackedLayoutMode) {
@switch (isEdited()) {
@case (false) {
@if (!showLoading) {
@if (column.templateRef) {
<ng-template
[ngTemplateOutlet]="column.templateRef"
[ngTemplateOutletContext]="getTemplateContext()">
</ng-template>
}
@if (isSpanColumn) {
@for (childColumn of children; track $index) {
{{ dataItem | valueOf: childColumn.field: childColumn.format}}
}
}
@if (isBoundColumn()) {{{ dataItem | valueOf: column.field: column.format}}}
@if (isCheckboxColumn() && !isNew) {
@if (isRowSelectable()) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel">
</kendo-checkbox>
} @else {
@if (column.showDisabledCheckbox) {
<kendo-checkbox
[kendoGridSelectionCheckbox]="rowIndex"
[attr.id]="selectionCheckboxId"
[inputAttributes]="{'aria-label': selectionCheckboxLabel}"
[title]="selectionCheckboxLabel"
[disabled]="true"
></kendo-checkbox>
}
}
}
@if (isRowReorderColumn() && !isNew) {
@if (!column.dragHandleTemplate?.first) {
<kendo-icon-wrapper
name="reorder"
[svgIcon]="reorderIcon">
</kendo-icon-wrapper>
} @else {
<ng-template
[ngTemplateOutlet]="column.rowDragHandleTemplateRef"
[ngTemplateOutletContext]="rowReorderTemplateContext">
</ng-template>
}
}
} @else {
@if (loadingTemplate) {
<ng-template
[ngTemplateOutlet]="loadingTemplate"
[ngTemplateOutletContext]="{$implicit: column}">
</ng-template>
} @else {
<div class="k-skeleton-text k-skeleton"></div>
}
}
}
@case (true) {
@if (column.editTemplateRef) {
<ng-template
[ngTemplateOutlet]="column.editTemplateRef"
[ngTemplateOutletContext]="getEditTemplateContext()">
</ng-template>
} @else {
@switch (column.editor) {
@case ('numeric') {
<kendo-numerictextbox
[format]="format"
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-numerictextbox>
}
@case ('date') {
<kendo-datepicker
[format]="format"
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-datepicker>
}
@case ('boolean') {
<kendo-checkbox
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-checkbox>
}
@default {
<kendo-textbox
[formControl]="$any(formGroup.get(column.field))"
kendoGridFocusable
></kendo-textbox>
}
}
}
}
}
}
`,
standalone: true,
imports: [NgTemplateOutlet, FocusableDirective, SelectionCheckboxDirective, TemplateContextDirective,
IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent, NgClass, NgStyle, ButtonComponent]
}]
}], ctorParameters: () => [{ type: i1.EditService }, { type: i2.IdService }, { type: i3.ContextService }, { type: i4.DetailsService }, { type: i5.LocalizationService }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [CELL_CONTEXT]
}] }], propDecorators: { commandCellClass: [{
type: HostBinding,
args: ['class.k-command-cell']
}], dragHandleCellClass: [{
type: HostBinding,
args: ['class.k-drag-cell']
}, {
type: HostBinding,
args: ['class.k-touch-action-none']
}], dragRowHandleLabel: [{
type: HostBinding,
args: ['attr.aria-label']
}], column: [{
type: Input
}], columns: [{
type: Input
}], columnIndex: [{
type: Input
}], isNew: [{
type: Input
}], isLoading: [{
type: Input
}], isVirtual: [{
type: Input
}], loadingTemplate: [{
type: Input
}], detailTemplate: [{
type: Input
}], item: [{
type: Input
}], rowIndex: [{
type: Input
}], dataItem: [{
type: Input
}] } });