@progress/kendo-themes-html 7.2.1-dev.1 → 7.2.1-dev.3

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 (481) hide show
  1. package/dist/cjs/autocomplete/tests/autocomplete-prefix-suffix.js +64 -46
  2. package/dist/cjs/coloreditor/color-editor.spec.js +64 -46
  3. package/dist/cjs/coloreditor/templates/coloreditor-group.js +64 -46
  4. package/dist/cjs/coloreditor/templates/coloreditor-normal.js +64 -46
  5. package/dist/cjs/coloreditor/templates/coloreditor-palette-group.js +64 -46
  6. package/dist/cjs/coloreditor/templates/coloreditor-palette.js +64 -46
  7. package/dist/cjs/coloreditor/tests/coloreditor-focused-colorgradient.js +64 -46
  8. package/dist/cjs/coloreditor/tests/coloreditor-rtl.js +64 -46
  9. package/dist/cjs/coloreditor/tests/coloreditor-states.js +64 -46
  10. package/dist/cjs/coloreditor/tests/coloreditor.js +64 -46
  11. package/dist/cjs/colorgradient/color-gradient.spec.js +64 -46
  12. package/dist/cjs/colorgradient/templates/colorgradient-contrast.js +64 -46
  13. package/dist/cjs/colorgradient/templates/colorgradient-normal.js +64 -46
  14. package/dist/cjs/colorgradient/tests/colorgradient-contrast.js +64 -46
  15. package/dist/cjs/colorgradient/tests/colorgradient-draghandle.js +64 -46
  16. package/dist/cjs/colorgradient/tests/colorgradient-modes.js +64 -46
  17. package/dist/cjs/colorgradient/tests/colorgradient-rtl.js +64 -46
  18. package/dist/cjs/colorgradient/tests/colorgradient-states.js +64 -46
  19. package/dist/cjs/colorgradient/tests/colorgradient.js +64 -46
  20. package/dist/cjs/colorpicker/templates/colorpicker-popup-gradient.js +64 -46
  21. package/dist/cjs/colorpicker/templates/colorpicker-popup-palette.js +64 -46
  22. package/dist/cjs/colorpicker/tests/colorpicker-opened.js +64 -46
  23. package/dist/cjs/colorpicker/tests/colorpicker-size.js +64 -46
  24. package/dist/cjs/colorpicker/tests/colorpicker-states.js +64 -46
  25. package/dist/cjs/colorpicker/tests/colorpicker.js +64 -46
  26. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +64 -46
  27. package/dist/cjs/dock-manager/tests/dock-manager-unpinned-pane.js +64 -46
  28. package/dist/cjs/dock-manager/tests/dock-manager.js +64 -46
  29. package/dist/cjs/editor/editor-toolbar.js +64 -46
  30. package/dist/cjs/editor/templates/editor-normal.js +64 -46
  31. package/dist/cjs/editor/tests/editor-find-replace.js +64 -46
  32. package/dist/cjs/editor/tests/editor-states.js +64 -46
  33. package/dist/cjs/editor/tests/editor-table-wizard.js +64 -46
  34. package/dist/cjs/editor/tests/editor.js +64 -46
  35. package/dist/cjs/filemanager/file-info.js +64 -46
  36. package/dist/cjs/filemanager/filemanager-toolbar.spec.js +64 -46
  37. package/dist/cjs/filemanager/filemanager.spec.js +64 -46
  38. package/dist/cjs/filemanager/templates/filemanager-grid-preview.js +64 -46
  39. package/dist/cjs/filemanager/templates/filemanager-grid.js +64 -46
  40. package/dist/cjs/filemanager/templates/filemanager-normal.js +64 -46
  41. package/dist/cjs/filemanager/templates/filemanager-preview.js +64 -46
  42. package/dist/cjs/filemanager/tests/filemanager-contextmenu.js +64 -46
  43. package/dist/cjs/filemanager/tests/filemanager-drag-hint.js +64 -46
  44. package/dist/cjs/filemanager/tests/filemanager-gridview-preview.js +64 -46
  45. package/dist/cjs/filemanager/tests/filemanager-gridview.js +64 -46
  46. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +64 -46
  47. package/dist/cjs/filemanager/tests/filemanager-listview.js +64 -46
  48. package/dist/cjs/filter/templates/filter-normal.js +64 -46
  49. package/dist/cjs/filter/templates/filter-preview.js +64 -46
  50. package/dist/cjs/filter/tests/filter-preview.js +64 -46
  51. package/dist/cjs/filter/tests/filter.js +64 -46
  52. package/dist/cjs/form/tests/form-field-dropdowns.js +64 -46
  53. package/dist/cjs/form/tests/form-field-inputs-rtl.js +64 -46
  54. package/dist/cjs/form/tests/form-field-inputs.js +64 -46
  55. package/dist/cjs/gantt/gantt-columns-table.spec.js +283 -0
  56. package/dist/cjs/gantt/gantt-content.spec.js +46 -0
  57. package/dist/cjs/gantt/gantt-footer-toolbar.spec.js +7895 -0
  58. package/dist/cjs/gantt/gantt-header-toolbar.spec.js +7895 -0
  59. package/dist/cjs/gantt/gantt-line.spec.js +67 -0
  60. package/dist/cjs/gantt/gantt-rows-table.spec.js +283 -0
  61. package/dist/cjs/gantt/gantt-tables-wrapper.spec.js +46 -0
  62. package/dist/cjs/gantt/gantt-task-content.spec.js +4355 -0
  63. package/dist/cjs/gantt/gantt-task-dot.spec.js +67 -0
  64. package/dist/cjs/gantt/gantt-task-wrap.spec.js +67 -0
  65. package/dist/cjs/gantt/gantt-task.spec.js +68 -0
  66. package/dist/cjs/gantt/gantt-tasks-table.spec.js +283 -0
  67. package/dist/cjs/gantt/gantt.spec.js +67 -0
  68. package/dist/cjs/gantt/tests/gantt-editing-popup-predecessors.js +64 -46
  69. package/dist/cjs/gantt/tests/gantt-editing-popup-resources.js +64 -46
  70. package/dist/cjs/gantt/tests/gantt-editing-popup-successors.js +64 -46
  71. package/dist/cjs/gantt/tests/gantt-react.js +2197 -1216
  72. package/dist/cjs/gantt/tests/gantt-row-reordering.js +2795 -1610
  73. package/dist/cjs/gantt/tests/gantt.js +2770 -1585
  74. package/dist/cjs/grid/grid-toolbar.spec.js +64 -46
  75. package/dist/cjs/grid/tests/grid-adaptive-pager.js +64 -46
  76. package/dist/cjs/grid/tests/grid-adaptive-search.js +64 -46
  77. package/dist/cjs/grid/tests/grid-angular.js +64 -46
  78. package/dist/cjs/grid/tests/grid-column-menu-angular.js +64 -46
  79. package/dist/cjs/grid/tests/grid-column-menu-blazor.js +64 -46
  80. package/dist/cjs/grid/tests/grid-column-reordering-actions.js +64 -46
  81. package/dist/cjs/grid/tests/grid-column-reordering.js +64 -46
  82. package/dist/cjs/grid/tests/grid-column-resizing-actions.js +64 -46
  83. package/dist/cjs/grid/tests/grid-editing-custom-editor.js +64 -46
  84. package/dist/cjs/grid/tests/grid-editing-inline-angular.js +64 -46
  85. package/dist/cjs/grid/tests/grid-editing-inline-blazor.js +64 -46
  86. package/dist/cjs/grid/tests/grid-editing.js +64 -46
  87. package/dist/cjs/grid/tests/grid-filter-menu-angular.js +64 -46
  88. package/dist/cjs/grid/tests/grid-filter-menu-blazor.js +64 -46
  89. package/dist/cjs/grid/tests/grid-filter-row-angular.js +64 -46
  90. package/dist/cjs/grid/tests/grid-filter-row-blazor.js +64 -46
  91. package/dist/cjs/grid/tests/grid-filter-row.js +64 -46
  92. package/dist/cjs/grid/tests/grid-grouping-actions.js +64 -46
  93. package/dist/cjs/grid/tests/grid-grouping-blazor.js +64 -46
  94. package/dist/cjs/grid/tests/grid-grouping-detail-template.js +64 -46
  95. package/dist/cjs/grid/tests/grid-grouping.js +64 -46
  96. package/dist/cjs/grid/tests/grid-hierarchy.js +64 -46
  97. package/dist/cjs/grid/tests/grid-locked-columns-rtl.js +64 -46
  98. package/dist/cjs/grid/tests/grid-locked-columns.js +64 -46
  99. package/dist/cjs/grid/tests/grid-long-titles.js +64 -46
  100. package/dist/cjs/grid/tests/grid-multicolumn-headers.js +64 -46
  101. package/dist/cjs/grid/tests/grid-no-records.js +64 -46
  102. package/dist/cjs/grid/tests/grid-pager.js +64 -46
  103. package/dist/cjs/grid/tests/grid-react-basic.js +64 -46
  104. package/dist/cjs/grid/tests/grid-react.js +64 -46
  105. package/dist/cjs/grid/tests/grid-row-reordering.js +64 -46
  106. package/dist/cjs/grid/tests/grid-rows-resizing.js +64 -46
  107. package/dist/cjs/grid/tests/grid-rows-states.js +64 -46
  108. package/dist/cjs/grid/tests/grid-rtl-angular.js +64 -46
  109. package/dist/cjs/grid/tests/grid-rtl.js +64 -46
  110. package/dist/cjs/grid/tests/grid-selection-aggregates.js +64 -46
  111. package/dist/cjs/grid/tests/grid-size-sm-comp-sm.js +64 -46
  112. package/dist/cjs/grid/tests/grid-size-sm.js +64 -46
  113. package/dist/cjs/grid/tests/grid-sticky-columns-rtl.js +64 -46
  114. package/dist/cjs/grid/tests/grid-sticky-columns.js +64 -46
  115. package/dist/cjs/grid/tests/grid-sticky-multicolumn-headers.js +64 -46
  116. package/dist/cjs/grid/tests/grid-toolbar.js +64 -46
  117. package/dist/cjs/grid/tests/grid-virtualization.js +64 -46
  118. package/dist/cjs/grid/tests/grid.js +64 -46
  119. package/dist/cjs/imageeditor/tests/imageeditor-crop-pane.js +64 -46
  120. package/dist/cjs/imageeditor/tests/imageeditor-resize-pane.js +64 -46
  121. package/dist/cjs/imageeditor/tests/imageeditor.js +64 -46
  122. package/dist/cjs/index.js +87 -55
  123. package/dist/cjs/mediaplayer/tests/mediaplayer.js +64 -46
  124. package/dist/cjs/multiselect/templates/multiselect-prefix.js +64 -46
  125. package/dist/cjs/multiselect/templates/multiselect-suffix.js +64 -46
  126. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +64 -46
  127. package/dist/cjs/multiselect/tests/multiselect-flat.js +64 -46
  128. package/dist/cjs/multiselect/tests/multiselect-grouping.js +64 -46
  129. package/dist/cjs/multiselect/tests/multiselect-opened.js +64 -46
  130. package/dist/cjs/multiselect/tests/multiselect-outline.js +64 -46
  131. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +64 -46
  132. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +64 -46
  133. package/dist/cjs/multiselect/tests/multiselect-solid.js +64 -46
  134. package/dist/cjs/pdf-viewer/pdf-viewer.spec.js +64 -46
  135. package/dist/cjs/pdf-viewer/templates/pdf-viewer-blank.js +64 -46
  136. package/dist/cjs/pdf-viewer/templates/pdf-viewer-normal.js +64 -46
  137. package/dist/cjs/pdf-viewer/templates/pdf-viewer-with-search-panel.js +64 -46
  138. package/dist/cjs/pdf-viewer/tests/pdf-viewer-blank-page.js +64 -46
  139. package/dist/cjs/pdf-viewer/tests/pdf-viewer-search-panel.js +64 -46
  140. package/dist/cjs/pdf-viewer/tests/pdf-viewer.js +64 -46
  141. package/dist/cjs/pivotgrid/tests/pivotgrid-jquery.js +64 -46
  142. package/dist/cjs/prompt/templates/prompt-more-actions.js +87 -55
  143. package/dist/cjs/prompt/templates/prompt-normal.js +64 -46
  144. package/dist/cjs/prompt/templates/prompt-output.js +64 -46
  145. package/dist/cjs/prompt/templates/prompt-popup.js +64 -46
  146. package/dist/cjs/prompt/templates/prompt-settings.js +64 -46
  147. package/dist/cjs/prompt/templates/prompt-suggestions.js +64 -46
  148. package/dist/cjs/prompt/tests/prompt-more-actions.js +87 -55
  149. package/dist/cjs/prompt/tests/prompt-normal.js +64 -46
  150. package/dist/cjs/prompt/tests/prompt-output.js +64 -46
  151. package/dist/cjs/scheduler/tests/scheduler-adaptive-agenda.js +64 -46
  152. package/dist/cjs/scheduler/tests/scheduler-adaptive-day-resource-group.js +64 -46
  153. package/dist/cjs/scheduler/tests/scheduler-adaptive-day.js +64 -46
  154. package/dist/cjs/scheduler/tests/scheduler-adaptive-month.js +64 -46
  155. package/dist/cjs/scheduler/tests/scheduler-angular-agenda-rtl.js +64 -46
  156. package/dist/cjs/scheduler/tests/scheduler-angular-agenda.js +64 -46
  157. package/dist/cjs/scheduler/tests/scheduler-angular-day-rtl.js +64 -46
  158. package/dist/cjs/scheduler/tests/scheduler-angular-month-rtl.js +64 -46
  159. package/dist/cjs/scheduler/tests/scheduler-angular-month.js +64 -46
  160. package/dist/cjs/scheduler/tests/scheduler-angular-rtl.js +64 -46
  161. package/dist/cjs/scheduler/tests/scheduler-angular.js +64 -46
  162. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +64 -46
  163. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +64 -46
  164. package/dist/cjs/scheduler/tests/scheduler-flex-layout.js +64 -46
  165. package/dist/cjs/scheduler/tests/scheduler-jquery-agenda.js +64 -46
  166. package/dist/cjs/scheduler/tests/scheduler-jquery-month.js +64 -46
  167. package/dist/cjs/scheduler/tests/scheduler-react-agenda.js +64 -46
  168. package/dist/cjs/scheduler/tests/scheduler-react-day.js +64 -46
  169. package/dist/cjs/scheduler/tests/scheduler-react-month.js +64 -46
  170. package/dist/cjs/scheduler/tests/scheduler-react-timeline-multi.js +64 -46
  171. package/dist/cjs/scheduler/tests/scheduler-react-timeline.js +64 -46
  172. package/dist/cjs/scheduler/tests/scheduler-react-week.js +64 -46
  173. package/dist/cjs/scheduler/tests/scheduler-year.js +64 -46
  174. package/dist/cjs/scheduler/tests/scheduler.js +64 -46
  175. package/dist/cjs/slider/slider-tick.js +16 -7
  176. package/dist/cjs/slider/slider.spec.js +48 -39
  177. package/dist/cjs/slider/templates/slider-gradient-vertical.js +64 -46
  178. package/dist/cjs/slider/templates/slider-gradient.js +64 -46
  179. package/dist/cjs/slider/templates/slider-normal.js +64 -46
  180. package/dist/cjs/slider/templates/slider-range-vertical.js +64 -46
  181. package/dist/cjs/slider/templates/slider-range.js +64 -46
  182. package/dist/cjs/slider/templates/slider-vertical.js +64 -46
  183. package/dist/cjs/slider/tests/slider-css-vars.js +64 -46
  184. package/dist/cjs/slider/tests/slider-tick-absolute-position.js +64 -46
  185. package/dist/cjs/slider/tests/slider.js +64 -46
  186. package/dist/cjs/spreadsheet/tests/spreadsheet-borders-config.js +64 -46
  187. package/dist/cjs/spreadsheet/tests/spreadsheet-cell-contextmenu.js +64 -46
  188. package/dist/cjs/spreadsheet/tests/spreadsheet-filtering.js +64 -46
  189. package/dist/cjs/spreadsheet/tests/spreadsheet-format-dialogs.js +64 -46
  190. package/dist/cjs/spreadsheet/tests/spreadsheet-formula.js +64 -46
  191. package/dist/cjs/spreadsheet/tests/spreadsheet-jquery.js +64 -46
  192. package/dist/cjs/spreadsheet/tests/spreadsheet-row-contextmenu.js +64 -46
  193. package/dist/cjs/spreadsheet/tests/spreadsheet-tools.js +64 -46
  194. package/dist/cjs/spreadsheet/tests/spreadsheet.js +64 -46
  195. package/dist/cjs/taskboard/taskboard-pane.js +64 -46
  196. package/dist/cjs/taskboard/taskboard-toolbar.js +64 -46
  197. package/dist/cjs/taskboard/taskboard.spec.js +64 -46
  198. package/dist/cjs/taskboard/templates/taskboard-normal.js +64 -46
  199. package/dist/cjs/taskboard/tests/taskboard-card.js +64 -46
  200. package/dist/cjs/taskboard/tests/taskboard-column.js +64 -46
  201. package/dist/cjs/taskboard/tests/taskboard-pane.js +64 -46
  202. package/dist/cjs/taskboard/tests/taskboard-resources.js +64 -46
  203. package/dist/cjs/taskboard/tests/taskboard-rtl.js +64 -46
  204. package/dist/cjs/taskboard/tests/taskboard.js +64 -46
  205. package/dist/cjs/toolbar/templates/toolbar-angular-normal.js +64 -46
  206. package/dist/cjs/toolbar/templates/toolbar-angular-resizable.js +64 -46
  207. package/dist/cjs/toolbar/templates/toolbar-normal.js +64 -46
  208. package/dist/cjs/toolbar/templates/toolbar-resizable.js +64 -46
  209. package/dist/cjs/toolbar/tests/toolbar-adaptive.js +64 -46
  210. package/dist/cjs/toolbar/tests/toolbar-angular.js +64 -46
  211. package/dist/cjs/toolbar/tests/toolbar-components.js +64 -46
  212. package/dist/cjs/toolbar/tests/toolbar-popup-size.js +64 -46
  213. package/dist/cjs/toolbar/tests/toolbar-popup.js +64 -46
  214. package/dist/cjs/toolbar/tests/toolbar-sizes.js +64 -46
  215. package/dist/cjs/toolbar/tests/toolbar.js +64 -46
  216. package/dist/cjs/toolbar/toolbar-angular.spec.js +64 -46
  217. package/dist/cjs/toolbar/toolbar.spec.js +64 -46
  218. package/dist/cjs/treelist/tests/treelist-aggregate-react.js +64 -46
  219. package/dist/cjs/treelist/tests/treelist-aggregates.js +64 -46
  220. package/dist/cjs/treelist/tests/treelist-react.js +64 -46
  221. package/dist/cjs/treelist/tests/treelist-row-reordering.js +64 -46
  222. package/dist/cjs/treelist/tests/treelist.js +64 -46
  223. package/dist/cjs/treelist/treelist.spec.js +64 -46
  224. package/dist/esm/autocomplete/tests/autocomplete-prefix-suffix.js +64 -46
  225. package/dist/esm/coloreditor/color-editor.spec.js +64 -46
  226. package/dist/esm/coloreditor/templates/coloreditor-group.js +64 -46
  227. package/dist/esm/coloreditor/templates/coloreditor-normal.js +64 -46
  228. package/dist/esm/coloreditor/templates/coloreditor-palette-group.js +64 -46
  229. package/dist/esm/coloreditor/templates/coloreditor-palette.js +64 -46
  230. package/dist/esm/coloreditor/tests/coloreditor-focused-colorgradient.js +64 -46
  231. package/dist/esm/coloreditor/tests/coloreditor-rtl.js +64 -46
  232. package/dist/esm/coloreditor/tests/coloreditor-states.js +64 -46
  233. package/dist/esm/coloreditor/tests/coloreditor.js +64 -46
  234. package/dist/esm/colorgradient/color-gradient.spec.js +64 -46
  235. package/dist/esm/colorgradient/templates/colorgradient-contrast.js +64 -46
  236. package/dist/esm/colorgradient/templates/colorgradient-normal.js +64 -46
  237. package/dist/esm/colorgradient/tests/colorgradient-contrast.js +64 -46
  238. package/dist/esm/colorgradient/tests/colorgradient-draghandle.js +64 -46
  239. package/dist/esm/colorgradient/tests/colorgradient-modes.js +64 -46
  240. package/dist/esm/colorgradient/tests/colorgradient-rtl.js +64 -46
  241. package/dist/esm/colorgradient/tests/colorgradient-states.js +64 -46
  242. package/dist/esm/colorgradient/tests/colorgradient.js +64 -46
  243. package/dist/esm/colorpicker/templates/colorpicker-popup-gradient.js +64 -46
  244. package/dist/esm/colorpicker/templates/colorpicker-popup-palette.js +64 -46
  245. package/dist/esm/colorpicker/tests/colorpicker-opened.js +64 -46
  246. package/dist/esm/colorpicker/tests/colorpicker-size.js +64 -46
  247. package/dist/esm/colorpicker/tests/colorpicker-states.js +64 -46
  248. package/dist/esm/colorpicker/tests/colorpicker.js +64 -46
  249. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +64 -46
  250. package/dist/esm/dock-manager/tests/dock-manager-unpinned-pane.js +64 -46
  251. package/dist/esm/dock-manager/tests/dock-manager.js +64 -46
  252. package/dist/esm/editor/editor-toolbar.js +64 -46
  253. package/dist/esm/editor/templates/editor-normal.js +64 -46
  254. package/dist/esm/editor/tests/editor-find-replace.js +64 -46
  255. package/dist/esm/editor/tests/editor-states.js +64 -46
  256. package/dist/esm/editor/tests/editor-table-wizard.js +64 -46
  257. package/dist/esm/editor/tests/editor.js +64 -46
  258. package/dist/esm/filemanager/file-info.js +64 -46
  259. package/dist/esm/filemanager/filemanager-toolbar.spec.js +64 -46
  260. package/dist/esm/filemanager/filemanager.spec.js +64 -46
  261. package/dist/esm/filemanager/templates/filemanager-grid-preview.js +64 -46
  262. package/dist/esm/filemanager/templates/filemanager-grid.js +64 -46
  263. package/dist/esm/filemanager/templates/filemanager-normal.js +64 -46
  264. package/dist/esm/filemanager/templates/filemanager-preview.js +64 -46
  265. package/dist/esm/filemanager/tests/filemanager-contextmenu.js +64 -46
  266. package/dist/esm/filemanager/tests/filemanager-drag-hint.js +64 -46
  267. package/dist/esm/filemanager/tests/filemanager-gridview-preview.js +64 -46
  268. package/dist/esm/filemanager/tests/filemanager-gridview.js +64 -46
  269. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +64 -46
  270. package/dist/esm/filemanager/tests/filemanager-listview.js +64 -46
  271. package/dist/esm/filter/templates/filter-normal.js +64 -46
  272. package/dist/esm/filter/templates/filter-preview.js +64 -46
  273. package/dist/esm/filter/tests/filter-preview.js +64 -46
  274. package/dist/esm/filter/tests/filter.js +64 -46
  275. package/dist/esm/form/tests/form-field-dropdowns.js +64 -46
  276. package/dist/esm/form/tests/form-field-inputs-rtl.js +64 -46
  277. package/dist/esm/form/tests/form-field-inputs.js +64 -46
  278. package/dist/esm/gantt/gantt-columns-table.spec.js +261 -0
  279. package/dist/esm/gantt/gantt-content.spec.js +24 -0
  280. package/dist/esm/gantt/gantt-footer-toolbar.spec.js +7879 -0
  281. package/dist/esm/gantt/gantt-header-toolbar.spec.js +7879 -0
  282. package/dist/esm/gantt/gantt-line.spec.js +45 -0
  283. package/dist/esm/gantt/gantt-rows-table.spec.js +261 -0
  284. package/dist/esm/gantt/gantt-tables-wrapper.spec.js +24 -0
  285. package/dist/esm/gantt/gantt-task-content.spec.js +4339 -0
  286. package/dist/esm/gantt/gantt-task-dot.spec.js +45 -0
  287. package/dist/esm/gantt/gantt-task-wrap.spec.js +45 -0
  288. package/dist/esm/gantt/gantt-task.spec.js +46 -0
  289. package/dist/esm/gantt/gantt-tasks-table.spec.js +261 -0
  290. package/dist/esm/gantt/gantt.spec.js +45 -0
  291. package/dist/esm/gantt/tests/gantt-editing-popup-predecessors.js +64 -46
  292. package/dist/esm/gantt/tests/gantt-editing-popup-resources.js +64 -46
  293. package/dist/esm/gantt/tests/gantt-editing-popup-successors.js +64 -46
  294. package/dist/esm/gantt/tests/gantt-react.js +1900 -919
  295. package/dist/esm/gantt/tests/gantt-row-reordering.js +2498 -1313
  296. package/dist/esm/gantt/tests/gantt.js +2473 -1288
  297. package/dist/esm/grid/grid-toolbar.spec.js +64 -46
  298. package/dist/esm/grid/tests/grid-adaptive-pager.js +64 -46
  299. package/dist/esm/grid/tests/grid-adaptive-search.js +64 -46
  300. package/dist/esm/grid/tests/grid-angular.js +64 -46
  301. package/dist/esm/grid/tests/grid-column-menu-angular.js +64 -46
  302. package/dist/esm/grid/tests/grid-column-menu-blazor.js +64 -46
  303. package/dist/esm/grid/tests/grid-column-reordering-actions.js +64 -46
  304. package/dist/esm/grid/tests/grid-column-reordering.js +64 -46
  305. package/dist/esm/grid/tests/grid-column-resizing-actions.js +64 -46
  306. package/dist/esm/grid/tests/grid-editing-custom-editor.js +64 -46
  307. package/dist/esm/grid/tests/grid-editing-inline-angular.js +64 -46
  308. package/dist/esm/grid/tests/grid-editing-inline-blazor.js +64 -46
  309. package/dist/esm/grid/tests/grid-editing.js +64 -46
  310. package/dist/esm/grid/tests/grid-filter-menu-angular.js +64 -46
  311. package/dist/esm/grid/tests/grid-filter-menu-blazor.js +64 -46
  312. package/dist/esm/grid/tests/grid-filter-row-angular.js +64 -46
  313. package/dist/esm/grid/tests/grid-filter-row-blazor.js +64 -46
  314. package/dist/esm/grid/tests/grid-filter-row.js +64 -46
  315. package/dist/esm/grid/tests/grid-grouping-actions.js +64 -46
  316. package/dist/esm/grid/tests/grid-grouping-blazor.js +64 -46
  317. package/dist/esm/grid/tests/grid-grouping-detail-template.js +64 -46
  318. package/dist/esm/grid/tests/grid-grouping.js +64 -46
  319. package/dist/esm/grid/tests/grid-hierarchy.js +64 -46
  320. package/dist/esm/grid/tests/grid-locked-columns-rtl.js +64 -46
  321. package/dist/esm/grid/tests/grid-locked-columns.js +64 -46
  322. package/dist/esm/grid/tests/grid-long-titles.js +64 -46
  323. package/dist/esm/grid/tests/grid-multicolumn-headers.js +64 -46
  324. package/dist/esm/grid/tests/grid-no-records.js +64 -46
  325. package/dist/esm/grid/tests/grid-pager.js +64 -46
  326. package/dist/esm/grid/tests/grid-react-basic.js +64 -46
  327. package/dist/esm/grid/tests/grid-react.js +64 -46
  328. package/dist/esm/grid/tests/grid-row-reordering.js +64 -46
  329. package/dist/esm/grid/tests/grid-rows-resizing.js +64 -46
  330. package/dist/esm/grid/tests/grid-rows-states.js +64 -46
  331. package/dist/esm/grid/tests/grid-rtl-angular.js +64 -46
  332. package/dist/esm/grid/tests/grid-rtl.js +64 -46
  333. package/dist/esm/grid/tests/grid-selection-aggregates.js +64 -46
  334. package/dist/esm/grid/tests/grid-size-sm-comp-sm.js +64 -46
  335. package/dist/esm/grid/tests/grid-size-sm.js +64 -46
  336. package/dist/esm/grid/tests/grid-sticky-columns-rtl.js +64 -46
  337. package/dist/esm/grid/tests/grid-sticky-columns.js +64 -46
  338. package/dist/esm/grid/tests/grid-sticky-multicolumn-headers.js +64 -46
  339. package/dist/esm/grid/tests/grid-toolbar.js +64 -46
  340. package/dist/esm/grid/tests/grid-virtualization.js +64 -46
  341. package/dist/esm/grid/tests/grid.js +64 -46
  342. package/dist/esm/imageeditor/tests/imageeditor-crop-pane.js +64 -46
  343. package/dist/esm/imageeditor/tests/imageeditor-resize-pane.js +64 -46
  344. package/dist/esm/imageeditor/tests/imageeditor.js +64 -46
  345. package/dist/esm/index.js +87 -55
  346. package/dist/esm/mediaplayer/tests/mediaplayer.js +64 -46
  347. package/dist/esm/multiselect/templates/multiselect-prefix.js +64 -46
  348. package/dist/esm/multiselect/templates/multiselect-suffix.js +64 -46
  349. package/dist/esm/multiselect/tests/multiselect-adaptive.js +64 -46
  350. package/dist/esm/multiselect/tests/multiselect-flat.js +64 -46
  351. package/dist/esm/multiselect/tests/multiselect-grouping.js +64 -46
  352. package/dist/esm/multiselect/tests/multiselect-opened.js +64 -46
  353. package/dist/esm/multiselect/tests/multiselect-outline.js +64 -46
  354. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +64 -46
  355. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +64 -46
  356. package/dist/esm/multiselect/tests/multiselect-solid.js +64 -46
  357. package/dist/esm/pdf-viewer/pdf-viewer.spec.js +64 -46
  358. package/dist/esm/pdf-viewer/templates/pdf-viewer-blank.js +64 -46
  359. package/dist/esm/pdf-viewer/templates/pdf-viewer-normal.js +64 -46
  360. package/dist/esm/pdf-viewer/templates/pdf-viewer-with-search-panel.js +64 -46
  361. package/dist/esm/pdf-viewer/tests/pdf-viewer-blank-page.js +64 -46
  362. package/dist/esm/pdf-viewer/tests/pdf-viewer-search-panel.js +64 -46
  363. package/dist/esm/pdf-viewer/tests/pdf-viewer.js +64 -46
  364. package/dist/esm/pivotgrid/tests/pivotgrid-jquery.js +64 -46
  365. package/dist/esm/prompt/templates/prompt-more-actions.js +87 -55
  366. package/dist/esm/prompt/templates/prompt-normal.js +64 -46
  367. package/dist/esm/prompt/templates/prompt-output.js +64 -46
  368. package/dist/esm/prompt/templates/prompt-popup.js +64 -46
  369. package/dist/esm/prompt/templates/prompt-settings.js +64 -46
  370. package/dist/esm/prompt/templates/prompt-suggestions.js +64 -46
  371. package/dist/esm/prompt/tests/prompt-more-actions.js +87 -55
  372. package/dist/esm/prompt/tests/prompt-normal.js +64 -46
  373. package/dist/esm/prompt/tests/prompt-output.js +64 -46
  374. package/dist/esm/scheduler/tests/scheduler-adaptive-agenda.js +64 -46
  375. package/dist/esm/scheduler/tests/scheduler-adaptive-day-resource-group.js +64 -46
  376. package/dist/esm/scheduler/tests/scheduler-adaptive-day.js +64 -46
  377. package/dist/esm/scheduler/tests/scheduler-adaptive-month.js +64 -46
  378. package/dist/esm/scheduler/tests/scheduler-angular-agenda-rtl.js +64 -46
  379. package/dist/esm/scheduler/tests/scheduler-angular-agenda.js +64 -46
  380. package/dist/esm/scheduler/tests/scheduler-angular-day-rtl.js +64 -46
  381. package/dist/esm/scheduler/tests/scheduler-angular-month-rtl.js +64 -46
  382. package/dist/esm/scheduler/tests/scheduler-angular-month.js +64 -46
  383. package/dist/esm/scheduler/tests/scheduler-angular-rtl.js +64 -46
  384. package/dist/esm/scheduler/tests/scheduler-angular.js +64 -46
  385. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +64 -46
  386. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +64 -46
  387. package/dist/esm/scheduler/tests/scheduler-flex-layout.js +64 -46
  388. package/dist/esm/scheduler/tests/scheduler-jquery-agenda.js +64 -46
  389. package/dist/esm/scheduler/tests/scheduler-jquery-month.js +64 -46
  390. package/dist/esm/scheduler/tests/scheduler-react-agenda.js +64 -46
  391. package/dist/esm/scheduler/tests/scheduler-react-day.js +64 -46
  392. package/dist/esm/scheduler/tests/scheduler-react-month.js +64 -46
  393. package/dist/esm/scheduler/tests/scheduler-react-timeline-multi.js +64 -46
  394. package/dist/esm/scheduler/tests/scheduler-react-timeline.js +64 -46
  395. package/dist/esm/scheduler/tests/scheduler-react-week.js +64 -46
  396. package/dist/esm/scheduler/tests/scheduler-year.js +64 -46
  397. package/dist/esm/scheduler/tests/scheduler.js +64 -46
  398. package/dist/esm/slider/slider-tick.js +16 -7
  399. package/dist/esm/slider/slider.spec.js +48 -39
  400. package/dist/esm/slider/templates/slider-gradient-vertical.js +64 -46
  401. package/dist/esm/slider/templates/slider-gradient.js +64 -46
  402. package/dist/esm/slider/templates/slider-normal.js +64 -46
  403. package/dist/esm/slider/templates/slider-range-vertical.js +64 -46
  404. package/dist/esm/slider/templates/slider-range.js +64 -46
  405. package/dist/esm/slider/templates/slider-vertical.js +64 -46
  406. package/dist/esm/slider/tests/slider-css-vars.js +64 -46
  407. package/dist/esm/slider/tests/slider-tick-absolute-position.js +64 -46
  408. package/dist/esm/slider/tests/slider.js +64 -46
  409. package/dist/esm/spreadsheet/tests/spreadsheet-borders-config.js +64 -46
  410. package/dist/esm/spreadsheet/tests/spreadsheet-cell-contextmenu.js +64 -46
  411. package/dist/esm/spreadsheet/tests/spreadsheet-filtering.js +64 -46
  412. package/dist/esm/spreadsheet/tests/spreadsheet-format-dialogs.js +64 -46
  413. package/dist/esm/spreadsheet/tests/spreadsheet-formula.js +64 -46
  414. package/dist/esm/spreadsheet/tests/spreadsheet-jquery.js +64 -46
  415. package/dist/esm/spreadsheet/tests/spreadsheet-row-contextmenu.js +64 -46
  416. package/dist/esm/spreadsheet/tests/spreadsheet-tools.js +64 -46
  417. package/dist/esm/spreadsheet/tests/spreadsheet.js +64 -46
  418. package/dist/esm/taskboard/taskboard-pane.js +64 -46
  419. package/dist/esm/taskboard/taskboard-toolbar.js +64 -46
  420. package/dist/esm/taskboard/taskboard.spec.js +64 -46
  421. package/dist/esm/taskboard/templates/taskboard-normal.js +64 -46
  422. package/dist/esm/taskboard/tests/taskboard-card.js +64 -46
  423. package/dist/esm/taskboard/tests/taskboard-column.js +64 -46
  424. package/dist/esm/taskboard/tests/taskboard-pane.js +64 -46
  425. package/dist/esm/taskboard/tests/taskboard-resources.js +64 -46
  426. package/dist/esm/taskboard/tests/taskboard-rtl.js +64 -46
  427. package/dist/esm/taskboard/tests/taskboard.js +64 -46
  428. package/dist/esm/toolbar/templates/toolbar-angular-normal.js +64 -46
  429. package/dist/esm/toolbar/templates/toolbar-angular-resizable.js +64 -46
  430. package/dist/esm/toolbar/templates/toolbar-normal.js +64 -46
  431. package/dist/esm/toolbar/templates/toolbar-resizable.js +64 -46
  432. package/dist/esm/toolbar/tests/toolbar-adaptive.js +64 -46
  433. package/dist/esm/toolbar/tests/toolbar-angular.js +64 -46
  434. package/dist/esm/toolbar/tests/toolbar-components.js +64 -46
  435. package/dist/esm/toolbar/tests/toolbar-popup-size.js +64 -46
  436. package/dist/esm/toolbar/tests/toolbar-popup.js +64 -46
  437. package/dist/esm/toolbar/tests/toolbar-sizes.js +64 -46
  438. package/dist/esm/toolbar/tests/toolbar.js +64 -46
  439. package/dist/esm/toolbar/toolbar-angular.spec.js +64 -46
  440. package/dist/esm/toolbar/toolbar.spec.js +64 -46
  441. package/dist/esm/treelist/tests/treelist-aggregate-react.js +64 -46
  442. package/dist/esm/treelist/tests/treelist-aggregates.js +64 -46
  443. package/dist/esm/treelist/tests/treelist-react.js +64 -46
  444. package/dist/esm/treelist/tests/treelist-row-reordering.js +64 -46
  445. package/dist/esm/treelist/tests/treelist.js +64 -46
  446. package/dist/esm/treelist/treelist.spec.js +64 -46
  447. package/dist/types/gantt/gantt-columns-table.spec.d.ts +3 -0
  448. package/dist/types/gantt/gantt-content.spec.d.ts +1 -0
  449. package/dist/types/gantt/gantt-footer-toolbar.spec.d.ts +2 -0
  450. package/dist/types/gantt/gantt-header-toolbar.spec.d.ts +2 -0
  451. package/dist/types/gantt/gantt-line.spec.d.ts +14 -0
  452. package/dist/types/gantt/gantt-rows-table.spec.d.ts +3 -0
  453. package/dist/types/gantt/gantt-tables-wrapper.spec.d.ts +1 -0
  454. package/dist/types/gantt/gantt-task-content.spec.d.ts +13 -0
  455. package/dist/types/gantt/gantt-task-dot.spec.d.ts +14 -0
  456. package/dist/types/gantt/gantt-task-wrap.spec.d.ts +14 -0
  457. package/dist/types/gantt/gantt-task.spec.d.ts +14 -0
  458. package/dist/types/gantt/gantt-tasks-table.spec.d.ts +3 -0
  459. package/dist/types/gantt/gantt.spec.d.ts +14 -0
  460. package/dist/types/gantt/index.d.ts +13 -0
  461. package/package.json +2 -2
  462. package/src/gantt/gantt-columns-table.spec.tsx +20 -0
  463. package/src/gantt/gantt-content.spec.tsx +16 -0
  464. package/src/gantt/gantt-footer-toolbar.spec.tsx +20 -0
  465. package/src/gantt/gantt-header-toolbar.spec.tsx +20 -0
  466. package/src/gantt/gantt-line.spec.tsx +47 -0
  467. package/src/gantt/gantt-rows-table.spec.tsx +20 -0
  468. package/src/gantt/gantt-tables-wrapper.spec.tsx +16 -0
  469. package/src/gantt/gantt-task-content.spec.tsx +44 -0
  470. package/src/gantt/gantt-task-dot.spec.tsx +47 -0
  471. package/src/gantt/gantt-task-wrap.spec.tsx +47 -0
  472. package/src/gantt/gantt-task.spec.tsx +48 -0
  473. package/src/gantt/gantt-tasks-table.spec.tsx +20 -0
  474. package/src/gantt/gantt.spec.tsx +47 -0
  475. package/src/gantt/index.ts +13 -0
  476. package/src/gantt/tests/gantt-react.tsx +350 -347
  477. package/src/gantt/tests/gantt-row-reordering.tsx +701 -748
  478. package/src/gantt/tests/gantt.tsx +694 -742
  479. package/src/prompt/templates/prompt-more-actions.tsx +56 -13
  480. package/src/slider/slider-tick.tsx +12 -9
  481. package/src/slider/slider.spec.tsx +17 -14
