@progress/kendo-angular-grid
Version:
Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.
224 lines (223 loc) • 7.62 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 { Directive, Input, ChangeDetectorRef } from '@angular/core';
import { process } from '@progress/kendo-data-query';
import { GridComponent } from './grid.component';
import { anyChanged, isPresent } from './utils';
import { LocalDataChangesService } from './editing/local-data-changes.service';
import { RowReorderService } from './row-reordering/row-reorder.service';
import { ContextService } from './common/provider.service';
import * as i0 from "@angular/core";
import * as i1 from "./grid.component";
import * as i2 from "./editing/local-data-changes.service";
import * as i3 from "./row-reordering/row-reorder.service";
import * as i4 from "./common/provider.service";
/**
* A directive that handles in-memory data operations like [paging]({% slug paging_grid %}),
* [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %}).
*
* Use this directive with local data and enable the Grid data operations with minimal configuration.
* ([More information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
*
* @example
* ```html
* <kendo-grid [kendoGridBinding]="gridData"></kendo-grid>
* ```
* @remarks
* Applied to: {@link GridComponent}.
*/
export class DataBindingDirective {
grid;
changeDetector;
localDataChangesService;
rowReorderService;
/**
* Sets the number of records to skip in the Grid.
*
* @default 0
*/
set skip(value) {
if (!isPresent(value)) {
value = 0;
}
this.grid.skip = this.state.skip = value;
if (this.rowReorderService) {
this.rowReorderService.skip = value;
}
}
/**
* Sets the sort descriptors for the Grid data.
*
*/
set sort(value) {
this.grid.sort = this.state.sort = value;
}
/**
* Sets the filter descriptor for the Grid data.
*
*/
set filter(value) {
this.grid.filter = this.state.filter = value;
}
/**
* Sets the page size for the Grid pager.
*
*/
set pageSize(value) {
this.grid.pageSize = this.state.take = value;
}
/**
* Sets the group descriptors for the Grid data.
*
*/
set group(value) {
this.grid.group = this.state.group = value;
}
/**
* Sets the data array for the Grid.
*
*/
set data(value) {
this.originalData = value || [];
if (this.localDataChangesService) {
this.localDataChangesService.data = value;
}
this.dataChanged = true;
}
state = {
skip: 0
};
originalData = [];
dataChanged;
stateChangeSubscription;
dataChangedSubscription;
rowReorderSubscription;
constructor(grid, changeDetector, localDataChangesService, rowReorderService, ctx) {
this.grid = grid;
this.changeDetector = changeDetector;
this.localDataChangesService = localDataChangesService;
this.rowReorderService = rowReorderService;
if (localDataChangesService) {
this.dataChangedSubscription = this.localDataChangesService.changes.subscribe(this.rebind.bind(this));
}
ctx && (ctx.dataBindingDirective = this);
}
/**
* @hidden
*/
ngOnInit() {
this.applyState(this.state);
this.stateChangeSubscription = this.grid
.dataStateChange
.subscribe(this.onStateChange.bind(this));
if (this.rowReorderService) {
this.rowReorderSubscription = this.grid
.rowReorder
.subscribe(this.onRowReorder.bind(this));
}
}
/**
* @hidden
*/
ngOnDestroy() {
if (this.stateChangeSubscription) {
this.stateChangeSubscription.unsubscribe();
}
if (this.dataChangedSubscription) {
this.dataChangedSubscription.unsubscribe();
}
if (this.rowReorderSubscription) {
this.rowReorderSubscription.unsubscribe();
}
}
/**
* @hidden
*/
ngOnChanges(changes) {
if (anyChanged(["pageSize", "skip", "sort", "group", "filter"], changes)) {
this.rebind();
}
}
ngDoCheck() {
if (this.dataChanged) {
this.updateGridData();
}
}
/**
* @hidden
*/
onStateChange(state) {
this.applyState(state);
this.rebind();
}
/**
* @hidden
*/
onRowReorder(ev) {
this.rowReorderService.reorderRows(ev, this.originalData);
this.rebind();
}
/**
* @hidden
*/
rebind() {
this.data = this.originalData;
this.updateGridData();
this.notifyDataChange();
}
/**
* Notifies the Grid that its data has changed.
*/
notifyDataChange() {
this.grid.onDataChange();
if (this.changeDetector) {
this.changeDetector.markForCheck();
}
}
process(state) {
if (this.grid.isVirtual && (!isPresent(state.take) || state.take === 0)) {
return {
data: [],
total: this.originalData?.length || 0
};
}
return process(this.originalData, state);
}
applyState({ skip, take, sort, group, filter }) {
this.skip = skip;
this.pageSize = take;
this.sort = sort;
this.group = group;
this.filter = filter;
}
updateGridData() {
this.grid.data = this.process(this.state);
this.grid.updateNavigationMetadata();
this.dataChanged = false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }, { token: i3.RowReorderService }, { token: i4.ContextService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DataBindingDirective, isStandalone: true, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, exportAs: ["kendoGridBinding"], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataBindingDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoGridBinding]',
exportAs: 'kendoGridBinding',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }, { type: i3.RowReorderService }, { type: i4.ContextService }]; }, propDecorators: { skip: [{
type: Input
}], sort: [{
type: Input
}], filter: [{
type: Input
}], pageSize: [{
type: Input
}], group: [{
type: Input
}], data: [{
type: Input,
args: ["kendoGridBinding"]
}] } });