@progress/kendo-angular-grid 12.0.0-develop.8 → 12.0.0

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.
Files changed (111) hide show
  1. package/column-menu/column-menu-item-content-template.directive.d.ts +13 -24
  2. package/column-menu/column-menu-template.directive.d.ts +14 -28
  3. package/column-menu/column-menu.service.d.ts +9 -21
  4. package/columns/column-base.d.ts +18 -369
  5. package/columns/reorder-column.component.d.ts +31 -0
  6. package/columns/sort-settings.d.ts +20 -4
  7. package/common/fetch-data-callback.d.ts +1 -1
  8. package/common/preventable-event.d.ts +1 -1
  9. package/common/single-popup.service.d.ts +1 -1
  10. package/common/size-options.d.ts +1 -2
  11. package/data/grid-item.interface.d.ts +6 -3
  12. package/databinding.directive.d.ts +15 -1
  13. package/editing/add-command.directive.d.ts +1 -1
  14. package/editing/cancel-command.directive.d.ts +4 -16
  15. package/editing/edit-template.directive.d.ts +2 -3
  16. package/editing/remove-command.directive.d.ts +6 -6
  17. package/editing/save-command.directive.d.ts +3 -15
  18. package/editing-directives/in-cell-editing.directive.d.ts +1 -1
  19. package/editing-directives/template-editing.directive.d.ts +1 -1
  20. package/esm2020/column-menu/column-menu-item-content-template.directive.mjs +13 -24
  21. package/esm2020/column-menu/column-menu-template.directive.mjs +14 -28
  22. package/esm2020/column-menu/column-menu.service.mjs +9 -21
  23. package/esm2020/columns/column-base.mjs +10 -40
  24. package/esm2020/columns/reorder-column.component.mjs +55 -0
  25. package/esm2020/common/preventable-event.mjs +1 -1
  26. package/esm2020/common/single-popup.service.mjs +1 -1
  27. package/esm2020/databinding.directive.mjs +30 -3
  28. package/esm2020/editing/add-command.directive.mjs +1 -1
  29. package/esm2020/editing/cancel-command.directive.mjs +4 -16
  30. package/esm2020/editing/edit-template.directive.mjs +2 -3
  31. package/esm2020/editing/remove-command.directive.mjs +6 -6
  32. package/esm2020/editing/save-command.directive.mjs +3 -15
  33. package/esm2020/editing-directives/in-cell-editing.directive.mjs +1 -1
  34. package/esm2020/editing-directives/template-editing.directive.mjs +1 -1
  35. package/esm2020/excel/excel-command.directive.mjs +2 -2
  36. package/esm2020/excel/excel.module.mjs +5 -15
  37. package/esm2020/grid.component.mjs +195 -38
  38. package/esm2020/grid.module.mjs +76 -81
  39. package/esm2020/grouping/group-footer-template.directive.mjs +9 -35
  40. package/esm2020/grouping/group-header-column-template.directive.mjs +2 -2
  41. package/esm2020/grouping/group-header-template.directive.mjs +9 -37
  42. package/esm2020/index.mjs +1 -0
  43. package/esm2020/layout/sizing-options.service.mjs +3 -0
  44. package/esm2020/localization/messages.mjs +3 -1
  45. package/esm2020/navigation/focusable.directive.mjs +10 -41
  46. package/esm2020/package-metadata.mjs +2 -2
  47. package/esm2020/pager/pager-template.directive.mjs +13 -46
  48. package/esm2020/pdf/pdf-template.directive.mjs +10 -38
  49. package/esm2020/pdf/pdf.module.mjs +7 -16
  50. package/esm2020/rendering/body.module.mjs +9 -4
  51. package/esm2020/rendering/cell-loading.template.directive.mjs +11 -8
  52. package/esm2020/rendering/cell-template.directive.mjs +11 -35
  53. package/esm2020/rendering/cell.component.mjs +43 -10
  54. package/esm2020/rendering/details/detail-template.directive.mjs +10 -58
  55. package/esm2020/rendering/details-expand.directive.mjs +1 -1
  56. package/esm2020/rendering/footer/footer-template.directive.mjs +8 -35
  57. package/esm2020/rendering/header/header-template.directive.mjs +9 -36
  58. package/esm2020/rendering/loading-template.directive.mjs +1 -1
  59. package/esm2020/rendering/no-records-template.directive.mjs +11 -58
  60. package/esm2020/rendering/toolbar/toolbar-position.mjs +17 -0
  61. package/esm2020/rendering/toolbar/toolbar-template.directive.mjs +10 -56
  62. package/esm2020/row-reordering/row-reorder.service.mjs +233 -0
  63. package/esm2020/row-reordering/types.mjs +5 -0
  64. package/esm2020/row-reordering/utils.mjs +87 -0
  65. package/esm2020/selection/selectall-checkbox.directive.mjs +12 -1
  66. package/esm2020/selection/selection-checkbox.directive.mjs +11 -44
  67. package/esm2020/selection/selection-default.mjs +1 -0
  68. package/esm2020/selection/selection.directive.mjs +1 -1
  69. package/excel/excel-command.directive.d.ts +2 -2
  70. package/excel/excel.module.d.ts +5 -15
  71. package/fesm2015/progress-kendo-angular-grid.mjs +869 -792
  72. package/fesm2020/progress-kendo-angular-grid.mjs +869 -796
  73. package/filtering/filterable.d.ts +10 -0
  74. package/grid.component.d.ts +46 -4
  75. package/grid.module.d.ts +93 -101
  76. package/grouping/group-footer-template.directive.d.ts +9 -35
  77. package/grouping/group-header-column-template.directive.d.ts +2 -2
  78. package/grouping/group-header-template.directive.d.ts +9 -37
  79. package/index.d.ts +2 -0
  80. package/layout/sizing-options.service.d.ts +3 -0
  81. package/localization/messages.d.ts +5 -1
  82. package/navigation/focusable.directive.d.ts +10 -41
  83. package/navigation/navigable-settings.d.ts +15 -1
  84. package/package.json +15 -14
  85. package/pager/pager-settings.d.ts +8 -12
  86. package/pager/pager-template.directive.d.ts +13 -46
  87. package/pdf/pdf-template.directive.d.ts +10 -38
  88. package/pdf/pdf.module.d.ts +7 -16
  89. package/rendering/body.module.d.ts +9 -8
  90. package/rendering/cell-loading.template.directive.d.ts +11 -8
  91. package/rendering/cell-template.directive.d.ts +11 -35
  92. package/rendering/cell.component.d.ts +5 -0
  93. package/rendering/common/row-class.d.ts +4 -4
  94. package/rendering/details/detail-template.directive.d.ts +10 -58
  95. package/rendering/details-expand.directive.d.ts +1 -1
  96. package/rendering/footer/footer-template.directive.d.ts +8 -35
  97. package/rendering/header/header-template.directive.d.ts +9 -36
  98. package/rendering/loading-template.directive.d.ts +1 -1
  99. package/rendering/no-records-template.directive.d.ts +11 -58
  100. package/rendering/toolbar/toolbar-position.d.ts +18 -1
  101. package/rendering/toolbar/toolbar-template.directive.d.ts +10 -56
  102. package/row-reordering/row-reorder.service.d.ts +57 -0
  103. package/row-reordering/types.d.ts +40 -0
  104. package/row-reordering/utils.d.ts +78 -0
  105. package/schematics/ngAdd/index.js +2 -2
  106. package/scrolling/scrollmode.d.ts +4 -4
  107. package/selection/selectall-checkbox.directive.d.ts +12 -1
  108. package/selection/selection-checkbox.directive.d.ts +11 -44
  109. package/selection/selection-default.d.ts +1 -0
  110. package/selection/selection.directive.d.ts +1 -1
  111. package/selection/types.d.ts +24 -2
