diff --git a/packages/html/src/gantt/tests/gantt-react.tsx b/packages/html/src/gantt/tests/gantt-react.tsx
index 4fb60b23a1b..c61bca72d14 100644
--- a/packages/html/src/gantt/tests/gantt-react.tsx
+++ b/packages/html/src/gantt/tests/gantt-react.tsx
@@ -1,8 +1,10 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
-
+import { Gantt, GanttHeaderToolbar, GanttContent, GanttColumnsTable, GanttTaskDot, GanttTask } from '../../gantt';
+import { TreeList } from '../../treelist';
+import { GridHeaderCell } from '../../grid';
+import { Table, TableThead, TableRow, TableTbody, TableTd } from '../../table';
 
 const styles = `
     .k-gantt {
@@ -15,8 +17,8 @@ export default () =>(
         <style>{styles}</style>
         <div id="test-area">
 
-            <div className="k-gantt">
-                <Toolbar className="k-gantt-toolbar k-gantt-header">
+            <Gantt toolbar={(
+                <GanttHeaderToolbar>
                     <span className="k-spacer"></span>
                     <span className="k-gantt-views">
                         <div className="k-gantt-views-wrapper">
@@ -32,151 +34,152 @@ export default () =>(
                             </select>
                         </div>
                     </span>
-                </Toolbar>
-                <div className="k-gantt-content">
-                    <div className="k-grid k-grid-md k-treelist-scrollable">
-                        <table className="k-table k-table-md k-table-layout-fixed" style={{ width: "4500px" }}>
+                </GanttHeaderToolbar>
+            )}>
+                <GanttContent>
+                    <TreeList className="k-treelist-scrollable">
+                        <Table size="medium" className="k-table-layout-fixed" style={{ width: "4500px" }}>
                             <colgroup>
                                 <col style={{ width: "100px" }} />
                                 <col style={{ width: "200px" }} />
                                 <col style={{ width: "4200px" }} />
                             </colgroup>
-                            <thead className="k-table-thead k-grid-header">
-                                <tr className="k-table-row">
-                                    <th colSpan={2} rowSpan={1} className="k-table-th k-header k-grid-header-sticky" style={{ left: '0px', right: '0px', borderRightWidth: "1px; top: 0px" }}><a className="k-link">summary</a></th>
-                                    <th colSpan={1} rowSpan={2} className="k-table-th k-header" style={{ top: '0px' }}>
-                                        <table className="k-table k-table-md">
-                                            <tbody className="k-table-tbody">
-                                                <tr className="k-table-row">
-                                                    <td colSpan={7} className="k-table-td k-header k-nonwork-hour">Sun, 6/1 - Sun, 6/8</td>
-                                                    <td colSpan={7} className="k-table-td k-header k-nonwork-hour">Sun, 6/8 - Sun, 6/15</td>
-                                                    <td colSpan={7} className="k-table-td k-header k-nonwork-hour">Sun, 6/15 - Sun, 6/22</td>
-                                                    <td colSpan={7} className="k-table-td k-header k-nonwork-hour">Sun, 6/22 - Sun, 6/29</td>
-                                                    <td colSpan={7} className="k-table-td k-header k-nonwork-hour">Sun, 6/29 - Sun, 7/6</td>
-                                                    <td colSpan={7} className="k-table-td k-header k-nonwork-hour">Sun, 7/6 - Sun, 7/13</td>
-                                                </tr>
-                                                <tr className="k-table-row">
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun, 6/1</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Mon, 6/2</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Tue, 6/3</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Wed, 6/4</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Thu, 6/5</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Fri, 6/6</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat, 6/7</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun, 6/8</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Mon, 6/9</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Tue, 6/10</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Wed, 6/11</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Thu, 6/12</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Fri, 6/13</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat, 6/14</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun, 6/15</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Mon, 6/16</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Tue, 6/17</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Wed, 6/18</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Thu, 6/19</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Fri, 6/20</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat, 6/21</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun, 6/22</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Mon, 6/23</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Tue, 6/24</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Wed, 6/25</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Thu, 6/26</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Fri, 6/27</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat, 6/28</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun, 6/29</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Mon, 6/30</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Tue, 7/1</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Wed, 7/2</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Thu, 7/3</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Fri, 7/4</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat, 7/5</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun, 7/6</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Mon, 7/7</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Tue, 7/8</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Wed, 7/9</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Thu, 7/10</td>
-                                                    <td colSpan={1} className="k-table-td k-header">Fri, 7/11</td>
-                                                    <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat, 7/12</td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
-                                    </th>
-                                </tr>
-                                <tr className="k-table-row">
-                                    <th colSpan={1} rowSpan={1} className="k-table-th k-header k-grid-header-sticky" style={{ left: '0px', right: "200px; top: 37px" }}>
+                            <TableThead className="k-grid-header">
+                                <TableRow >
+                                    <GridHeaderCell colspan={2} rowspan={1} sticky style={{ left: '0px', right: '0px', borderRightWidth: "1px; top: 0px" }}><a className="k-link">summary</a></GridHeaderCell>
+                                    <GridHeaderCell colspan={1} rowspan={2} style={{ top: '0px' }}>
+                                        <Table size="medium">
+                                            <TableTbody>
+                                                <TableRow >
+                                                    <GridHeaderCell colspan={7} className="k-nonwork-hour">Sun, 6/1 - Sun, 6/8</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} className="k-nonwork-hour">Sun, 6/8 - Sun, 6/15</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} className="k-nonwork-hour">Sun, 6/15 - Sun, 6/22</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} className="k-nonwork-hour">Sun, 6/22 - Sun, 6/29</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} className="k-nonwork-hour">Sun, 6/29 - Sun, 7/6</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} className="k-nonwork-hour">Sun, 7/6 - Sun, 7/13</GridHeaderCell>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sun, 6/1</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon, 6/2</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue, 6/3</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed, 6/4</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu, 6/5</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri, 6/6</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sat, 6/7</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sun, 6/8</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon, 6/9</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue, 6/10</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed, 6/11</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu, 6/12</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri, 6/13</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sat, 6/14</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sun, 6/15</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon, 6/16</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue, 6/17</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed, 6/18</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu, 6/19</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri, 6/20</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sat, 6/21</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sun, 6/22</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon, 6/23</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue, 6/24</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed, 6/25</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu, 6/26</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri, 6/27</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sat, 6/28</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sun, 6/29</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon, 6/30</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue, 7/1</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed, 7/2</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu, 7/3</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri, 7/4</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sat, 7/5</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sun, 7/6</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon, 7/7</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue, 7/8</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed, 7/9</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu, 7/10</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri, 7/11</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className=" k-nonwork-hour">Sat, 7/12</GridHeaderCell>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </Table>
+                                    </GridHeaderCell>
+                                </TableRow>
+                                <TableRow >
+                                    <GridHeaderCell colspan={1} rowspan={1} sticky style={{ left: '0px', right: "200px; top: 37px" }}>
                                         <a className="k-link">id title</a>
-                                    </th>
-                                    <th colSpan={1} rowSpan={1} className="k-table-th k-header k-grid-header-sticky" style={{ left: "100px", right: '0px', borderRightWidth: "1px; top: 37px" }}>
+                                    </GridHeaderCell>
+                                    <GridHeaderCell colspan={1} rowspan={1} sticky style={{ left: "100px", right: '0px', borderRightWidth: "1px; top: 37px" }}>
                                         <a className="k-link">title</a>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody className="k-table-tbody">
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                    </GridHeaderCell>
+                                </TableRow>
+                            </TableThead>
+                            <TableTbody >
+                                <TableRow className="k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                         7
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
                                         Software validation, research and implementation
-                                    </td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-summary" style={{ left: "83px", top: "15px", width: "4000px" }}>
+                                    </TableTd>
+                                    <TableTd >
+                                        <GanttTask type="summary" style={{ left: "83px", top: "15px", width: "4000px" }}>
                                             <div className="k-task-summary-progress" style={{ width: "1828px" }}>
                                                 <div className="k-task-summary-complete"></div>
                                             </div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />18
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
                                         Project Kickoff
-                                    </td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-milestone" style={{ left: "77px", top: "13px" }}>
+                                    </TableTd>
+                                    <TableTd >
+                                        <GanttTask type="milestone" style={{ left: "77px", top: "13px" }}>
                                             <div className="k-task-milestone-content"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                         11
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
                                         Research
-                                    </td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-summary" style={{ left: "83px", top: "15px", width: "500px" }}>
+                                    </TableTd>
+                                    <TableTd >
+                                        <GanttTask type="summary" style={{ left: "83px", top: "15px", width: "500px" }}>
                                             <div className="k-task-summary-progress" style={{ width: "288px" }}>
                                                 <div className="k-task-summary-complete"></div>
                                             </div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />19
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
                                         Validation with Customers
-                                    </td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "83px", top: "8px", width: "200px" }}>
+                                    </TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "83px", top: "8px", width: "200px" }}>
                                             <div className="k-task-complete" style={{ width: '50px' }}></div>
                                             <div className="k-task-content">Validation with Customers</div>
                                             <span className="k-task-actions">
@@ -187,22 +190,22 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />20
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
                                         Market Research
-                                    </td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "83px", top: "8px", width: "200px" }}>
+                                    </TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "83px", top: "8px", width: "200px" }}>
                                             <div className="k-task-complete" style={{ width: '50px' }}></div>
                                             <div className="k-task-content">Market Research</div>
                                             <span className="k-task-actions">
@@ -213,22 +216,22 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />39
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
                                         Functional and Technical Specification
-                                    </td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "283px", top: "8px", width: "300px" }}>
+                                    </TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "283px", top: "8px", width: "300px" }}>
                                             <div className="k-task-complete" style={{ width: "198px" }}></div>
                                             <div className="k-task-content">Functional and Technical Specification</div>
                                             <span className="k-task-actions">
@@ -239,37 +242,37 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                         12
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Design</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-summary" style={{ left: "783px", top: "15px", width: "500px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Design</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="summary" style={{ left: "783px", top: "15px", width: "500px" }}>
                                             <div className="k-task-summary-progress" style={{ width: "300px" }}>
                                                 <div className="k-task-summary-complete"></div>
                                             </div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />22
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>UI Design</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "783px", top: "8px", width: "200px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>UI Design</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "783px", top: "8px", width: "200px" }}>
                                             <div className="k-task-complete" style={{ width: "112px" }}></div>
                                             <div className="k-task-content">UI Design</div>
                                             <span className="k-task-actions">
@@ -280,20 +283,20 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row k-selected" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask >
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-selected" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />23
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>HTML Prototype</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "983px", top: "8px", width: "300px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>HTML Prototype</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "983px", top: "8px", width: "300px" }}>
                                             <div className="k-task-complete" style={{ width: "192px" }}></div>
                                             <div className="k-task-content">HTML Prototype</div>
                                             <span className="k-task-actions">
@@ -304,37 +307,37 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                         13
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Implementation</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-summary" style={{ left: "983px", top: "15px", width: "2100px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Implementation</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="summary" style={{ left: "983px", top: "15px", width: "2100px" }}>
                                             <div className="k-task-summary-progress" style={{ width: "1617px" }}>
                                                 <div className="k-task-summary-complete"></div>
                                             </div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />24
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Prototype</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "983px", top: "8px", width: "600px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Prototype</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "983px", top: "8px", width: "600px" }}>
                                             <div className="k-task-complete" style={{ width: "462px" }}></div>
                                             <div className="k-task-content">Prototype</div>
                                             <span className="k-task-actions">
@@ -345,20 +348,20 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />26
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Architecture</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "1583px", top: "8px", width: "100px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Architecture</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "1583px", top: "8px", width: "100px" }}>
                                             <div className="k-task-complete" style={{ width: "82px" }}></div>
                                             <div className="k-task-content">Architecture</div>
                                             <span className="k-task-actions">
@@ -369,20 +372,20 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />27
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Data Layer</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "1683px", top: "8px", width: "600px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Data Layer</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "1683px", top: "8px", width: "600px" }}>
                                             <div className="k-task-complete" style={{ width: "300px" }}></div>
                                             <div className="k-task-content">Data Layer</div>
                                             <span className="k-task-actions">
@@ -393,22 +396,22 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />29
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>
                                         UI and Interaction
-                                    </td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "2583px", top: "8px", width: "500px" }}>
+                                    </TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "2583px", top: "8px", width: "500px" }}>
                                             <div className="k-task-complete" style={{ width: "300px" }}></div>
                                             <div className="k-task-content">UI and Interaction</div>
                                             <span className="k-task-actions">
@@ -419,20 +422,20 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />28
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Unit Tests</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-single" style={{ left: "1683px", top: "8px", width: "900px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Unit Tests</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="single" style={{ left: "1683px", top: "8px", width: "900px" }}>
                                             <div className="k-task-complete" style={{ width: "612px" }}></div>
                                             <div className="k-task-content">Unit Tests</div>
                                             <span className="k-task-actions">
@@ -443,78 +446,78 @@ export default () =>(
                                             <span className="k-resize-handle k-resize-w"></span>
                                             <span className="k-resize-handle k-resize-e"></span>
                                             <div className="k-task-draghandle"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="  k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                         14
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Testing</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-summary" style={{ left: "2883px", top: "15px", width: "500px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Testing</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="summary" style={{ left: "2883px", top: "15px", width: "500px" }}>
                                             <div className="k-task-summary-progress" style={{ width: "260px" }}>
                                                 <div className="k-task-summary-complete"></div>
                                             </div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className=" k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                         30
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Documentation</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-summary" style={{ left: "2183px", top: "15px", width: "1200px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Documentation</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="summary" style={{ left: "2183px", top: "15px", width: "1200px" }}>
                                             <div className="k-task-summary-progress" style={{ width: "168px" }}>
                                                 <div className="k-task-summary-complete"></div>
                                             </div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-table-alt-row k-master-row k-alt" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="  k-master-row k-alt" style={{ height: "40px" }} alt>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                         31
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Demos</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-summary" style={{ left: "2883px", top: "15px", width: "1200px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Demos</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="summary" style={{ left: "2883px", top: "15px", width: "1200px" }}>
                                             <div className="k-task-summary-progress" style={{ width: "984px" }}>
                                                 <div className="k-task-summary-complete"></div>
                                             </div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                                <tr className="k-table-row k-master-row" style={{ height: "40px" }}>
-                                    <td className="k-table-td k-grid-content-sticky k-text-nowrap" colSpan={1} style={{ left: '0px', right: "200px" }}>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                                <TableRow className="k-table-row k-master-row" style={{ height: "40px" }}>
+                                    <TableTd className=" k-grid-content-sticky k-text-nowrap" colspan={1} style={{ left: '0px', right: "200px" }}>
                                         <Icon className="k-treelist-toggle" icon="none" />
                                         <Icon className="k-treelist-toggle" icon="none" />17
-                                    </td>
-                                    <td className="k-table-td k-grid-content-sticky" colSpan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Release</td>
-                                    <td className="k-table-td">
-                                        <div className="k-task k-task-milestone" style={{ left: "4077px", top: "13px" }}>
+                                    </TableTd>
+                                    <TableTd className=" k-grid-content-sticky" colspan={1} style={{ left: "100px", right: '0px', borderRightWidth: "1px" }}>Release</TableTd>
+                                    <TableTd >
+                                        <GanttTask type="milestone" style={{ left: "4077px", top: "13px" }}>
                                             <div className="k-task-milestone-content"></div>
-                                            <div className="k-task-dot k-task-start"></div>
-                                            <div className="k-task-dot k-task-end"></div>
-                                        </div>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                            <GanttTaskDot />
+                                            <GanttTaskDot position="end" />
+                                        </GanttTask>
+                                    </TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </Table>
                         <svg className="k-gantt-dependencies-svg">
                             <polyline points="391,135 401,135 401,155 373,155 373,214 379,214 379,216 382,214 379,212 379,214"></polyline>
                             <polyline points="1283,374 1293,374 1293,394 1273,394 1273,414 1279,414 1279,416 1282,414 1279,412 1279,414"></polyline>
@@ -532,57 +535,57 @@ export default () =>(
                             <polyline points="2883,614 1973,614 1973,654 1979,654 1979,656 1982,654 1979,652 1979,654"></polyline>
                             <polyline points="383,94 373,94 373,114 893,114 893,174 887,174 887,172 884,174 887,176 887,174"></polyline>
                         </svg>
-                        <table className="k-table k-table-md k-gantt-columns" style={{ top: "74px", left: "300px", width: "4200px", height: "760px" }}>
-                            <tbody className="k-table-tbody">
-                                <tr className="k-table-row">
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td"></td>
-                                    <td colSpan={1} className="k-table-td k-nonwork-hour"></td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
+                        <GanttColumnsTable style={{ top: "74px", left: "300px", width: "4200px", height: "760px" }}>
+                            <TableTbody >
+                                <TableRow >
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} ></TableTd>
+                                    <TableTd colspan={1} className=" k-nonwork-hour"></TableTd>
+                                </TableRow>
+                            </TableTbody>
+                        </GanttColumnsTable>
+                    </TreeList>
+                </GanttContent>
+            </Gantt>
         </div>
     </>
 );
diff --git a/packages/html/src/gantt/tests/gantt-row-reordering.tsx b/packages/html/src/gantt/tests/gantt-row-reordering.tsx
index c9483ae08a7..ccffef2b77d 100644
--- a/packages/html/src/gantt/tests/gantt-row-reordering.tsx
+++ b/packages/html/src/gantt/tests/gantt-row-reordering.tsx
@@ -1,7 +1,11 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
+import { Gantt, GanttHeaderToolbar, GanttFooterToolbar, GanttContent, GanttTables, GanttColumnsTable, GanttRowsTable, GanttTasksTable, GanttTaskDot, GanttTaskWrap, GanttTask, GanttTaskContent, GanttLine } from '../../gantt';
+import { TreeList } from '../../treelist';
+import { Splitter, SplitterPane } from '../../splitter';
+import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
+import { TableThead, TableRow, TableTbody, TableTd } from '../../table';
 
 const styles = `
     .k-gantt {
@@ -21,754 +25,703 @@ export default () => (
         <style>{styles}</style>
         <div id="test-area">
 
-            <div id="gantt" className="k-widget k-gantt">
-                <Toolbar className="k-gantt-toolbar k-gantt-header">
-                    <Button className="k-gantt-toggle" icon="layout-1-by-4"></Button>
-                    <Button className="k-gantt-create" icon="plus">Add Task</Button>
-                    <span className="k-spacer"></span>
-                    <div className="k-gantt-views-wrapper">
-                        <select className="k-picker k-picker-solid k-dropdown-list k-dropdown k-views-dropdown k-rounded-md">
-                            <option value="day">Day</option>
-                            <option value="week">Week</option>
-                            <option value="month">Month</option>
-                        </select>
-                        <ButtonGroup className="k-gantt-views">
-                            <Button className="k-view-day">Day</Button>
-                            <Button className="k-view-week" selected>Week</Button>
-                            <Button className="k-view-month">Month</Button>
-                        </ButtonGroup>
-                    </div>
-                </Toolbar>
-                <div className="k-gantt-content">
-                    <div className="k-gantt-treelist">
-                        <div className="k-treelist k-grid k-grid-md k-grid-display-block">
-                            <div className="k-table-thead k-grid-header">
-                                <div className="k-grid-header-wrap">
-                                    <table className="k-table k-table-md k-grid-header-table" style={{ minWidth: "250px" }}>
-                                        <colgroup>
-                                            <col className="k-drag-col"/>
-                                            <col style={{ width: '50px' }} />
-                                            <col />
-                                        </colgroup>
-                                        <thead className="k-table-thead">
-                                            <tr className="k-table-row">
-                                                <th className="k-table-th k-header k-drag-cell"></th>
-                                                <th className="k-table-th k-header" rowSpan={1}>
-                                                    <span className="k-cell-inner">
-                                                        <span className="k-link">
-                                                            <span className="k-column-title">ID</span>
-                                                        </span>
-                                                    </span>
-                                                </th>
-                                                <th className="k-table-th k-header" rowSpan={1}>
-                                                    <span className="k-cell-inner">
-                                                        <span className="k-link">
-                                                            <span className="k-column-title">Title</span>
-                                                        </span>
-                                                    </span>
-                                                </th>
-                                            </tr>
-                                        </thead>
-                                    </table>
-                                </div>
-                            </div>
-                            <div className="k-grid-content k-auto-scrollable" style={{ height: "530px", display: "block" }}>
-                                <table className="k-table k-table-md k-grid-table k-selectable" style={{ minWidth: "250px" }}>
-                                    <colgroup>
-                                        <col className="k-drag-col" />
-                                        <col style={{ width: '50px' }} />
-                                        <col />
-                                    </colgroup>
-                                    <tbody className="k-table-tbody">
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">7</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="caret-alt-down" />Software validation, research and implementation</td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">18</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">11</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">19</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">20</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">39</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">12</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">22</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">23</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">13</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">24</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">26</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">27</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">29</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">28</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">14</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">32</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">33</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">30</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">34</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">35</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">31</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon icon="caret-alt-right" />Demos</td>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td k-drag-cell"><Icon icon="reorder" /></td>
-                                            <td className="k-table-td">17</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Release</td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
+            <Gantt
+                footer={(
+                    <GanttFooterToolbar><Button className="k-gantt-create" icon="plus">Add Task</Button></GanttFooterToolbar>
+                )}
+                toolbar={(
+                    <GanttHeaderToolbar>
+                        <Button className="k-gantt-toggle" icon="layout-1-by-4"></Button>
+                        <Button className="k-gantt-create" icon="plus">Add Task</Button>
+                        <span className="k-spacer"></span>
+                        <div className="k-gantt-views-wrapper">
+                            <select className="k-picker k-picker-solid k-dropdown-list k-dropdown k-views-dropdown k-rounded-md">
+                                <option value="day">Day</option>
+                                <option value="week">Week</option>
+                                <option value="month">Month</option>
+                            </select>
+                            <ButtonGroup className="k-gantt-views">
+                                <Button className="k-view-day">Day</Button>
+                                <Button className="k-view-week" selected>Week</Button>
+                                <Button className="k-view-month">Month</Button>
+                            </ButtonGroup>
                         </div>
-                    </div>
-                    <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ height: "604px" }}>
-                        <div className="k-resize-handle"></div>
-                    </div>
-                    <div className="k-gantt-timeline-pane">
-                        <div className="k-gantt-timeline k-grid k-grid-md">
-                            <div className="k-grid-header">
-                                <div className="k-grid-header-wrap">
-                                    <table className="k-table k-table-md k-grid-header-table" style={{ width: "4200px" }}>
-                                        <colgroup>
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/01 - Sat 6/07</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/08 - Sat 6/14</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/15 - Sat 6/21</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/22 - Sat 6/28</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/29 - Sat 7/05</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 7/06 - Sat 7/12</td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/01</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/02</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/03</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/04</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/05</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/06</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/07</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/08</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/09</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/10</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/11</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/12</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/13</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/14</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/15</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/16</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/17</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/18</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/19</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/20</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/21</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/22</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/23</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/24</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/25</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/26</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/27</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/28</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/29</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/30</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 7/01</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 7/02</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 7/03</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 7/04</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 7/05</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 7/06</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 7/07</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 7/08</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 7/09</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 7/10</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 7/11</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 7/12</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                            <div className="k-grid-content" style={{ height: "530px" }}>
-                                <div className="k-gantt-tables">
-                                    <table className="k-table k-table-md k-grid-table k-gantt-rows" style={{ width: "4200px" }}>
-                                        <colgroup>
-                                            <col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                        </tbody>
-                                    </table>
-                                    <table className="k-table k-table-md k-gantt-columns" style={{ width: "4200px", height: "828px" }}>
-                                        <colgroup>
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                    <table className="k-table k-table-md k-gantt-tasks" style={{ width: "4200px" }}>
-                                        <colgroup>
-                                            <col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "4000px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "1720px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "4000px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-milestone-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-milestone"></div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "500px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "215px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "200px" }}>
-                                                            <div className="k-task-complete" style={{ width: '50px' }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Validation with Customers</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: '50px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "200px" }}>
-                                                            <div className="k-task-complete" style={{ width: "164px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Market Research</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "164px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "313px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "300px" }}>
-                                                            <div className="k-task-complete" style={{ width: "69px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Functional and Technical Specification</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "69px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "813px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "500px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "300px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "813px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "200px" }}>
-                                                            <div className="k-task-complete" style={{ width: "112px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">UI Design</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "112px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1013px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "300px" }}>
-                                                            <div className="k-task-complete" style={{ width: "192px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">HTML Prototype</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "192px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "1013px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "2100px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "1617px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "2100px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1013px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "600px" }}>
-                                                            <div className="k-task-complete" style={{ width: "462px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Prototype</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "462px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1613px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "100px" }}>
-                                                            <div className="k-task-complete" style={{ width: "82px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Architecture</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "82px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1713px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "600px" }}>
-                                                            <div className="k-task-complete" style={{ width: "600px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Data Layer</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "600px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2613px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "500px" }}>
-                                                            <div className="k-task-complete" style={{ width: "300px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">UI and Interaction</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "300px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1713px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "900px" }}>
-                                                            <div className="k-task-complete" style={{ width: "612px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Unit Tests</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "612px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "500px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "260px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "500px" }}>
-                                                            <div className="k-task-complete" style={{ width: "470px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Integration Testing</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "470px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "500px" }}>
-                                                            <div className="k-task-complete" style={{ width: '50px' }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Load Testing</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: '50px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "2213px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "1200px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "168px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2213px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "300px" }}>
-                                                            <div className="k-task-complete" style={{ width: "84px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Structure</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "84px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2513px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "900px" }}>
-                                                            <div className="k-task-complete" style={{ width: '0px' }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Articles</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "1200px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "984px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-milestone-wrap" style={{ left: "4113px" }}>
-                                                        <div className="k-task k-task-milestone"></div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                                <div className="k-gantt-dependencies" style={{ width: "4200px" }}>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "124.5px", top: "53px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "132.5px", top: "53px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "71px", width: "31.5px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "103px", top: "71px", height: "54px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "125px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1013px", top: "269px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1021px", top: "269px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "287px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1003px", top: "287px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "305px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1313px", top: "305px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1321px", top: "305px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "323px", width: "320px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1003px", top: "323px", height: "54px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "377px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1613px", top: "377px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1621px", top: "377px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1603px", top: "395px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1603px", top: "395px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1603px", top: "413px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1713px", top: "413px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1721px", top: "413px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "431px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1703px", top: "431px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "449px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1713px", top: "413px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1721px", top: "413px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "431px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1703px", top: "431px", height: "90px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "521px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2313px", top: "449px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2321px", top: "449px", height: "36px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2321px", top: "485px", width: "291px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2613px", top: "521px", width: "510px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "38px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "485px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "503px", width: "220px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2903px", top: "503px", height: "90px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "593px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "485px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "503px", width: "220px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2903px", top: "503px", height: "126px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "629px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2513px", top: "701px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2521px", top: "701px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2503px", top: "719px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2503px", top: "719px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2503px", top: "737px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "593px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "593px", height: "38px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3414px", top: "629px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "629px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "629px", height: "180px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "737px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "737px", height: "72px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "341px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "341px", height: "146px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "124.5px", top: "53px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "132.5px", top: "53px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "71px", width: "31.5px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "103px", top: "71px", height: "90px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "161px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "313px", top: "161px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "321px", top: "161px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "179px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "303px", top: "179px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "313px", top: "125px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "321px", top: "125px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "143px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "303px", top: "143px", height: "54px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "613px", top: "197px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "621px", top: "197px", height: "72px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "621px", top: "269px", width: "191px" }}><span className="k-arrow-e"></span></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <Toolbar className="k-gantt-toolbar k-gantt-footer">
-                    <Button className="k-gantt-create" icon="plus">Add Task</Button>
-                </Toolbar>
-            </div>
+                    </GanttHeaderToolbar>
+                )}>
+                <GanttContent>
+                    <Splitter children={[
+                        <SplitterPane className="k-gantt-treelist" flexBasis="30%">
+                            <TreeList className="k-grid-display-block">
+                                <GridHeader>
+                                    <div className="k-grid-header-wrap">
+                                        <GridHeaderTable style={{ minWidth: "250px" }}>
+                                            <colgroup>
+                                                <col className="k-drag-col"/>
+                                                <col style={{ width: '50px' }} />
+                                                <col />
+                                            </colgroup>
+                                            <TableThead>
+                                                <TableRow>
+                                                    <GridHeaderCell className="k-drag-cell"></GridHeaderCell>
+                                                    <GridHeaderCell rowspan={1} columnTitle="ID"></GridHeaderCell>
+                                                    <GridHeaderCell rowspan={1} columnTitle="Title"></GridHeaderCell>
+                                                </TableRow>
+                                            </TableThead>
+                                        </GridHeaderTable>
+                                    </div>
+                                </GridHeader>
+                                <GridContainer>
+                                    <GridContent className="k-auto-scrollable" style={{ height: "530px", display: "block" }}>
+                                        <GridTable className="k-selectable" style={{ minWidth: "250px" }}>
+                                            <colgroup>
+                                                <col className="k-drag-col" />
+                                                <col style={{ width: '50px' }} />
+                                                <col />
+                                            </colgroup>
+                                            <TableTbody className="k-table-TableTbody">
+                                                <TableRow className="k-treelist-group">
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >7</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="caret-alt-down" />Software validation, research and implementation</TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >18</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Project Kickoff</TableTd>
+                                                </TableRow>
+                                                <TableRow className=" k-treelist-group">
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >11</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Research</TableTd>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >19</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >20</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >39</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-treelist-group">
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >12</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Design</TableTd>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >22</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >23</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt k-treelist-group">
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >13</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Implementation</TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >24</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >26</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >27</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >29</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >28</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt k-treelist-group">
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >14</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Testing</TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >32</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >33</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-treelist-group">
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >30</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="caret-alt-down" />Documentation</TableTd>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt>
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >34</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >35</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt k-treelist-group">
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >31</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon icon="caret-alt-right" />Demos</TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd className="k-drag-cell"><Icon icon="reorder" /></TableTd>
+                                                    <TableTd >17</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Release</TableTd>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GridTable>
+                                    </GridContent>
+                                </GridContainer>
+                            </TreeList>
+                        </SplitterPane>,
+                        <SplitterPane className="k-gantt-timeline-pane">
+                            <Grid className="k-gantt-timeline">
+                                <GridHeader>
+                                    <div className="k-grid-header-wrap">
+                                        <GridHeaderTable style={{ width: "4200px" }}>
+                                            <colgroup>
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow >
+                                                    <GridHeaderCell colspan={7}>Sun 6/01 - Sat 6/07</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7}>Sun 6/08 - Sat 6/14</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7}>Sun 6/15 - Sat 6/21</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7}>Sun 6/22 - Sat 6/28</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7}>Sun 6/29 - Sat 7/05</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7}>Sun 7/06 - Sat 7/12</GridHeaderCell>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/01</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Mon 6/02</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Tue 6/03</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Wed 6/04</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Thu 6/05</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Fri 6/06</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/07</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/08</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Mon 6/09</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Tue 6/10</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Wed 6/11</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Thu 6/12</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Fri 6/13</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/14</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/15</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Mon 6/16</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Tue 6/17</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Wed 6/18</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Thu 6/19</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Fri 6/20</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/21</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/22</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Mon 6/23</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Tue 6/24</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Wed 6/25</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Thu 6/26</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Fri 6/27</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/28</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/29</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Mon 6/30</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Tue 7/01</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Wed 7/02</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Thu 7/03</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Fri 7/04</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 7/05</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 7/06</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Mon 7/07</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Tue 7/08</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Wed 7/09</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Thu 7/10</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1}>Fri 7/11</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 7/12</GridHeaderCell>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GridHeaderTable>
+                                    </div>
+                                </GridHeader>
+                                <GridContent style={{ height: "530px" }}>
+                                    <GanttTables>
+                                        <GanttRowsTable className="k-grid-table" style={{ width: "4200px" }}>
+                                            <colgroup>
+                                                <col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-table-alt-row k-alt" alt><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                            </TableTbody>
+                                        </GanttRowsTable>
+                                        <GanttColumnsTable style={{ width: "4200px", height: "828px" }}>
+                                            <colgroup>
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow >
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GanttColumnsTable>
+                                        <GanttTasksTable style={{ width: "4200px" }}>
+                                            <colgroup>
+                                                <col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "113px" }}>
+                                                            <GanttTask type="summary" style={{ width: "4000px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "1720px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "4000px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="milestone" style={{ left: "113px" }}>
+                                                            <GanttTask type="milestone"></GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "113px" }}>
+                                                            <GanttTask type="summary" style={{ width: "500px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "215px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "113px" }}>
+                                                            <GanttTask style={{ width: "200px" }}>
+                                                                <div className="k-task-complete" style={{ width: '50px' }}></div>
+                                                                <GanttTaskContent content="Validation with Customers"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: '50px' }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "113px" }}>
+                                                            <GanttTask style={{ width: "200px" }}>
+                                                                <div className="k-task-complete" style={{ width: "164px" }}></div>
+                                                                <GanttTaskContent content="Market Research"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "164px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "313px" }}>
+                                                            <GanttTask style={{ width: "300px" }}>
+                                                                <div className="k-task-complete" style={{ width: "69px" }}></div>
+                                                                <GanttTaskContent content="Functional and Technical Specification"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "69px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "813px" }}>
+                                                            <GanttTask type="summary" style={{ width: "500px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "300px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "813px" }}>
+                                                            <GanttTask style={{ width: "200px" }}>
+                                                                <div className="k-task-complete" style={{ width: "112px" }}></div>
+                                                                <GanttTaskContent content="UI Design"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "112px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1013px" }}>
+                                                            <GanttTask style={{ width: "300px" }}>
+                                                                <div className="k-task-complete" style={{ width: "192px" }}></div>
+                                                                <GanttTaskContent content="HTML Prototype"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "192px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "1013px" }}>
+                                                            <GanttTask type="summary" style={{ width: "2100px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "1617px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "2100px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1013px" }}>
+                                                            <GanttTask style={{ width: "600px" }}>
+                                                                <div className="k-task-complete" style={{ width: "462px" }}></div>
+                                                                <GanttTaskContent content="Prototype"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "462px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1613px" }}>
+                                                            <GanttTask style={{ width: "100px" }}>
+                                                                <div className="k-task-complete" style={{ width: "82px" }}></div>
+                                                                <GanttTaskContent content="Architecture"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "82px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1713px" }}>
+                                                            <GanttTask style={{ width: "600px" }}>
+                                                                <div className="k-task-complete" style={{ width: "600px" }}></div>
+                                                                <GanttTaskContent content="Data Layer"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "600px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2613px" }}>
+                                                            <GanttTask style={{ width: "500px" }}>
+                                                                <div className="k-task-complete" style={{ width: "300px" }}></div>
+                                                                <GanttTaskContent content="UI and Interaction"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "300px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1713px" }}>
+                                                            <GanttTask style={{ width: "900px" }}>
+                                                                <div className="k-task-complete" style={{ width: "612px" }}></div>
+                                                                <GanttTaskContent content="Unit Tests"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "612px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "2913px" }}>
+                                                            <GanttTask type="summary" style={{ width: "500px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "260px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2913px" }}>
+                                                            <GanttTask style={{ width: "500px" }}>
+                                                                <div className="k-task-complete" style={{ width: "470px" }}></div>
+                                                                <GanttTaskContent content="Integration Testing"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "470px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2913px" }}>
+                                                            <GanttTask style={{ width: "500px" }}>
+                                                                <div className="k-task-complete" style={{ width: '50px' }}></div>
+                                                                <GanttTaskContent content="Load Testing"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: '50px' }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "2213px" }}>
+                                                            <GanttTask type="summary" style={{ width: "1200px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "168px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2213px" }}>
+                                                            <GanttTask style={{ width: "300px" }}>
+                                                                <div className="k-task-complete" style={{ width: "84px" }}></div>
+                                                                <GanttTaskContent content="Structure"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "84px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2513px" }}>
+                                                            <GanttTask style={{ width: "900px" }}>
+                                                                <div className="k-task-complete" style={{ width: '0px' }}></div>
+                                                                <GanttTaskContent content="Articles"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: '0px' }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "2913px" }}>
+                                                            <GanttTask type="summary" style={{ width: "1200px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "984px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="milestone" style={{ left: "4113px" }}>
+                                                            <GanttTask type="milestone"></GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GanttTasksTable>
+                                    </GanttTables>
+                                    <div className="k-gantt-dependencies" style={{ width: "4200px" }}>
+                                        <GanttLine style={{ left: "124.5px", top: "53px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "132.5px", top: "53px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "71px", width: "31.5px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "103px", top: "71px", height: "54px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "125px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1013px", top: "269px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1021px", top: "269px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "287px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1003px", top: "287px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "305px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1313px", top: "305px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1321px", top: "305px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "323px", width: "320px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1003px", top: "323px", height: "54px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "377px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1613px", top: "377px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1621px", top: "377px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1603px", top: "395px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1603px", top: "395px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1603px", top: "413px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1713px", top: "413px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1721px", top: "413px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "431px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1703px", top: "431px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "449px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1713px", top: "413px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1721px", top: "413px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "431px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1703px", top: "431px", height: "90px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "521px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "2313px", top: "449px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2321px", top: "449px", height: "36px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2321px", top: "485px", width: "291px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "2613px", top: "521px", width: "510px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "38px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
+                                        <GanttLine style={{ left: "3113px", top: "485px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "503px", width: "220px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2903px", top: "503px", height: "90px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "593px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3113px", top: "485px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "503px", width: "220px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2903px", top: "503px", height: "126px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "629px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "2513px", top: "701px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2521px", top: "701px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2503px", top: "719px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2503px", top: "719px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2503px", top: "737px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3413px", top: "593px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3421px", top: "593px", height: "38px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3414px", top: "629px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
+                                        <GanttLine style={{ left: "3413px", top: "629px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3421px", top: "629px", height: "180px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3413px", top: "737px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3421px", top: "737px", height: "72px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3113px", top: "341px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "341px", height: "146px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
+                                        <GanttLine style={{ left: "124.5px", top: "53px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "132.5px", top: "53px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "71px", width: "31.5px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "103px", top: "71px", height: "90px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "161px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "313px", top: "161px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "321px", top: "161px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "179px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "303px", top: "179px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "313px", top: "125px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "321px", top: "125px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "143px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "303px", top: "143px", height: "54px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "613px", top: "197px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "621px", top: "197px", height: "72px" }}></GanttLine>
+                                        <GanttLine style={{ left: "621px", top: "269px", width: "191px" }}><span className="k-arrow-e"></span></GanttLine>
+                                    </div>
+                                </GridContent>
+                            </Grid>
+                        </SplitterPane>
+                    ]}></Splitter>
+                </GanttContent>
+            </Gantt>
 
         </div>
     </>
diff --git a/packages/html/src/gantt/tests/gantt.tsx b/packages/html/src/gantt/tests/gantt.tsx
index f104d88c1ef..7a471401f7f 100644
--- a/packages/html/src/gantt/tests/gantt.tsx
+++ b/packages/html/src/gantt/tests/gantt.tsx
@@ -1,8 +1,11 @@
 import { Button } from '../../button';
 import { ButtonGroup } from '../../button-group';
 import { Icon } from '../../icon';
-//import { Toolbar } from '../../toolbar';
-import { Gantt, GanttHeaderToolbar, GanttFooterToolbar, GanttContent, GanttTreelist, GanttTimelinePane, GanttTimeline } from '../../gantt';
+import { Gantt, GanttHeaderToolbar, GanttFooterToolbar, GanttContent, GanttTables, GanttColumnsTable, GanttRowsTable, GanttTasksTable, GanttTaskDot, GanttTaskWrap, GanttTask, GanttTaskContent, GanttLine } from '../../gantt';
+import { TreeList } from '../../treelist';
+import { Splitter, SplitterPane } from '../../splitter';
+import { Grid, GridHeader, GridHeaderTable, GridHeaderCell, GridContainer, GridContent, GridTable } from '../../grid';
+import { TableThead, TableRow, TableTbody, TableTd } from '../../table';
 
 const styles = `
     .k-gantt {
@@ -23,746 +26,699 @@ export default () =>(
         <div id="test-area">
 
             <Gantt
-                footer={<GanttFooterToolbar><Button className="k-gantt-create" icon="plus">Add Task</Button></GanttFooterToolbar>}>
-                <GanttHeaderToolbar>
-                    <Button className="k-gantt-toggle" icon="layout-1-by-4"></Button>
-                    <Button className="k-gantt-create" icon="plus">Add Task</Button>
-                    <span className="k-spacer"></span>
-                    <div className="k-gantt-views-wrapper">
-                        <select className="k-picker k-picker-solid k-dropdown-list k-dropdown k-views-dropdown k-rounded-md">
-                            <option value="day">Day</option>
-                            <option value="week">Week</option>
-                            <option value="month">Month</option>
-                        </select>
-                        <ButtonGroup className="k-gantt-views">
-                            <Button className="k-view-day">Day</Button>
-                            <Button className="k-view-week" selected>Week</Button>
-                            <Button className="k-view-month">Month</Button>
-                        </ButtonGroup>
-                    </div>
-                </GanttHeaderToolbar>
+                toolbar={(
+                    <GanttHeaderToolbar>
+                        <Button className="k-gantt-toggle" icon="layout-1-by-4"></Button>
+                        <Button className="k-gantt-create" icon="plus">Add Task</Button>
+                        <span className="k-spacer"></span>
+                        <div className="k-gantt-views-wrapper">
+                            <select className="k-picker k-picker-solid k-dropdown-list k-dropdown k-views-dropdown k-rounded-md">
+                                <option value="day">Day</option>
+                                <option value="week">Week</option>
+                                <option value="month">Month</option>
+                            </select>
+                            <ButtonGroup className="k-gantt-views">
+                                <Button className="k-view-day">Day</Button>
+                                <Button className="k-view-week" selected>Week</Button>
+                                <Button className="k-view-month">Month</Button>
+                            </ButtonGroup>
+                        </div>
+                    </GanttHeaderToolbar>
+                )}
+                footer={(
+                    <GanttFooterToolbar><Button className="k-gantt-create" icon="plus">Add Task</Button></GanttFooterToolbar>
+                )}>
                 <GanttContent>
-                    <GanttTreelist>
-                        <div className="k-treelist k-grid k-grid-md k-grid-display-block">
-                            <div className="k-table-thead k-grid-header">
-                                <div className="k-grid-header-wrap">
-                                    <table className="k-table k-table-md k-grid-header-table" style={{ minWidth: "250px" }}>
-                                        <colgroup>
-                                            <col style={{ width: '50px' }} />
-                                            <col />
-                                        </colgroup>
-                                        <thead className="k-table-thead">
-                                            <tr className="k-table-row">
-                                                <th className="k-table-th k-header" rowSpan={1}>
-                                                    <span className="k-cell-inner">
-                                                        <span className="k-link">
-                                                            <span className="k-column-title">ID</span>
-                                                        </span>
-                                                    </span>
-                                                </th>
-                                                <th className="k-table-th k-header" rowSpan={1}>
-                                                    <span className="k-cell-inner">
-                                                        <span className="k-link">
-                                                            <span className="k-column-title">Title</span>
-                                                        </span>
-                                                    </span>
-                                                </th>
-                                            </tr>
-                                        </thead>
-                                    </table>
-                                </div>
-                            </div>
-                            <div className="k-grid-content k-auto-scrollable" style={{ height: "530px", display: "block" }}>
-                                <table className="k-table k-table-md k-grid-table k-selectable" style={{ minWidth: "250px" }}>
-                                    <colgroup>
-                                        <col style={{ width: '50px' }} />
-                                        <col />
-                                    </colgroup>
-                                    <tbody className="k-table-tbody">
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td">7</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td">
-                                                <Icon className="k-treelist-toggle" icon="caret-alt-down" />
-                                                Software validation, research and implementation
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">18</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td">11</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" />
-                                                <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                    <Splitter children={[
+                        <SplitterPane className="k-gantt-treelist" flexBasis="30%">
+                            <TreeList className="k-grid-display-block">
+                                <GridHeader>
+                                    <div className="k-grid-header-wrap">
+                                        <GridHeaderTable style={{ minWidth: "250px" }}>
+                                            <colgroup>
+                                                <col style={{ width: '50px' }} />
+                                                <col />
+                                            </colgroup>
+                                            <TableThead>
+                                                <TableRow>
+                                                    <GridHeaderCell rowspan={1} columnTitle="ID"></GridHeaderCell>
+                                                    <GridHeaderCell rowspan={1} columnTitle="Title"></GridHeaderCell>
+                                                </TableRow>
+                                            </TableThead>
+                                        </GridHeaderTable>
+                                    </div>
+                                </GridHeader>
+                                <GridContainer>
+                                    <GridContent className="k-auto-scrollable" style={{ height: "530px", display: "block" }}>
+                                        <GridTable className="k-selectable" style={{ minWidth: "250px" }}>
+                                            <colgroup>
+                                                <col style={{ width: '50px' }} />
+                                                <col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow className="k-treelist-group">
+                                                    <TableTd >7</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} >
+                                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                                        Software validation, research and implementation
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >18</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Project Kickoff</TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-treelist-group">
+                                                    <TableTd >11</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" />
+                                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                                 Research
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">19</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">20</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">39</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td">12</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" />
-                                                <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >19</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow>
+                                                    <TableTd >20</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >39</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className="k-treelist-group">
+                                                    <TableTd >12</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" />
+                                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                                 Design
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">22</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">23</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                            <td className="k-table-td">13</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" />
-                                                <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >22</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow>
+                                                    <TableTd >23</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className="k-alt k-treelist-group" alt>
+                                                    <TableTd >13</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" />
+                                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                                 Implementation
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">24</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">26</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">27</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">29</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">28</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                            <td className="k-table-td">14</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td">
-                                                <Icon className="k-treelist-toggle" icon="none" />
-                                                <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow>
+                                                    <TableTd >24</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >26</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >27</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-alt" alt>
+                                                    <TableTd >29</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >28</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-alt k-treelist-group" alt>
+                                                    <TableTd >14</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} >
+                                                        <Icon className="k-treelist-toggle" icon="none" />
+                                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                                 Testing
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">32</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">33</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-treelist-group">
-                                            <td className="k-table-td">30</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" />
-                                                <Icon className="k-treelist-toggle" icon="caret-alt-down" />
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >32</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-alt" alt>
+                                                    <TableTd >33</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-treelist-group">
+                                                    <TableTd >30</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" />
+                                                        <Icon className="k-treelist-toggle" icon="caret-alt-down" />
                                                 Documentation
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt">
-                                            <td className="k-table-td">34</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">35</td>
-                                            <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>
-                                        </tr>
-                                        <tr className="k-table-row k-table-alt-row k-alt k-treelist-group">
-                                            <td className="k-table-td">31</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" />
-                                                <Icon className="k-treelist-toggle" icon="caret-alt-right" />
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className=" k-alt" alt>
+                                                    <TableTd >34</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >35</TableTd>
+                                                    <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>
+                                                </TableRow>
+                                                <TableRow className=" k-alt k-treelist-group" alt>
+                                                    <TableTd >31</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" />
+                                                        <Icon className="k-treelist-toggle" icon="caret-alt-right" />
                                                 Demos
-                                            </td>
-                                        </tr>
-                                        <tr className="k-table-row">
-                                            <td className="k-table-td">17</td>
-                                            <td style={{ whiteSpace: "nowrap" }} className="k-table-td"><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Release</td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </GanttTreelist>
-                    <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ height: "604px" }}>
-                        <div className="k-resize-handle"></div>
-                    </div>
-                    <GanttTimelinePane>
-                        <GanttTimeline className="k-grid k-grid-md">
-                            <div className="k-grid-header">
-                                <div className="k-grid-header-wrap">
-                                    <table className="k-table k-table-md k-grid-header-table" style={{ width: "4200px" }}>
-                                        <colgroup>
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/01 - Sat 6/07</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/08 - Sat 6/14</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/15 - Sat 6/21</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/22 - Sat 6/28</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 6/29 - Sat 7/05</td>
-                                                <td colSpan={7} className="k-table-td k-header">Sun 7/06 - Sat 7/12</td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/01</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/02</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/03</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/04</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/05</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/06</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/07</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/08</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/09</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/10</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/11</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/12</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/13</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/14</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/15</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/16</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/17</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/18</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/19</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/20</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/21</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/22</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/23</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 6/24</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 6/25</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 6/26</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 6/27</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 6/28</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 6/29</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 6/30</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 7/01</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 7/02</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 7/03</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 7/04</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 7/05</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sun 7/06</td>
-                                                <td colSpan={1} className="k-table-td k-header">Mon 7/07</td>
-                                                <td colSpan={1} className="k-table-td k-header">Tue 7/08</td>
-                                                <td colSpan={1} className="k-table-td k-header">Wed 7/09</td>
-                                                <td colSpan={1} className="k-table-td k-header">Thu 7/10</td>
-                                                <td colSpan={1} className="k-table-td k-header">Fri 7/11</td>
-                                                <td colSpan={1} className="k-table-td k-header k-nonwork-hour">Sat 7/12</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                            <div className="k-grid-content" style={{ height: "530px" }}>
-                                <div className="k-gantt-tables">
-                                    <table className="k-table k-table-md k-grid-table k-gantt-rows" style={{ width: "4200px" }}>
-                                        <colgroup>
-                                            <col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row k-table-alt-row k-alt"><td className="k-table-td"></td></tr>
-                                            <tr className="k-table-row"><td className="k-table-td"></td></tr>
-                                        </tbody>
-                                    </table>
-                                    <table className="k-table k-table-md k-gantt-columns" style={{ width: "4200px", height: "828px" }}>
-                                        <colgroup>
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                            <col /><col /><col /><col /><col /><col /><col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                                <td className="k-table-td k-nonwork-hour"></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><td className="k-table-td"></td>
-                                                <td className="k-table-td k-nonwork-hour"></td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                    <table className="k-table k-table-md k-gantt-tasks" style={{ width: "4200px" }}>
-                                        <colgroup>
-                                            <col />
-                                        </colgroup>
-                                        <tbody className="k-table-tbody">
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "4000px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "1720px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "4000px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-milestone-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-milestone"></div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "500px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "215px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "200px" }}>
-                                                            <div className="k-task-complete" style={{ width: '50px' }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Validation with Customers</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: '50px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "113px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "200px" }}>
-                                                            <div className="k-task-complete" style={{ width: "164px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Market Research</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "164px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "313px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "300px" }}>
-                                                            <div className="k-task-complete" style={{ width: "69px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Functional and Technical Specification</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "69px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "813px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "500px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "300px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "813px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "200px" }}>
-                                                            <div className="k-task-complete" style={{ width: "112px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">UI Design</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "112px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1013px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "300px" }}>
-                                                            <div className="k-task-complete" style={{ width: "192px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">HTML Prototype</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "192px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "1013px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "2100px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "1617px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "2100px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1013px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "600px" }}>
-                                                            <div className="k-task-complete" style={{ width: "462px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Prototype</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "462px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1613px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "100px" }}>
-                                                            <div className="k-task-complete" style={{ width: "82px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Architecture</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "82px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1713px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "600px" }}>
-                                                            <div className="k-task-complete" style={{ width: "600px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Data Layer</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "600px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2613px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "500px" }}>
-                                                            <div className="k-task-complete" style={{ width: "300px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">UI and Interaction</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "300px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "1713px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "900px" }}>
-                                                            <div className="k-task-complete" style={{ width: "612px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Unit Tests</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "612px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "500px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "260px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "500px" }}>
-                                                            <div className="k-task-complete" style={{ width: "470px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Integration Testing</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "470px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "500px" }}>
-                                                            <div className="k-task-complete" style={{ width: '50px' }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Load Testing</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: '50px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "2213px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "1200px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "168px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2213px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "300px" }}>
-                                                            <div className="k-task-complete" style={{ width: "84px" }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Structure</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: "84px" }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap" style={{ left: "2513px" }}>
-                                                        <div className="k-task k-task-single" style={{ width: "900px" }}>
-                                                            <div className="k-task-complete" style={{ width: '0px' }}></div>
-                                                            <div className="k-task-content">
-                                                                <div className="k-task-template">Articles</div>
-                                                                <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>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                        <div className="k-task-draghandle" style={{ left: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-summary-wrap" style={{ left: "2913px" }}>
-                                                        <div className="k-task k-task-summary" style={{ width: "1200px" }}>
-                                                            <div className="k-task-summary-progress" style={{ width: "984px" }}>
-                                                                <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
-                                                            </div>
-                                                        </div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                            <tr className="k-table-row">
-                                                <td className="k-table-td">
-                                                    <div className="k-task-wrap k-milestone-wrap" style={{ left: "4113px" }}>
-                                                        <div className="k-task k-task-milestone"></div>
-                                                        <div className="k-task-dot k-task-start"></div>
-                                                        <div className="k-task-dot k-task-end" style={{ right: '0px' }}></div>
-                                                    </div>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                                <div className="k-gantt-dependencies" style={{ width: "4200px" }}>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "124.5px", top: "53px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "132.5px", top: "53px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "71px", width: "31.5px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "103px", top: "71px", height: "54px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "125px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1013px", top: "269px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1021px", top: "269px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "287px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1003px", top: "287px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "305px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1313px", top: "305px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1321px", top: "305px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "323px", width: "320px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1003px", top: "323px", height: "54px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1003px", top: "377px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1613px", top: "377px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1621px", top: "377px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1603px", top: "395px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1603px", top: "395px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1603px", top: "413px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1713px", top: "413px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1721px", top: "413px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "431px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1703px", top: "431px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "449px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1713px", top: "413px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1721px", top: "413px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "431px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "1703px", top: "431px", height: "90px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "1703px", top: "521px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2313px", top: "449px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2321px", top: "449px", height: "36px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2321px", top: "485px", width: "291px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2613px", top: "521px", width: "510px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "38px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "485px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "503px", width: "220px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2903px", top: "503px", height: "90px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "593px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "485px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "485px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "503px", width: "220px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2903px", top: "503px", height: "126px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2903px", top: "629px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2513px", top: "701px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2521px", top: "701px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2503px", top: "719px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "2503px", top: "719px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "2503px", top: "737px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "593px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "593px", height: "38px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3414px", top: "629px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "629px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "629px", height: "180px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3413px", top: "737px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3421px", top: "737px", height: "72px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3113px", top: "341px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "3121px", top: "341px", height: "146px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "124.5px", top: "53px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "132.5px", top: "53px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "71px", width: "31.5px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "103px", top: "71px", height: "90px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "103px", top: "161px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "313px", top: "161px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "321px", top: "161px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "179px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "303px", top: "179px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "313px", top: "125px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "321px", top: "125px", height: "18px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "143px", width: "20px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "303px", top: "143px", height: "54px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "613px", top: "197px", width: "10px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-v" style={{ left: "621px", top: "197px", height: "72px" }}></div>
-                                    <div className="k-gantt-line k-gantt-line-h" style={{ left: "621px", top: "269px", width: "191px" }}><span className="k-arrow-e"></span></div>
-                                </div>
-                                <div className="k-current-time" style={{ left: "243px", top: "0px", width: "1px", height: "828px" }}></div>
-                            </div>
-                        </GanttTimeline>
-                    </GanttTimelinePane>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >17</TableTd>
+                                                    <TableTd style={{ whiteSpace: "nowrap" }} ><Icon className="k-treelist-toggle" icon="none" /><Icon className="k-treelist-toggle" icon="none" />Release</TableTd>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GridTable>
+                                    </GridContent>
+                                </GridContainer>
+                            </TreeList>
+                        </SplitterPane>,
+                        <SplitterPane className="k-gantt-timeline-pane">
+                            <Grid className="k-gantt-timeline">
+                                <GridHeader>
+                                    <div className="k-grid-header-wrap">
+                                        <GridHeaderTable style={{ width: "4200px" }}>
+                                            <colgroup>
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow >
+                                                    <GridHeaderCell colspan={7} >Sun 6/01 - Sat 6/07</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} >Sun 6/08 - Sat 6/14</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} >Sun 6/15 - Sat 6/21</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} >Sun 6/22 - Sat 6/28</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} >Sun 6/29 - Sat 7/05</GridHeaderCell>
+                                                    <GridHeaderCell colspan={7} >Sun 7/06 - Sat 7/12</GridHeaderCell>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/01</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon 6/02</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue 6/03</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed 6/04</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu 6/05</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri 6/06</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/07</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/08</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon 6/09</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue 6/10</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed 6/11</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu 6/12</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri 6/13</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/14</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/15</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon 6/16</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue 6/17</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed 6/18</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu 6/19</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri 6/20</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/21</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/22</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon 6/23</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue 6/24</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed 6/25</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu 6/26</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri 6/27</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 6/28</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 6/29</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon 6/30</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue 7/01</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed 7/02</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu 7/03</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri 7/04</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 7/05</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sun 7/06</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Mon 7/07</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Tue 7/08</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Wed 7/09</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Thu 7/10</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} >Fri 7/11</GridHeaderCell>
+                                                    <GridHeaderCell colspan={1} className="k-nonwork-hour">Sat 7/12</GridHeaderCell>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GridHeaderTable>
+                                    </div>
+                                </GridHeader>
+                                <GridContent style={{ height: "530px" }}>
+                                    <GanttTables>
+                                        <GanttRowsTable className="k-grid-table" style={{ width: "4200px" }}>
+                                            <colgroup>
+                                                <col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                                <TableRow className=" k-alt"><TableTd ></TableTd></TableRow>
+                                                <TableRow ><TableTd ></TableTd></TableRow>
+                                            </TableTbody>
+                                        </GanttRowsTable>
+                                        <GanttColumnsTable style={{ width: "4200px", height: "828px" }}>
+                                            <colgroup>
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                                <col /><col /><col /><col /><col /><col /><col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow >
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                    <TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd><TableTd ></TableTd>
+                                                    <TableTd className=" k-nonwork-hour"></TableTd>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GanttColumnsTable>
+                                        <GanttTasksTable style={{ width: "4200px" }}>
+                                            <colgroup>
+                                                <col />
+                                            </colgroup>
+                                            <TableTbody>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "113px" }}>
+                                                            <GanttTask type="summary" style={{ width: "4000px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "1720px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "4000px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="milestone" style={{ left: "113px" }}>
+                                                            <GanttTask type="milestone"></GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "113px" }}>
+                                                            <GanttTask type="summary" style={{ width: "500px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "215px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "113px" }}>
+                                                            <GanttTask style={{ width: "200px" }}>
+                                                                <div className="k-task-complete" style={{ width: '50px' }}></div>
+                                                                <GanttTaskContent content="Validation with Customers"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: '50px' }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "113px" }}>
+                                                            <GanttTask style={{ width: "200px" }}>
+                                                                <div className="k-task-complete" style={{ width: "164px" }}></div>
+                                                                <GanttTaskContent content="Market Research"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "164px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "313px" }}>
+                                                            <GanttTask style={{ width: "300px" }}>
+                                                                <div className="k-task-complete" style={{ width: "69px" }}></div>
+                                                                <GanttTaskContent content="Functional and Technical Specification"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "69px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "813px" }}>
+                                                            <GanttTask type="summary" style={{ width: "500px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "300px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "813px" }}>
+                                                            <GanttTask style={{ width: "200px" }}>
+                                                                <div className="k-task-complete" style={{ width: "112px" }}></div>
+                                                                <GanttTaskContent content="UI Design"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "112px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1013px" }}>
+                                                            <GanttTask style={{ width: "300px" }}>
+                                                                <div className="k-task-complete" style={{ width: "192px" }}></div>
+                                                                <GanttTaskContent content="HTML Prototype"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "192px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "1013px" }}>
+                                                            <GanttTask type="summary" style={{ width: "2100px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "1617px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "2100px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1013px" }}>
+                                                            <GanttTask style={{ width: "600px" }}>
+                                                                <div className="k-task-complete" style={{ width: "462px" }}></div>
+                                                                <GanttTaskContent content="Prototype"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "462px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1613px" }}>
+                                                            <GanttTask style={{ width: "100px" }}>
+                                                                <div className="k-task-complete" style={{ width: "82px" }}></div>
+                                                                <GanttTaskContent content="Architecture"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "82px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1713px" }}>
+                                                            <GanttTask style={{ width: "600px" }}>
+                                                                <div className="k-task-complete" style={{ width: "600px" }}></div>
+                                                                <GanttTaskContent content="Data Layer"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "600px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2613px" }}>
+                                                            <GanttTask style={{ width: "500px" }}>
+                                                                <div className="k-task-complete" style={{ width: "300px" }}></div>
+                                                                <GanttTaskContent content="UI and Interaction"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "300px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "1713px" }}>
+                                                            <GanttTask style={{ width: "900px" }}>
+                                                                <div className="k-task-complete" style={{ width: "612px" }}></div>
+                                                                <GanttTaskContent content="Unit Tests"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "612px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "2913px" }}>
+                                                            <GanttTask type="summary" style={{ width: "500px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "260px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "500px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2913px" }}>
+                                                            <GanttTask style={{ width: "500px" }}>
+                                                                <div className="k-task-complete" style={{ width: "470px" }}></div>
+                                                                <GanttTaskContent content="Integration Testing"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "470px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2913px" }}>
+                                                            <GanttTask style={{ width: "500px" }}>
+                                                                <div className="k-task-complete" style={{ width: '50px' }}></div>
+                                                                <GanttTaskContent content="Load Testing"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: '50px' }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "2213px" }}>
+                                                            <GanttTask type="summary" style={{ width: "1200px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "168px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2213px" }}>
+                                                            <GanttTask style={{ width: "300px" }}>
+                                                                <div className="k-task-complete" style={{ width: "84px" }}></div>
+                                                                <GanttTaskContent content="Structure"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: "84px" }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap style={{ left: "2513px" }}>
+                                                            <GanttTask style={{ width: "900px" }}>
+                                                                <div className="k-task-complete" style={{ width: '0px' }}></div>
+                                                                <GanttTaskContent content="Articles"></GanttTaskContent>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                            <div className="k-task-draghandle" style={{ left: '0px' }}></div>
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow className="k-alt" alt>
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="summary" style={{ left: "2913px" }}>
+                                                            <GanttTask type="summary" style={{ width: "1200px" }}>
+                                                                <div className="k-task-summary-progress" style={{ width: "984px" }}>
+                                                                    <div className="k-task-summary-complete" style={{ width: "1200px" }}></div>
+                                                                </div>
+                                                            </GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                                <TableRow >
+                                                    <TableTd >
+                                                        <GanttTaskWrap type="milestone" style={{ left: "4113px" }}>
+                                                            <GanttTask type="milestone"></GanttTask>
+                                                            <GanttTaskDot />
+                                                            <GanttTaskDot position="end" />
+                                                        </GanttTaskWrap>
+                                                    </TableTd>
+                                                </TableRow>
+                                            </TableTbody>
+                                        </GanttTasksTable>
+                                    </GanttTables>
+                                    <div className="k-gantt-dependencies" style={{ width: "4200px" }}>
+                                        <GanttLine style={{ left: "124.5px", top: "53px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "132.5px", top: "53px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "71px", width: "31.5px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "103px", top: "71px", height: "54px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "125px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1013px", top: "269px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1021px", top: "269px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "287px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1003px", top: "287px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "305px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1313px", top: "305px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1321px", top: "305px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "323px", width: "320px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1003px", top: "323px", height: "54px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1003px", top: "377px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1613px", top: "377px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1621px", top: "377px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1603px", top: "395px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1603px", top: "395px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1603px", top: "413px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1713px", top: "413px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1721px", top: "413px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "431px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1703px", top: "431px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "449px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "1713px", top: "413px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1721px", top: "413px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "431px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "1703px", top: "431px", height: "90px" }}></GanttLine>
+                                        <GanttLine style={{ left: "1703px", top: "521px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "2313px", top: "449px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2321px", top: "449px", height: "36px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2321px", top: "485px", width: "291px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "2613px", top: "521px", width: "510px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "38px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
+                                        <GanttLine style={{ left: "3113px", top: "485px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "503px", width: "220px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2903px", top: "503px", height: "90px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "593px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3113px", top: "485px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "485px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "503px", width: "220px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2903px", top: "503px", height: "126px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2903px", top: "629px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "2513px", top: "701px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2521px", top: "701px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2503px", top: "719px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "2503px", top: "719px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "2503px", top: "737px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3413px", top: "593px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3421px", top: "593px", height: "38px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3414px", top: "629px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
+                                        <GanttLine style={{ left: "3413px", top: "629px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3421px", top: "629px", height: "180px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3413px", top: "737px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3421px", top: "737px", height: "72px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3421px", top: "809px", width: "679.5px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "3113px", top: "341px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "3121px", top: "341px", height: "146px" }}></GanttLine>
+                                        <GanttLine style={{ left: "3114px", top: "485px", width: "7px" }}><span className="k-caret-alt-left"></span></GanttLine>
+                                        <GanttLine style={{ left: "124.5px", top: "53px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "132.5px", top: "53px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "71px", width: "31.5px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "103px", top: "71px", height: "90px" }}></GanttLine>
+                                        <GanttLine style={{ left: "103px", top: "161px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "313px", top: "161px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "321px", top: "161px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "179px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "303px", top: "179px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "313px", top: "125px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "321px", top: "125px", height: "18px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "143px", width: "20px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "303px", top: "143px", height: "54px" }}></GanttLine>
+                                        <GanttLine style={{ left: "303px", top: "197px", width: "9px" }}><span className="k-arrow-e"></span></GanttLine>
+                                        <GanttLine style={{ left: "613px", top: "197px", width: "10px" }}></GanttLine>
+                                        <GanttLine orientation="vertical" style={{ left: "621px", top: "197px", height: "72px" }}></GanttLine>
+                                        <GanttLine style={{ left: "621px", top: "269px", width: "191px" }}><span className="k-arrow-e"></span></GanttLine>
+                                    </div>
+                                    <div className="k-current-time" style={{ left: "243px", top: "0px", width: "1px", height: "828px" }}></div>
+                                </GridContent>
+                            </Grid>
+                        </SplitterPane>
+                    ]}>
+
+                    </Splitter>
                 </GanttContent>
             </Gantt>
         </div>