igniteui-cli 8.2.0 → 8.2.3

package/templates/react/es6/projects/empty/files/src/components/navigation-header/index.js

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+
+export default class NavigationHeader extends Component {
+  state = {
+    activeItem: null,
+  };
+
+  handleClick(index) {
+    this.setState({
+      activeItem: index,
+    });
+  }
+
+  componentWillMount() {
+    let currentRoute = window.location.href.split(window.location.origin)[1];
+    if (!currentRoute) {
+      currentRoute = "/";
+    }
+    const activeItem = this.props.routes.findIndex(
+      (route) => route.path === currentRoute
+    );
+    this.setState({
+      activeItem,
+    });
+  }
+
+  render() {
+    return (
+      <nav>
+        <ul>
+          {this.props.routes.map((route, i) => (
+            <li key={i} className={this.state.activeItem === i ? "active" : ""}>
+              <NavLink
+                onClick={() => this.handleClick(i)}
+                exact
+                to={route.path}
+              >
+                {route.text}
+              </NavLink>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    );
+  }
+}

package/templates/react/es6/projects/empty/files/src/hoc/asyncComponent.js

@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+
+// https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html
+const makeCancelable = (promise) => {
+  let hasCanceled_ = false;
+
+  const wrappedPromise = new Promise((resolve, reject) => {
+    promise.then(
+      (val) => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val)),
+      (error) => (hasCanceled_ ? reject({ isCanceled: true }) : reject(error))
+    );
+  });
+
+  return {
+    promise: wrappedPromise,
+    cancel() {
+      hasCanceled_ = true;
+    },
+  };
+};
+
+/**
+ * https://medium.com/front-end-weekly/loading-components-asynchronously-in-react-app-with-an-hoc-61ca27c4fda7
+ * @param {function} importComponent
+ */
+const asyncComponent = (importComponent) => {
+  return class extends Component {
+    state = {
+      component: null,
+    };
+
+    componentDidMount() {
+      this.op = makeCancelable(importComponent());
+      this.op.promise.then((cmp) => {
+        this.setState({ component: cmp.default });
+      });
+    }
+
+    componentWillUnmount() {
+      this.op.cancel();
+    }
+
+    render() {
+      const C = this.state.component;
+      return C ? <C {...this.props} /> : null;
+    }
+  };
+};
+
+export default asyncComponent;

package/templates/react/es6/projects/empty/files/src/igniteuiResources.js

@@ -0,0 +1,7 @@
+// Ignite UI Required Style files
+import "ignite-ui/css/themes/infragistics/infragistics.theme.css";
+import "ignite-ui/css/structure/infragistics.css";
+
+// Ignite UI Required Combined JavaScript Files
+import "ignite-ui/js/infragistics.core-lite.js";
+import "ignite-ui/js/infragistics.lob-lite.js";

package/templates/react/es6/projects/empty/files/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

package/templates/react/es6/projects/empty/files/src/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+/** Required in IE11 for Charts */
+Number.isNaN = Number.isNaN || function(value) {
+  // eslint-disable-next-line
+  return value !== value;
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/templates/react/es6/projects/empty/files/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/templates/react/es6/projects/empty/files/src/routes.json

@@ -0,0 +1,7 @@
+[
+  {
+    "path": "/",
+    "componentPath": "./components/home",
+    "text": "Home"
+  }
+]

package/templates/react/es6/projects/empty/index.js

@@ -10,11 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const cli_core_1 = require("@igniteui/cli-core");
-const fs = require("fs-extra");
 const path = require("path");
 class EmptyProject {
     constructor() {
-        this._updateFile = "webpack.config.js";
+        // public _updateFile: string = "webpack.config.js";
         this.id = "react";
         this.name = "empty";
         this.description = "Ignite UI CLI project for React";
@@ -31,12 +30,6 @@ class EmptyProject {
     }
     upgradeIgniteUIPackages(projectPath, packagePath) {
         return __awaiter(this, void 0, void 0, function* () {
-            const filePath = path.join(projectPath, this._updateFile);
-            let configFile = fs.readFileSync(filePath, "utf8");
-            //comment out core + lob redirects
-            configFile = configFile.replace(`"ignite-ui/js/infragistics.core.js$"`, `//$&`);
-            configFile = configFile.replace(`"ignite-ui/js/infragistics.lob.js$"`, `//$&`);
-            fs.writeFileSync(filePath, configFile);
             return true;
         });
     }

package/templates/react/es6/radial-chart/radial-chart/files/src/components/__path__/index.js

@@ -0,0 +1,68 @@
+import { Component } from 'react';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+
+import { data } from "../../data/temperature.js";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { view: data };
+  }
+  render() {
+    return (
+      <div className="$(ClassName)">
+        <div className="$(ClassName)-header">
+          <h2 style={{textAlign: "center", marginBottom: "2vw"}}>$(description)</h2>
+        </div>
+        <div style={{float: "left", marginLeft: "33vw"}}>
+          <$(Control)
+            id="radialchart"
+            width="20vw"
+            height="400px"
+            dataSource={this.state.view}
+            responseDataKey="temperature"
+            legend={{ element: "radialLegend" }}
+            title="New York City vs. Philadelphia"
+            subtitle="A comparison of daily temperatures"
+            axes={[{
+              name: "angleAxis",
+              type: "categoryAngle",
+              label: "Time",
+              startAngleOffset: -90,
+              interval: 1
+            }, {
+              name: "radiusAxis",
+              type: "numericRadius",
+              innerRadiusExtentScale: .1,
+              maximumValue: 95,
+              minimumValue: 75,
+              interval: 5,
+              radiusExtentScale: .6
+            }]}
+            series={[{
+              name: "series1",
+              title: 'Philadelphia',
+              type: "radialArea",
+              angleAxis: "angleAxis",
+              valueAxis: "radiusAxis",
+              valueMemberPath: "PhiladelphiaTemp",
+              markerType: "circle"
+            }, {
+              name: "series2",
+              title: 'New York City',
+              type: "radialArea",
+              angleAxis: "angleAxis",
+              valueAxis: "radiusAxis",
+              valueMemberPath: "NewYorkCityTemp",
+              markerType: "circle"
+            }]}
+            horizontalZoomable={true}
+            verticalZoomable={true}
+            windowResponse="immediate"
+            />
+        </div>
+        <div id="radialLegend" style={{float: "left"}}></div>
+      </div>
+    );
+  }
+}

package/templates/react/es6/radial-chart/radial-chart/files/{client → src}/data/temperature.js

@@ -1,5 +1,5 @@
 var data = {
-	temperature: [
+  temperature: [
 { "Date": "2013.07.16", "Time": "1:00", "NewYorkCityTemp": 85.46, "PhiladelphiaTemp": 86.72 },
 { "Date": "2013.07.16", "Time": "3:00", "NewYorkCityTemp": 82.76, "PhiladelphiaTemp": 84.74 },
 { "Date": "2013.07.16", "Time": "5:00", "NewYorkCityTemp": 80.6, "PhiladelphiaTemp": 82.94 },
@@ -13,4 +13,4 @@ var data = {
 { "Date": "2013.07.16", "Time": "21:00", "NewYorkCityTemp": 88.52, "PhiladelphiaTemp": 89.78 },
 { "Date": "2013.07.16", "Time": "23:00", "NewYorkCityTemp": 88.16, "PhiladelphiaTemp": 86.72 }
 ]};
-export { data };
+export { data };

package/templates/react/es6/scatter-chart/scatter-chart/files/src/components/__path__/index.js

@@ -0,0 +1,59 @@
+import { Component } from 'react';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+import { data } from "../../data/temperature.js";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { view: data };
+  }
+  render() {
+    return (
+      <div className="$(ClassName)">
+        <div className="$(ClassName)-header">
+          <h2 style={{textAlign: "center", marginBottom: "2vw"}}>$(description)</h2>
+        </div>
+        <div style={{float: "left", marginLeft: "13vw"}}>
+          <$(Control)
+            id="scatterchart"
+            width="60vw"
+            height="400px"
+            dataSource={this.state.view}
+            responseDataKey="agriculturalData"
+            title="U.S. Agricultural Production Per Year"
+            subtitle="Data from 1961-2007"
+            axes={[{
+              name: "xAxis",
+              type: "numericX",
+              interval: 10,
+                          title: "Year"
+            }, {
+              name: "yAxis",
+              type: "numericY",
+              title: "Billions of USD",
+              maximumValue: 200000,
+              formatLabel: function (val) {
+                var bVal = (val / 1000),
+                rounded = Math.round(bVal * 100) / 100;
+                return "$"+ rounded;
+              }
+            }]}
+            series={[{
+              name: "scatter",
+              type: "scatter",
+              xAxis: "xAxis",
+              yAxis: "yAxis",
+              xMemberPath: "Year",
+              yMemberPath: "Value",
+              markerType: "circle"
+            }
+            ]}
+            horizontalZoomable={true}
+            verticalZoomable={true}
+            windowResponse="immediate"
+            />
+        </div>
+      </div>
+    );
+  }
+}

package/templates/react/es6/scatter-chart/scatter-chart/files/src/data/temperature.js

@@ -0,0 +1,58 @@
+/*
+United States Food and Agriculture gross production.
+
+Data from: http://data.un.org/
+
+Original source: http://faostat.fao.org/
+*/
+var data = {
+  agriculturalData : [
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2007, "Value_Unit": "1,000,000 Int. $", "Value": 184698, "Population_Unit": "1,000,000 People", "Population": 302 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2006, "Value_Unit": "1,000,000 Int. $", "Value": 176803, "Population_Unit": "1,000,000 People", "Population": 299 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2005, "Value_Unit": "1,000,000 Int. $", "Value": 181432, "Population_Unit": "1,000,000 People", "Population": 296 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2004, "Value_Unit": "1,000,000 Int. $", "Value": 183519, "Population_Unit": "1,000,000 People", "Population": 294 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2003, "Value_Unit": "1,000,000 Int. $", "Value": 172458, "Population_Unit": "1,000,000 People", "Population": 291 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2002, "Value_Unit": "1,000,000 Int. $", "Value": 167494, "Population_Unit": "1,000,000 People", "Population": 288 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2001, "Value_Unit": "1,000,000 Int. $", "Value": 170755, "Population_Unit": "1,000,000 People", "Population": 285 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2000, "Value_Unit": "1,000,000 Int. $", "Value": 173640, "Population_Unit": "1,000,000 People", "Population": 282 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1999, "Value_Unit": "1,000,000 Int. $", "Value": 170083, "Population_Unit": "1,000,000 People", "Population": 279 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1998, "Value_Unit": "1,000,000 Int. $", "Value": 167311, "Population_Unit": "1,000,000 People", "Population": 275 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1997, "Value_Unit": "1,000,000 Int. $", "Value": 167072, "Population_Unit": "1,000,000 People", "Population": 272 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1996, "Value_Unit": "1,000,000 Int. $", "Value": 162066, "Population_Unit": "1,000,000 People", "Population": 269 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1995, "Value_Unit": "1,000,000 Int. $", "Value": 152325, "Population_Unit": "1,000,000 People", "Population": 266 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1994, "Value_Unit": "1,000,000 Int. $", "Value": 164433, "Population_Unit": "1,000,000 People", "Population": 263 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1993, "Value_Unit": "1,000,000 Int. $", "Value": 142796, "Population_Unit": "1,000,000 People", "Population": 260 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1992, "Value_Unit": "1,000,000 Int. $", "Value": 155467, "Population_Unit": "1,000,000 People", "Population": 258 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1991, "Value_Unit": "1,000,000 Int. $", "Value": 143249, "Population_Unit": "1,000,000 People", "Population": 255 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1990, "Value_Unit": "1,000,000 Int. $", "Value": 144644, "Population_Unit": "1,000,000 People", "Population": 253 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1989, "Value_Unit": "1,000,000 Int. $", "Value": 138218, "Population_Unit": "1,000,000 People", "Population": 250 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1988, "Value_Unit": "1,000,000 Int. $", "Value": 126910, "Population_Unit": "1,000,000 People", "Population": 248 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1987, "Value_Unit": "1,000,000 Int. $", "Value": 136752, "Population_Unit": "1,000,000 People", "Population": 245 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1986, "Value_Unit": "1,000,000 Int. $", "Value": 136708, "Population_Unit": "1,000,000 People", "Population": 243 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1985, "Value_Unit": "1,000,000 Int. $", "Value": 143144, "Population_Unit": "1,000,000 People", "Population": 241 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1984, "Value_Unit": "1,000,000 Int. $", "Value": 136529, "Population_Unit": "1,000,000 People", "Population": 238 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1983, "Value_Unit": "1,000,000 Int. $", "Value": 119197, "Population_Unit": "1,000,000 People", "Population": 236 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1982, "Value_Unit": "1,000,000 Int. $", "Value": 139500, "Population_Unit": "1,000,000 People", "Population": 234 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1981, "Value_Unit": "1,000,000 Int. $", "Value": 139390, "Population_Unit": "1,000,000 People", "Population": 232 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1980, "Value_Unit": "1,000,000 Int. $", "Value": 127118, "Population_Unit": "1,000,000 People", "Population": 229 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1979, "Value_Unit": "1,000,000 Int. $", "Value": 133091, "Population_Unit": "1,000,000 People", "Population": 227 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1978, "Value_Unit": "1,000,000 Int. $", "Value": 126211, "Population_Unit": "1,000,000 People", "Population": 225 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1977, "Value_Unit": "1,000,000 Int. $", "Value": 126192, "Population_Unit": "1,000,000 People", "Population": 223 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1976, "Value_Unit": "1,000,000 Int. $", "Value": 120877, "Population_Unit": "1,000,000 People", "Population": 221 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1975, "Value_Unit": "1,000,000 Int. $", "Value": 117511, "Population_Unit": "1,000,000 People", "Population": 219 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1974, "Value_Unit": "1,000,000 Int. $", "Value": 110119, "Population_Unit": "1,000,000 People", "Population": 217 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1973, "Value_Unit": "1,000,000 Int. $", "Value": 113008, "Population_Unit": "1,000,000 People", "Population": 215 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1972, "Value_Unit": "1,000,000 Int. $", "Value": 111439, "Population_Unit": "1,000,000 People", "Population": 213 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1971, "Value_Unit": "1,000,000 Int. $", "Value": 111234, "Population_Unit": "1,000,000 People", "Population": 211 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1970, "Value_Unit": "1,000,000 Int. $", "Value": 102786, "Population_Unit": "1,000,000 People", "Population": 209 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1969, "Value_Unit": "1,000,000 Int. $", "Value": 104285, "Population_Unit": "1,000,000 People", "Population": 207 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1968, "Value_Unit": "1,000,000 Int. $", "Value": 103420, "Population_Unit": "1,000,000 People", "Population": 205 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1967, "Value_Unit": "1,000,000 Int. $", "Value": 101177, "Population_Unit": "1,000,000 People", "Population": 203 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1966, "Value_Unit": "1,000,000 Int. $", "Value": 97277, "Population_Unit": "1,000,000 People", "Population": 201 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1965, "Value_Unit": "1,000,000 Int. $", "Value": 97704, "Population_Unit": "1,000,000 People", "Population": 199 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1964, "Value_Unit": "1,000,000 Int. $", "Value": 94323, "Population_Unit": "1,000,000 People", "Population": 197 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1963, "Value_Unit": "1,000,000 Int. $", "Value": 93700, "Population_Unit": "1,000,000 People", "Population": 194 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1962, "Value_Unit": "1,000,000 Int. $", "Value": 90275, "Population_Unit": "1,000,000 People", "Population": 191 },
+    { "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1961, "Value_Unit": "1,000,000 Int. $", "Value": 89816, "Population_Unit": "1,000,000 People", "Population": 189 }
+]};
+export { data };

package/templates/react/es6/tree-grid/tree-grid/files/src/components/__path__/index.js

@@ -0,0 +1,61 @@
+import { Component } from 'react';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hierarchicalDS : [
+        {
+          "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
+          { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
+          { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
+          { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
+          { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
+          { "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
+            { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
+            { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
+            { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
+          ]},
+          {
+          "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
+            { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
+            { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
+            { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
+            { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
+          ]
+          },
+          { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
+          ]
+        }
+      ]
+    };
+  }
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <$(Control)
+          id="checkboxModeTreeGrid"
+          width="100%"
+          dataSource={this.state.hierarchicalDS}
+          autoGenerateColumns={false}
+          height="500"
+          primaryKey="id"
+          columns={[
+            { headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
+            { headerText: "Tasks", key: "tasks", width: "30%", dataType: "string" },
+            { headerText: "Start", key: "start", width: "20%", dataType: "string" },
+            { headerText: "Finish", key: "finish", width: "20%", dataType: "string" },
+            { headerText: "Duration", key: "duration", width: "20%", dataType: "string" },
+            { headerText: "Progress", key: "progress", width: "10%", dataType: "string" }
+          ]}
+          childDataKey="products"
+          features={$(treeGridFeatures)}
+        />
+          </div>
+    );
+  }
+}

package/templates/react/es6/tree-grid/tree-grid-custom/files/src/components/__path__/index.js

@@ -0,0 +1,62 @@
+import { Component } from 'react';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hierarchicalDS : [
+        {
+          "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
+          { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
+          { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
+          { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
+          { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
+          { "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
+            { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
+            { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
+            { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
+          ]},
+          {
+          "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
+            { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
+            { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
+            { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
+            { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
+          ]
+          },
+          { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
+          ]
+        }
+      ]
+    };
+  }
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <$(Control)
+          id="checkboxModeTreeGrid"
+          width="100%"
+          dataSource={this.state.hierarchicalDS}
+          autoGenerateColumns={false}
+          autoCommit={true}
+          height="500"
+          primaryKey="id"
+          columns={[
+            { headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
+            { headerText: "Tasks", key: "tasks", width: "30%", dataType: "string" },
+            { headerText: "Start", key: "start", width: "20%", dataType: "string" },
+            { headerText: "Finish", key: "finish", width: "20%", dataType: "string" },
+            { headerText: "Duration", key: "duration", width: "20%", dataType: "string" },
+            { headerText: "Progress", key: "progress", width: "10%", dataType: "string" }
+          ]}
+          childDataKey="products"
+          features={$(treeGridFeatures)}
+        />
+          </div>
+    );
+  }
+}

package/templates/react/es6/tree-grid/tree-grid-editing/files/src/components/__path__/index.js

@@ -0,0 +1,62 @@
+import { Component } from 'react';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hierarchicalDS : [
+        {
+          "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%", "products": [
+          { "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
+          { "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
+          { "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
+          { "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
+          { "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%", "products": [
+            { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
+            { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
+            { "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
+          ]},
+          {
+          "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%", "products": [
+            { "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
+            { "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
+            { "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
+            { "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
+          ]
+          },
+          { "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
+          ]
+        }
+      ]
+    };
+  }
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <$(Control)
+          id="checkboxModeTreeGrid"
+          width="100%"
+          dataSource={this.state.hierarchicalDS}
+          autoGenerateColumns={false}
+          autoCommit={true}
+          height="500"
+          primaryKey="id"
+          columns={[
+            { headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
+            { headerText: "Tasks", key: "tasks", width: "30%", dataType: "string" },
+            { headerText: "Start", key: "start", width: "20%", dataType: "string" },
+            { headerText: "Finish", key: "finish", width: "20%", dataType: "string" },
+            { headerText: "Duration", key: "duration", width: "20%", dataType: "string" },
+            { headerText: "Progress", key: "progress", width: "10%", dataType: "string" }
+          ]}
+          childDataKey="products"
+          features={$(treeGridFeatures)}
+        />
+          </div>
+    );
+  }
+}