@progress/kendo-angular-grid 12.0.0 → 12.0.1-develop.1
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/column-menu/column-chooser.component.d.ts +14 -19
- package/column-menu/column-menu-autosize-all.component.d.ts +12 -27
- package/column-menu/column-menu-autosize.component.d.ts +12 -26
- package/column-menu/column-menu-chooser.component.d.ts +11 -24
- package/column-menu/column-menu-expandable-item.interface.d.ts +0 -1
- package/column-menu/column-menu-filter.component.d.ts +12 -24
- package/column-menu/column-menu-item.component.d.ts +6 -21
- package/column-menu/column-menu-lock.component.d.ts +11 -25
- package/column-menu/column-menu-position.component.d.ts +12 -24
- package/column-menu/column-menu-settings.interface.d.ts +3 -24
- package/column-menu/column-menu-sort.component.d.ts +12 -25
- package/column-menu/column-menu-stick.component.d.ts +12 -24
- package/column-menu/column-menu.component.d.ts +9 -1
- package/column-resizing/column-resize.interface.d.ts +1 -1
- package/columns/checkbox-column.component.d.ts +6 -57
- package/columns/column-base.d.ts +2 -0
- package/columns/column-group.component.d.ts +9 -48
- package/columns/column.component.d.ts +23 -109
- package/columns/command-column.component.d.ts +12 -60
- package/columns/reorder-column.component.d.ts +1 -1
- package/columns/sort-settings.d.ts +4 -8
- package/columns/span-column.component.d.ts +12 -123
- package/common/cell-click-event-args.interface.d.ts +1 -1
- package/data/change-event-args.interface.d.ts +2 -2
- package/data/data.collection.d.ts +1 -1
- package/dragdrop/column-reorder-config.d.ts +1 -1
- package/editing/add-event-args.interface.d.ts +1 -1
- package/editing/cancel-event-args.interface.d.ts +1 -1
- package/editing/edit-event-args.interface.d.ts +1 -1
- package/editing/remove-event-args.interface.d.ts +1 -1
- package/editing/save-event-args.interface.d.ts +1 -1
- package/editing-directives/edit-service.interface.d.ts +1 -1
- package/esm2020/column-menu/column-chooser.component.mjs +14 -19
- package/esm2020/column-menu/column-menu-autosize-all.component.mjs +12 -27
- package/esm2020/column-menu/column-menu-autosize.component.mjs +12 -26
- package/esm2020/column-menu/column-menu-chooser.component.mjs +11 -24
- package/esm2020/column-menu/column-menu-filter.component.mjs +12 -24
- package/esm2020/column-menu/column-menu-item.component.mjs +6 -21
- package/esm2020/column-menu/column-menu-lock.component.mjs +11 -25
- package/esm2020/column-menu/column-menu-position.component.mjs +12 -24
- package/esm2020/column-menu/column-menu-sort.component.mjs +12 -25
- package/esm2020/column-menu/column-menu-stick.component.mjs +12 -24
- package/esm2020/column-menu/column-menu.component.mjs +9 -1
- package/esm2020/columns/checkbox-column.component.mjs +6 -57
- package/esm2020/columns/column-base.mjs +1 -0
- package/esm2020/columns/column-group.component.mjs +9 -48
- package/esm2020/columns/column.component.mjs +22 -79
- package/esm2020/columns/command-column.component.mjs +12 -60
- package/esm2020/columns/reorder-column.component.mjs +1 -1
- package/esm2020/columns/span-column.component.mjs +12 -123
- package/esm2020/filtering/cell/boolean-filter-cell.component.mjs +11 -10
- package/esm2020/filtering/cell/date-filter-cell.component.mjs +26 -13
- package/esm2020/filtering/cell/filter-cell-operators.component.mjs +15 -0
- package/esm2020/filtering/cell/numeric-filter-cell.component.mjs +14 -11
- package/esm2020/filtering/cell/string-filter-cell.component.mjs +14 -15
- package/esm2020/filtering/date-filter.component.mjs +6 -2
- package/esm2020/filtering/menu/boolean-filter-menu.component.mjs +13 -13
- package/esm2020/filtering/menu/date-filter-menu.component.mjs +13 -13
- package/esm2020/filtering/menu/numeric-filter-menu.component.mjs +13 -13
- package/esm2020/filtering/menu/string-filter-menu.component.mjs +15 -2
- package/esm2020/filtering/numeric-filter.component.mjs +4 -1
- package/esm2020/filtering/operators/after-eq-filter-operator.component.mjs +3 -6
- package/esm2020/filtering/operators/after-filter-operator.component.mjs +3 -6
- package/esm2020/filtering/operators/before-eq-filter-operator.component.mjs +3 -6
- package/esm2020/filtering/operators/before-filter-operator.component.mjs +3 -6
- package/esm2020/filtering/operators/contains-filter-operator.component.mjs +2 -5
- package/esm2020/filtering/operators/ends-with-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/eq-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/gt-filter-operator.component.mjs +3 -6
- package/esm2020/filtering/operators/gte-filter-operator.component.mjs +2 -5
- package/esm2020/filtering/operators/is-empty-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/is-not-empty-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/is-not-null-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/isnull-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/lt-filter-operator.component.mjs +3 -5
- package/esm2020/filtering/operators/lte-filter-operator.component.mjs +3 -5
- package/esm2020/filtering/operators/neq-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/not-contains-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/operators/starts-with-filter-operator.component.mjs +2 -4
- package/esm2020/filtering/string-filter.component.mjs +2 -1
- package/esm2020/grid.component.mjs +38 -324
- package/esm2020/localization/custom-messages.component.mjs +1 -1
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/pager/pager-info.component.mjs +1 -1
- package/esm2020/pager/pager-input.component.mjs +1 -48
- package/esm2020/pager/pager-next-buttons.component.mjs +1 -1
- package/esm2020/pager/pager-numeric-buttons.component.mjs +1 -1
- package/esm2020/pager/pager-page-sizes.component.mjs +3 -92
- package/esm2020/pager/pager-prev-buttons.component.mjs +1 -1
- package/esm2020/pdf/pdf-margin.component.mjs +9 -0
- package/esm2020/rendering/common/spacer.component.mjs +2 -1
- package/excel/excel.component.d.ts +2 -7
- package/fesm2015/progress-kendo-angular-grid.mjs +435 -1260
- package/fesm2020/progress-kendo-angular-grid.mjs +435 -1260
- package/filtering/cell/boolean-filter-cell.component.d.ts +11 -10
- package/filtering/cell/date-filter-cell.component.d.ts +26 -13
- package/filtering/cell/filter-cell-operators.component.d.ts +15 -0
- package/filtering/cell/numeric-filter-cell.component.d.ts +14 -11
- package/filtering/cell/string-filter-cell.component.d.ts +14 -15
- package/filtering/date-filter.component.d.ts +8 -12
- package/filtering/menu/boolean-filter-menu.component.d.ts +13 -13
- package/filtering/menu/date-filter-menu.component.d.ts +13 -13
- package/filtering/menu/numeric-filter-menu.component.d.ts +13 -13
- package/filtering/menu/string-filter-menu.component.d.ts +15 -2
- package/filtering/numeric-filter.component.d.ts +4 -1
- package/filtering/operators/after-eq-filter-operator.component.d.ts +4 -0
- package/filtering/operators/after-filter-operator.component.d.ts +4 -0
- package/filtering/operators/before-eq-filter-operator.component.d.ts +4 -0
- package/filtering/operators/before-filter-operator.component.d.ts +4 -0
- package/filtering/operators/contains-filter-operator.component.d.ts +2 -5
- package/filtering/operators/ends-with-filter-operator.component.d.ts +2 -4
- package/filtering/operators/eq-filter-operator.component.d.ts +2 -4
- package/filtering/operators/gt-filter-operator.component.d.ts +4 -0
- package/filtering/operators/gte-filter-operator.component.d.ts +2 -5
- package/filtering/operators/is-empty-filter-operator.component.d.ts +2 -4
- package/filtering/operators/is-not-empty-filter-operator.component.d.ts +2 -4
- package/filtering/operators/is-not-null-filter-operator.component.d.ts +2 -4
- package/filtering/operators/isnull-filter-operator.component.d.ts +2 -4
- package/filtering/operators/lt-filter-operator.component.d.ts +5 -0
- package/filtering/operators/lte-filter-operator.component.d.ts +5 -0
- package/filtering/operators/neq-filter-operator.component.d.ts +2 -4
- package/filtering/operators/not-contains-filter-operator.component.d.ts +2 -4
- package/filtering/operators/starts-with-filter-operator.component.d.ts +2 -4
- package/filtering/string-filter.component.d.ts +2 -1
- package/grid.component.d.ts +42 -326
- package/grouping/group-key.interface.d.ts +1 -13
- package/grouping/group-rows-args.interface.d.ts +1 -1
- package/localization/custom-messages.component.d.ts +1 -1
- package/localization/messages.d.ts +35 -98
- package/navigation/navigation-cell.interface.d.ts +2 -5
- package/navigation/navigation-row.interface.d.ts +2 -5
- package/package.json +19 -19
- package/pager/pager-info.component.d.ts +1 -1
- package/pager/pager-input.component.d.ts +1 -48
- package/pager/pager-next-buttons.component.d.ts +1 -1
- package/pager/pager-numeric-buttons.component.d.ts +1 -1
- package/pager/pager-page-sizes.component.d.ts +3 -92
- package/pager/pager-prev-buttons.component.d.ts +1 -1
- package/pager/pager-settings.d.ts +1 -26
- package/pdf/pdf-margin.component.d.ts +9 -0
- package/pdf/pdf-margin.interface.d.ts +0 -5
- package/rendering/common/spacer.component.d.ts +2 -1
- package/row-reordering/types.d.ts +1 -1
- package/schematics/ngAdd/index.js +2 -2
- package/scrolling/content-scroll-event.d.ts +1 -1
- package/scrolling/scroll-request.service.d.ts +2 -1
- package/selection/types.d.ts +7 -46
|
@@ -8,65 +8,14 @@ import { CellTemplateDirective } from '../rendering/cell-template.directive';
|
|
|
8
8
|
import { IdService } from '../common/id.service';
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
/**
|
|
11
|
-
* Represents the checkbox for selecting
|
|
12
|
-
* defined as empty, it renders a default checkbox for row selection.
|
|
13
|
-
* You can also define the content of the column inside an `<ng-template>` tag.
|
|
14
|
-
* The input requires you to include the `SelectionCheckbox` option.
|
|
15
|
-
*
|
|
16
|
-
* The template context is set to the current data item and the following additional fields are passed:
|
|
17
|
-
* - `columnIndex`—The current column index.
|
|
18
|
-
* - `rowIndex`—The current data row index. If inside a new item row, it will be `-1`.
|
|
19
|
-
* - `dataItem`—The current data item.
|
|
20
|
-
* - `column`—The current column instance.
|
|
21
|
-
* - `isNew`—The state of the current item.
|
|
22
|
-
*
|
|
23
|
-
* For more examples, refer to:
|
|
24
|
-
* - [Selecting or deselecting all items on a page]({% slug selection_grid %}#toc-select-all-feature)
|
|
25
|
-
* - [Persisting the selection]({% slug selection_grid %}#toc-in-combination-with-the-select-all-feature)
|
|
11
|
+
* Represents the checkbox column for selecting rows in the Grid. [See example](slug:grid_row_selection#toc-select-all-checkbox).
|
|
26
12
|
*
|
|
27
13
|
* @example
|
|
28
|
-
* ```
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* <kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
|
|
34
|
-
* <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
|
|
35
|
-
* </kendo-grid-column>
|
|
36
|
-
* <kendo-grid-column field="ProductName" title="Product Name">
|
|
37
|
-
* </kendo-grid-column>
|
|
38
|
-
* <kendo-grid-checkbox-column title="Default checkbox">
|
|
39
|
-
* </kendo-grid-checkbox-column>
|
|
40
|
-
* <kendo-grid-checkbox-column title="Custom checkbox">
|
|
41
|
-
* <ng-template kendoGridCellTemplate let-idx="rowIndex">
|
|
42
|
-
* Select row <input [kendoGridSelectionCheckbox]="idx" />
|
|
43
|
-
* </ng-template>
|
|
44
|
-
* </kendo-grid-checkbox-column>
|
|
45
|
-
* </kendo-grid>
|
|
46
|
-
* `
|
|
47
|
-
* })
|
|
48
|
-
*
|
|
49
|
-
* class AppComponent {
|
|
50
|
-
* public gridData: any[];
|
|
51
|
-
*
|
|
52
|
-
* constructor() {
|
|
53
|
-
* this.gridData = products;
|
|
54
|
-
* }
|
|
55
|
-
* }
|
|
56
|
-
*
|
|
57
|
-
* const products = [{
|
|
58
|
-
* "ProductID": 1,
|
|
59
|
-
* "ProductName": "Chai",
|
|
60
|
-
* "UnitPrice": 18.0000,
|
|
61
|
-
* "Discontinued": true
|
|
62
|
-
* }, {
|
|
63
|
-
* "ProductID": 2,
|
|
64
|
-
* "ProductName": "Chang",
|
|
65
|
-
* "UnitPrice": 19.0000,
|
|
66
|
-
* "Discontinued": false
|
|
67
|
-
* }
|
|
68
|
-
* ];
|
|
69
|
-
*
|
|
14
|
+
* ```hmtl
|
|
15
|
+
* <kendo-grid [selectable]="{enabled: true, checkboxOnly: true}">
|
|
16
|
+
* <kendo-grid-checkbox-column title="Default checkbox"></kendo-grid-checkbox-column>
|
|
17
|
+
* <kendo-grid-column field="ProductID"></kendo-grid-column>
|
|
18
|
+
* </kendo-grid>
|
|
70
19
|
* ```
|
|
71
20
|
*/
|
|
72
21
|
export declare class CheckboxColumnComponent extends ColumnBase {
|
package/columns/column-base.d.ts
CHANGED
|
@@ -64,12 +64,14 @@ export declare class ColumnBase {
|
|
|
64
64
|
reorderable: boolean;
|
|
65
65
|
/**
|
|
66
66
|
* The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
|
|
67
|
+
* The `autoFitColumn` and `autoFitColumns` methods have higher priority.
|
|
67
68
|
* @default 10
|
|
68
69
|
*/
|
|
69
70
|
minResizableWidth: number;
|
|
70
71
|
/**
|
|
71
72
|
* The width (in pixels) above which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
|
|
72
73
|
* By default, the maximum width is not restricted.
|
|
74
|
+
* The `autoFitColumn` and `autoFitColumns` methods have higher priority.
|
|
73
75
|
*/
|
|
74
76
|
maxResizableWidth: number;
|
|
75
77
|
/**
|
|
@@ -12,56 +12,17 @@ import * as i0 from "@angular/core";
|
|
|
12
12
|
export declare function isColumnGroupComponent(column: any): column is ColumnGroupComponent;
|
|
13
13
|
/**
|
|
14
14
|
* Represents the column group header of the Grid
|
|
15
|
-
* ([more information and examples](
|
|
15
|
+
* ([more information and examples](slug:multicolumnheaders_columns_grid)).
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
|
-
* ```
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* Column index: {{columnIndex}} / column title: {{column.title}}
|
|
27
|
-
* </ng-template>
|
|
28
|
-
* <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
|
|
29
|
-
* </kendo-grid-column>
|
|
30
|
-
* <kendo-grid-column field="ProductName" title="Product Name">
|
|
31
|
-
* </kendo-grid-column>
|
|
32
|
-
* </kendo-grid-column-group>
|
|
33
|
-
* <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
|
|
34
|
-
* </kendo-grid-column>
|
|
35
|
-
* <kendo-grid-column field="Discontinued" [width]="120">
|
|
36
|
-
* <ng-template kendoGridCellTemplate let-dataItem>
|
|
37
|
-
* <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
|
|
38
|
-
* </ng-template>
|
|
39
|
-
* </kendo-grid-column>
|
|
40
|
-
* </kendo-grid>
|
|
41
|
-
* `
|
|
42
|
-
* })
|
|
43
|
-
*
|
|
44
|
-
* class AppComponent {
|
|
45
|
-
* public gridData: any[];
|
|
46
|
-
*
|
|
47
|
-
* constructor() {
|
|
48
|
-
* this.gridData = products;
|
|
49
|
-
* }
|
|
50
|
-
* }
|
|
51
|
-
*
|
|
52
|
-
* const products = [{
|
|
53
|
-
* "ProductID": 1,
|
|
54
|
-
* "ProductName": "Chai",
|
|
55
|
-
* "UnitPrice": 18.0000,
|
|
56
|
-
* "Discontinued": true
|
|
57
|
-
* }, {
|
|
58
|
-
* "ProductID": 2,
|
|
59
|
-
* "ProductName": "Chang",
|
|
60
|
-
* "UnitPrice": 19.0000,
|
|
61
|
-
* "Discontinued": false
|
|
62
|
-
* }
|
|
63
|
-
* ];
|
|
64
|
-
*
|
|
18
|
+
* ```html
|
|
19
|
+
* <kendo-grid [data]="gridData">
|
|
20
|
+
* <kendo-grid-column-group title="Product Info">
|
|
21
|
+
* <kendo-grid-column field="ProductID"></kendo-grid-column>
|
|
22
|
+
* <kendo-grid-column field="ProductName"></kendo-grid-column>
|
|
23
|
+
* </kendo-grid-column-group>
|
|
24
|
+
* <kendo-grid-column field="UnitPrice"></kendo-grid-column>
|
|
25
|
+
* </kendo-grid>
|
|
65
26
|
* ```
|
|
66
27
|
*/
|
|
67
28
|
export declare class ColumnGroupComponent extends ColumnBase {
|
|
@@ -19,51 +19,15 @@ import * as i0 from "@angular/core";
|
|
|
19
19
|
*/
|
|
20
20
|
export declare function isColumnComponent(column: any): column is ColumnComponent;
|
|
21
21
|
/**
|
|
22
|
-
* Represents the
|
|
22
|
+
* Represents the column of the Grid. [See example](slug:columns_config#toc-using-the-column-component)
|
|
23
23
|
*
|
|
24
24
|
* @example
|
|
25
|
-
* ```
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
|
|
32
|
-
* </kendo-grid-column>
|
|
33
|
-
* <kendo-grid-column field="ProductName" title="Product Name">
|
|
34
|
-
* </kendo-grid-column>
|
|
35
|
-
* <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
|
|
36
|
-
* </kendo-grid-column>
|
|
37
|
-
* <kendo-grid-column field="Discontinued" [width]="120">
|
|
38
|
-
* <ng-template kendoGridCellTemplate let-dataItem>
|
|
39
|
-
* <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
|
|
40
|
-
* </ng-template>
|
|
41
|
-
* </kendo-grid-column>
|
|
42
|
-
* </kendo-grid>
|
|
43
|
-
* `
|
|
44
|
-
* })
|
|
45
|
-
*
|
|
46
|
-
* class AppComponent {
|
|
47
|
-
* public gridData: any[];
|
|
48
|
-
*
|
|
49
|
-
* constructor() {
|
|
50
|
-
* this.gridData = products;
|
|
51
|
-
* }
|
|
52
|
-
* }
|
|
53
|
-
*
|
|
54
|
-
* const products = [{
|
|
55
|
-
* "ProductID": 1,
|
|
56
|
-
* "ProductName": "Chai",
|
|
57
|
-
* "UnitPrice": 18.0000,
|
|
58
|
-
* "Discontinued": true
|
|
59
|
-
* }, {
|
|
60
|
-
* "ProductID": 2,
|
|
61
|
-
* "ProductName": "Chang",
|
|
62
|
-
* "UnitPrice": 19.0000,
|
|
63
|
-
* "Discontinued": false
|
|
64
|
-
* }
|
|
65
|
-
* ];
|
|
66
|
-
*
|
|
25
|
+
* ```html
|
|
26
|
+
* <kendo-grid [data]="gridData">
|
|
27
|
+
* <kendo-grid-column field="ProductID" title="Product ID"></kendo-grid-column>
|
|
28
|
+
* <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
|
|
29
|
+
* <kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
|
|
30
|
+
* </kendo-grid>
|
|
67
31
|
* ```
|
|
68
32
|
*/
|
|
69
33
|
export declare class ColumnComponent extends ColumnBase {
|
|
@@ -72,96 +36,46 @@ export declare class ColumnComponent extends ColumnBase {
|
|
|
72
36
|
*/
|
|
73
37
|
field: string;
|
|
74
38
|
/**
|
|
75
|
-
* The format that is applied to the value before it is displayed.
|
|
76
|
-
* Takes the `{0:format}` form where `format` is a standard number format, a custom number format,
|
|
77
|
-
* a standard date format, a custom date format or a format object. For more information on the supported date and number formats,
|
|
39
|
+
* The format that is applied to the value before it is displayed. [See example](slug:filtering_grid#toc-date-filter). For more information on the supported date and number formats,
|
|
78
40
|
* refer to the [kendo-intl](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) documentation.
|
|
79
|
-
*
|
|
80
|
-
* Standard format:
|
|
81
|
-
* @example
|
|
82
|
-
* ```html-no-run
|
|
83
|
-
* <kendo-grid>
|
|
84
|
-
* <kendo-grid-column field="UnitPrice" format="{0:c}">
|
|
85
|
-
* </kendo-grid-column>
|
|
86
|
-
* </kendo-grid>
|
|
87
|
-
* ```
|
|
88
|
-
*
|
|
89
|
-
* Format object for currency:
|
|
90
|
-
* @example
|
|
91
|
-
* ```html-no-run
|
|
92
|
-
* <kendo-grid>
|
|
93
|
-
* <kendo-grid-column field="UnitPrice" [format]="{ style: 'currency', currency: 'EUR' }">
|
|
94
|
-
* </kendo-grid-column>
|
|
95
|
-
* </kendo-grid>
|
|
96
|
-
* ```
|
|
97
|
-
*
|
|
98
|
-
* Format object for dates:
|
|
99
|
-
* @example
|
|
100
|
-
* ```html-no-run
|
|
101
|
-
* <kendo-grid>
|
|
102
|
-
* <kendo-grid-column field="FirstOrderedOn" [format]="{ date: 'short' }">
|
|
103
|
-
* </kendo-grid-column>
|
|
104
|
-
* </kendo-grid>
|
|
105
|
-
* ```
|
|
106
41
|
*/
|
|
107
42
|
format: any;
|
|
108
43
|
/**
|
|
109
|
-
* Allows the
|
|
110
|
-
*
|
|
44
|
+
* Allows the user to click the column headers and emits the `sortChange` event. [See example](slug:sorting_grid).
|
|
45
|
+
*
|
|
46
|
+
* @default true
|
|
111
47
|
*/
|
|
112
48
|
sortable: boolean | ColumnSortSettings;
|
|
113
49
|
/**
|
|
114
|
-
* Determines if the column can be dragged to the group panel.
|
|
50
|
+
* Determines if the column can be dragged to the group panel.
|
|
115
51
|
* If set to `false`, you can group the columns by the column field by using the API of the Grid.
|
|
52
|
+
*
|
|
53
|
+
* @default true
|
|
116
54
|
*/
|
|
117
55
|
groupable: boolean;
|
|
118
56
|
/**
|
|
119
|
-
* Defines the editor type
|
|
120
|
-
* Used when the column enters the edit mode.
|
|
57
|
+
* Defines the editor type. [See example](slug:inline_editing_grid#toc-using-reactive-forms).
|
|
58
|
+
* Used when the column enters the edit mode.
|
|
121
59
|
*
|
|
122
|
-
* @
|
|
123
|
-
* ```html-no-run
|
|
124
|
-
* <kendo-grid>
|
|
125
|
-
* <kendo-grid-column field="UnitPrice" editor="numeric">
|
|
126
|
-
* </kendo-grid-column>
|
|
127
|
-
* </kendo-grid>
|
|
128
|
-
* ```
|
|
60
|
+
* @default 'text'
|
|
129
61
|
*/
|
|
130
62
|
editor: 'text' | 'numeric' | 'date' | 'boolean';
|
|
131
63
|
/**
|
|
132
|
-
* Defines the filter type that is displayed inside the filter row.
|
|
64
|
+
* Defines the filter type that is displayed inside the filter row. [See example](slug:filtering_grid#toc-filter-data-types).
|
|
133
65
|
*
|
|
134
|
-
* @
|
|
135
|
-
* ```html-no-run
|
|
136
|
-
* <kendo-grid>
|
|
137
|
-
* <kendo-grid-column field="UnitPrice" filter="numeric">
|
|
138
|
-
* </kendo-grid-column>
|
|
139
|
-
* </kendo-grid>
|
|
140
|
-
* ```
|
|
66
|
+
* @default 'text'
|
|
141
67
|
*/
|
|
142
68
|
filter: 'text' | 'numeric' | 'boolean' | 'date';
|
|
143
69
|
/**
|
|
144
|
-
* Defines if a filter UI will be displayed for this column.
|
|
70
|
+
* Defines if a filter UI will be displayed for this column. [See example](slug:filtering_grid).
|
|
145
71
|
*
|
|
146
|
-
* @
|
|
147
|
-
* ```html-no-run
|
|
148
|
-
* <kendo-grid>
|
|
149
|
-
* <kendo-grid-column field="UnitPrice" [filterable]="false">
|
|
150
|
-
* </kendo-grid-column>
|
|
151
|
-
* </kendo-grid>
|
|
152
|
-
* ```
|
|
72
|
+
* @default true
|
|
153
73
|
*/
|
|
154
74
|
filterable: boolean;
|
|
155
75
|
/**
|
|
156
|
-
* Defines whether the column is editable.
|
|
76
|
+
* Defines whether the column is editable. [See example](slug:make_fields_uneditable_grid).
|
|
157
77
|
*
|
|
158
|
-
* @
|
|
159
|
-
* ```html-no-run
|
|
160
|
-
* <kendo-grid>
|
|
161
|
-
* <kendo-grid-column field="UnitPrice" [editable]="false">
|
|
162
|
-
* </kendo-grid-column>
|
|
163
|
-
* </kendo-grid>
|
|
164
|
-
* ```
|
|
78
|
+
* @default true
|
|
165
79
|
*/
|
|
166
80
|
editable: boolean;
|
|
167
81
|
template: CellTemplateDirective;
|
|
@@ -9,68 +9,20 @@ import { IdService } from '../common/id.service';
|
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
/**
|
|
11
11
|
* Represents the command columns of the Grid. You have to define the content of the
|
|
12
|
-
* column inside an `<ng-template>` tag.
|
|
13
|
-
*
|
|
14
|
-
* and the command directives, refer to the article on
|
|
15
|
-
* [editing the Grid in Angular Reactive Forms]({% slug inline_editing_grid %}#toc-using-reactive-forms).
|
|
16
|
-
*
|
|
17
|
-
* The following additional fields are passed:
|
|
18
|
-
* - `columnIndex`—The current column index.
|
|
19
|
-
* - `rowIndex`—The current data row index. If inside a new item row, `rowIndex`is `-1`.
|
|
20
|
-
* - `dataItem`—The current data item.
|
|
21
|
-
* - `column`—The current column instance.
|
|
22
|
-
* - `isNew`—The state of the current item.
|
|
23
|
-
*
|
|
24
|
-
* Usually, the template contains CRUD command directives such as:
|
|
25
|
-
* - [EditCommandDirective]({% slug api_grid_editcommanddirective %})
|
|
26
|
-
* - [RemoveCommandDirective]({% slug api_grid_removecommanddirective %})
|
|
27
|
-
* - [CancelCommandDirective]({% slug api_grid_cancelcommanddirective %})
|
|
28
|
-
* - [SaveCommandDirective]({% slug api_grid_savecommanddirective %})
|
|
12
|
+
* column inside an `<ng-template>` tag.
|
|
13
|
+
* For more information and examples, refer to the [Command Column Directives](slug:editing_directives_grid#toc-command-column-directives) article.
|
|
29
14
|
*
|
|
30
15
|
* @example
|
|
31
|
-
* ```
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
* <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
|
|
42
|
-
* </kendo-grid-column>
|
|
43
|
-
* <kendo-grid-command-column title="command" [width]="220">
|
|
44
|
-
* <ng-template kendoGridCellTemplate>
|
|
45
|
-
* <button kendoGridEditCommand class="k-primary">Edit</button>
|
|
46
|
-
* <button kendoGridRemoveCommand>Remove</button>
|
|
47
|
-
* </ng-template>
|
|
48
|
-
* </kendo-grid-command-column>
|
|
49
|
-
* </kendo-grid>
|
|
50
|
-
* `
|
|
51
|
-
* })
|
|
52
|
-
*
|
|
53
|
-
* class AppComponent {
|
|
54
|
-
* public gridData: any[];
|
|
55
|
-
*
|
|
56
|
-
* constructor() {
|
|
57
|
-
* this.gridData = products;
|
|
58
|
-
* }
|
|
59
|
-
* }
|
|
60
|
-
*
|
|
61
|
-
* const products = [{
|
|
62
|
-
* "ProductID": 1,
|
|
63
|
-
* "ProductName": "Chai",
|
|
64
|
-
* "UnitPrice": 18.0000,
|
|
65
|
-
* "Discontinued": true
|
|
66
|
-
* }, {
|
|
67
|
-
* "ProductID": 2,
|
|
68
|
-
* "ProductName": "Chang",
|
|
69
|
-
* "UnitPrice": 19.0000,
|
|
70
|
-
* "Discontinued": false
|
|
71
|
-
* }
|
|
72
|
-
* ];
|
|
73
|
-
*
|
|
16
|
+
* ```html
|
|
17
|
+
* <kendo-grid [data]="gridData">
|
|
18
|
+
* <kendo-grid-column field="ProductID"></kendo-grid-column>
|
|
19
|
+
* <kendo-grid-command-column title="command" [width]="220">
|
|
20
|
+
* <ng-template kendoGridCellTemplate>
|
|
21
|
+
* <button kendoGridEditCommand class="k-primary">Edit</button>
|
|
22
|
+
* <button kendoGridRemoveCommand>Remove</button>
|
|
23
|
+
* </ng-template>
|
|
24
|
+
* </kendo-grid-command-column>
|
|
25
|
+
* </kendo-grid>
|
|
74
26
|
* ```
|
|
75
27
|
*/
|
|
76
28
|
export declare class CommandColumnComponent extends ColumnBase {
|
|
@@ -7,7 +7,7 @@ import { IdService } from '../common/id.service';
|
|
|
7
7
|
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
/**
|
|
10
|
-
* Represents the drag handle for reordering rows in the Grid
|
|
10
|
+
* Represents the drag handle for reordering rows in the Grid ([see example](slug:reordering_rows_grid))
|
|
11
11
|
*/
|
|
12
12
|
export declare class RowReorderColumnComponent extends ColumnBase {
|
|
13
13
|
parent?: ColumnBase;
|
|
@@ -13,9 +13,7 @@ export interface ColumnSortSettings {
|
|
|
13
13
|
/**
|
|
14
14
|
* Determines the initial (from the unsorted to the sorted state) sort direction.
|
|
15
15
|
*
|
|
16
|
-
* The available values for setting the initial sort direction
|
|
17
|
-
* - `asc` (default)
|
|
18
|
-
* - `desc`
|
|
16
|
+
* The available values for setting the initial sort direction.
|
|
19
17
|
*/
|
|
20
18
|
initialDirection?: 'asc' | 'desc';
|
|
21
19
|
}
|
|
@@ -41,7 +39,7 @@ export interface SingleSortSettings extends ColumnSortSettings {
|
|
|
41
39
|
*/
|
|
42
40
|
export declare type ModifierKey = 'none' | 'ctrl' | 'shift' | 'alt';
|
|
43
41
|
/**
|
|
44
|
-
* Specifies settings for sorting by multiple columns.
|
|
42
|
+
* Specifies settings for sorting by multiple columns. [See example](slug:multi_sort_grid).
|
|
45
43
|
*/
|
|
46
44
|
export interface MultipleSortSettings extends ColumnSortSettings {
|
|
47
45
|
/**
|
|
@@ -55,15 +53,13 @@ export interface MultipleSortSettings extends ColumnSortSettings {
|
|
|
55
53
|
/**
|
|
56
54
|
* Specifies the modifier key for sorting by 2nd or more columns.
|
|
57
55
|
*
|
|
58
|
-
*
|
|
56
|
+
* By default, clicking a column adds it to the sort order (corresponds to `'none'`).
|
|
59
57
|
* Selecting a key modifier along with the click will remove sorting from all other columns.
|
|
60
58
|
*
|
|
61
59
|
* If the key is set to 'ctrl', 'shift' or 'alt', clicking a column will remove sorting from all other columns.
|
|
62
60
|
* The specified key must be pressed to add the column to the sort order instead.
|
|
61
|
+
* The `ctrl` value corresponds to the `Command` key in a macOS environment. [See example](slug:multi_sort_grid#toc-sort-key-modifier).
|
|
63
62
|
*
|
|
64
|
-
* > The `ctrl` value corresponds to the `Command` key in a macOS environment.
|
|
65
|
-
*
|
|
66
|
-
* @default 'none'
|
|
67
63
|
*/
|
|
68
64
|
multiSortKey?: ModifierKey;
|
|
69
65
|
}
|
|
@@ -21,62 +21,15 @@ export declare function isSpanColumnComponent(column: any): column is SpanColumn
|
|
|
21
21
|
* [grouping]({% slug grouping_grid %}). Wrap the columns that will be
|
|
22
22
|
* merged inside the `<kendo-grid-span-column>` tag.
|
|
23
23
|
*
|
|
24
|
-
*
|
|
25
|
-
* ```ts-preview
|
|
26
|
-
*
|
|
27
|
-
* _@Component({
|
|
28
|
-
* selector: 'my-app',
|
|
29
|
-
* template: `
|
|
30
|
-
* <kendo-grid
|
|
31
|
-
* [sortable]="true"
|
|
32
|
-
* [filterable]="true"
|
|
33
|
-
* [kendoGridBinding]="products">
|
|
34
|
-
* <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
|
|
35
|
-
* </kendo-grid-column>
|
|
36
|
-
* <kendo-grid-span-column>
|
|
37
|
-
* <kendo-grid-column field="ProductName" title="Product Name">
|
|
38
|
-
* </kendo-grid-column>
|
|
39
|
-
* <kendo-grid-column field="UnitPrice" title="Unit Price" filter="numeric" [width]="180" format="{0:c}">
|
|
40
|
-
* </kendo-grid-column>
|
|
41
|
-
* </kendo-grid-span-column>
|
|
42
|
-
* <kendo-grid-column field="Discontinued" [width]="120" filter="boolean">
|
|
43
|
-
* <ng-template kendoGridCellTemplate let-dataItem>
|
|
44
|
-
* <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
|
|
45
|
-
* </ng-template>
|
|
46
|
-
* </kendo-grid-column>
|
|
47
|
-
* </kendo-grid>
|
|
48
|
-
* `
|
|
49
|
-
* })
|
|
50
|
-
*
|
|
51
|
-
* class AppComponent {
|
|
52
|
-
* public products = [{
|
|
53
|
-
* "ProductID": 1,
|
|
54
|
-
* "ProductName": "Chai",
|
|
55
|
-
* "UnitPrice": 18.0000,
|
|
56
|
-
* "Discontinued": true
|
|
57
|
-
* }, {
|
|
58
|
-
* "ProductID": 2,
|
|
59
|
-
* "ProductName": "Chang",
|
|
60
|
-
* "UnitPrice": 19.0000,
|
|
61
|
-
* "Discontinued": false
|
|
62
|
-
* }
|
|
63
|
-
* ];
|
|
64
|
-
* }
|
|
65
|
-
*
|
|
66
|
-
* ```
|
|
67
|
-
*
|
|
68
|
-
* By default, the data cell displays the data for the specified fields. To further customize
|
|
69
|
-
* the span-column functionality, use a [cell template]({% slug api_grid_celltemplatedirective %}).
|
|
70
|
-
*
|
|
71
|
-
* ```html-no-run
|
|
24
|
+
* ```html
|
|
72
25
|
* <kendo-grid-span-column>
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
26
|
+
* <kendo-grid-column field="field1"></kendo-grid-column>
|
|
27
|
+
* <kendo-grid-column field="field2"></kendo-grid-column>
|
|
28
|
+
* <ng-template kendoGridCellTemplate let-dataItem>
|
|
29
|
+
* <h5>{{ dataItem.field1 }}</h5>
|
|
30
|
+
* <p>{{ dataItem.field2 }}</p>
|
|
31
|
+
* </ng-template>
|
|
32
|
+
* </kendo-grid-span-column>
|
|
80
33
|
* ```
|
|
81
34
|
*/
|
|
82
35
|
export declare class SpanColumnComponent extends ColumnBase {
|
|
@@ -120,24 +73,9 @@ export declare class SpanColumnComponent extends ColumnBase {
|
|
|
120
73
|
*/
|
|
121
74
|
includeInChooser: boolean;
|
|
122
75
|
/**
|
|
123
|
-
* Defines whether the edit template of the column will be rendered.
|
|
124
|
-
*
|
|
125
|
-
*
|
|
126
|
-
*
|
|
127
|
-
* @example
|
|
128
|
-
* ```html-no-run
|
|
129
|
-
* <kendo-grid>
|
|
130
|
-
* <kendo-grid-span-column [editable]="false">
|
|
131
|
-
* <kendo-grid-column field="UnitPrice">
|
|
132
|
-
* </kendo-grid-column>
|
|
133
|
-
* <kendo-grid-column field="ProductName">
|
|
134
|
-
* </kendo-grid-column>
|
|
135
|
-
* <ng-template kendoGridEditTemplate>
|
|
136
|
-
* .....
|
|
137
|
-
* </ng-template>
|
|
138
|
-
* </kendo-grid-span-column>
|
|
139
|
-
* </kendo-grid>
|
|
140
|
-
* ```
|
|
76
|
+
* Defines whether the edit template of the column will be rendered.
|
|
77
|
+
* To enable the editing functionality for a spanned column, set an edit template for it ([see exmaple](slug:custom_reactive_editing_grid)).
|
|
78
|
+
* @default false
|
|
141
79
|
*/
|
|
142
80
|
set editable(value: boolean);
|
|
143
81
|
get editable(): boolean;
|
|
@@ -166,57 +104,8 @@ export declare class SpanColumnComponent extends ColumnBase {
|
|
|
166
104
|
*/
|
|
167
105
|
get colspan(): number;
|
|
168
106
|
/**
|
|
169
|
-
* Toggles the locked (frozen) state of the columns
|
|
170
|
-
* at all times during the horizontal scrolling of the Grid.
|
|
171
|
-
*
|
|
172
|
-
* For the option to work properly, make sure that:
|
|
173
|
-
* - Scrolling is enabled.
|
|
174
|
-
* - The `height` option of the Grid is set.
|
|
175
|
-
* - The widths of all Grid columns are explicitly set in pixels. In this way,
|
|
176
|
-
* the Grid adjusts the layout of the locked and unlocked columns.
|
|
177
|
-
*
|
|
107
|
+
* Toggles the locked (frozen) state of the columns ([see example](slug:locked_columns_grid)).
|
|
178
108
|
* @default false
|
|
179
|
-
*
|
|
180
|
-
* @example
|
|
181
|
-
* ```ts
|
|
182
|
-
* _@Component({
|
|
183
|
-
* selector: 'my-app',
|
|
184
|
-
* template: `
|
|
185
|
-
* <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
|
|
186
|
-
* <kendo-grid-span-column [locked]="true">
|
|
187
|
-
* <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
|
|
188
|
-
* </kendo-grid-column>
|
|
189
|
-
* <kendo-grid-column field="ProductName" title="Product Name" [width]="200">
|
|
190
|
-
* </kendo-grid-column>
|
|
191
|
-
* </kendo-grid-span-column>
|
|
192
|
-
* <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
|
|
193
|
-
* </kendo-grid-column>
|
|
194
|
-
* </kendo-grid>
|
|
195
|
-
* `
|
|
196
|
-
* })
|
|
197
|
-
*
|
|
198
|
-
* class AppComponent {
|
|
199
|
-
* public gridData: any[];
|
|
200
|
-
*
|
|
201
|
-
* constructor() {
|
|
202
|
-
* this.gridData = products;
|
|
203
|
-
* }
|
|
204
|
-
* }
|
|
205
|
-
*
|
|
206
|
-
* const products = [{
|
|
207
|
-
* "ProductID": 1,
|
|
208
|
-
* "ProductName": "Chai",
|
|
209
|
-
* "UnitPrice": 18.0000,
|
|
210
|
-
* "Discontinued": true
|
|
211
|
-
* }, {
|
|
212
|
-
* "ProductID": 2,
|
|
213
|
-
* "ProductName": "Chang",
|
|
214
|
-
* "UnitPrice": 19.0000,
|
|
215
|
-
* "Discontinued": false
|
|
216
|
-
* }
|
|
217
|
-
* ];
|
|
218
|
-
*
|
|
219
|
-
* ```
|
|
220
109
|
*/
|
|
221
110
|
set locked(value: boolean);
|
|
222
111
|
get locked(): boolean;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { GridComponent } from "../grid.component";
|
|
6
6
|
/**
|
|
7
|
-
* Arguments for the `cellClick` event([see example]({% slug editing_incell_grid %}#toc-basic-concepts)).
|
|
7
|
+
* Arguments for the [`cellClick`](slug:api_grid_gridcomponent#toc-cellclick) event ([see example]({% slug editing_incell_grid %}#toc-basic-concepts)).
|
|
8
8
|
*/
|
|
9
9
|
export interface CellClickEvent {
|
|
10
10
|
/**
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { SortDescriptor, GroupDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
|
|
6
6
|
/**
|
|
7
|
-
* Arguments for the `pageChange` event.
|
|
7
|
+
* Arguments for the `pageChange` event. [See example](slug:manual_paging_grid#toc-paging-local-data).
|
|
8
8
|
*/
|
|
9
9
|
export interface PageChangeEvent {
|
|
10
10
|
/**
|
|
@@ -18,7 +18,7 @@ export interface PageChangeEvent {
|
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
20
|
* Arguments for the `dataStateChange` event
|
|
21
|
-
* ([more information and examples](
|
|
21
|
+
* ([more information and examples](slug:data_operations_grid#toc-handling-multiple-data-operations)).
|
|
22
22
|
*/
|
|
23
23
|
export interface DataStateChangeEvent {
|
|
24
24
|
/**
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { DataResult } from '@progress/kendo-data-query';
|
|
6
6
|
/**
|
|
7
|
-
* The data type that is expected by the Grid.
|
|
7
|
+
* The data type that is expected by the Grid. [See example](slug:local_data_grid#toc-binding-to-a-griddataresult-object).
|
|
8
8
|
*/
|
|
9
9
|
export interface GridDataResult extends DataResult {
|
|
10
10
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Additional configuration for the `reorderColumn` method.
|
|
6
|
+
* Additional configuration for the [`reorderColumn`](slug:api_grid_gridcomponent#toc-reordercolumn) method.
|
|
7
7
|
*/
|
|
8
8
|
export interface ColumnReorderConfig {
|
|
9
9
|
/**
|