@progress/kendo-angular-treelist 16.11.0-develop.1 → 16.11.0-develop.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/pdf/export-element.mjs +0 -1
- package/esm2020/rendering/table-body.component.mjs +7 -2
- package/esm2020/row-reordering/row-reorder.service.mjs +6 -1
- package/esm2020/selection/marquee.directive.mjs +15 -1
- package/esm2020/selection/selection.service.mjs +25 -2
- package/fesm2015/progress-kendo-angular-treelist.mjs +56 -9
- package/fesm2020/progress-kendo-angular-treelist.mjs +55 -9
- package/package.json +15 -15
- package/schematics/ngAdd/index.js +3 -3
- package/selection/marquee.directive.d.ts +1 -0
- package/selection/selectable-settings.d.ts +6 -0
- package/selection/selection.service.d.ts +1 -0
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
9
9
|
name: '@progress/kendo-angular-treelist',
|
10
10
|
productName: 'Kendo UI for Angular',
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
12
|
-
publishDate:
|
13
|
-
version: '16.11.0-develop.
|
12
|
+
publishDate: 1727949716,
|
13
|
+
version: '16.11.0-develop.11',
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
15
15
|
};
|
@@ -236,7 +236,7 @@ export class TableBodyComponent {
|
|
236
236
|
const isValidCell = cell ? !hasClasses(cell, forbiddenCellClasses) : false;
|
237
237
|
const isValidRow = row ? !hasClasses(row, NON_DATA_ROW_CLASSES) : false;
|
238
238
|
if (isValidRow && isValidCell) {
|
239
|
-
if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
|
239
|
+
if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg) && !this.selection.dragging) {
|
240
240
|
return;
|
241
241
|
}
|
242
242
|
this.editService.preventCellClose();
|
@@ -327,7 +327,12 @@ export class TableBodyComponent {
|
|
327
327
|
}
|
328
328
|
}
|
329
329
|
checkboxClick(cell, row, eventArg) {
|
330
|
-
|
330
|
+
const isCheckboxCell = hasClasses(cell, 'k-checkbox-cell');
|
331
|
+
const isCheckbox = hasClasses(eventArg.target, 'k-checkbox');
|
332
|
+
if (isCheckboxCell && !isCheckbox && this.selection.settings.checkboxOnly) {
|
333
|
+
return;
|
334
|
+
}
|
335
|
+
if (eventArg.type === 'click' && isCheckboxCell &&
|
331
336
|
this.selection.enabled && this.selection.rowSelection) {
|
332
337
|
const args = this.cellClickArgs(cell, row, eventArg);
|
333
338
|
this.selection.checkboxClick(args);
|
@@ -175,7 +175,12 @@ export class RowReorderService {
|
|
175
175
|
else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
|
176
176
|
currentDropPosition = dropPosition.forbidden;
|
177
177
|
}
|
178
|
-
if (
|
178
|
+
if (isPresent(dropTargetRow.dataItem)) {
|
179
|
+
if (this.isOverChild(dropTargetRow.dataItem)) {
|
180
|
+
currentDropPosition = dropPosition.forbidden;
|
181
|
+
}
|
182
|
+
}
|
183
|
+
else {
|
179
184
|
currentDropPosition = dropPosition.forbidden;
|
180
185
|
}
|
181
186
|
return currentDropPosition;
|
@@ -9,6 +9,7 @@ import { createState } from './selection-state';
|
|
9
9
|
import * as i0 from "@angular/core";
|
10
10
|
import * as i1 from "@progress/kendo-angular-common";
|
11
11
|
import * as i2 from "./selection.service";
|
12
|
+
const MINIMAL_DRAG_DISTANCE = 5;
|
12
13
|
const createElement = () => {
|
13
14
|
if (!isDocumentAvailable()) {
|
14
15
|
return;
|
@@ -29,6 +30,7 @@ export class MarqueeDirective {
|
|
29
30
|
this.draggable = draggable;
|
30
31
|
this.selection = selection;
|
31
32
|
this.changeDetector = changeDetector;
|
33
|
+
this.selectionStarted = false;
|
32
34
|
this.cellSelected = this.cellSelected.bind(this);
|
33
35
|
this.rowSelected = this.rowSelected.bind(this);
|
34
36
|
}
|
@@ -61,12 +63,21 @@ export class MarqueeDirective {
|
|
61
63
|
this.pressArgs = args;
|
62
64
|
}
|
63
65
|
moveMarquee(args) {
|
66
|
+
const press = this.pressArgs;
|
67
|
+
if (!this.selectionStarted && press) {
|
68
|
+
const distance = Math.sqrt((args.pageX - press.pageX) ** 2 + (args.pageY - press.pageY) ** 2);
|
69
|
+
if (distance > MINIMAL_DRAG_DISTANCE) {
|
70
|
+
this.selectionStarted = true;
|
71
|
+
}
|
72
|
+
else {
|
73
|
+
return;
|
74
|
+
}
|
75
|
+
}
|
64
76
|
if (this.pressTarget && !this.state) {
|
65
77
|
this.initMarquee();
|
66
78
|
}
|
67
79
|
if (this.marqueeElement) {
|
68
80
|
const element = this.marqueeElement;
|
69
|
-
const press = this.pressArgs;
|
70
81
|
const left = Math.min(args.pageX, press.pageX);
|
71
82
|
const top = Math.min(args.pageY, press.pageY);
|
72
83
|
const width = Math.abs(args.pageX - press.pageX);
|
@@ -98,6 +109,7 @@ export class MarqueeDirective {
|
|
98
109
|
// if one is missing select first / last viewItem depending on the position
|
99
110
|
// select column based on coordinates
|
100
111
|
if (pressTarget && releaseTarget) {
|
112
|
+
this.selection.dragging = true;
|
101
113
|
this.selection.selectRange(pressTarget, releaseTarget);
|
102
114
|
}
|
103
115
|
else {
|
@@ -129,6 +141,8 @@ export class MarqueeDirective {
|
|
129
141
|
}
|
130
142
|
this.pressTarget = null;
|
131
143
|
this.pressArgs = null;
|
144
|
+
this.selectionStarted = false;
|
145
|
+
this.selection.dragging = false;
|
132
146
|
}
|
133
147
|
targetArgs(args, skipFocusable) {
|
134
148
|
let target = args.originalEvent.target;
|
@@ -6,7 +6,7 @@ import { Injectable } from '@angular/core';
|
|
6
6
|
import { Subject, Subscription, merge } from "rxjs";
|
7
7
|
import { ViewCollection } from '../data/data.collection';
|
8
8
|
import { SelectionChangeEvent } from './selection-change-event';
|
9
|
-
import { Keys } from '@progress/kendo-angular-common';
|
9
|
+
import { hasClasses, isPresent, Keys } from '@progress/kendo-angular-common';
|
10
10
|
import * as i0 from "@angular/core";
|
11
11
|
/**
|
12
12
|
* @hidden
|
@@ -23,6 +23,7 @@ export class SelectionService {
|
|
23
23
|
this.isRowSelected = noop;
|
24
24
|
this.isCellSelected = noop;
|
25
25
|
this.enabled = false;
|
26
|
+
this.dragging = false;
|
26
27
|
this._settings = {};
|
27
28
|
this.tables = [];
|
28
29
|
this.subscriptions = new Subscription();
|
@@ -56,7 +57,17 @@ export class SelectionService {
|
|
56
57
|
return this._settings;
|
57
58
|
}
|
58
59
|
get enableMarquee() {
|
59
|
-
|
60
|
+
const checkboxOnly = this.settings?.checkboxOnly;
|
61
|
+
if (!this.settings || checkboxOnly) {
|
62
|
+
return false;
|
63
|
+
}
|
64
|
+
const dragAndMultiple = typeof (this.settings) === 'object' &&
|
65
|
+
isPresent(this.settings) &&
|
66
|
+
this.settings.multiple &&
|
67
|
+
this.settings.enabled !== false &&
|
68
|
+
!this.settings.checkboxOnly &&
|
69
|
+
this.settings.drag !== false;
|
70
|
+
return this.enabled && dragAndMultiple;
|
60
71
|
}
|
61
72
|
get enableMultiple() {
|
62
73
|
return this.enabled && this.settings.multiple;
|
@@ -86,6 +97,14 @@ export class SelectionService {
|
|
86
97
|
this.tables = this.tables.filter(t => t !== table);
|
87
98
|
}
|
88
99
|
click(args, toggle) {
|
100
|
+
if (this.dragging) {
|
101
|
+
this.dragging = false;
|
102
|
+
return;
|
103
|
+
}
|
104
|
+
const isCheckbox = args.originalEvent.target ? hasClasses(args.originalEvent.target, 'k-checkbox') : true;
|
105
|
+
if (this.rowSelection && this.settings.checkboxOnly && !isCheckbox) {
|
106
|
+
return;
|
107
|
+
}
|
89
108
|
const { dataItem, column, columnIndex, originalEvent } = args;
|
90
109
|
if (originalEvent.keyCode === Keys.Enter || (originalEvent.button && originalEvent.button !== 0)) {
|
91
110
|
return;
|
@@ -129,6 +148,10 @@ export class SelectionService {
|
|
129
148
|
}
|
130
149
|
}
|
131
150
|
checkboxClick(args) {
|
151
|
+
if (this.dragging) {
|
152
|
+
this.dragging = false;
|
153
|
+
return;
|
154
|
+
}
|
132
155
|
if (args.column.checkChildren && args.viewItem.hasChildren && !args.originalEvent.shiftKey && !args.originalEvent.ctrlKey) {
|
133
156
|
const data = [args.dataItem];
|
134
157
|
const selected = Boolean(args.viewItem.selected);
|
@@ -5,7 +5,7 @@
|
|
5
5
|
import * as i0 from '@angular/core';
|
6
6
|
import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, Output, ChangeDetectionStrategy, HostBinding, ElementRef, ViewChild, Pipe, ViewChildren, Self, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
|
7
7
|
import * as i2$1 from '@progress/kendo-angular-common';
|
8
|
-
import { isDocumentAvailable,
|
8
|
+
import { isDocumentAvailable, isPresent as isPresent$1, hasClasses as hasClasses$1, Keys, EventsOutsideAngularDirective, anyChanged, ResizeSensorComponent, isChanged as isChanged$1, KendoInput, guid, DraggableDirective, TemplateContextDirective, hasObservers, ResizeBatchService, DraggableModule } from '@progress/kendo-angular-common';
|
9
9
|
import * as i2 from '@progress/kendo-angular-icons';
|
10
10
|
import { IconWrapperComponent, IconsService, IconsModule, KENDO_ICONS } from '@progress/kendo-angular-icons';
|
11
11
|
import * as i14 from '@progress/kendo-angular-dateinputs';
|
@@ -47,8 +47,8 @@ const packageMetadata = {
|
|
47
47
|
name: '@progress/kendo-angular-treelist',
|
48
48
|
productName: 'Kendo UI for Angular',
|
49
49
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
50
|
-
publishDate:
|
51
|
-
version: '16.11.0-develop.
|
50
|
+
publishDate: 1727949716,
|
51
|
+
version: '16.11.0-develop.11',
|
52
52
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
53
53
|
};
|
54
54
|
|
@@ -3796,6 +3796,7 @@ class SelectionService {
|
|
3796
3796
|
this.isRowSelected = noop;
|
3797
3797
|
this.isCellSelected = noop;
|
3798
3798
|
this.enabled = false;
|
3799
|
+
this.dragging = false;
|
3799
3800
|
this._settings = {};
|
3800
3801
|
this.tables = [];
|
3801
3802
|
this.subscriptions = new Subscription();
|
@@ -3829,7 +3830,18 @@ class SelectionService {
|
|
3829
3830
|
return this._settings;
|
3830
3831
|
}
|
3831
3832
|
get enableMarquee() {
|
3832
|
-
|
3833
|
+
var _a;
|
3834
|
+
const checkboxOnly = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.checkboxOnly;
|
3835
|
+
if (!this.settings || checkboxOnly) {
|
3836
|
+
return false;
|
3837
|
+
}
|
3838
|
+
const dragAndMultiple = typeof (this.settings) === 'object' &&
|
3839
|
+
isPresent$1(this.settings) &&
|
3840
|
+
this.settings.multiple &&
|
3841
|
+
this.settings.enabled !== false &&
|
3842
|
+
!this.settings.checkboxOnly &&
|
3843
|
+
this.settings.drag !== false;
|
3844
|
+
return this.enabled && dragAndMultiple;
|
3833
3845
|
}
|
3834
3846
|
get enableMultiple() {
|
3835
3847
|
return this.enabled && this.settings.multiple;
|
@@ -3859,6 +3871,14 @@ class SelectionService {
|
|
3859
3871
|
this.tables = this.tables.filter(t => t !== table);
|
3860
3872
|
}
|
3861
3873
|
click(args, toggle) {
|
3874
|
+
if (this.dragging) {
|
3875
|
+
this.dragging = false;
|
3876
|
+
return;
|
3877
|
+
}
|
3878
|
+
const isCheckbox = args.originalEvent.target ? hasClasses$1(args.originalEvent.target, 'k-checkbox') : true;
|
3879
|
+
if (this.rowSelection && this.settings.checkboxOnly && !isCheckbox) {
|
3880
|
+
return;
|
3881
|
+
}
|
3862
3882
|
const { dataItem, column, columnIndex, originalEvent } = args;
|
3863
3883
|
if (originalEvent.keyCode === Keys.Enter || (originalEvent.button && originalEvent.button !== 0)) {
|
3864
3884
|
return;
|
@@ -3902,6 +3922,10 @@ class SelectionService {
|
|
3902
3922
|
}
|
3903
3923
|
}
|
3904
3924
|
checkboxClick(args) {
|
3925
|
+
if (this.dragging) {
|
3926
|
+
this.dragging = false;
|
3927
|
+
return;
|
3928
|
+
}
|
3905
3929
|
if (args.column.checkChildren && args.viewItem.hasChildren && !args.originalEvent.shiftKey && !args.originalEvent.ctrlKey) {
|
3906
3930
|
const data = [args.dataItem];
|
3907
3931
|
const selected = Boolean(args.viewItem.selected);
|
@@ -5439,7 +5463,12 @@ class RowReorderService {
|
|
5439
5463
|
else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
|
5440
5464
|
currentDropPosition = dropPosition.forbidden;
|
5441
5465
|
}
|
5442
|
-
if (
|
5466
|
+
if (isPresent$1(dropTargetRow.dataItem)) {
|
5467
|
+
if (this.isOverChild(dropTargetRow.dataItem)) {
|
5468
|
+
currentDropPosition = dropPosition.forbidden;
|
5469
|
+
}
|
5470
|
+
}
|
5471
|
+
else {
|
5443
5472
|
currentDropPosition = dropPosition.forbidden;
|
5444
5473
|
}
|
5445
5474
|
return currentDropPosition;
|
@@ -7687,7 +7716,7 @@ class TableBodyComponent {
|
|
7687
7716
|
const isValidCell = cell ? !hasClasses(cell, forbiddenCellClasses) : false;
|
7688
7717
|
const isValidRow = row ? !hasClasses(row, NON_DATA_ROW_CLASSES) : false;
|
7689
7718
|
if (isValidRow && isValidCell) {
|
7690
|
-
if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
|
7719
|
+
if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg) && !this.selection.dragging) {
|
7691
7720
|
return;
|
7692
7721
|
}
|
7693
7722
|
this.editService.preventCellClose();
|
@@ -7778,7 +7807,12 @@ class TableBodyComponent {
|
|
7778
7807
|
}
|
7779
7808
|
}
|
7780
7809
|
checkboxClick(cell, row, eventArg) {
|
7781
|
-
|
7810
|
+
const isCheckboxCell = hasClasses(cell, 'k-checkbox-cell');
|
7811
|
+
const isCheckbox = hasClasses(eventArg.target, 'k-checkbox');
|
7812
|
+
if (isCheckboxCell && !isCheckbox && this.selection.settings.checkboxOnly) {
|
7813
|
+
return;
|
7814
|
+
}
|
7815
|
+
if (eventArg.type === 'click' && isCheckboxCell &&
|
7782
7816
|
this.selection.enabled && this.selection.rowSelection) {
|
7783
7817
|
const args = this.cellClickArgs(cell, row, eventArg);
|
7784
7818
|
this.selection.checkboxClick(args);
|
@@ -8141,6 +8175,7 @@ class CellSelectionState {
|
|
8141
8175
|
*/
|
8142
8176
|
const createState = (settings) => settings.mode === 'cell' ? new CellSelectionState() : new RowSelectionState();
|
8143
8177
|
|
8178
|
+
const MINIMAL_DRAG_DISTANCE = 5;
|
8144
8179
|
const createElement$1 = () => {
|
8145
8180
|
if (!isDocumentAvailable()) {
|
8146
8181
|
return;
|
@@ -8161,6 +8196,7 @@ class MarqueeDirective {
|
|
8161
8196
|
this.draggable = draggable;
|
8162
8197
|
this.selection = selection;
|
8163
8198
|
this.changeDetector = changeDetector;
|
8199
|
+
this.selectionStarted = false;
|
8164
8200
|
this.cellSelected = this.cellSelected.bind(this);
|
8165
8201
|
this.rowSelected = this.rowSelected.bind(this);
|
8166
8202
|
}
|
@@ -8193,12 +8229,21 @@ class MarqueeDirective {
|
|
8193
8229
|
this.pressArgs = args;
|
8194
8230
|
}
|
8195
8231
|
moveMarquee(args) {
|
8232
|
+
const press = this.pressArgs;
|
8233
|
+
if (!this.selectionStarted && press) {
|
8234
|
+
const distance = Math.sqrt(Math.pow((args.pageX - press.pageX), 2) + Math.pow((args.pageY - press.pageY), 2));
|
8235
|
+
if (distance > MINIMAL_DRAG_DISTANCE) {
|
8236
|
+
this.selectionStarted = true;
|
8237
|
+
}
|
8238
|
+
else {
|
8239
|
+
return;
|
8240
|
+
}
|
8241
|
+
}
|
8196
8242
|
if (this.pressTarget && !this.state) {
|
8197
8243
|
this.initMarquee();
|
8198
8244
|
}
|
8199
8245
|
if (this.marqueeElement) {
|
8200
8246
|
const element = this.marqueeElement;
|
8201
|
-
const press = this.pressArgs;
|
8202
8247
|
const left = Math.min(args.pageX, press.pageX);
|
8203
8248
|
const top = Math.min(args.pageY, press.pageY);
|
8204
8249
|
const width = Math.abs(args.pageX - press.pageX);
|
@@ -8230,6 +8275,7 @@ class MarqueeDirective {
|
|
8230
8275
|
// if one is missing select first / last viewItem depending on the position
|
8231
8276
|
// select column based on coordinates
|
8232
8277
|
if (pressTarget && releaseTarget) {
|
8278
|
+
this.selection.dragging = true;
|
8233
8279
|
this.selection.selectRange(pressTarget, releaseTarget);
|
8234
8280
|
}
|
8235
8281
|
else {
|
@@ -8261,6 +8307,8 @@ class MarqueeDirective {
|
|
8261
8307
|
}
|
8262
8308
|
this.pressTarget = null;
|
8263
8309
|
this.pressArgs = null;
|
8310
|
+
this.selectionStarted = false;
|
8311
|
+
this.selection.dragging = false;
|
8264
8312
|
}
|
8265
8313
|
targetArgs(args, skipFocusable) {
|
8266
8314
|
let target = args.originalEvent.target;
|
@@ -20624,7 +20672,6 @@ const wrapTable = (table) => {
|
|
20624
20672
|
const wrapper = document.createElement('div');
|
20625
20673
|
wrapper.className = 'k-grid k-grid-md';
|
20626
20674
|
wrapper.appendChild(table);
|
20627
|
-
console.log(wrapper, table);
|
20628
20675
|
return wrapper;
|
20629
20676
|
};
|
20630
20677
|
const createTableElement = (sources) => {
|
@@ -5,7 +5,7 @@
|
|
5
5
|
import * as i0 from '@angular/core';
|
6
6
|
import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, Output, ChangeDetectionStrategy, HostBinding, ElementRef, ViewChild, Pipe, ViewChildren, Self, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
|
7
7
|
import * as i2$1 from '@progress/kendo-angular-common';
|
8
|
-
import { isDocumentAvailable,
|
8
|
+
import { isDocumentAvailable, isPresent as isPresent$1, hasClasses as hasClasses$1, Keys, EventsOutsideAngularDirective, anyChanged, ResizeSensorComponent, isChanged as isChanged$1, KendoInput, guid, DraggableDirective, TemplateContextDirective, hasObservers, ResizeBatchService, DraggableModule } from '@progress/kendo-angular-common';
|
9
9
|
import * as i2 from '@progress/kendo-angular-icons';
|
10
10
|
import { IconWrapperComponent, IconsService, IconsModule, KENDO_ICONS } from '@progress/kendo-angular-icons';
|
11
11
|
import * as i14 from '@progress/kendo-angular-dateinputs';
|
@@ -47,8 +47,8 @@ const packageMetadata = {
|
|
47
47
|
name: '@progress/kendo-angular-treelist',
|
48
48
|
productName: 'Kendo UI for Angular',
|
49
49
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
50
|
-
publishDate:
|
51
|
-
version: '16.11.0-develop.
|
50
|
+
publishDate: 1727949716,
|
51
|
+
version: '16.11.0-develop.11',
|
52
52
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
53
53
|
};
|
54
54
|
|
@@ -4061,6 +4061,7 @@ class SelectionService {
|
|
4061
4061
|
this.isRowSelected = noop;
|
4062
4062
|
this.isCellSelected = noop;
|
4063
4063
|
this.enabled = false;
|
4064
|
+
this.dragging = false;
|
4064
4065
|
this._settings = {};
|
4065
4066
|
this.tables = [];
|
4066
4067
|
this.subscriptions = new Subscription();
|
@@ -4094,7 +4095,17 @@ class SelectionService {
|
|
4094
4095
|
return this._settings;
|
4095
4096
|
}
|
4096
4097
|
get enableMarquee() {
|
4097
|
-
|
4098
|
+
const checkboxOnly = this.settings?.checkboxOnly;
|
4099
|
+
if (!this.settings || checkboxOnly) {
|
4100
|
+
return false;
|
4101
|
+
}
|
4102
|
+
const dragAndMultiple = typeof (this.settings) === 'object' &&
|
4103
|
+
isPresent$1(this.settings) &&
|
4104
|
+
this.settings.multiple &&
|
4105
|
+
this.settings.enabled !== false &&
|
4106
|
+
!this.settings.checkboxOnly &&
|
4107
|
+
this.settings.drag !== false;
|
4108
|
+
return this.enabled && dragAndMultiple;
|
4098
4109
|
}
|
4099
4110
|
get enableMultiple() {
|
4100
4111
|
return this.enabled && this.settings.multiple;
|
@@ -4124,6 +4135,14 @@ class SelectionService {
|
|
4124
4135
|
this.tables = this.tables.filter(t => t !== table);
|
4125
4136
|
}
|
4126
4137
|
click(args, toggle) {
|
4138
|
+
if (this.dragging) {
|
4139
|
+
this.dragging = false;
|
4140
|
+
return;
|
4141
|
+
}
|
4142
|
+
const isCheckbox = args.originalEvent.target ? hasClasses$1(args.originalEvent.target, 'k-checkbox') : true;
|
4143
|
+
if (this.rowSelection && this.settings.checkboxOnly && !isCheckbox) {
|
4144
|
+
return;
|
4145
|
+
}
|
4127
4146
|
const { dataItem, column, columnIndex, originalEvent } = args;
|
4128
4147
|
if (originalEvent.keyCode === Keys.Enter || (originalEvent.button && originalEvent.button !== 0)) {
|
4129
4148
|
return;
|
@@ -4167,6 +4186,10 @@ class SelectionService {
|
|
4167
4186
|
}
|
4168
4187
|
}
|
4169
4188
|
checkboxClick(args) {
|
4189
|
+
if (this.dragging) {
|
4190
|
+
this.dragging = false;
|
4191
|
+
return;
|
4192
|
+
}
|
4170
4193
|
if (args.column.checkChildren && args.viewItem.hasChildren && !args.originalEvent.shiftKey && !args.originalEvent.ctrlKey) {
|
4171
4194
|
const data = [args.dataItem];
|
4172
4195
|
const selected = Boolean(args.viewItem.selected);
|
@@ -5404,7 +5427,12 @@ class RowReorderService {
|
|
5404
5427
|
else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
|
5405
5428
|
currentDropPosition = dropPosition.forbidden;
|
5406
5429
|
}
|
5407
|
-
if (
|
5430
|
+
if (isPresent$1(dropTargetRow.dataItem)) {
|
5431
|
+
if (this.isOverChild(dropTargetRow.dataItem)) {
|
5432
|
+
currentDropPosition = dropPosition.forbidden;
|
5433
|
+
}
|
5434
|
+
}
|
5435
|
+
else {
|
5408
5436
|
currentDropPosition = dropPosition.forbidden;
|
5409
5437
|
}
|
5410
5438
|
return currentDropPosition;
|
@@ -7651,7 +7679,7 @@ class TableBodyComponent {
|
|
7651
7679
|
const isValidCell = cell ? !hasClasses(cell, forbiddenCellClasses) : false;
|
7652
7680
|
const isValidRow = row ? !hasClasses(row, NON_DATA_ROW_CLASSES) : false;
|
7653
7681
|
if (isValidRow && isValidCell) {
|
7654
|
-
if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
|
7682
|
+
if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg) && !this.selection.dragging) {
|
7655
7683
|
return;
|
7656
7684
|
}
|
7657
7685
|
this.editService.preventCellClose();
|
@@ -7742,7 +7770,12 @@ class TableBodyComponent {
|
|
7742
7770
|
}
|
7743
7771
|
}
|
7744
7772
|
checkboxClick(cell, row, eventArg) {
|
7745
|
-
|
7773
|
+
const isCheckboxCell = hasClasses(cell, 'k-checkbox-cell');
|
7774
|
+
const isCheckbox = hasClasses(eventArg.target, 'k-checkbox');
|
7775
|
+
if (isCheckboxCell && !isCheckbox && this.selection.settings.checkboxOnly) {
|
7776
|
+
return;
|
7777
|
+
}
|
7778
|
+
if (eventArg.type === 'click' && isCheckboxCell &&
|
7746
7779
|
this.selection.enabled && this.selection.rowSelection) {
|
7747
7780
|
const args = this.cellClickArgs(cell, row, eventArg);
|
7748
7781
|
this.selection.checkboxClick(args);
|
@@ -8105,6 +8138,7 @@ class CellSelectionState {
|
|
8105
8138
|
*/
|
8106
8139
|
const createState = (settings) => settings.mode === 'cell' ? new CellSelectionState() : new RowSelectionState();
|
8107
8140
|
|
8141
|
+
const MINIMAL_DRAG_DISTANCE = 5;
|
8108
8142
|
const createElement$1 = () => {
|
8109
8143
|
if (!isDocumentAvailable()) {
|
8110
8144
|
return;
|
@@ -8125,6 +8159,7 @@ class MarqueeDirective {
|
|
8125
8159
|
this.draggable = draggable;
|
8126
8160
|
this.selection = selection;
|
8127
8161
|
this.changeDetector = changeDetector;
|
8162
|
+
this.selectionStarted = false;
|
8128
8163
|
this.cellSelected = this.cellSelected.bind(this);
|
8129
8164
|
this.rowSelected = this.rowSelected.bind(this);
|
8130
8165
|
}
|
@@ -8157,12 +8192,21 @@ class MarqueeDirective {
|
|
8157
8192
|
this.pressArgs = args;
|
8158
8193
|
}
|
8159
8194
|
moveMarquee(args) {
|
8195
|
+
const press = this.pressArgs;
|
8196
|
+
if (!this.selectionStarted && press) {
|
8197
|
+
const distance = Math.sqrt((args.pageX - press.pageX) ** 2 + (args.pageY - press.pageY) ** 2);
|
8198
|
+
if (distance > MINIMAL_DRAG_DISTANCE) {
|
8199
|
+
this.selectionStarted = true;
|
8200
|
+
}
|
8201
|
+
else {
|
8202
|
+
return;
|
8203
|
+
}
|
8204
|
+
}
|
8160
8205
|
if (this.pressTarget && !this.state) {
|
8161
8206
|
this.initMarquee();
|
8162
8207
|
}
|
8163
8208
|
if (this.marqueeElement) {
|
8164
8209
|
const element = this.marqueeElement;
|
8165
|
-
const press = this.pressArgs;
|
8166
8210
|
const left = Math.min(args.pageX, press.pageX);
|
8167
8211
|
const top = Math.min(args.pageY, press.pageY);
|
8168
8212
|
const width = Math.abs(args.pageX - press.pageX);
|
@@ -8194,6 +8238,7 @@ class MarqueeDirective {
|
|
8194
8238
|
// if one is missing select first / last viewItem depending on the position
|
8195
8239
|
// select column based on coordinates
|
8196
8240
|
if (pressTarget && releaseTarget) {
|
8241
|
+
this.selection.dragging = true;
|
8197
8242
|
this.selection.selectRange(pressTarget, releaseTarget);
|
8198
8243
|
}
|
8199
8244
|
else {
|
@@ -8225,6 +8270,8 @@ class MarqueeDirective {
|
|
8225
8270
|
}
|
8226
8271
|
this.pressTarget = null;
|
8227
8272
|
this.pressArgs = null;
|
8273
|
+
this.selectionStarted = false;
|
8274
|
+
this.selection.dragging = false;
|
8228
8275
|
}
|
8229
8276
|
targetArgs(args, skipFocusable) {
|
8230
8277
|
let target = args.originalEvent.target;
|
@@ -20557,7 +20604,6 @@ const wrapTable = (table) => {
|
|
20557
20604
|
const wrapper = document.createElement('div');
|
20558
20605
|
wrapper.className = 'k-grid k-grid-md';
|
20559
20606
|
wrapper.appendChild(table);
|
20560
|
-
console.log(wrapper, table);
|
20561
20607
|
return wrapper;
|
20562
20608
|
};
|
20563
20609
|
const createTableElement = (sources) => {
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@progress/kendo-angular-treelist",
|
3
|
-
"version": "16.11.0-develop.
|
3
|
+
"version": "16.11.0-develop.11",
|
4
4
|
"description": "Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.",
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
6
6
|
"author": "Progress",
|
@@ -31,24 +31,24 @@
|
|
31
31
|
"@progress/kendo-data-query": "^1.0.0",
|
32
32
|
"@progress/kendo-drawing": "^1.20.4",
|
33
33
|
"@progress/kendo-licensing": "^1.0.2",
|
34
|
-
"@progress/kendo-angular-buttons": "16.11.0-develop.
|
35
|
-
"@progress/kendo-angular-common": "16.11.0-develop.
|
36
|
-
"@progress/kendo-angular-dateinputs": "16.11.0-develop.
|
37
|
-
"@progress/kendo-angular-dropdowns": "16.11.0-develop.
|
38
|
-
"@progress/kendo-angular-excel-export": "16.11.0-develop.
|
39
|
-
"@progress/kendo-angular-icons": "16.11.0-develop.
|
40
|
-
"@progress/kendo-angular-inputs": "16.11.0-develop.
|
41
|
-
"@progress/kendo-angular-intl": "16.11.0-develop.
|
42
|
-
"@progress/kendo-angular-l10n": "16.11.0-develop.
|
43
|
-
"@progress/kendo-angular-label": "16.11.0-develop.
|
44
|
-
"@progress/kendo-angular-pdf-export": "16.11.0-develop.
|
45
|
-
"@progress/kendo-angular-popup": "16.11.0-develop.
|
46
|
-
"@progress/kendo-angular-utils": "16.11.0-develop.
|
34
|
+
"@progress/kendo-angular-buttons": "16.11.0-develop.11",
|
35
|
+
"@progress/kendo-angular-common": "16.11.0-develop.11",
|
36
|
+
"@progress/kendo-angular-dateinputs": "16.11.0-develop.11",
|
37
|
+
"@progress/kendo-angular-dropdowns": "16.11.0-develop.11",
|
38
|
+
"@progress/kendo-angular-excel-export": "16.11.0-develop.11",
|
39
|
+
"@progress/kendo-angular-icons": "16.11.0-develop.11",
|
40
|
+
"@progress/kendo-angular-inputs": "16.11.0-develop.11",
|
41
|
+
"@progress/kendo-angular-intl": "16.11.0-develop.11",
|
42
|
+
"@progress/kendo-angular-l10n": "16.11.0-develop.11",
|
43
|
+
"@progress/kendo-angular-label": "16.11.0-develop.11",
|
44
|
+
"@progress/kendo-angular-pdf-export": "16.11.0-develop.11",
|
45
|
+
"@progress/kendo-angular-popup": "16.11.0-develop.11",
|
46
|
+
"@progress/kendo-angular-utils": "16.11.0-develop.11",
|
47
47
|
"rxjs": "^6.5.3 || ^7.0.0"
|
48
48
|
},
|
49
49
|
"dependencies": {
|
50
50
|
"tslib": "^2.3.1",
|
51
|
-
"@progress/kendo-angular-schematics": "16.11.0-develop.
|
51
|
+
"@progress/kendo-angular-schematics": "16.11.0-develop.11",
|
52
52
|
"@progress/kendo-common": "^0.2.0",
|
53
53
|
"@progress/kendo-file-saver": "^1.0.0"
|
54
54
|
},
|
@@ -4,13 +4,13 @@ const schematics_1 = require("@angular-devkit/schematics");
|
|
4
4
|
function default_1(options) {
|
5
5
|
const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'TreeListModule', package: 'treelist', peerDependencies: {
|
6
6
|
// peer dep of the dropdowns
|
7
|
-
'@progress/kendo-angular-treeview': '16.11.0-develop.
|
7
|
+
'@progress/kendo-angular-treeview': '16.11.0-develop.11',
|
8
8
|
// peer dependency of kendo-angular-inputs
|
9
|
-
'@progress/kendo-angular-dialog': '16.11.0-develop.
|
9
|
+
'@progress/kendo-angular-dialog': '16.11.0-develop.11',
|
10
10
|
// peer dependency of kendo-angular-icons
|
11
11
|
'@progress/kendo-svg-icons': '^3.0.0',
|
12
12
|
// peer dependency of kendo-angular-dateinputs
|
13
|
-
'@progress/kendo-angular-navigation': '16.11.0-develop.
|
13
|
+
'@progress/kendo-angular-navigation': '16.11.0-develop.11',
|
14
14
|
} });
|
15
15
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
16
16
|
}
|
@@ -21,6 +21,7 @@ export declare class MarqueeDirective {
|
|
21
21
|
private selectionSelected;
|
22
22
|
private state;
|
23
23
|
private subscriptions;
|
24
|
+
private selectionStarted;
|
24
25
|
constructor(draggable: DraggableDirective, selection: SelectionService, changeDetector: ChangeDetectorRef);
|
25
26
|
ngOnInit(): void;
|
26
27
|
ngOnDestroy(): void;
|
@@ -28,6 +28,12 @@ export interface SelectableSettings {
|
|
28
28
|
* The [isSelected]({% slug api_treelist_treelistcomponent %}#toc-isselected) callback will be ignored.
|
29
29
|
*/
|
30
30
|
enabled?: boolean;
|
31
|
+
/**
|
32
|
+
* Determines if the selection is performed only through clicking a checkbox.
|
33
|
+
* If enabled, clicking the row itself will not select the row.
|
34
|
+
* Applicable if at least one checkbox column is present.
|
35
|
+
*/
|
36
|
+
checkboxOnly?: boolean;
|
31
37
|
/**
|
32
38
|
* Setting this option to `true` prevents the end user from selecting and deselecting items.
|
33
39
|
* When the selection functionality is enabled and `readonly` is set to `true`,
|