@@ -6,35 +6,24 @@ import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
8
  * Represents the content template of the
9
- * [kendo-grid-columnmenu-item]({% slug api_grid_columnmenuitemcomponent %}) component.
9
+ * [`ColumnMenuItemComponent`]({% slug api_grid_columnmenuitemcomponent %}) component.
10
10
  * Provides an option for specifying the content of a column item.
11
11
  * To define the content template, nest an `<ng-template>` tag with the
12
12
  * `kendoGridColumnMenuItemContentTemplate` directive inside a `<kendo-grid-columnmenu-item>`.
13
13
  *
14
14
  * @example
15
- * ```ts-preview
16
- *
17
- * _@Component({
18
- * selector: 'my-app',
19
- * template: `
20
- * <kendo-grid [data]="data" [columnMenu]="true">
21
- * <ng-template kendoGridColumnMenuTemplate>
22
- * <kendo-grid-columnmenu-item text="Item Text" [expanded]="true">
23
- * <ng-template kendoGridColumnMenuItemContentTemplate>
24
- * Item Content
25
- * </ng-template>
26
- * </kendo-grid-columnmenu-item>
27
- * </ng-template>
28
- * <kendo-grid-column field="Field1"></kendo-grid-column>
29
- * <kendo-grid-column field="Field2"></kendo-grid-column>
30
- * </kendo-grid>
31
- * `
32
- * })
33
- *
34
- * class AppComponent {
35
- * public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
36
- * }
37
- *
15
+ * ```html
16
+ * <kendo-grid [data]="data" [columnMenu]="true" ...>
17
+ * <ng-template kendoGridColumnMenuTemplate>
18
+ * <kendo-grid-columnmenu-item text="Item Text" [expanded]="true">
19
+ * <ng-template kendoGridColumnMenuItemContentTemplate>
20
+ * Item Content
21
+ * </ng-template>
22
+ * </kendo-grid-columnmenu-item>
23
+ * </ng-template>
24
+ * <kendo-grid-column field="Field1"></kendo-grid-column>
25
+ * ...
26
+ * </kendo-grid>
38
27
  * ```
39
28
  */
40
29
  export declare class ColumnMenuItemContentTemplateDirective {
@@ -8,40 +8,26 @@ import * as i0 from "@angular/core";
8
8
  * Represents the template for the column menu in the Grid. Provides an option for
9
9
  * customizing the content of the column menu for all or for specific columns.
10
10
  * To define the content template, nest an `<ng-template>` tag with the
11
- * `kendoGridColumnMenuTemplate` directive inside the `kendo-grid` or the `<kendo-grid-column>` component.
11
+ * `kendoGridColumnMenuTemplate` directive inside the `<kendo-grid>` or the `<kendo-grid-column>` component.
12
12
  *
13
13
  * The template context is passes through the following fields:
14
14
  * - `service`&mdash;Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}).
15
15
  * - `column`&mdash;Represents the Grid column.
16
16
  *
17
17
  * @example
18
- * ```ts-preview
19
- *
20
- * _@Component({
21
- * selector: 'my-app',
22
- * template: `
23
- * <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
24
- * <ng-template kendoGridColumnMenuTemplate let-service="service">
25
- * <kendo-grid-columnmenu-sort [service]="service">
26
- * </kendo-grid-columnmenu-sort>
27
- * </ng-template>
28
- * <kendo-grid-column field="Field1" [width]="100">
29
- * <ng-template kendoGridColumnMenuTemplate let-service="service">
30
- * <kendo-grid-columnmenu-lock [service]="service">
31
- * </kendo-grid-columnmenu-lock>
32
- * <kendo-grid-columnmenu-sort [service]="service">
33
- * </kendo-grid-columnmenu-sort>
34
- * </ng-template>
35
- * </kendo-grid-column>
36
- * <kendo-grid-column field="Field2" [width]="100"></kendo-grid-column>
37
- * </kendo-grid>
38
- * `
39
- * })
40
- *
41
- * class AppComponent {
42
- * public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }, { Field1: 'Foo1', Field2: 'Bar1' }];
43
- * }
44
- *
18
+ * ```html
19
+ * <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
20
+ * <ng-template kendoGridColumnMenuTemplate let-service="service">
21
+ * <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
22
+ * </ng-template>
23
+ * <kendo-grid-column field="Field1">
24
+ * <ng-template kendoGridColumnMenuTemplate let-service="service">
25
+ * <kendo-grid-columnmenu-lock [service]="service"></kendo-grid-columnmenu-lock>
26
+ * <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
27
+ * </ng-template>
28
+ * </kendo-grid-column>
29
+ * <kendo-grid-column field="Field2"></kendo-grid-column>
30
+ * </kendo-grid>
45
31
  * ```
