@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.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.
Files changed (172) hide show
  1. package/dist/cjs/autocomplete/tests/autocomplete-prefix-suffix.js +1096 -888
  2. package/dist/cjs/column-menu/column-menu-expander.spec.js +5933 -0
  3. package/dist/cjs/column-menu/column-menu-item-content.js +47 -0
  4. package/dist/cjs/column-menu/column-menu-item-wrapper.js +46 -0
  5. package/dist/cjs/column-menu/column-menu-item.spec.js +4396 -0
  6. package/dist/cjs/column-menu/column-menu-multicheck-item.js +261 -0
  7. package/dist/cjs/column-menu/column-menu-multicheck-wrap.js +46 -0
  8. package/dist/cjs/column-menu/column-menu.spec.js +67 -0
  9. package/dist/cjs/column-menu/filter-menu.spec.js +61 -0
  10. package/dist/cjs/column-menu/templates/column-menu-normal.js +5957 -0
  11. package/dist/cjs/column-menu/templates/column-menu-tabbed.js +5947 -0
  12. package/dist/cjs/column-menu/templates/filter-menu-multi-check.js +5984 -0
  13. package/dist/cjs/column-menu/templates/filter-menu-normal.js +5947 -0
  14. package/dist/cjs/column-menu/tests/column-menu-rtl.js +6038 -0
  15. package/dist/cjs/column-menu/tests/column-menu-tabbed.js +6026 -0
  16. package/dist/cjs/column-menu/tests/column-menu.js +6038 -0
  17. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +1096 -888
  18. package/dist/cjs/filemanager/tests/filemanager-gridview-preview.js +957 -749
  19. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +911 -703
  20. package/dist/cjs/form/tests/form-field-dropdowns.js +1095 -887
  21. package/dist/cjs/grid/tests/grid-column-menu-rtl.js +707 -603
  22. package/dist/cjs/grid/tests/grid-column-menu-tabbed.js +841 -655
  23. package/dist/cjs/grid/tests/grid-column-menu.js +706 -602
  24. package/dist/cjs/grid/tests/grid-column-reordering-actions.js +302 -122
  25. package/dist/cjs/grid/tests/grid-column-reordering.js +308 -128
  26. package/dist/cjs/grid/tests/grid-column-resizing-actions.js +290 -107
  27. package/dist/cjs/grid/tests/grid-editing-custom-editor.js +1168 -960
  28. package/dist/cjs/grid/tests/grid-grouping-actions.js +272 -59
  29. package/dist/cjs/index.js +2539 -2199
  30. package/dist/cjs/multiselect/templates/multiselect-prefix.js +1071 -863
  31. package/dist/cjs/multiselect/templates/multiselect-suffix.js +1071 -863
  32. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +1077 -869
  33. package/dist/cjs/multiselect/tests/multiselect-flat.js +1101 -893
  34. package/dist/cjs/multiselect/tests/multiselect-grouping.js +1077 -869
  35. package/dist/cjs/multiselect/tests/multiselect-opened.js +1079 -871
  36. package/dist/cjs/multiselect/tests/multiselect-outline.js +1101 -893
  37. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +1108 -900
  38. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +1080 -872
  39. package/dist/cjs/multiselect/tests/multiselect-solid.js +1101 -893
  40. package/dist/cjs/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  41. package/dist/cjs/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  42. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +1110 -902
  43. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +1124 -916
  44. package/dist/cjs/taskboard/taskboard-pane.js +1078 -870
  45. package/dist/cjs/taskboard/taskboard.spec.js +993 -785
  46. package/dist/cjs/taskboard/templates/taskboard-normal.js +1027 -819
  47. package/dist/cjs/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  48. package/dist/cjs/taskboard/tests/taskboard-card.js +1099 -891
  49. package/dist/cjs/taskboard/tests/taskboard-column.js +1114 -906
  50. package/dist/cjs/taskboard/tests/taskboard-pane.js +1035 -827
  51. package/dist/cjs/taskboard/tests/taskboard-resources.js +1081 -873
  52. package/dist/cjs/taskboard/tests/taskboard-rtl.js +1033 -825
  53. package/dist/cjs/taskboard/tests/taskboard.js +1033 -825
  54. package/dist/cjs/treelist/tests/treelist-aggregate-react.js +4277 -73
  55. package/dist/cjs/treelist/tests/treelist-aggregates.js +4519 -216
  56. package/dist/cjs/treelist/tests/treelist-react.js +2518 -98
  57. package/dist/cjs/treelist/tests/treelist-row-reordering.js +4371 -59
  58. package/dist/cjs/treelist/tests/treelist.js +4409 -112
  59. package/dist/cjs/treelist/treelist.spec.js +8415 -0
  60. package/dist/esm/autocomplete/tests/autocomplete-prefix-suffix.js +1011 -803
  61. package/dist/esm/column-menu/column-menu-expander.spec.js +5917 -0
  62. package/dist/esm/column-menu/column-menu-item-content.js +25 -0
  63. package/dist/esm/column-menu/column-menu-item-wrapper.js +24 -0
  64. package/dist/esm/column-menu/column-menu-item.spec.js +4380 -0
  65. package/dist/esm/column-menu/column-menu-multicheck-item.js +239 -0
  66. package/dist/esm/column-menu/column-menu-multicheck-wrap.js +24 -0
  67. package/dist/esm/column-menu/column-menu.spec.js +45 -0
  68. package/dist/esm/column-menu/filter-menu.spec.js +39 -0
  69. package/dist/esm/column-menu/templates/column-menu-normal.js +5941 -0
  70. package/dist/esm/column-menu/templates/column-menu-tabbed.js +5931 -0
  71. package/dist/esm/column-menu/templates/filter-menu-multi-check.js +5968 -0
  72. package/dist/esm/column-menu/templates/filter-menu-normal.js +5931 -0
  73. package/dist/esm/column-menu/tests/column-menu-rtl.js +6022 -0
  74. package/dist/esm/column-menu/tests/column-menu-tabbed.js +6010 -0
  75. package/dist/esm/column-menu/tests/column-menu.js +6022 -0
  76. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +1011 -803
  77. package/dist/esm/filemanager/tests/filemanager-gridview-preview.js +949 -741
  78. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +903 -695
  79. package/dist/esm/form/tests/form-field-dropdowns.js +1010 -802
  80. package/dist/esm/grid/tests/grid-column-menu-rtl.js +707 -603
  81. package/dist/esm/grid/tests/grid-column-menu-tabbed.js +852 -666
  82. package/dist/esm/grid/tests/grid-column-menu.js +706 -602
  83. package/dist/esm/grid/tests/grid-column-reordering-actions.js +302 -122
  84. package/dist/esm/grid/tests/grid-column-reordering.js +308 -128
  85. package/dist/esm/grid/tests/grid-column-resizing-actions.js +290 -107
  86. package/dist/esm/grid/tests/grid-editing-custom-editor.js +1083 -875
  87. package/dist/esm/grid/tests/grid-grouping-actions.js +272 -59
  88. package/dist/esm/index.js +2495 -2155
  89. package/dist/esm/multiselect/templates/multiselect-prefix.js +986 -778
  90. package/dist/esm/multiselect/templates/multiselect-suffix.js +986 -778
  91. package/dist/esm/multiselect/tests/multiselect-adaptive.js +992 -784
  92. package/dist/esm/multiselect/tests/multiselect-flat.js +1016 -808
  93. package/dist/esm/multiselect/tests/multiselect-grouping.js +992 -784
  94. package/dist/esm/multiselect/tests/multiselect-opened.js +994 -786
  95. package/dist/esm/multiselect/tests/multiselect-outline.js +1016 -808
  96. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +1023 -815
  97. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +995 -787
  98. package/dist/esm/multiselect/tests/multiselect-solid.js +1016 -808
  99. package/dist/esm/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  100. package/dist/esm/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  101. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +1025 -817
  102. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +1039 -831
  103. package/dist/esm/taskboard/taskboard-pane.js +985 -777
  104. package/dist/esm/taskboard/taskboard.spec.js +981 -773
  105. package/dist/esm/taskboard/templates/taskboard-normal.js +1015 -807
  106. package/dist/esm/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  107. package/dist/esm/taskboard/tests/taskboard-card.js +1014 -806
  108. package/dist/esm/taskboard/tests/taskboard-column.js +1029 -821
  109. package/dist/esm/taskboard/tests/taskboard-pane.js +1023 -815
  110. package/dist/esm/taskboard/tests/taskboard-resources.js +996 -788
  111. package/dist/esm/taskboard/tests/taskboard-rtl.js +1021 -813
  112. package/dist/esm/taskboard/tests/taskboard.js +1021 -813
  113. package/dist/esm/treelist/tests/treelist-aggregate-react.js +4277 -73
  114. package/dist/esm/treelist/tests/treelist-aggregates.js +4520 -217
  115. package/dist/esm/treelist/tests/treelist-react.js +2518 -98
  116. package/dist/esm/treelist/tests/treelist-row-reordering.js +4371 -59
  117. package/dist/esm/treelist/tests/treelist.js +4410 -113
  118. package/dist/esm/treelist/treelist.spec.js +8399 -0
  119. package/dist/types/column-menu/column-menu-expander.spec.d.ts +17 -0
  120. package/dist/types/column-menu/column-menu-item-content.d.ts +1 -0
  121. package/dist/types/column-menu/column-menu-item-wrapper.d.ts +1 -0
  122. package/dist/types/column-menu/column-menu-item.spec.d.ts +17 -0
  123. package/dist/types/column-menu/column-menu-multicheck-item.d.ts +4 -0
  124. package/dist/types/column-menu/column-menu-multicheck-wrap.d.ts +1 -0
  125. package/dist/types/column-menu/column-menu.spec.d.ts +14 -0
  126. package/dist/types/column-menu/filter-menu.spec.d.ts +9 -0
  127. package/dist/types/column-menu/index.d.ts +12 -0
  128. package/dist/types/column-menu/templates/column-menu-normal.d.ts +1 -0
  129. package/dist/types/column-menu/templates/column-menu-tabbed.d.ts +1 -0
  130. package/dist/types/column-menu/templates/filter-menu-multi-check.d.ts +1 -0
  131. package/dist/types/column-menu/templates/filter-menu-normal.d.ts +1 -0
  132. package/dist/types/column-menu/tests/column-menu-rtl.d.ts +2 -0
  133. package/dist/types/column-menu/tests/column-menu-tabbed.d.ts +2 -0
  134. package/dist/types/column-menu/tests/column-menu.d.ts +2 -0
  135. package/dist/types/index.d.ts +2 -0
  136. package/dist/types/treelist/index.d.ts +1 -0
  137. package/dist/types/treelist/treelist.spec.d.ts +9 -0
  138. package/package.json +2 -2
  139. package/src/column-menu/column-menu-expander.spec.tsx +66 -0
  140. package/src/column-menu/column-menu-item-content.tsx +18 -0
  141. package/src/column-menu/column-menu-item-wrapper.tsx +17 -0
  142. package/src/column-menu/column-menu-item.spec.tsx +56 -0
  143. package/src/column-menu/column-menu-multicheck-item.tsx +32 -0
  144. package/src/column-menu/column-menu-multicheck-wrap.tsx +17 -0
  145. package/src/column-menu/column-menu.spec.tsx +46 -0
  146. package/src/column-menu/filter-menu.spec.tsx +38 -0
  147. package/src/column-menu/index.ts +12 -0
  148. package/src/column-menu/templates/column-menu-normal.tsx +23 -0
  149. package/src/column-menu/templates/column-menu-tabbed.tsx +36 -0
  150. package/src/column-menu/templates/filter-menu-multi-check.tsx +26 -0
  151. package/src/column-menu/templates/filter-menu-normal.tsx +23 -0
  152. package/src/column-menu/tests/column-menu-rtl.tsx +119 -0
  153. package/src/column-menu/tests/column-menu-tabbed.tsx +113 -0
  154. package/src/column-menu/tests/column-menu.tsx +119 -0
  155. package/src/grid/tests/grid-column-menu-rtl.tsx +194 -367
  156. package/src/grid/tests/grid-column-menu-tabbed.tsx +147 -260
  157. package/src/grid/tests/grid-column-menu.tsx +194 -366
  158. package/src/grid/tests/grid-column-reordering-actions.tsx +48 -77
  159. package/src/grid/tests/grid-column-reordering.tsx +60 -86
  160. package/src/grid/tests/grid-column-resizing-actions.tsx +25 -64
  161. package/src/grid/tests/grid-grouping-actions.tsx +15 -11
  162. package/src/index.ts +2 -1
  163. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +141 -232
  164. package/src/pivotgrid/tests/pivotgrid-settings-panel-reordering.tsx +17 -34
  165. package/src/taskboard/tests/taskboard-card-column-menu.tsx +12 -22
  166. package/src/treelist/index.ts +1 -0
  167. package/src/treelist/tests/treelist-aggregate-react.tsx +73 -71
  168. package/src/treelist/tests/treelist-aggregates.tsx +219 -242
  169. package/src/treelist/tests/treelist-react.tsx +98 -95
  170. package/src/treelist/tests/treelist-row-reordering.tsx +95 -74
  171. package/src/treelist/tests/treelist.tsx +110 -139
  172. package/src/treelist/treelist.spec.tsx +32 -0