package/src/gantt/tests/gantt-row-reordering.tsx CHANGED
@@ -1,7 +1,11 @@
1
1
  import { Button } from '../../button';
2
2
  import { ButtonGroup } from '../../button-group';
3
3
  import { Icon } from '../../icon';
4
- import { Toolbar } from '../../toolbar';
4
+ import { Gantt, GanttHeaderToolbar, GanttFooterToolbar, GanttContent, GanttTables, GanttColumnsTable, GanttRowsTable, GanttTasksTable, GanttTaskDot, GanttTaskWrap, GanttTask, GanttTaskContent, GanttLine } from '../../gantt';
5
+ import { TreeList } from '../../treelist';
6
+ import { Splitter, SplitterPane } from '../../splitter';
7
+ import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
8
+ import { TableThead, TableRow, TableTbody, TableTd } from '../../table';
5
9
 
6
10
  const styles = `
7
11
  .k-gantt {
@@ -21,754 +25,703 @@ export default () => (
21
25
  <style>{styles}</style>
22
26
  <div id="test-area">
23
27
 
24
- <div id="gantt" className="k-widget k-gantt">
25
- <Toolbar className="k-gantt-toolbar k-gantt-header">
26
- <Button className="k-gantt-toggle" icon="layout-1-by-4"></Button>
27
- <Button className="k-gantt-create" icon="plus">Add Task</Button>
28
- <span className="k-spacer"></span>
29
- <div className="k-gantt-views-wrapper">
30
- <select className="k-picker k-picker-solid k-dropdown-list k-dropdown k-views-dropdown k-rounded-md">
31
- <option value="day">Day</option>
32
- <option value="week">Week</option>
33
- <option value="month">Month</option>
34
- </select>
35
- <ButtonGroup className="k-gantt-views">
36
- <Button className="k-view-day">Day</Button>
37
- <Button className="k-view-week" selected>Week</Button>
38
- <Button className="k-view-month">Month</Button>
39
- </ButtonGroup>
40
- </div>
41
- </Toolbar>
42
- <div className="k-gantt-content">
43
- <div className="k-gantt-treelist">
44
- <div className="k-treelist k-grid k-grid-md k-grid-display-block">
45
- <div className="k-table-thead k-grid-header">
46
- <div className="k-grid-header-wrap">
47
- <table className="k-table k-table-md k-grid-header-table" style={{ minWidth: "250px" }}>
48
- <colgroup>
49
- <col className="k-drag-col"/>
50
- <col style={{ width: '50px' }} />
51
- <col />
52
- </colgroup>
53
- <thead className="k-table-thead">
54
- <tr className="k-table-row">
55
- <th className="k-table-th k-header k-drag-cell"></th>
56
- <th className="k-table-th k-header" rowSpan={1}>
57
- <span className="k-cell-inner">
58
- <span className="k-link">
59
- <span className="k-column-title">ID</span>
60
- </span>
61
- </span>
62
- </th>
63
- <th className="k-table-th k-header" rowSpan={1}>
64
- <span className="k-cell-inner">
65
- <span className="k-link">
66
- <span className="k-column-title">Title</span>
67
- </span>
68
- </span>
69
- </th>
70
- </tr>
71
- </thead>
72
- </table>
73
- </div>
74
- </div>
75
- <div className="k-grid-content k-auto-scrollable" style={{ height: "530px", display: "block" }}>
76
- <table className="k-table k-table-md k-grid-table k-selectable" style={{ minWidth: "250px" }}>
77
- <colgroup>
78
- <col className="k-drag-col" />
79
- <col style={{ width: '50px' }} />
80
- <col />
81
- </colgroup>
82
- <tbody className="k-table-tbody">
83
- <tr className="k-table-row k-treelist-group">
84
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
85
- <td className="k-table-td">7</td>
86
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="caret-alt-down" />Software validation, research and implementation</td>
87
- </tr>
88
- <tr className="k-table-row k-table-alt-row k-alt">
89
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
90
- <td className="k-table-td">18</td>
91
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Project Kickoff</td>
92
- </tr>
93
- <tr className="k-table-row k-treelist-group">
94
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
95
- <td className="k-table-td">11</td>
96
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Research</td>
97
- </tr>
98
- <tr className="k-table-row k-table-alt-row k-alt">
99
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
100
- <td className="k-table-td">19</td>
101
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Validation with Customers</td>
102
- </tr>
103
- <tr className="k-table-row">
104
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
105
- <td className="k-table-td">20</td>
106
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Market Research</td>
107
- </tr>
108
- <tr className="k-table-row k-table-alt-row k-alt">
109
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
110
- <td className="k-table-td">39</td>
111
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Functional and Technical Specification</td>
112
- </tr>
113
- <tr className="k-table-row k-treelist-group">
114
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
115
- <td className="k-table-td">12</td>
116
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Design</td>
117
- </tr>
118
- <tr className="k-table-row k-table-alt-row k-alt">
119
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
120
- <td className="k-table-td">22</td>
121
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />UI Design</td>
122
- </tr>
123
- <tr className="k-table-row">
124
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
125
- <td className="k-table-td">23</td>
126
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />HTML Prototype</td>
127
- </tr>
128
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
129
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
130
- <td className="k-table-td">13</td>
131
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Implementation</td>
132
- </tr>
133
- <tr className="k-table-row">
134
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
135
- <td className="k-table-td">24</td>
136
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Prototype</td>
137
- </tr>
138
- <tr className="k-table-row k-table-alt-row k-alt">
139
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
140
- <td className="k-table-td">26</td>
141
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Architecture</td>
142
- </tr>
143
- <tr className="k-table-row">
144
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
145
- <td className="k-table-td">27</td>
146
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Data Layer</td>
147
- </tr>
148
- <tr className="k-table-row k-table-alt-row k-alt">
149
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
150
- <td className="k-table-td">29</td>
151
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />UI and Interaction</td>
152
- </tr>
153
- <tr className="k-table-row">
154
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
155
- <td className="k-table-td">28</td>
156
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Unit Tests</td>
157
- </tr>
158
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
159
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
160
- <td className="k-table-td">14</td>
161
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Testing</td>
162
- </tr>
163
- <tr className="k-table-row">
164
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
165
- <td className="k-table-td">32</td>
166
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Integration Testing</td>
167
- </tr>
168
- <tr className="k-table-row k-table-alt-row k-alt">
169
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
170
- <td className="k-table-td">33</td>
171
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Load Testing</td>
172
- </tr>
173
- <tr className="k-table-row k-treelist-group">
174
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
175
- <td className="k-table-td">30</td>
176
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Documentation</td>
177
- </tr>
178
- <tr className="k-table-row k-table-alt-row k-alt">
179
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
180
- <td className="k-table-td">34</td>
181
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Structure</td>
182
- </tr>
183
- <tr className="k-table-row">
184
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
185
- <td className="k-table-td">35</td>
186
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Articles</td>
187
- </tr>
188
- <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
189
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
190
- <td className="k-table-td">31</td>
191
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon icon="caret-alt-right" />Demos</td>
192
- </tr>
193
- <tr className="k-table-row">
194
- <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
195
- <td className="k-table-td">17</td>
196
- <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Release</td>
197
- </tr>
198
- </tbody>
199
- </table>
200
- </div>
28
+ <Gantt
29
+ footerToolbar={(
30
+ <GanttFooterToolbar><Button className="k-gantt-create" icon="plus">Add Task</Button></GanttFooterToolbar>
31
+ )}
32
+ headerToolbar={(
33
+ <GanttHeaderToolbar>
34
+ <Button className="k-gantt-toggle" icon="layout-1-by-4"></Button>
35
+ <Button className="k-gantt-create" icon="plus">Add Task</Button>
36
+ <span className="k-spacer"></span>
37
+ <div className="k-gantt-views-wrapper">
38
+ <select className="k-picker k-picker-solid k-dropdown-list k-dropdown k-views-dropdown k-rounded-md">
39
+ <option value="day">Day</option>
40
+ <option value="week">Week</option>
41
+ <option value="month">Month</option>
42
+ </select>
43
+ <ButtonGroup className="k-gantt-views">
44
+ <Button className="k-view-day">Day</Button>
45
+ <Button className="k-view-week" selected>Week</Button>
46
+ <Button className="k-view-month">Month</Button>
47
+ </ButtonGroup>
201
48
  </div>
202
- </div>
203
- <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ height: "604px" }}>
204
- <div className="k-resize-handle"></div>
205
- </div>
206
- <div className="k-gantt-timeline-pane">
207
- <div className="k-gantt-timeline k-grid k-grid-md">
208
- <div className="k-grid-header">
209
- <div className="k-grid-header-wrap">
210
- <table className="k-table k-table-md k-grid-header-table" style={{ width: "4200px" }}>
211
- <colgroup>
212
- <col /><col /><col /><col /><col /><col /><col />
213
- <col /><col /><col /><col /><col /><col /><col />
214
- <col /><col /><col /><col /><col /><col /><col />
215
- <col /><col /><col /><col /><col /><col /><col />
216
- <col /><col /><col /><col /><col /><col /><col />
217
- <col /><col /><col /><col /><col /><col /><col />
218
- </colgroup>
219
- <tbody className="k-table-tbody">
220
- <tr className="k-table-row">
221
- <td colSpan={7} className="k-table-td k-header">Sun 6/01 - Sat 6/07</td>
222
- <td colSpan={7} className="k-table-td k-header">Sun 6/08 - Sat 6/14</td>
223
- <td colSpan={7} className="k-table-td k-header">Sun 6/15 - Sat 6/21</td>
224
- <td colSpan={7} className="k-table-td k-header">Sun 6/22 - Sat 6/28</td>
225
- <td colSpan={7} className="k-table-td k-header">Sun 6/29 - Sat 7/05</td>
226
- <td colSpan={7} className="k-table-td k-header">Sun 7/06 - Sat 7/12</td>
227
- </tr>
228
- <tr className="k-table-row">
229
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/01</td>
230
- <td colSpan={1} className="k-table-td k-header">Mon 6/02</td>
231
- <td colSpan={1} className="k-table-td k-header">Tue 6/03</td>
232
- <td colSpan={1} className="k-table-td k-header">Wed 6/04</td>
233
- <td colSpan={1} className="k-table-td k-header">Thu 6/05</td>
234
- <td colSpan={1} className="k-table-td k-header">Fri 6/06</td>
235
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/07</td>
236
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/08</td>
237
- <td colSpan={1} className="k-table-td k-header">Mon 6/09</td>
238
- <td colSpan={1} className="k-table-td k-header">Tue 6/10</td>
239
- <td colSpan={1} className="k-table-td k-header">Wed 6/11</td>
240
- <td colSpan={1} className="k-table-td k-header">Thu 6/12</td>
241
- <td colSpan={1} className="k-table-td k-header">Fri 6/13</td>
242
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/14</td>
243
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/15</td>
244
- <td colSpan={1} className="k-table-td k-header">Mon 6/16</td>
245
- <td colSpan={1} className="k-table-td k-header">Tue 6/17</td>
246
- <td colSpan={1} className="k-table-td k-header">Wed 6/18</td>
247
- <td colSpan={1} className="k-table-td k-header">Thu 6/19</td>
248
- <td colSpan={1} className="k-table-td k-header">Fri 6/20</td>
249
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/21</td>
250
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/22</td>
251
- <td colSpan={1} className="k-table-td k-header">Mon 6/23</td>
252
- <td colSpan={1} className="k-table-td k-header">Tue 6/24</td>
253
- <td colSpan={1} className="k-table-td k-header">Wed 6/25</td>
254
- <td colSpan={1} className="k-table-td k-header">Thu 6/26</td>
255
- <td colSpan={1} className="k-table-td k-header">Fri 6/27</td>
256
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/28</td>
257
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/29</td>
258
- <td colSpan={1} className="k-table-td k-header">Mon 6/30</td>
259
- <td colSpan={1} className="k-table-td k-header">Tue 7/01</td>
260
- <td colSpan={1} className="k-table-td k-header">Wed 7/02</td>
261
- <td colSpan={1} className="k-table-td k-header">Thu 7/03</td>
262
- <td colSpan={1} className="k-table-td k-header">Fri 7/04</td>
263
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 7/05</td>
264
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 7/06</td>
265
- <td colSpan={1} className="k-table-td k-header">Mon 7/07</td>
266
- <td colSpan={1} className="k-table-td k-header">Tue 7/08</td>
267
- <td colSpan={1} className="k-table-td k-header">Wed 7/09</td>
268
- <td colSpan={1} className="k-table-td k-header">Thu 7/10</td>
269
- <td colSpan={1} className="k-table-td k-header">Fri 7/11</td>
270
- <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 7/12</td>
271
- </tr>
272
- </tbody>
273
- </table>
274
- </div>
275
- </div>
276
- <div className="k-grid-content" style={{ height: "530px" }}>
277
- <div className="k-gantt-tables">
278
- <table className="k-table k-table-md k-grid-table k-gantt-rows" style={{ width: "4200px" }}>
279
- <colgroup>
280
- <col />
281
- </colgroup>
282
- <tbody className="k-table-tbody">
283
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
284
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
285
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
286
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
287
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
288
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
289
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
290
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
291
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
292
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
293
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
294
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
295
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
296
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
297
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
298
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
299
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
300
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
301
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
302
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
303
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
304
- <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
305
- <tr className="k-table-row"><td className="k-table-td"></td></tr>
306
- </tbody>
307
- </table>
308
- <table className="k-table k-table-md k-gantt-columns" style={{ width: "4200px", height: "828px" }}>
309
- <colgroup>
310
- <col /><col /><col /><col /><col /><col /><col />
311
- <col /><col /><col /><col /><col /><col /><col />
312
- <col /><col /><col /><col /><col /><col /><col />
313
- <col /><col /><col /><col /><col /><col /><col />
314
- <col /><col /><col /><col /><col /><col /><col />
315
- <col /><col /><col /><col /><col /><col /><col />
316
- </colgroup>
317
- <tbody className="k-table-tbody">
318
- <tr className="k-table-row">
319
- <td className="k-table-td k-nonwork-hour"></td>
320
- <td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td>
321
- <td className="k-table-td k-nonwork-hour"></td>
322
- <td className="k-table-td k-nonwork-hour"></td>
323
- <td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td>
324
- <td className="k-table-td k-nonwork-hour"></td>
325
- <td className="k-table-td k-nonwork-hour"></td>
326
- <td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td>
327
- <td className="k-table-td k-nonwork-hour"></td>
328
- <td className="k-table-td k-nonwork-hour"></td>
329
- <td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td>
330
- <td className="k-table-td k-nonwork-hour"></td>
331
- <td className="k-table-td k-nonwork-hour"></td>
332
- <td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td>
333
- <td className="k-table-td k-nonwork-hour"></td>
334
- <td className="k-table-td k-nonwork-hour"></td>
335
- <td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td><td className="k-table-td"></td>
336
- <td className="k-table-td k-nonwork-hour"></td>
337
- </tr>
338
- </tbody>
339
- </table>
340
- <table className="k-table k-table-md k-gantt-tasks" style={{ width: "4200px" }}>
341
- <colgroup>
342
- <col />
343
- </colgroup>
344
- <tbody className="k-table-tbody">
345
- <tr className="k-table-row">
346
- <td className="k-table-td">
347
- <div className="k-task-wrap k-summary-wrap" style={{ left: "113px" }}>
348
- <div className="k-task k-task-summary" style={{ width: "4000px" }}>
349
- <div className="k-task-summary-progress" style={{ width: "1720px" }}>
350
- <div className="k-task-summary-complete" style={{ width: "4000px" }}></div>
351
- </div>
352
- </div>
353
- <div className="k-task-dot k-task-start"></div>
354
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
355
- </div>
356
- </td>
357
- </tr>
358
- <tr className="k-table-row">
359
- <td className="k-table-td">
360
- <div className="k-task-wrap k-milestone-wrap" style={{ left: "113px" }}>
361
- <div className="k-task k-task-milestone"></div>
362
- <div className="k-task-dot k-task-start"></div>
363
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
364
- </div>
365
- </td>
366
- </tr>
367
- <tr className="k-table-row">
368
- <td className="k-table-td">
369
- <div className="k-task-wrap k-summary-wrap" style={{ left: "113px" }}>
370
- <div className="k-task k-task-summary" style={{ width: "500px" }}>
371
- <div className="k-task-summary-progress" style={{ width: "215px" }}>
372
- <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
373
- </div>
374
- </div>
375
- <div className="k-task-dot k-task-start"></div>
376
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
377
- </div>
378
- </td>
379
- </tr>
380
- <tr className="k-table-row">
381
- <td className="k-table-td">
382
- <div className="k-task-wrap" style={{ left: "113px" }}>
383
- <div className="k-task k-task-single" style={{ width: "200px" }}>
384
- <div className="k-task-complete" style={{ width: '50px' }}></div>
385
- <div className="k-task-content">
386
- <div className="k-task-template">Validation with Customers</div>
387
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
388
- </div>
389
- </div>
390
- <div className="k-task-dot k-task-start"></div>
391
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
392
- <div className="k-task-draghandle" style={{ left: '50px' }}></div>
393
- </div>
394
- </td>
395
- </tr>
396
- <tr className="k-table-row">
397
- <td className="k-table-td">
398
- <div className="k-task-wrap" style={{ left: "113px" }}>
399
- <div className="k-task k-task-single" style={{ width: "200px" }}>
400
- <div className="k-task-complete" style={{ width: "164px" }}></div>
401
- <div className="k-task-content">
402
- <div className="k-task-template">Market Research</div>
403
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
404
- </div>
405
- </div>
406
- <div className="k-task-dot k-task-start"></div>
407
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
408
- <div className="k-task-draghandle" style={{ left: "164px" }}></div>
409
- </div>
410
- </td>
411
- </tr>
412
- <tr className="k-table-row">
413
- <td className="k-table-td">
414
- <div className="k-task-wrap" style={{ left: "313px" }}>
415
- <div className="k-task k-task-single" style={{ width: "300px" }}>
416
- <div className="k-task-complete" style={{ width: "69px" }}></div>
417
- <div className="k-task-content">
418
- <div className="k-task-template">Functional and Technical Specification</div>
419
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
420
- </div>
421
- </div>
422
- <div className="k-task-dot k-task-start"></div>
423
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
424
- <div className="k-task-draghandle" style={{ left: "69px" }}></div>
425
- </div>
426
- </td>
427
- </tr>
428
- <tr className="k-table-row">
429
- <td className="k-table-td">
430
- <div className="k-task-wrap k-summary-wrap" style={{ left: "813px" }}>
431
- <div className="k-task k-task-summary" style={{ width: "500px" }}>
432
- <div className="k-task-summary-progress" style={{ width: "300px" }}>
433
- <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
434
- </div>
435
- </div>
436
- <div className="k-task-dot k-task-start"></div>
437
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
438
- </div>
439
- </td>
440
- </tr>
441
- <tr className="k-table-row">
442
- <td className="k-table-td">
443
- <div className="k-task-wrap" style={{ left: "813px" }}>
444
- <div className="k-task k-task-single" style={{ width: "200px" }}>
445
- <div className="k-task-complete" style={{ width: "112px" }}></div>
446
- <div className="k-task-content">
447
- <div className="k-task-template">UI Design</div>
448
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
449
- </div>
450
- </div>
451
- <div className="k-task-dot k-task-start"></div>
452
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
453
- <div className="k-task-draghandle" style={{ left: "112px" }}></div>
454
- </div>
455
- </td>
456
- </tr>
457
- <tr className="k-table-row">
458
- <td className="k-table-td">
459
- <div className="k-task-wrap" style={{ left: "1013px" }}>
460
- <div className="k-task k-task-single" style={{ width: "300px" }}>
461
- <div className="k-task-complete" style={{ width: "192px" }}></div>
462
- <div className="k-task-content">
463
- <div className="k-task-template">HTML Prototype</div>
464
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
465
- </div>
466
- </div>
467
- <div className="k-task-dot k-task-start"></div>
468
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
469
- <div className="k-task-draghandle" style={{ left: "192px" }}></div>
470
- </div>
471
- </td>
472
- </tr>
473
- <tr className="k-table-row">
474
- <td className="k-table-td">
475
- <div className="k-task-wrap k-summary-wrap" style={{ left: "1013px" }}>
476
- <div className="k-task k-task-summary" style={{ width: "2100px" }}>
477
- <div className="k-task-summary-progress" style={{ width: "1617px" }}>
478
- <div className="k-task-summary-complete" style={{ width: "2100px" }}></div>
479
- </div>
480
- </div>
481
- <div className="k-task-dot k-task-start"></div>
482
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
483
- </div>
484
- </td>
485
- </tr>
486
- <tr className="k-table-row">
487
- <td className="k-table-td">
488
- <div className="k-task-wrap" style={{ left: "1013px" }}>
489
- <div className="k-task k-task-single" style={{ width: "600px" }}>
490
- <div className="k-task-complete" style={{ width: "462px" }}></div>
491
- <div className="k-task-content">
492
- <div className="k-task-template">Prototype</div>
493
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
494
- </div>
495
- </div>
496
- <div className="k-task-dot k-task-start"></div>
497
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
498
- <div className="k-task-draghandle" style={{ left: "462px" }}></div>
499
- </div>
500
- </td>
501
- </tr>
502
- <tr className="k-table-row">
503
- <td className="k-table-td">
504
- <div className="k-task-wrap" style={{ left: "1613px" }}>
505
- <div className="k-task k-task-single" style={{ width: "100px" }}>
506
- <div className="k-task-complete" style={{ width: "82px" }}></div>
507
- <div className="k-task-content">
508
- <div className="k-task-template">Architecture</div>
509
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
510
- </div>
511
- </div>
512
- <div className="k-task-dot k-task-start"></div>
513
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
514
- <div className="k-task-draghandle" style={{ left: "82px" }}></div>
515
- </div>
516
- </td>
517
- </tr>
518
- <tr className="k-table-row">
519
- <td className="k-table-td">
520
- <div className="k-task-wrap" style={{ left: "1713px" }}>
521
- <div className="k-task k-task-single" style={{ width: "600px" }}>
522
- <div className="k-task-complete" style={{ width: "600px" }}></div>
523
- <div className="k-task-content">
524
- <div className="k-task-template">Data Layer</div>
525
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
526
- </div>
527
- </div>
528
- <div className="k-task-dot k-task-start"></div>
529
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
530
- <div className="k-task-draghandle" style={{ left: "600px" }}></div>
531
- </div>
532
- </td>
533
- </tr>
534
- <tr className="k-table-row">
535
- <td className="k-table-td">
536
- <div className="k-task-wrap" style={{ left: "2613px" }}>
537
- <div className="k-task k-task-single" style={{ width: "500px" }}>
538
- <div className="k-task-complete" style={{ width: "300px" }}></div>
539
- <div className="k-task-content">
540
- <div className="k-task-template">UI and Interaction</div>
541
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
542
- </div>
543
- </div>
544
- <div className="k-task-dot k-task-start"></div>
545
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
546
- <div className="k-task-draghandle" style={{ left: "300px" }}></div>
547
- </div>
548
- </td>
549
- </tr>
550
- <tr className="k-table-row">
551
- <td className="k-table-td">
552
- <div className="k-task-wrap" style={{ left: "1713px" }}>
553
- <div className="k-task k-task-single" style={{ width: "900px" }}>
554
- <div className="k-task-complete" style={{ width: "612px" }}></div>
555
- <div className="k-task-content">
556
- <div className="k-task-template">Unit Tests</div>
557
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
558
- </div>
559
- </div>
560
- <div className="k-task-dot k-task-start"></div>
561
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
562
- <div className="k-task-draghandle" style={{ left: "612px" }}></div>
563
- </div>
564
- </td>
565
- </tr>
566
- <tr className="k-table-row">
567
- <td className="k-table-td">
568
- <div className="k-task-wrap k-summary-wrap" style={{ left: "2913px" }}>
569
- <div className="k-task k-task-summary" style={{ width: "500px" }}>
570
- <div className="k-task-summary-progress" style={{ width: "260px" }}>
571
- <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
572
- </div>
573
- </div>
574
- <div className="k-task-dot k-task-start"></div>
575
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
576
- </div>
577
- </td>
578
- </tr>
579
- <tr className="k-table-row">
580
- <td className="k-table-td">
581
- <div className="k-task-wrap" style={{ left: "2913px" }}>
582
- <div className="k-task k-task-single" style={{ width: "500px" }}>
583
- <div className="k-task-complete" style={{ width: "470px" }}></div>
584
- <div className="k-task-content">
585
- <div className="k-task-template">Integration Testing</div>
586
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
587
- </div>
588
- </div>
589
- <div className="k-task-dot k-task-start"></div>
590
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
591
- <div className="k-task-draghandle" style={{ left: "470px" }}></div>
592
- </div>
593
- </td>
594
- </tr>
595
- <tr className="k-table-row">
596
- <td className="k-table-td">
597
- <div className="k-task-wrap" style={{ left: "2913px" }}>
598
- <div className="k-task k-task-single" style={{ width: "500px" }}>
599
- <div className="k-task-complete" style={{ width: '50px' }}></div>
600
- <div className="k-task-content">
601
- <div className="k-task-template">Load Testing</div>
602
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
603
- </div>
604
- </div>
605
- <div className="k-task-dot k-task-start"></div>
606
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
607
- <div className="k-task-draghandle" style={{ left: '50px' }}></div>
608
- </div>
609
- </td>
610
- </tr>
611
- <tr className="k-table-row">
612
- <td className="k-table-td">
613
- <div className="k-task-wrap k-summary-wrap" style={{ left: "2213px" }}>
614
- <div className="k-task k-task-summary" style={{ width: "1200px" }}>
615
- <div className="k-task-summary-progress" style={{ width: "168px" }}>
616
- <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
617
- </div>
618
- </div>
619
- <div className="k-task-dot k-task-start"></div>
620
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
621
- </div>
622
- </td>
623
- </tr>
624
- <tr className="k-table-row">
625
- <td className="k-table-td">
626
- <div className="k-task-wrap" style={{ left: "2213px" }}>
627
- <div className="k-task k-task-single" style={{ width: "300px" }}>
628
- <div className="k-task-complete" style={{ width: "84px" }}></div>
629
- <div className="k-task-content">
630
- <div className="k-task-template">Structure</div>
631
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
632
- </div>
633
- </div>
634
- <div className="k-task-dot k-task-start"></div>
635
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
636
- <div className="k-task-draghandle" style={{ left: "84px" }}></div>
637
- </div>
638
- </td>
639
- </tr>
640
- <tr className="k-table-row">
641
- <td className="k-table-td">
642
- <div className="k-task-wrap" style={{ left: "2513px" }}>
643
- <div className="k-task k-task-single" style={{ width: "900px" }}>
644
- <div className="k-task-complete" style={{ width: '0px' }}></div>
645
- <div className="k-task-content">
646
- <div className="k-task-template">Articles</div>
647
- <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
648
- </div>
649
- </div>
650
- <div className="k-task-dot k-task-start"></div>
651
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
652
- <div className="k-task-draghandle" style={{ left: '0px' }}></div>
653
- </div>
654
- </td>
655
- </tr>
656
- <tr className="k-table-row">
657
- <td className="k-table-td">
658
- <div className="k-task-wrap k-summary-wrap" style={{ left: "2913px" }}>
659
- <div className="k-task k-task-summary" style={{ width: "1200px" }}>
660
- <div className="k-task-summary-progress" style={{ width: "984px" }}>
661
- <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
662
- </div>
663
- </div>
664
- <div className="k-task-dot k-task-start"></div>
665
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
666
- </div>
667
- </td>
668
- </tr>
669
- <tr className="k-table-row">
670
- <td className="k-table-td">
671
- <div className="k-task-wrap k-milestone-wrap" style={{ left: "4113px" }}>
672
- <div className="k-task k-task-milestone"></div>
673
- <div className="k-task-dot k-task-start"></div>
674
- <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
675
- </div>
676
- </td>
677
- </tr>
678
- </tbody>
679
- </table>
680
- </div>
681
- <div className="k-gantt-dependencies" style={{ width: "4200px" }}>
682
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "124.5px", top: "53px", width: "10px" }}></div>
683
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "132.5px", top: "53px", height: "18px" }}></div>
684
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "71px", width: "31.5px" }}></div>
685
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "103px", top: "71px", height: "54px" }}></div>
686
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "125px", width: "9px" }}><span className="k-arrow-e"></span></div>
687
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1013px", top: "269px", width: "10px" }}></div>
688
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1021px", top: "269px", height: "18px" }}></div>
689
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "287px", width: "20px" }}></div>
690
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1003px", top: "287px", height: "18px" }}></div>
691
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "305px", width: "9px" }}><span className="k-arrow-e"></span></div>
692
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1313px", top: "305px", width: "10px" }}></div>
693
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1321px", top: "305px", height: "18px" }}></div>
694
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "323px", width: "320px" }}></div>
695
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1003px", top: "323px", height: "54px" }}></div>
696
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "377px", width: "9px" }}><span className="k-arrow-e"></span></div>
697
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1613px", top: "377px", width: "10px" }}></div>
698
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1621px", top: "377px", height: "18px" }}></div>
699
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1603px", top: "395px", width: "20px" }}></div>
700
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1603px", top: "395px", height: "18px" }}></div>
701
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1603px", top: "413px", width: "9px" }}><span className="k-arrow-e"></span></div>
702
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1713px", top: "413px", width: "10px" }}></div>
703
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1721px", top: "413px", height: "18px" }}></div>
704
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "431px", width: "20px" }}></div>
705
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1703px", top: "431px", height: "18px" }}></div>
706
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "449px", width: "9px" }}><span className="k-arrow-e"></span></div>
707
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1713px", top: "413px", width: "10px" }}></div>
708
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1721px", top: "413px", height: "18px" }}></div>
709
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "431px", width: "20px" }}></div>
710
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "1703px", top: "431px", height: "90px" }}></div>
711
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "521px", width: "9px" }}><span className="k-arrow-e"></span></div>
712
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2313px", top: "449px", width: "10px" }}></div>
713
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "2321px", top: "449px", height: "36px" }}></div>
714
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2321px", top: "485px", width: "291px" }}><span className="k-arrow-e"></span></div>
715
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2613px", top: "521px", width: "510px" }}></div>
716
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "38px" }}></div>
717
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
718
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "485px", width: "10px" }}></div>
719
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "18px" }}></div>
720
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "503px", width: "220px" }}></div>
721
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "2903px", top: "503px", height: "90px" }}></div>
722
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "593px", width: "9px" }}><span className="k-arrow-e"></span></div>
723
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "485px", width: "10px" }}></div>
724
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "18px" }}></div>
725
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "503px", width: "220px" }}></div>
726
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "2903px", top: "503px", height: "126px" }}></div>
727
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "629px", width: "9px" }}><span className="k-arrow-e"></span></div>
728
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2513px", top: "701px", width: "10px" }}></div>
729
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "2521px", top: "701px", height: "18px" }}></div>
730
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2503px", top: "719px", width: "20px" }}></div>
731
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "2503px", top: "719px", height: "18px" }}></div>
732
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "2503px", top: "737px", width: "9px" }}><span className="k-arrow-e"></span></div>
733
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "593px", width: "10px" }}></div>
734
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "593px", height: "38px" }}></div>
735
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3414px", top: "629px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
736
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "629px", width: "10px" }}></div>
737
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "629px", height: "180px" }}></div>
738
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></div>
739
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "737px", width: "10px" }}></div>
740
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "737px", height: "72px" }}></div>
741
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></div>
742
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "341px", width: "10px" }}></div>
743
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "341px", height: "146px" }}></div>
744
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
745
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "124.5px", top: "53px", width: "10px" }}></div>
746
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "132.5px", top: "53px", height: "18px" }}></div>
747
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "71px", width: "31.5px" }}></div>
748
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "103px", top: "71px", height: "90px" }}></div>
749
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "161px", width: "9px" }}><span className="k-arrow-e"></span></div>
750
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "313px", top: "161px", width: "10px" }}></div>
751
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "321px", top: "161px", height: "18px" }}></div>
752
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "179px", width: "20px" }}></div>
753
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "303px", top: "179px", height: "18px" }}></div>
754
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></div>
755
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "313px", top: "125px", width: "10px" }}></div>
756
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "321px", top: "125px", height: "18px" }}></div>
757
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "143px", width: "20px" }}></div>
758
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "303px", top: "143px", height: "54px" }}></div>
759
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></div>
760
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "613px", top: "197px", width: "10px" }}></div>
761
- <div className="k-gantt-line k-gantt-line-v" style={{ left: "621px", top: "197px", height: "72px" }}></div>
762
- <div className="k-gantt-line k-gantt-line-h" style={{ left: "621px", top: "269px", width: "191px" }}><span className="k-arrow-e"></span></div>
763
- </div>
764
- </div>
765
- </div>
766
- </div>
767
- </div>
768
- <Toolbar className="k-gantt-toolbar k-gantt-footer">
769
- <Button className="k-gantt-create" icon="plus">Add Task</Button>
770
- </Toolbar>
771
- </div>
49
+ </GanttHeaderToolbar>
50
+ )}>
51
+ <GanttContent>
52
+ <Splitter className="k-gantt-splitter" children={[
53
+ <SplitterPane className="k-gantt-treelist" flexBasis="30%">
54
+ <TreeList className="k-grid-display-block">
55
+ <GridHeader>
56
+ <div className="k-grid-header-wrap">
57
+ <GridHeaderTable style={{ minWidth: "250px" }}>
58
+ <colgroup>
59
+ <col className="k-drag-col"/>
60
+ <col style={{ width: '50px' }} />
61
+ <col />
62
+ </colgroup>
63
+ <TableThead>
64
+ <TableRow>
65
+ <GridHeaderCell className="k-drag-cell"></GridHeaderCell>
66
+ <GridHeaderCell rowspan={1} columnTitle="ID"></GridHeaderCell>
67
+ <GridHeaderCell rowspan={1} columnTitle="Title"></GridHeaderCell>
68
+ </TableRow>
69
+ </TableThead>
70
+ </GridHeaderTable>
71
+ </div>
72
+ </GridHeader>
73
+ <GridContainer>
74
+ <GridContent className="k-auto-scrollable" style={{ height: "530px", display: "block" }}>
75
+ <GridTable className="k-selectable" style={{ minWidth: "250px" }}>
76
+ <colgroup>
77
+ <col className="k-drag-col" />
78
+ <col style={{ width: '50px' }} />
79
+ <col />
80
+ </colgroup>
81
+ <TableTbody>
82
+ <TableRow className="k-treelist-group">
83
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
84
+ <TableTd >7</TableTd>
85
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="caret-alt-down" />Software validation, research and implementation</TableTd>
86
+ </TableRow>
87
+ <TableRow className="k-alt" alt>
88
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
89
+ <TableTd >18</TableTd>
90
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Project Kickoff</TableTd>
91
+ </TableRow>
92
+ <TableRow className=" k-treelist-group">
93
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
94
+ <TableTd >11</TableTd>
95
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Research</TableTd>
96
+ </TableRow>
97
+ <TableRow className="k-alt" alt>
98
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
99
+ <TableTd >19</TableTd>
100
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Validation with Customers</TableTd>
101
+ </TableRow>
102
+ <TableRow >
103
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
104
+ <TableTd >20</TableTd>
105
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Market Research</TableTd>
106
+ </TableRow>
107
+ <TableRow className="k-alt" alt>
108
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
109
+ <TableTd >39</TableTd>
110
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Functional and Technical Specification</TableTd>
111
+ </TableRow>
112
+ <TableRow className=" k-treelist-group">
113
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
114
+ <TableTd >12</TableTd>
115
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Design</TableTd>
116
+ </TableRow>
117
+ <TableRow className="k-alt" alt>
118
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
119
+ <TableTd >22</TableTd>
120
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />UI Design</TableTd>
121
+ </TableRow>
122
+ <TableRow >
123
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
124
+ <TableTd >23</TableTd>
125
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />HTML Prototype</TableTd>
126
+ </TableRow>
127
+ <TableRow className="k-alt k-treelist-group" alt>
128
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
129
+ <TableTd >13</TableTd>
130
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Implementation</TableTd>
131
+ </TableRow>
132
+ <TableRow >
133
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
134
+ <TableTd >24</TableTd>
135
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Prototype</TableTd>
136
+ </TableRow>
137
+ <TableRow className="k-alt" alt>
138
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
139
+ <TableTd >26</TableTd>
140
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Architecture</TableTd>
141
+ </TableRow>
142
+ <TableRow >
143
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
144
+ <TableTd >27</TableTd>
145
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Data Layer</TableTd>
146
+ </TableRow>
147
+ <TableRow className="k-alt" alt>
148
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
149
+ <TableTd >29</TableTd>
150
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />UI and Interaction</TableTd>
151
+ </TableRow>
152
+ <TableRow >
153
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
154
+ <TableTd >28</TableTd>
155
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Unit Tests</TableTd>
156
+ </TableRow>
157
+ <TableRow className="k-alt k-treelist-group">
158
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
159
+ <TableTd >14</TableTd>
160
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Testing</TableTd>
161
+ </TableRow>
162
+ <TableRow >
163
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
164
+ <TableTd >32</TableTd>
165
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Integration Testing</TableTd>
166
+ </TableRow>
167
+ <TableRow className="k-alt" alt>
168
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
169
+ <TableTd >33</TableTd>
170
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Load Testing</TableTd>
171
+ </TableRow>
172
+ <TableRow className="k-treelist-group">
173
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
174
+ <TableTd >30</TableTd>
175
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Documentation</TableTd>
176
+ </TableRow>
177
+ <TableRow className="k-alt" alt>
178
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
179
+ <TableTd >34</TableTd>
180
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Structure</TableTd>
181
+ </TableRow>
182
+ <TableRow >
183
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
184
+ <TableTd >35</TableTd>
185
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Articles</TableTd>
186
+ </TableRow>
187
+ <TableRow className="k-alt k-treelist-group">
188
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
189
+ <TableTd >31</TableTd>
190
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon icon="caret-alt-right" />Demos</TableTd>
191
+ </TableRow>
192
+ <TableRow >
193
+ <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
194
+ <TableTd >17</TableTd>
195
+ <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Release</TableTd>
196
+ </TableRow>
197
+ </TableTbody>
198
+ </GridTable>
199
+ </GridContent>
200
+ </GridContainer>
201
+ </TreeList>
202
+ </SplitterPane>,
203
+ <SplitterPane className="k-gantt-timeline-pane">
204
+ <Grid className="k-gantt-timeline">
205
+ <GridHeader>
206
+ <div className="k-grid-header-wrap">
207
+ <GridHeaderTable style={{ width: "4200px" }}>
208
+ <colgroup>
209
+ <col /><col /><col /><col /><col /><col /><col />
210
+ <col /><col /><col /><col /><col /><col /><col />
211
+ <col /><col /><col /><col /><col /><col /><col />
212
+ <col /><col /><col /><col /><col /><col /><col />
213
+ <col /><col /><col /><col /><col /><col /><col />
214
+ <col /><col /><col /><col /><col /><col /><col />
215
+ </colgroup>
216
+ <TableTbody>
217
+ <TableRow >
218
+ <TableTd className="k-header" colspan={7}>Sun 6/01 - Sat 6/07</TableTd>
219
+ <TableTd className="k-header" colspan={7}>Sun 6/08 - Sat 6/14</TableTd>
220
+ <TableTd className="k-header" colspan={7}>Sun 6/15 - Sat 6/21</TableTd>
221
+ <TableTd className="k-header" colspan={7}>Sun 6/22 - Sat 6/28</TableTd>
222
+ <TableTd className="k-header" colspan={7}>Sun 6/29 - Sat 7/05</TableTd>
223
+ <TableTd className="k-header" colspan={7}>Sun 7/06 - Sat 7/12</TableTd>
224
+ </TableRow>
225
+ <TableRow >
226
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sun 6/01</TableTd>
227
+ <TableTd className="k-header" colspan={1}>Mon 6/02</TableTd>
228
+ <TableTd className="k-header" colspan={1}>Tue 6/03</TableTd>
229
+ <TableTd className="k-header" colspan={1}>Wed 6/04</TableTd>
230
+ <TableTd className="k-header" colspan={1}>Thu 6/05</TableTd>
231
+ <TableTd className="k-header" colspan={1}>Fri 6/06</TableTd>
232
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sat 6/07</TableTd>
233
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sun 6/08</TableTd>
234
+ <TableTd className="k-header" colspan={1}>Mon 6/09</TableTd>
235
+ <TableTd className="k-header" colspan={1}>Tue 6/10</TableTd>
236
+ <TableTd className="k-header" colspan={1}>Wed 6/11</TableTd>
237
+ <TableTd className="k-header" colspan={1}>Thu 6/12</TableTd>
238
+ <TableTd className="k-header" colspan={1}>Fri 6/13</TableTd>
239
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sat 6/14</TableTd>
240
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sun 6/15</TableTd>
241
+ <TableTd className="k-header" colspan={1}>Mon 6/16</TableTd>
242
+ <TableTd className="k-header" colspan={1}>Tue 6/17</TableTd>
243
+ <TableTd className="k-header" colspan={1}>Wed 6/18</TableTd>
244
+ <TableTd className="k-header" colspan={1}>Thu 6/19</TableTd>
245
+ <TableTd className="k-header" colspan={1}>Fri 6/20</TableTd>
246
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sat 6/21</TableTd>
247
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sun 6/22</TableTd>
248
+ <TableTd className="k-header" colspan={1}>Mon 6/23</TableTd>
249
+ <TableTd className="k-header" colspan={1}>Tue 6/24</TableTd>
250
+ <TableTd className="k-header" colspan={1}>Wed 6/25</TableTd>
251
+ <TableTd className="k-header" colspan={1}>Thu 6/26</TableTd>
252
+ <TableTd className="k-header" colspan={1}>Fri 6/27</TableTd>
253
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sat 6/28</TableTd>
254
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sun 6/29</TableTd>
255
+ <TableTd className="k-header" colspan={1}>Mon 6/30</TableTd>
256
+ <TableTd className="k-header" colspan={1}>Tue 7/01</TableTd>
257
+ <TableTd className="k-header" colspan={1}>Wed 7/02</TableTd>
258
+ <TableTd className="k-header" colspan={1}>Thu 7/03</TableTd>
259
+ <TableTd className="k-header" colspan={1}>Fri 7/04</TableTd>
260
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sat 7/05</TableTd>
261
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sun 7/06</TableTd>
262
+ <TableTd className="k-header" colspan={1}>Mon 7/07</TableTd>
263
+ <TableTd className="k-header" colspan={1}>Tue 7/08</TableTd>
264
+ <TableTd className="k-header" colspan={1}>Wed 7/09</TableTd>
265
+ <TableTd className="k-header" colspan={1}>Thu 7/10</TableTd>
266
+ <TableTd className="k-header" colspan={1}>Fri 7/11</TableTd>
267
+ <TableTd colspan={1} className="k-header k-nonwork-hour">Sat 7/12</TableTd>
268
+ </TableRow>
269
+ </TableTbody>
270
+ </GridHeaderTable>
271
+ </div>
272
+ </GridHeader>
273
+ <GridContent style={{ height: "530px" }}>
274
+ <GanttTables>
275
+ <GanttRowsTable className="k-grid-table" style={{ width: "4200px" }}>
276
+ <colgroup>
277
+ <col />
278
+ </colgroup>
279
+ <TableTbody>
280
+ <TableRow ><TableTd ></TableTd></TableRow>
281
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
282
+ <TableRow ><TableTd ></TableTd></TableRow>
283
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
284
+ <TableRow ><TableTd ></TableTd></TableRow>
285
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
286
+ <TableRow ><TableTd ></TableTd></TableRow>
287
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
288
+ <TableRow ><TableTd ></TableTd></TableRow>
289
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
290
+ <TableRow ><TableTd ></TableTd></TableRow>
291
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
292
+ <TableRow ><TableTd ></TableTd></TableRow>
293
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
294
+ <TableRow ><TableTd ></TableTd></TableRow>
295
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
296
+ <TableRow ><TableTd ></TableTd></TableRow>
297
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
298
+ <TableRow ><TableTd ></TableTd></TableRow>
299
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
300
+ <TableRow ><TableTd ></TableTd></TableRow>
301
+ <TableRow className="k-alt" alt><TableTd ></TableTd></TableRow>
302
+ <TableRow ><TableTd ></TableTd></TableRow>
303
+ </TableTbody>
304
+ </GanttRowsTable>
305
+ <GanttColumnsTable style={{ width: "4200px", height: "828px" }}>
306
+ <colgroup>
307
+ <col /><col /><col /><col /><col /><col /><col />
308
+ <col /><col /><col /><col /><col /><col /><col />
309
+ <col /><col /><col /><col /><col /><col /><col />
310
+ <col /><col /><col /><col /><col /><col /><col />
311
+ <col /><col /><col /><col /><col /><col /><col />
312
+ <col /><col /><col /><col /><col /><col /><col />
313
+ </colgroup>
314
+ <TableTbody>
315
+ <TableRow >
316
+ <TableTd className="k-nonwork-hour"></TableTd>
317
+ <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
318
+ <TableTd className="k-nonwork-hour"></TableTd>
319
+ <TableTd className="k-nonwork-hour"></TableTd>
320
+ <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
321
+ <TableTd className="k-nonwork-hour"></TableTd>
322
+ <TableTd className="k-nonwork-hour"></TableTd>
323
+ <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
324
+ <TableTd className="k-nonwork-hour"></TableTd>
325
+ <TableTd className="k-nonwork-hour"></TableTd>
326
+ <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
327
+ <TableTd className="k-nonwork-hour"></TableTd>
328
+ <TableTd className="k-nonwork-hour"></TableTd>
329
+ <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
330
+ <TableTd className="k-nonwork-hour"></TableTd>
331
+ <TableTd className="k-nonwork-hour"></TableTd>
332
+ <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
333
+ <TableTd className="k-nonwork-hour"></TableTd>
334
+ </TableRow>
335
+ </TableTbody>
336
+ </GanttColumnsTable>
337
+ <GanttTasksTable style={{ width: "4200px" }}>
338
+ <colgroup>
339
+ <col />
340
+ </colgroup>
341
+ <TableTbody>
342
+ <TableRow>
343
+ <TableTd>
344
+ <GanttTaskWrap type="summary" style={{ left: "113px" }}>
345
+ <GanttTask type="summary" style={{ width: "4000px" }}>
346
+ <div className="k-task-summary-progress" style={{ width: "1720px" }}>
347
+ <div className="k-task-summary-complete" style={{ width: "4000px" }}></div>
348
+ </div>
349
+ </GanttTask>
350
+ <GanttTaskDot />
351
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
352
+ </GanttTaskWrap>
353
+ </TableTd>
354
+ </TableRow>
355
+ <TableRow>
356
+ <TableTd>
357
+ <GanttTaskWrap type="milestone" style={{ left: "113px" }}>
358
+ <GanttTask type="milestone"></GanttTask>
359
+ <GanttTaskDot />
360
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
361
+ </GanttTaskWrap>
362
+ </TableTd>
363
+ </TableRow>
364
+ <TableRow>
365
+ <TableTd>
366
+ <GanttTaskWrap type="summary" style={{ left: "113px" }}>
367
+ <GanttTask type="summary" style={{ width: "500px" }}>
368
+ <div className="k-task-summary-progress" style={{ width: "215px" }}>
369
+ <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
370
+ </div>
371
+ </GanttTask>
372
+ <GanttTaskDot />
373
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
374
+ </GanttTaskWrap>
375
+ </TableTd>
376
+ </TableRow>
377
+ <TableRow>
378
+ <TableTd>
379
+ <GanttTaskWrap style={{ left: "113px" }}>
380
+ <GanttTask style={{ width: "200px" }}>
381
+ <div className="k-task-complete" style={{ width: '50px' }}></div>
382
+ <GanttTaskContent content="Validation with Customers"></GanttTaskContent>
383
+ </GanttTask>
384
+ <GanttTaskDot />
385
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
386
+ <div className="k-task-draghandle" style={{ left: '50px' }}></div>
387
+ </GanttTaskWrap>
388
+ </TableTd>
389
+ </TableRow>
390
+ <TableRow>
391
+ <TableTd>
392
+ <GanttTaskWrap style={{ left: "113px" }}>
393
+ <GanttTask style={{ width: "200px" }}>
394
+ <div className="k-task-complete" style={{ width: "164px" }}></div>
395
+ <GanttTaskContent content="Market Research"></GanttTaskContent>
396
+ </GanttTask>
397
+ <GanttTaskDot />
398
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
399
+ <div className="k-task-draghandle" style={{ left: "164px" }}></div>
400
+ </GanttTaskWrap>
401
+ </TableTd>
402
+ </TableRow>
403
+ <TableRow>
404
+ <TableTd>
405
+ <GanttTaskWrap style={{ left: "313px" }}>
406
+ <GanttTask style={{ width: "300px" }}>
407
+ <div className="k-task-complete" style={{ width: "69px" }}></div>
408
+ <GanttTaskContent content="Functional and Technical Specification"></GanttTaskContent>
409
+ </GanttTask>
410
+ <GanttTaskDot />
411
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
412
+ <div className="k-task-draghandle" style={{ left: "69px" }}></div>
413
+ </GanttTaskWrap>
414
+ </TableTd>
415
+ </TableRow>
416
+ <TableRow>
417
+ <TableTd>
418
+ <GanttTaskWrap type="summary" style={{ left: "813px" }}>
419
+ <GanttTask type="summary" style={{ width: "500px" }}>
420
+ <div className="k-task-summary-progress" style={{ width: "300px" }}>
421
+ <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
422
+ </div>
423
+ </GanttTask>
424
+ <GanttTaskDot />
425
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
426
+ </GanttTaskWrap>
427
+ </TableTd>
428
+ </TableRow>
429
+ <TableRow>
430
+ <TableTd>
431
+ <GanttTaskWrap style={{ left: "813px" }}>
432
+ <GanttTask style={{ width: "200px" }}>
433
+ <div className="k-task-complete" style={{ width: "112px" }}></div>
434
+ <GanttTaskContent content="UI Design"></GanttTaskContent>
435
+ </GanttTask>
436
+ <GanttTaskDot />
437
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
438
+ <div className="k-task-draghandle" style={{ left: "112px" }}></div>
439
+ </GanttTaskWrap>
440
+ </TableTd>
441
+ </TableRow>
442
+ <TableRow>
443
+ <TableTd>
444
+ <GanttTaskWrap style={{ left: "1013px" }}>
445
+ <GanttTask style={{ width: "300px" }}>
446
+ <div className="k-task-complete" style={{ width: "192px" }}></div>
447
+ <GanttTaskContent content="HTML Prototype"></GanttTaskContent>
448
+ </GanttTask>
449
+ <GanttTaskDot />
450
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
451
+ <div className="k-task-draghandle" style={{ left: "192px" }}></div>
452
+ </GanttTaskWrap>
453
+ </TableTd>
454
+ </TableRow>
455
+ <TableRow>
456
+ <TableTd>
457
+ <GanttTaskWrap type="summary" style={{ left: "1013px" }}>
458
+ <GanttTask type="summary" style={{ width: "2100px" }}>
459
+ <div className="k-task-summary-progress" style={{ width: "1617px" }}>
460
+ <div className="k-task-summary-complete" style={{ width: "2100px" }}></div>
461
+ </div>
462
+ </GanttTask>
463
+ <GanttTaskDot />
464
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
465
+ </GanttTaskWrap>
466
+ </TableTd>
467
+ </TableRow>
468
+ <TableRow>
469
+ <TableTd>
470
+ <GanttTaskWrap style={{ left: "1013px" }}>
471
+ <GanttTask style={{ width: "600px" }}>
472
+ <div className="k-task-complete" style={{ width: "462px" }}></div>
473
+ <GanttTaskContent content="Prototype"></GanttTaskContent>
474
+ </GanttTask>
475
+ <GanttTaskDot />
476
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
477
+ <div className="k-task-draghandle" style={{ left: "462px" }}></div>
478
+ </GanttTaskWrap>
479
+ </TableTd>
480
+ </TableRow>
481
+ <TableRow>
482
+ <TableTd>
483
+ <GanttTaskWrap style={{ left: "1613px" }}>
484
+ <GanttTask style={{ width: "100px" }}>
485
+ <div className="k-task-complete" style={{ width: "82px" }}></div>
486
+ <GanttTaskContent content="Architecture"></GanttTaskContent>
487
+ </GanttTask>
488
+ <GanttTaskDot />
489
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
490
+ <div className="k-task-draghandle" style={{ left: "82px" }}></div>
491
+ </GanttTaskWrap>
492
+ </TableTd>
493
+ </TableRow>
494
+ <TableRow>
495
+ <TableTd>
496
+ <GanttTaskWrap style={{ left: "1713px" }}>
497
+ <GanttTask style={{ width: "600px" }}>
498
+ <div className="k-task-complete" style={{ width: "600px" }}></div>
499
+ <GanttTaskContent content="Data Layer"></GanttTaskContent>
500
+ </GanttTask>
501
+ <GanttTaskDot />
502
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
503
+ <div className="k-task-draghandle" style={{ left: "600px" }}></div>
504
+ </GanttTaskWrap>
505
+ </TableTd>
506
+ </TableRow>
507
+ <TableRow>
508
+ <TableTd>
509
+ <GanttTaskWrap style={{ left: "2613px" }}>
510
+ <GanttTask style={{ width: "500px" }}>
511
+ <div className="k-task-complete" style={{ width: "300px" }}></div>
512
+ <GanttTaskContent content="UI and Interaction"></GanttTaskContent>
513
+ </GanttTask>
514
+ <GanttTaskDot />
515
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
516
+ <div className="k-task-draghandle" style={{ left: "300px" }}></div>
517
+ </GanttTaskWrap>
518
+ </TableTd>
519
+ </TableRow>
520
+ <TableRow>
521
+ <TableTd>
522
+ <GanttTaskWrap style={{ left: "1713px" }}>
523
+ <GanttTask style={{ width: "900px" }}>
524
+ <div className="k-task-complete" style={{ width: "612px" }}></div>
525
+ <GanttTaskContent content="Unit Tests"></GanttTaskContent>
526
+ </GanttTask>
527
+ <GanttTaskDot />
528
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
529
+ <div className="k-task-draghandle" style={{ left: "612px" }}></div>
530
+ </GanttTaskWrap>
531
+ </TableTd>
532
+ </TableRow>
533
+ <TableRow>
534
+ <TableTd>
535
+ <GanttTaskWrap type="summary" style={{ left: "2913px" }}>
536
+ <GanttTask type="summary" style={{ width: "500px" }}>
537
+ <div className="k-task-summary-progress" style={{ width: "260px" }}>
538
+ <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
539
+ </div>
540
+ </GanttTask>
541
+ <GanttTaskDot />
542
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
543
+ </GanttTaskWrap>
544
+ </TableTd>
545
+ </TableRow>
546
+ <TableRow>
547
+ <TableTd>
548
+ <GanttTaskWrap style={{ left: "2913px" }}>
549
+ <GanttTask style={{ width: "500px" }}>
550
+ <div className="k-task-complete" style={{ width: "470px" }}></div>
551
+ <GanttTaskContent content="Integration Testing"></GanttTaskContent>
552
+ </GanttTask>
553
+ <GanttTaskDot />
554
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
555
+ <div className="k-task-draghandle" style={{ left: "470px" }}></div>
556
+ </GanttTaskWrap>
557
+ </TableTd>
558
+ </TableRow>
559
+ <TableRow>
560
+ <TableTd>
561
+ <GanttTaskWrap style={{ left: "2913px" }}>
562
+ <GanttTask style={{ width: "500px" }}>
563
+ <div className="k-task-complete" style={{ width: '50px' }}></div>
564
+ <GanttTaskContent content="Load Testing"></GanttTaskContent>
565
+ </GanttTask>
566
+ <GanttTaskDot />
567
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
568
+ <div className="k-task-draghandle" style={{ left: '50px' }}></div>
569
+ </GanttTaskWrap>
570
+ </TableTd>
571
+ </TableRow>
572
+ <TableRow>
573
+ <TableTd>
574
+ <GanttTaskWrap type="summary" style={{ left: "2213px" }}>
575
+ <GanttTask type="summary" style={{ width: "1200px" }}>
576
+ <div className="k-task-summary-progress" style={{ width: "168px" }}>
577
+ <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
578
+ </div>
579
+ </GanttTask>
580
+ <GanttTaskDot />
581
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
582
+ </GanttTaskWrap>
583
+ </TableTd>
584
+ </TableRow>
585
+ <TableRow>
586
+ <TableTd>
587
+ <GanttTaskWrap style={{ left: "2213px" }}>
588
+ <GanttTask style={{ width: "300px" }}>
589
+ <div className="k-task-complete" style={{ width: "84px" }}></div>
590
+ <GanttTaskContent content="Structure"></GanttTaskContent>
591
+ </GanttTask>
592
+ <GanttTaskDot />
593
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
594
+ <div className="k-task-draghandle" style={{ left: "84px" }}></div>
595
+ </GanttTaskWrap>
596
+ </TableTd>
597
+ </TableRow>
598
+ <TableRow>
599
+ <TableTd>
600
+ <GanttTaskWrap style={{ left: "2513px" }}>
601
+ <GanttTask style={{ width: "900px" }}>
602
+ <div className="k-task-complete" style={{ width: '0px' }}></div>
603
+ <GanttTaskContent content="Articles"></GanttTaskContent>
604
+ </GanttTask>
605
+ <GanttTaskDot />
606
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
607
+ <div className="k-task-draghandle" style={{ left: '0px' }}></div>
608
+ </GanttTaskWrap>
609
+ </TableTd>
610
+ </TableRow>
611
+ <TableRow>
612
+ <TableTd>
613
+ <GanttTaskWrap type="summary" style={{ left: "2913px" }}>
614
+ <GanttTask type="summary" style={{ width: "1200px" }}>
615
+ <div className="k-task-summary-progress" style={{ width: "984px" }}>
616
+ <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
617
+ </div>
618
+ </GanttTask>
619
+ <GanttTaskDot />
620
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
621
+ </GanttTaskWrap>
622
+ </TableTd>
623
+ </TableRow>
624
+ <TableRow>
625
+ <TableTd>
626
+ <GanttTaskWrap type="milestone" style={{ left: "4113px" }}>
627
+ <GanttTask type="milestone"></GanttTask>
628
+ <GanttTaskDot />
629
+ <GanttTaskDot position="end" style={{ right: "0px" }} />
630
+ </GanttTaskWrap>
631
+ </TableTd>
632
+ </TableRow>
633
+ </TableTbody>
634
+ </GanttTasksTable>
635
+ </GanttTables>
636
+ <div className="k-gantt-dependencies" style={{ width: "4200px" }}>
637
+ <GanttLine style={{ left: "124.5px", top: "53px", width: "10px" }}></GanttLine>
638
+ <GanttLine orientation="vertical" style={{ left: "132.5px", top: "53px", height: "18px" }}></GanttLine>
639
+ <GanttLine style={{ left: "103px", top: "71px", width: "31.5px" }}></GanttLine>
640
+ <GanttLine orientation="vertical" style={{ left: "103px", top: "71px", height: "54px" }}></GanttLine>
641
+ <GanttLine style={{ left: "103px", top: "125px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
642
+ <GanttLine style={{ left: "1013px", top: "269px", width: "10px" }}></GanttLine>
643
+ <GanttLine orientation="vertical" style={{ left: "1021px", top: "269px", height: "18px" }}></GanttLine>
644
+ <GanttLine style={{ left: "1003px", top: "287px", width: "20px" }}></GanttLine>
645
+ <GanttLine orientation="vertical" style={{ left: "1003px", top: "287px", height: "18px" }}></GanttLine>
646
+ <GanttLine style={{ left: "1003px", top: "305px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
647
+ <GanttLine style={{ left: "1313px", top: "305px", width: "10px" }}></GanttLine>
648
+ <GanttLine orientation="vertical" style={{ left: "1321px", top: "305px", height: "18px" }}></GanttLine>
649
+ <GanttLine style={{ left: "1003px", top: "323px", width: "320px" }}></GanttLine>
650
+ <GanttLine orientation="vertical" style={{ left: "1003px", top: "323px", height: "54px" }}></GanttLine>
651
+ <GanttLine style={{ left: "1003px", top: "377px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
652
+ <GanttLine style={{ left: "1613px", top: "377px", width: "10px" }}></GanttLine>
653
+ <GanttLine orientation="vertical" style={{ left: "1621px", top: "377px", height: "18px" }}></GanttLine>
654
+ <GanttLine style={{ left: "1603px", top: "395px", width: "20px" }}></GanttLine>
655
+ <GanttLine orientation="vertical" style={{ left: "1603px", top: "395px", height: "18px" }}></GanttLine>
656
+ <GanttLine style={{ left: "1603px", top: "413px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
657
+ <GanttLine style={{ left: "1713px", top: "413px", width: "10px" }}></GanttLine>
658
+ <GanttLine orientation="vertical" style={{ left: "1721px", top: "413px", height: "18px" }}></GanttLine>
659
+ <GanttLine style={{ left: "1703px", top: "431px", width: "20px" }}></GanttLine>
660
+ <GanttLine orientation="vertical" style={{ left: "1703px", top: "431px", height: "18px" }}></GanttLine>
661
+ <GanttLine style={{ left: "1703px", top: "449px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
662
+ <GanttLine style={{ left: "1713px", top: "413px", width: "10px" }}></GanttLine>
663
+ <GanttLine orientation="vertical" style={{ left: "1721px", top: "413px", height: "18px" }}></GanttLine>
664
+ <GanttLine style={{ left: "1703px", top: "431px", width: "20px" }}></GanttLine>
665
+ <GanttLine orientation="vertical" style={{ left: "1703px", top: "431px", height: "90px" }}></GanttLine>
666
+ <GanttLine style={{ left: "1703px", top: "521px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
667
+ <GanttLine style={{ left: "2313px", top: "449px", width: "10px" }}></GanttLine>
668
+ <GanttLine orientation="vertical" style={{ left: "2321px", top: "449px", height: "36px" }}></GanttLine>
669
+ <GanttLine style={{ left: "2321px", top: "485px", width: "291px" }}><span className="k-arrow-e"></span></GanttLine>
670
+ <GanttLine style={{ left: "2613px", top: "521px", width: "510px" }}></GanttLine>
671
+ <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "38px" }}></GanttLine>
672
+ <GanttLine style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
673
+ <GanttLine style={{ left: "3113px", top: "485px", width: "10px" }}></GanttLine>
674
+ <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "18px" }}></GanttLine>
675
+ <GanttLine style={{ left: "2903px", top: "503px", width: "220px" }}></GanttLine>
676
+ <GanttLine orientation="vertical" style={{ left: "2903px", top: "503px", height: "90px" }}></GanttLine>
677
+ <GanttLine style={{ left: "2903px", top: "593px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
678
+ <GanttLine style={{ left: "3113px", top: "485px", width: "10px" }}></GanttLine>
679
+ <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "18px" }}></GanttLine>
680
+ <GanttLine style={{ left: "2903px", top: "503px", width: "220px" }}></GanttLine>
681
+ <GanttLine orientation="vertical" style={{ left: "2903px", top: "503px", height: "126px" }}></GanttLine>
682
+ <GanttLine style={{ left: "2903px", top: "629px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
683
+ <GanttLine style={{ left: "2513px", top: "701px", width: "10px" }}></GanttLine>
684
+ <GanttLine orientation="vertical" style={{ left: "2521px", top: "701px", height: "18px" }}></GanttLine>
685
+ <GanttLine style={{ left: "2503px", top: "719px", width: "20px" }}></GanttLine>
686
+ <GanttLine orientation="vertical" style={{ left: "2503px", top: "719px", height: "18px" }}></GanttLine>
687
+ <GanttLine style={{ left: "2503px", top: "737px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
688
+ <GanttLine style={{ left: "3413px", top: "593px", width: "10px" }}></GanttLine>
689
+ <GanttLine orientation="vertical" style={{ left: "3421px", top: "593px", height: "38px" }}></GanttLine>
690
+ <GanttLine style={{ left: "3414px", top: "629px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
691
+ <GanttLine style={{ left: "3413px", top: "629px", width: "10px" }}></GanttLine>
692
+ <GanttLine orientation="vertical" style={{ left: "3421px", top: "629px", height: "180px" }}></GanttLine>
693
+ <GanttLine style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></GanttLine>
694
+ <GanttLine style={{ left: "3413px", top: "737px", width: "10px" }}></GanttLine>
695
+ <GanttLine orientation="vertical" style={{ left: "3421px", top: "737px", height: "72px" }}></GanttLine>
696
+ <GanttLine style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></GanttLine>
697
+ <GanttLine style={{ left: "3113px", top: "341px", width: "10px" }}></GanttLine>
698
+ <GanttLine orientation="vertical" style={{ left: "3121px", top: "341px", height: "146px" }}></GanttLine>
699
+ <GanttLine style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
700
+ <GanttLine style={{ left: "124.5px", top: "53px", width: "10px" }}></GanttLine>
701
+ <GanttLine orientation="vertical" style={{ left: "132.5px", top: "53px", height: "18px" }}></GanttLine>
702
+ <GanttLine style={{ left: "103px", top: "71px", width: "31.5px" }}></GanttLine>
703
+ <GanttLine orientation="vertical" style={{ left: "103px", top: "71px", height: "90px" }}></GanttLine>
704
+ <GanttLine style={{ left: "103px", top: "161px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
705
+ <GanttLine style={{ left: "313px", top: "161px", width: "10px" }}></GanttLine>
706
+ <GanttLine orientation="vertical" style={{ left: "321px", top: "161px", height: "18px" }}></GanttLine>
707
+ <GanttLine style={{ left: "303px", top: "179px", width: "20px" }}></GanttLine>
708
+ <GanttLine orientation="vertical" style={{ left: "303px", top: "179px", height: "18px" }}></GanttLine>
709
+ <GanttLine style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
710
+ <GanttLine style={{ left: "313px", top: "125px", width: "10px" }}></GanttLine>
711
+ <GanttLine orientation="vertical" style={{ left: "321px", top: "125px", height: "18px" }}></GanttLine>
712
+ <GanttLine style={{ left: "303px", top: "143px", width: "20px" }}></GanttLine>
713
+ <GanttLine orientation="vertical" style={{ left: "303px", top: "143px", height: "54px" }}></GanttLine>
714
+ <GanttLine style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
715
+ <GanttLine style={{ left: "613px", top: "197px", width: "10px" }}></GanttLine>
716
+ <GanttLine orientation="vertical" style={{ left: "621px", top: "197px", height: "72px" }}></GanttLine>
717
+ <GanttLine style={{ left: "621px", top: "269px", width: "191px" }}><span className="k-arrow-e"></span></GanttLine>
718
+ </div>
719
+ </GridContent>
720
+ </Grid>
721
+ </SplitterPane>
722
+ ]}></Splitter>
723
+ </GanttContent>
724
+ </Gantt>
772
725
 
773
726
  </div>
774
727
  </>