46
32
  */
47
33
  export declare class ColumnMenuTemplateDirective {
@@ -10,27 +10,15 @@ import * as i0 from "@angular/core";
10
10
  * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
11
11
  *
12
12
  * @example
13
- * ```ts-preview
14
- *
15
- * _@Component({
16
- * selector: 'my-app',
17
- * template: `
18
- * <kendo-grid [data]="data" [columnMenu]="true">
19
- * <ng-template kendoGridColumnMenuTemplate let-service="service">
20
- * <span class="k-icon k-i-x" (click)="service.close()"
21
- * style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
22
- * <kendo-grid-columnmenu-sort [service]="service">
23
- * </kendo-grid-columnmenu-sort>
24
- * </ng-template>
25
- * <kendo-grid-column field="Field1"></kendo-grid-column>
26
- * <kendo-grid-column field="Field2"></kendo-grid-column>
27
- * </kendo-grid>
28
- * `
29
- * })
30
- *
31
- * class AppComponent {
32
- * public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
33
- * }
13
+ * ```html
14
+ * <kendo-grid [data]="data" [columnMenu]="true">
15
+ * <ng-template kendoGridColumnMenuTemplate let-service="service">
16
+ * <span class="k-icon k-i-x" (click)="service.close()" </span>
17
+ * <kendo-grid-columnmenu-sort [service]="service">
18
+ * </kendo-grid-columnmenu-sort>
19
+ * </ng-template>
20
+ * <kendo-grid-column field="Field1"></kendo-grid-column>
21
+ * </kendo-grid>
34
22
  *
35
23
  * ```
36
24
  */
@@ -16,6 +16,10 @@ export declare const isSpanColumn: (column: any) => any;
16
16
  * @hidden
17
17
  */
18
18
  export declare const isCheckboxColumn: (column: any) => any;
19
+ /**
20
+ * @hidden
21
+ */
22
+ export declare const isRowReorderColumn: (column: any) => any;
19
23
  /**
20
24
  * The base class for the column components of the Grid.
21
25
  */
@@ -26,9 +30,9 @@ export declare class ColumnBase {
26
30
  */
27
31
  matchesMedia: boolean;
28
32
  /**
29
- * The column index after reordering.
33
+ * The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
30
34
  *
31
- * > `orderIndex` is a read-only property. Setting this field does not affect column order.
35
+ * @default 0
32
36
  */
33
37
  orderIndex: number;
34
38
  /**
@@ -86,44 +90,6 @@ export declare class ColumnBase {
86
90
  *
87
91
  * @default false
88
92
  *
89
- * @example
90
- * ```ts
91
- * _@Component({
92
- * selector: 'my-app',
93
- * template: `
94
- * <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
95
- * <kendo-grid-column field="ProductID" title="Product ID" [width]="120" [locked]="true">
96
- * </kendo-grid-column>
97
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200">
98
- * </kendo-grid-column>
99
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
100
- * </kendo-grid-column>
101
- * </kendo-grid>
102
- * `
103
- * })
104
- *
105
- * class AppComponent {
106
- * public gridData: any[];
107
- *
108
- * constructor() {
109
- * this.gridData = products;
110
- * }
111
- * }
112
- *
113
- * const products = [{
114
- * "ProductID": 1,
115
- * "ProductName": "Chai",
116
- * "UnitPrice": 18.0000,
117
- * "Discontinued": true
118
- * }, {
119
- * "ProductID": 2,
120
- * "ProductName": "Chang",
121
- * "UnitPrice": 19.0000,
122
- * "Discontinued": false
123
- * }
124
- * ];
125
- *
126
- * ```
127
93
  */
128
94
  set locked(value: boolean);
129
95
  get locked(): boolean;
@@ -144,85 +110,35 @@ export declare class ColumnBase {
144
110
  * Sets the condition that needs to be satisfied for a column to remain visible ([see example]({% slug styling_responsive_grid %}#toc-columns)).
145
111
  * If you set the `hidden` property, the behavior of `media` is overridden.
146
112
  *
147
- * @example
148
- * ```html
149
- * <kendo-grid>
150
- * <kendo-grid-column field="UnitPrice" media="(min-width: 320px)">
151
- * </kendo-grid-column>
152
- * </kendo-grid>
153
- * ```
154
- *
155
113
  * Accepts the device identifiers that are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options)
156
114
  * ([see example]({% slug styling_responsive_grid %}#toc-bootstrap-4-compatibility)):
157
- * * `"xs"`&mdash;Equivalent to `"(max-width: 576px)"`.
158
- * * `"sm"`&mdash;Equivalent to `"(min-width: 576px)"`.
159
- * * `"md"`&mdash;Equivalent to `"(min-width: 768px)"`.
160
- * * `"lg"`&mdash;Equivalent to `"(min-width: 992px)"`.
161
- * * `"xl"`&mdash;Equivalent to `"(min-width: 1200px)"`.
162
- *
163
- * @example
164
- * ```html
165
- * <kendo-grid>
166
- * <kendo-grid-column field="UnitPrice" media="md">
167
- * </kendo-grid-column>
168
- * </kendo-grid>
169
- * ```
170
115
  */
171
116
  media: string;
172
117
  /**
173
118
  * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
119
+ * @default true
174
120
  */
175
121
  lockable: boolean;
176
122
  /**
177
123
  * Specifies if the column can be stuck or unstuck from the column menu.
124
+ * @default true
178
125
  */
179
126
  stickable: boolean;
180
127
  /**
181
128
  * Specifies if the column menu will be shown for the column.
129
+ * @default true
182
130
  */
183
131
  columnMenu: boolean;
184
132
  /**
185
133
  * Specifies if the column will be included in the column-chooser list.
134
+ * @default true
186
135
  */
187
136
  includeInChooser: boolean;
188
137
  /**
189
138
  * Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
190
139
  * to apply the property, the `style` option uses the
191
- * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
192
- *
193
- * @example
194
- * ```ts
195
- * _@Component({
196
- * selector: 'my-app',
197
- * template: `
198
- * <kendo-grid [data]="gridData" style="height: 200px">
199
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [style]="{'text-align': 'right'}">
200
- * </kendo-grid-column>
201
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
202
- * </kendo-grid-column>
203
- * </kendo-grid>
204
- * `
205
- * })
206
- *
207
- * class AppComponent {
208
- * public gridData: any[];
209
- *
210
- * constructor() {
211
- * this.gridData = [{
212
- * "ProductID": 1,
213
- * "ProductName": "Chai",
214
- * "UnitPrice": 18.0000,
215
- * "Discontinued": true
216
- * }, {
217
- * "ProductID": 2,
218
- * "ProductName": "Chang",
219
- * "UnitPrice": 19.0000,
220
- * "Discontinued": false
221
- * }];
222
- * }
223
- * }
140
+ * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
224
141
  *
225
- * ```
226
142
  */
227
143
  style: {
228
144
  [key: string]: string;
@@ -230,41 +146,8 @@ export declare class ColumnBase {
230
146
  /**
231
147
  * Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
232
148
  * the `headerStyle` option uses the
233
- * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
149
+ * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
234
150
  *
235
- * @example
236
- * ```ts
237
- * _@Component({
238
- * selector: 'my-app',
239
- * template: `
240
- * <kendo-grid [data]="gridData" style="height: 200px">
241
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [headerStyle]="{'text-align': 'right'}">
242
- * </kendo-grid-column>
243
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
244
- * </kendo-grid-column>
245
- * </kendo-grid>
246
- * `
247
- * })
248
- *
249
- * class AppComponent {
250
- * public gridData: any[];
251
- *
252
- * constructor() {
253
- * this.gridData = [{
254
- * "ProductID": 1,
255
- * "ProductName": "Chai",
256
- * "UnitPrice": 18.0000,
257
- * "Discontinued": true
258
- * }, {
259
- * "ProductID": 2,
260
- * "ProductName": "Chang",
261
- * "UnitPrice": 19.0000,
262
- * "Discontinued": false
263
- * }];
264
- * }
265
- * }
266
- *
267
- * ```
268
151
  */
269
152
  headerStyle: {
270
153
  [key: string]: string;
@@ -272,41 +155,8 @@ export declare class ColumnBase {
272
155
  /**
273
156
  * Sets the custom styles for the filter row cell. Under the hood, to apply the property,
274
157
  * the `filterStyle` option uses the
275
- * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
276
- *
277
- * @example
278
- * ```ts
279
- * _@Component({
280
- * selector: 'my-app',
281
- * template: `
282
- * <kendo-grid [data]="gridData" style="height: 180px" [filterable]="true">
283
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [filterStyle]="{'padding': '25px'}">
284
- * </kendo-grid-column>
285
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="200">
286
- * </kendo-grid-column>
287
- * </kendo-grid>
288
- * `
289
- * })
290
- *
291
- * export class AppComponent {
292
- * public gridData: any[];
158
+ * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
293
159
  *
294
- * constructor() {
295
- * this.gridData = [{
296
- * "ProductID": 1,
297
- * "ProductName": "Chai",
298
- * "UnitPrice": 18.0000,
299
- * "Discontinued": true
300
- * }, {
301
- * "ProductID": 2,
302
- * "ProductName": "Chang",
303
- * "UnitPrice": 19.0000,
304
- * "Discontinued": false
305
- * }];
306
- * }
307
- * }
308
- *
309
- * ```
310
160
  */
311
161
  filterStyle: {
312
162
  [key: string]: string;
@@ -314,95 +164,18 @@ export declare class ColumnBase {
314
164
  /**
315
165
  * Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
316
166
  * the `footerStyle` option uses the
317
- * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
318
- *
319
- * @example
320
- * ```ts
321
- * _@Component({
322
- * selector: 'my-app',
323
- * template: `
324
- * <kendo-grid [data]="gridData" style="height: 200px">
325
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [footerStyle]="{'text-align': 'right'}">
326
- * <ng-template kendoGridFooterTemplate>
327
- * footer text
328
- * </ng-template>
329
- * </kendo-grid-column>
330
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
331
- * </kendo-grid-column>
332
- * </kendo-grid>
333
- * `
334
- * })
335
- *
336
- * class AppComponent {
337
- * public gridData: any[];
167
+ * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
338
168
  *
339
- * constructor() {
340
- * this.gridData = [{
341
- * "ProductID": 1,
342
- * "ProductName": "Chai",
343
- * "UnitPrice": 18.0000,
344
- * "Discontinued": true
345
- * }, {
346
- * "ProductID": 2,
347
- * "ProductName": "Chang",
348
- * "UnitPrice": 19.0000,
349
- * "Discontinued": false
350
- * }];
351
- * }
352
- * }
353
- *
354
- * ```
355
169
  */
356
170
  footerStyle: {
357
171
  [key: string]: string;
358
172
  };
359
173
  /**
360
174
  * Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the `class` option uses the
361
- * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
175
+ * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
362
176
  * To customize header and footer column cells, use the [headerClass]({% slug api_grid_columncomponent %}#toc-headerclass)
363
177
  * and [footerClass]({% slug api_grid_columncomponent %}#toc-footerclass) inputs.
364
178
  *
365
- * @example
366
- * ```ts
367
- * import { Component, ViewEncapsulation } from '@angular/core';
368
- *
369
- * _@Component({
370
- * selector: 'my-app',
371
- * encapsulation: ViewEncapsulation.None,
372
- * styles: [`
373
- * tr .myClass {
374
- * text-align: right
375
- * }
376
- * `],
377
- * template: `
378
- * <kendo-grid [data]="gridData" style="height: 200px">
379
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [class]="{'myClass': true}">
380
- * </kendo-grid-column>
381
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
382
- * </kendo-grid-column>
383
- * </kendo-grid>
384
- * `
385
- * })
386
- *
387
- * class AppComponent {
388
- * public gridData: any[];
389
- *
390
- * constructor() {
391
- * this.gridData = [{
392
- * "ProductID": 1,
393
- * "ProductName": "Chai",
394
- * "UnitPrice": 18.0000,
395
- * "Discontinued": true
396
- * }, {
397
- * "ProductID": 2,
398
- * "ProductName": "Chang",
399
- * "UnitPrice": 19.0000,
400
- * "Discontinued": false
401
- * }];
402
- * }
403
- * }
404
- *
405
- * ```
406
179
  */
407
180
  cssClass: string | string[] | Set<string> | {
408
181
  [key: string]: any;
@@ -410,49 +183,8 @@ export declare class ColumnBase {
410
183
  /**
411
184
  * Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
412
185
  * the `headerClass` option uses the
413
- * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
414
- *
415
- * @example
416
- * ```ts
417
- * import { Component, ViewEncapsulation } from '@angular/core';
418
- *
419
- * _@Component({
420
- * selector: 'my-app',
421
- * encapsulation: ViewEncapsulation.None,
422
- * styles: [`
423
- * tr .myClass {
424
- * text-align: right
425
- * }
426
- * `],
427
- * template: `
428
- * <kendo-grid [data]="gridData" style="height: 200px">
429
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [headerClass]="{'myClass': true}">
430
- * </kendo-grid-column>
431
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
432
- * </kendo-grid-column>
433
- * </kendo-grid>
434
- * `
435
- * })
186
+ * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
436
187
  *
437
- * class AppComponent {
438
- * public gridData: any[];
439
- *
440
- * constructor() {
441
- * this.gridData = [{
442
- * "ProductID": 1,
443
- * "ProductName": "Chai",
444
- * "UnitPrice": 18.0000,
445
- * "Discontinued": true
446
- * }, {
447
- * "ProductID": 2,
448
- * "ProductName": "Chang",
449
- * "UnitPrice": 19.0000,
450
- * "Discontinued": false
451
- * }];
452
- * }
453
- * }
454
- *
455
- * ```
456
188
  */
457
189
  headerClass: string | string[] | Set<string> | {
458
190
  [key: string]: any;
@@ -460,47 +192,8 @@ export declare class ColumnBase {
460
192
  /**
461
193
  * Sets the custom CSS classes to the filter row cell. Under the hood, to apply the property,
462
194
  * the `filterClass` option uses the
463
- * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
464
- *
465
- * @example
466
- * ```ts
467
- * import { Component, ViewEncapsulation } from '@angular/core';
468
- *
469
- * _@Component({
470
- * selector: 'my-app',
471
- * encapsulation: ViewEncapsulation.None,
472
- * styles: [`
473
- * .k-grid-header .myClass { background-color: #ffff00; }
474
- * `],
475
- * template: `
476
- * <kendo-grid [data]="gridData" style="height: 155px" [filterable]="true">
477
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [filterClass]="{'myClass': true}">
478
- * </kendo-grid-column>
479
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="200">
480
- * </kendo-grid-column>
481
- * </kendo-grid>
482
- * `
483
- * })
484
- *
485
- * export class AppComponent {
486
- * public gridData: any[];
195
+ * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
487
196
  *
488
- * constructor() {
489
- * this.gridData = [{
490
- * "ProductID": 1,
491
- * "ProductName": "Chai",
492
- * "UnitPrice": 18.0000,
493
- * "Discontinued": true
494
- * }, {
495
- * "ProductID": 2,
496
- * "ProductName": "Chang",
497
- * "UnitPrice": 19.0000,
498
- * "Discontinued": false
499
- * }];
500
- * }
501
- * }
502
- *
503
- * ```
504
197
  */
505
198
  filterClass: string | string[] | Set<string> | {
506
199
  [key: string]: any;
@@ -508,52 +201,8 @@ export declare class ColumnBase {
508
201
  /**
509
202
  * Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
510
203
  * the `footerClass` option uses the
511
- * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
512
- *
513
- * @example
514
- * ```ts
515
- * import { Component, ViewEncapsulation } from '@angular/core';
516
- *
517
- * _@Component({
518
- * selector: 'my-app',
519
- * encapsulation: ViewEncapsulation.None,
520
- * styles: [`
521
- * tr .myClass {
522
- * text-align: right
523
- * }
524
- * `],
525
- * template: `
526
- * <kendo-grid [data]="gridData" style="height: 200px">
527
- * <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [footerClass]="{'myClass': true}">
528
- * <ng-template kendoGridFooterTemplate>
529
- * footer text
530
- * </ng-template>
531
- * </kendo-grid-column>
532
- * <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
533
- * </kendo-grid-column>
534
- * </kendo-grid>
535
- * `
536
- * })
537
- *
538
- * class AppComponent {
539
- * public gridData: any[];
540
- *
541
- * constructor() {
542
- * this.gridData = [{
543
- * "ProductID": 1,
544
- * "ProductName": "Chai",
545
- * "UnitPrice": 18.0000,
546
- * "Discontinued": true
547
- * }, {
548
- * "ProductID": 2,
549
- * "ProductName": "Chang",
550
- * "UnitPrice": 19.0000,
551
- * "Discontinued": false
552
- * }];
553
- * }
554
- * }
204
+ * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
555
205
  *
556
- * ```
557
206
  */
558
207
  footerClass: string | string[] | Set<string> | {
559
208
  [key: string]: any;
@@ -0,0 +1,31 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { ColumnBase } from './column-base';
6
+ import { IdService } from '../common/id.service';
7
+ import { SVGIcon } from '@progress/kendo-svg-icons';
8
+ import * as i0 from "@angular/core";
9
+ /**
10
+ * Represents the drag handle for reordering rows in the Grid.
11
+ */
12
+ export declare class RowReorderColumnComponent extends ColumnBase {
13
+ parent?: ColumnBase;
14
+ /**
15
+ * Defines the name for an existing font icon in the Kendo UI theme.
16
+ * @hidden
17
+ */
18
+ dragHandleIcon: string;
19
+ /**
20
+ * Defines an SVGIcon to be rendered as a drag handle.
21
+ * @hidden
22
+ */
23
+ dragHandleSVGIcon: SVGIcon;
24
+ /**
25
+ * @hidden
26
+ */
27
+ readonly isRowReorderColumn: boolean;
28
+ constructor(parent?: ColumnBase, idService?: IdService);
29
+ static ɵfac: i0.ɵɵFactoryDeclaration<RowReorderColumnComponent, [{ optional: true; host: true; skipSelf: true; }, { optional: true; }]>;
30
+ static ɵcmp: i0.ɵɵComponentDeclaration<RowReorderColumnComponent, "kendo-grid-rowreorder-column", never, { "dragHandleIcon": "dragHandleIcon"; "dragHandleSVGIcon": "dragHandleSVGIcon"; }, {}, never, never>;
31
+ }