package/src/treelist/tests/treelist-react.tsx CHANGED
@@ -4,6 +4,9 @@ import { DropdownList } from '../../dropdownlist';
4
4
  import { DatePicker } from '../../datepicker';
5
5
  import { NumericTextbox } from '../../numerictextbox';
6
6
  import { Textbox } from '../../textbox';
7
+ import { TreeList } from '../../treelist';
8
+ import { GridTable } from '../../grid';
9
+ import { TableThead, TableTbody, TableRow, TableTd, TableTh } from '../../table';
7
10
 
8
11
 
9
12
  export default () =>(
@@ -11,8 +14,8 @@ export default () =>(
11
14
  <div id="test-area" className="k-d-grid">
12
15
  <section>
13
16
  <span>React Treelist</span>
14
- <div className="k-grid k-grid-md k-treelist-scrollable">
15
- <table className="k-table k-table-md k-grid-table">
17
+ <TreeList className="k-treelist-scrollable">
18
+ <GridTable>
16
19
  <colgroup>
17
20
  <col style={{ width: "200px" }} />
18
21
  <col style={{ width: "300px" }} />
@@ -20,27 +23,27 @@ export default () =>(
20
23
  <col style={{ width: "400px" }} />
21
24
  <col style={{ width: "100px" }} />
22
25
  </colgroup>
23
- <thead className="k-table-thead k-grid-header">
24
- <tr className="k-table-row">
25
- <th className="k-table-th k-header">
26
+ <TableThead className="k-grid-header">
27
+ <TableRow>
28
+ <TableTh className="k-header">
26
29
  <a className="k-link">id</a>
27
- </th>
28
- <th className="k-table-th k-header">
30
+ </TableTh>
31
+ <TableTh className="k-header">
29
32
  <a className="k-link">text</a>
30
- </th>
31
- <th className="k-table-th k-header">
33
+ </TableTh>
34
+ <TableTh className="k-header">
32
35
  <a className="k-link">price</a>
33
- </th>
34
- <th className="k-table-th k-header">
36
+ </TableTh>
37
+ <TableTh className="k-header">
35
38
  <a className="k-link">manufactured</a>
36
- </th>
37
- <th className="k-table-th k-header">
39
+ </TableTh>
40
+ <TableTh className="k-header">
38
41
  <a className="k-link">discontinued</a>
39
- </th>
40
- </tr>
41
- <tr className="k-table-row k-filter-row">
42
- <th className="k-table-th"></th>
43
- <th className="k-table-th">
42
+ </TableTh>
43
+ </TableRow>
44
+ <TableRow className="k-filter-row">
45
+ <TableTh></TableTh>
46
+ <TableTh>
44
47
  <div className="k-filtercell">
45
48
  <span>
46
49
  <Textbox />
@@ -48,8 +51,8 @@ export default () =>(
48
51
  <Button icon="filter-clear" disabled></Button>
49
52
  </span>
50
53
  </div>
51
- </th>
52
- <th className="k-table-th">
54
+ </TableTh>
55
+ <TableTh>
53
56
  <div className="k-filtercell">
54
57
  <span>
55
58
  <NumericTextbox />
@@ -57,8 +60,8 @@ export default () =>(
57
60
  <Button icon="filter-clear" disabled></Button>
58
61
  </span>
59
62
  </div>
60
- </th>
61
- <th className="k-table-th">
63
+ </TableTh>
64
+ <TableTh>
62
65
  <div className="k-filtercell">
63
66
  <span>
64
67
  <DatePicker />
@@ -66,108 +69,108 @@ export default () =>(
66
69
  <Button icon="filter-clear" disabled></Button>
67
70
  </span>
68
71
  </div>
69
- </th>
70
- <th className="k-table-th">
72
+ </TableTh>
73
+ <TableTh>
71
74
  <div className="k-filtercell">
72
75
  <span>
73
76
  <DropdownList className="k-dropdown-operator" arrowIconName="filter" />
74
77
  <Button icon="filter-clear" disabled></Button>
75
78
  </span>
76
79
  </div>
77
- </th>
78
- </tr>
79
- </thead>
80
- <tbody className="k-table-tbody">
81
- <tr className="k-table-row k-master-row">
82
- <td className="k-table-td">
80
+ </TableTh>
81
+ </TableRow>
82
+ </TableThead>
83
+ <TableTbody>
84
+ <TableRow className="k-master-row">
85
+ <TableTd>
83
86
  <Icon className="k-treelist-toggle" icon="caret-alt-down" />
84
87
  1
85
- </td>
86
- <td className="k-table-td">Furniture</td>
87
- <td className="k-table-td">4</td>
88
- <td className="k-table-td">8/12/1996</td>
89
- <td className="k-table-td">false</td>
90
- </tr>
91
- <tr className="k-table-row k-master-row">
92
- <td className="k-table-td">
88
+ </TableTd>
89
+ <TableTd>Furniture</TableTd>
90
+ <TableTd>4</TableTd>
91
+ <TableTd>8/12/1996</TableTd>
92
+ <TableTd>false</TableTd>
93
+ </TableRow>
94
+ <TableRow className="k-master-row">
95
+ <TableTd>
93
96
  <Icon className="k-treelist-toggle" icon="none"></Icon>
94
97
  <Icon className="k-treelist-toggle" icon="none"></Icon>
95
98
  1.1
96
- </td>
97
- <td className="k-table-td">Tables &amp; Chairs</td>
98
- <td className="k-table-td">123</td>
99
- <td className="k-table-td">8/12/1996</td>
100
- <td className="k-table-td">false</td>
101
- </tr>
102
- <tr className="k-table-row k-master-row">
103
- <td className="k-table-td">
99
+ </TableTd>
100
+ <TableTd>Tables &amp; Chairs</TableTd>
101
+ <TableTd>123</TableTd>
102
+ <TableTd>8/12/1996</TableTd>
103
+ <TableTd>false</TableTd>
104
+ </TableRow>
105
+ <TableRow className="k-master-row">
106
+ <TableTd>
104
107
  <Icon className="k-treelist-toggle" icon="none"></Icon>
105
108
  <Icon className="k-treelist-toggle" icon="none"></Icon>
106
109
  1.2
107
- </td>
108
- <td className="k-table-td">Sofas</td>
109
- <td className="k-table-td">213</td>
110
- <td className="k-table-td">8/12/1996</td>
111
- <td className="k-table-td">true</td>
112
- </tr>
113
- <tr className="k-table-row k-master-row">
114
- <td className="k-table-td">
110
+ </TableTd>
111
+ <TableTd>Sofas</TableTd>
112
+ <TableTd>213</TableTd>
113
+ <TableTd>8/12/1996</TableTd>
114
+ <TableTd>true</TableTd>
115
+ </TableRow>
116
+ <TableRow className="k-master-row">
117
+ <TableTd>
115
118
  <Icon className="k-treelist-toggle" icon="none"></Icon>
116
119
  <Icon className="k-treelist-toggle" icon="none"></Icon>
117
120
  1.3
118
- </td>
119
- <td className="k-table-td">Occasional Furniture</td>
120
- <td className="k-table-td">42</td>
121
- <td className="k-table-td">8/12/1996</td>
122
- <td className="k-table-td">false</td>
123
- </tr>
124
- <tr className="k-table-row k-master-row">
125
- <td className="k-table-td">
121
+ </TableTd>
122
+ <TableTd>Occasional Furniture</TableTd>
123
+ <TableTd>42</TableTd>
124
+ <TableTd>8/12/1996</TableTd>
125
+ <TableTd>false</TableTd>
126
+ </TableRow>
127
+ <TableRow className="k-master-row">
128
+ <TableTd>
126
129
  <Icon className="k-treelist-toggle" icon="caret-alt-down" />
127
130
  2
128
- </td>
129
- <td className="k-table-td">Decor</td>
130
- <td className="k-table-td">2</td>
131
- <td className="k-table-td">8/12/1996</td>
132
- <td className="k-table-td">false</td>
133
- </tr>
134
- <tr className="k-table-row k-master-row">
135
- <td className="k-table-td">
131
+ </TableTd>
132
+ <TableTd>Decor</TableTd>
133
+ <TableTd>2</TableTd>
134
+ <TableTd>8/12/1996</TableTd>
135
+ <TableTd>false</TableTd>
136
+ </TableRow>
137
+ <TableRow className="k-master-row">
138
+ <TableTd>
136
139
  <Icon className="k-treelist-toggle" icon="none"></Icon>
137
140
  <Icon className="k-treelist-toggle" icon="none"></Icon>
138
141
  2.1
139
- </td>
140
- <td className="k-table-td">Bed Linen</td>
141
- <td className="k-table-td">12</td>
142
- <td className="k-table-td">8/12/1996</td>
143
- <td className="k-table-td">false</td>
144
- </tr>
145
- <tr className="k-table-row k-master-row">
146
- <td className="k-table-td">
142
+ </TableTd>
143
+ <TableTd>Bed Linen</TableTd>
144
+ <TableTd>12</TableTd>
145
+ <TableTd>8/12/1996</TableTd>
146
+ <TableTd>false</TableTd>
147
+ </TableRow>
148
+ <TableRow className="k-master-row">
149
+ <TableTd>
147
150
  <Icon className="k-treelist-toggle" icon="none"></Icon>
148
151
  <Icon className="k-treelist-toggle" icon="caret-alt-down" />
149
152
  2.2
150
- </td>
151
- <td className="k-table-td">Curtains &amp; Blinds</td>
152
- <td className="k-table-td">1</td>
153
- <td className="k-table-td">8/12/1996</td>
154
- <td className="k-table-td">true</td>
155
- </tr>
156
- <tr className="k-table-row k-master-row">
157
- <td className="k-table-td">
153
+ </TableTd>
154
+ <TableTd>Curtains &amp; Blinds</TableTd>
155
+ <TableTd>1</TableTd>
156
+ <TableTd>8/12/1996</TableTd>
157
+ <TableTd>true</TableTd>
158
+ </TableRow>
159
+ <TableRow className="k-master-row">
160
+ <TableTd>
158
161
  <Icon className="k-treelist-toggle" icon="none"></Icon>
159
162
  <Icon className="k-treelist-toggle" icon="none"></Icon>
160
163
  <Icon className="k-treelist-toggle" icon="none"></Icon>
161
164
  2.2.1
162
- </td>
163
- <td className="k-table-td">Carpets</td>
164
- <td className="k-table-td">54</td>
165
- <td className="k-table-td">8/12/1996</td>
166
- <td className="k-table-td">true</td>
167
- </tr>
168
- </tbody>
169
- </table>
170
- </div>
165
+ </TableTd>
166
+ <TableTd>Carpets</TableTd>
167
+ <TableTd>54</TableTd>
168
+ <TableTd>8/12/1996</TableTd>
169
+ <TableTd>true</TableTd>
170
+ </TableRow>
171
+ </TableTbody>
172
+ </GridTable>
173
+ </TreeList>
171
174
  </section>
172
175
  </div>
173
176
  </>
package/src/treelist/tests/treelist-row-reordering.tsx CHANGED
@@ -1,89 +1,110 @@
1
1
  import { Icon } from '../../icon';
2
+ import { TreeList } from '../../treelist';
3
+ import { GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
4
+ import { TableThead, TableTbody, TableRow, TableTd } from '../../table';
2
5
 
3
6
  export default () => (
4
7
  <>
5
8
  <div id="test-area">
6
- <div id="treelist" className="k-treelist k-grid k-grid-md k-grid-no-scrollbar">
7
- <div className="k-grid-header" style={{ paddingRight: '0px' }}>
9
+ <TreeList id="treelist" className="k-grid-no-scrollbar">
10
+ <GridHeader style={{ paddingRight: '0px' }}>
8
11
  <div className="k-grid-header-wrap">
9
- <table className="k-table k-table-md k-grid-header-table">
12
+ <GridHeaderTable>
10
13
  <colgroup>
11
14
  <col className="k-drag-col"/>
12
15
  <col style={{ width: "250px" }}/>
13
16
  <col />
14
17
  </colgroup>
15
- <thead className="k-table-thead">
16
- <tr className="k-table-row">
17
- <th className="k-table-th k-header k-drag-cell"></th>
18
- <th className="k-table-th k-header">
19
- <span className="k-cell-inner">
20
- <span className="k-link">
21
- <span className="k-column-title">First Name</span>
22
- </span>
23
- </span>
24
- </th>
25
- <th className="k-table-th k-header">
26
- <span className="k-cell-inner">
27
- <span className="k-link">
28
- <span className="k-column-title">Last Name</span>
29
- </span>
30
- </span>
31
- </th>
32
- <th className="k-table-th k-header">
33
- <span className="k-cell-inner">
34
- <span className="k-link">
35
- <span className="k-column-title">Position</span>
36
- </span>
37
- </span>
38
- </th>
39
- </tr>
40
- </thead>
41
- </table>
18
+ <TableThead>
19
+ <TableRow>
20
+ <GridHeaderCell className="k-drag-cell"></GridHeaderCell>
21
+ <GridHeaderCell columnTitle="First Name"></GridHeaderCell>
22
+ <GridHeaderCell columnTitle="Last Name"></GridHeaderCell>
23
+ <GridHeaderCell columnTitle="Position"></GridHeaderCell>
24
+ </TableRow>
25
+ </TableThead>
26
+ </GridHeaderTable>
42
27
  </div>
43
- </div>
44
- <div className="k-grid-content k-auto-scrollable">
45
- <table className="k-table k-table-md k-grid-table">
46
- <colgroup>
47
- <col className="k-drag-col" />
48
- <col style={{ width: "250px" }}/>
49
- <col />
50
- </colgroup>
51
- <tbody className="k-table-tbody">
52
- <tr className="k-table-row">
53
- <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
54
- <td className="k-table-td"><Icon className="k-treelist-toggle" icon="caret-alt-right"/>Daryl</td>
55
- <td className="k-table-td">Sweeney</td>
56
- <td className="k-table-td">CEO</td>
57
- </tr>
58
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
59
- <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
60
- <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>Guy</td>
61
- <td className="k-table-td">Wooten</td>
62
- <td className="k-table-td">Chief Technical Officer</td>
63
- </tr>
64
- <tr className="k-table-row k-treelist-group">
65
- <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
66
- <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>Buffy</td>
67
- <td className="k-table-td">Weber</td>
68
- <td className="k-table-td">VP, Engineering</td>
69
- </tr>
70
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
71
- <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
72
- <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="caret-alt-down"></Icon>Hyacinth
73
- </td>
74
- <td className="k-table-td">Hood</td>
75
- <td className="k-table-td">Team Lead</td>
76
- </tr>
77
- <tr className="k-table-row">
78
- <td className="k-table-td k-drag-cell"><Icon icon="reorder"/></td>
79
- <td className="k-table-td"><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon><Icon className="k-treelist-toggle" icon="none"></Icon>Akeem</td>
80
- <td className="k-table-td">Carr</td>
81
- <td className="k-table-td">Junior Software Developer</td>
82
- </tr>
83
- </tbody>
84
- </table>
85
- </div>
86
- </div>
28
+ </GridHeader>
29
+ <GridContainer>
30
+ <GridContent className="k-auto-scrollable">
31
+ <GridTable>
32
+ <colgroup>
33
+ <col className="k-drag-col" />
34
+ <col style={{ width: "250px" }}/>
35
+ <col />
36
+ </colgroup>
37
+ <TableTbody>
38
+ <TableRow>
39
+ <TableTd className="k-drag-cell">
40
+ <Icon icon="reorder"/>
41
+ </TableTd>
42
+ <TableTd>
43
+ <Icon className="k-treelist-toggle" icon="caret-alt-right"/>
44
+ Daryl
45
+ </TableTd>
46
+ <TableTd>Sweeney</TableTd>
47
+ <TableTd>CEO</TableTd>
48
+ </TableRow>
49
+ <TableRow className="k-treelist-group k-alt" alt>
50
+ <TableTd className="k-drag-cell">
51
+ <Icon icon="reorder"/>
52
+ </TableTd>
53
+ <TableTd>
54
+ <Icon className="k-treelist-toggle" icon="none" />
55
+ <Icon className="k-treelist-toggle" icon="caret-alt-down" />
56
+ Guy
57
+ </TableTd>
58
+ <TableTd>Wooten</TableTd>
59
+ <TableTd>Chief Technical Officer</TableTd>
60
+ </TableRow>
61
+ <TableRow className="k-treelist-group">
62
+ <TableTd className="k-drag-cell">
63
+ <Icon icon="reorder"/>
64
+ </TableTd>
65
+ <TableTd>
66
+ <Icon className="k-treelist-toggle" icon="none" />
67
+ <Icon className="k-treelist-toggle" icon="none" />
68
+ <Icon className="k-treelist-toggle" icon="caret-alt-down" />
69
+ Buffy
70
+ </TableTd>
71
+ <TableTd>Weber</TableTd>
72
+ <TableTd>VP, Engineering</TableTd>
73
+ </TableRow>
74
+ <TableRow className="k-treelist-group k-alt" alt>
75
+ <TableTd className="k-drag-cell">
76
+ <Icon icon="reorder"/>
77
+ </TableTd>
78
+ <TableTd>
79
+ <Icon className="k-treelist-toggle" icon="none" />
80
+ <Icon className="k-treelist-toggle" icon="none" />
81
+ <Icon className="k-treelist-toggle" icon="none" />
82
+ <Icon className="k-treelist-toggle" icon="caret-alt-down" />
83
+ Hyacinth
84
+ </TableTd>
85
+ <TableTd>Hood</TableTd>
86
+ <TableTd>Team Lead</TableTd>
87
+ </TableRow>
88
+ <TableRow>
89
+ <TableTd className="k-drag-cell">
90
+ <Icon icon="reorder"/>
91
+ </TableTd>
92
+ <TableTd>
93
+ <Icon className="k-treelist-toggle" icon="none" />
94
+ <Icon className="k-treelist-toggle" icon="none" />
95
+ <Icon className="k-treelist-toggle" icon="none" />
96
+ <Icon className="k-treelist-toggle" icon="none" />
97
+ <Icon className="k-treelist-toggle" icon="none" />
98
+ Akeem
99
+ </TableTd>
100
+ <TableTd>Carr</TableTd>
101
+ <TableTd>Junior Software Developer</TableTd>
102
+ </TableRow>
103
+ </TableTbody>
104
+ </GridTable>
105
+ </GridContent>
106
+ </GridContainer>
107
+ </TreeList>
87
108
  </div>
88
109
  </>
89
110
  );