igniteui-cli 8.2.0 → 8.2.3

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

@@ -0,0 +1,124 @@
+import { Component } from 'react';
+import * as $ from 'jquery';
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_core.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_collections.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_text.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_io.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_ui.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.documents.core_core.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_collectionsextended.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.excel_core.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_threading.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_web.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.xml.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.documents.core_openxml.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.excel_serialization_openxml.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.gridexcelexporter.js";
+import "file-saver";
+import $(Control) from "igniteui-react/ui/$(widget).js";
+import IgCombo from "igniteui-react/ui/igCombo.js";
+import IgButton from "igniteui-react/ui/igButton.js";
+import "./styles.css";
+
+export default class  $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      options: {
+        summaries: false
+      },
+      employees : [
+        { "EmployeeID": "56250fa57ab1535722e564a6", "FirstName": "Downs", "LastName": "Holcomb", "Country": "Italy", "Age": 35, "RegistererDate": "07/25/2015", "IsActive": false },
+        { "EmployeeID": "56250fa5c0fd04f12555d44d",  "FirstName": "Mckenzie", "LastName": "Calderon", "Country": "USA", "Age": 26, "RegistererDate": "09/22/2014", "IsActive": false  },
+        { "EmployeeID": "56250fa565a7bcc21f6bd15e",  "FirstName": "Howell", "LastName": "Hawkins", "Country": "Canada", "Age": 25, "RegistererDate": "08/08/2015", "IsActive": false  },
+        { "EmployeeID": "56250fa5d71a83c33f3f6479",  "FirstName": "Sheppard", "LastName": "Nicholson", "Country": "Italy", "Age": 49, "RegistererDate": "06/28/2014", "IsActive": false },
+        { "EmployeeID": "56250fa546abbe8c616d37eb",  "FirstName": "Bettye", "LastName": "Trujillo", "Country": "Canada", "Age": 37, "RegistererDate": "04/19/2015", "IsActive": false },
+        { "EmployeeID": "56250fa535809820f2c44291",  "FirstName": "Joyce", "LastName": "Vaughan", "Country": "USA", "Age": 48, "RegistererDate": "04/24/2014", "IsActive": false  },
+        { "EmployeeID": "56250fa5732f6adc0b52ace0",  "FirstName": "Janine", "LastName": "Munoz", "Country": "USA", "Age": 59, "RegistererDate": "02/09/2014", "IsActive": true },
+        { "EmployeeID": "56250fa540b15dfd507cffb9",  "FirstName": "Betsy", "LastName": "Short", "Country": "USA", "Age": 26, "RegistererDate": "06/04/2015", "IsActive": false },
+        { "EmployeeID": "56250fa5a33146a85fdeda66",  "FirstName": "Tanisha", "LastName": "Harrington", "Country": "USA", "Age": 31, "RegistererDate": "11/25/2014", "IsActive": false },
+        { "EmployeeID": "56250fa572bea435113bb3be",  "FirstName": "French", "LastName": "Sullivan", "Country": "Italy", "Age": 37, "RegistererDate": "08/16/2015", "IsActive": true },
+        { "EmployeeID": "56250fa55f17965b7b19e3cf",  "FirstName": "Gomez", "LastName": "Sandoval", "Country": "Italy", "Age": 24, "RegistererDate": "06/19/2014", "IsActive": true },
+        { "EmployeeID": "56250fa5f630e559e163de06",  "FirstName": "Estes", "LastName": "Soto", "Country": "Canada", "Age": 24, "RegistererDate": "03/28/2015", "IsActive": false }
+      ],
+      keys:["EmployeeID", "LastName", "Country", "Age", "IsActive", "Company", "RegistererDate"],
+      columnsToSkip: []
+    };
+
+    this.export = () => {
+      // export
+      $.ig.GridExcelExporter.exportGrid($("#grid-export"), {
+        fileName: "igGrid",
+        worksheetName: 'Sheet1',
+        gridStyling: "none",
+        columnsToSkip: this.state.columnsToSkip
+      });
+    }
+    this.selectionChanged = (ev, ui) => {
+      this.setState({columnsToSkip: ui.items});
+    }
+  }
+
+  showOverlay(grid) {
+    var $gridContainer = $('#' + grid.attr('id') + '_container');
+    var exportingOverlay = $('<div>');
+    exportingOverlay.css({
+      "width": $gridContainer.outerWidth(),
+      "height": $gridContainer.outerHeight()
+    }).html('<span class="exporting-text">Exporting...</span>');
+    exportingOverlay.addClass("exporting-overlay");
+
+    $gridContainer.append(exportingOverlay);
+  }
+
+  hideOverlay(exportingOverlay) {
+    exportingOverlay.remove();
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <div style={{textAlign: "center"}}>
+        <IgCombo
+          id="combo"
+          width="200px"
+          mode="dropdown"
+          dataSource={this.state.keys}
+          multiSelection={{
+            enabled: true,
+            showCheckboxes: true
+          }}
+          selectionChanged={this.selectionChanged}
+           />
+
+        <IgButton
+          click={this.export}
+          onClick={this.export}
+          labelText="Export"
+          />
+        </div>
+        <$(Control)
+          id="grid-export"
+          autoGenerateColumns={false}
+          primaryKey="EmployeeID"
+          width="100%"
+          autofitLastColumn={true}
+          columns={[
+            { headerText: "Employee ID", key: "EmployeeID", dataType: "string", hidden: true },
+            { headerText: "Last Name", key: "LastName", width: "15%", dataType: "string" },
+            { headerText: "Country", key: "Country", width: "15%", dataType: "string" },
+            { headerText: "Age", key: "Age", width: "15%", dataType: "number" },
+            { headerText: "Is Active", key: "IsActive", width: "15%", dataType: "bool", format: "checkbox" },
+            { headerText: "Company", key: "Company", width: "20%", dataType: "string", unbound: true, formula: function () { return "http://infragistics.com/"; } },
+            { headerText: "Register Date", key: "RegistererDate", width: "20%", dataType: "date" }
+          ]}
+          dataSource={this.state.employees}
+          features={$(gridfeatures)}
+        />
+      </div>
+    );
+  }
+}

package/templates/react/es6/grid/grid-export/index.js

@@ -15,10 +15,11 @@ class GridExportTemplate extends ReactTemplate_1.ReactTemplate {
         this.widget = "igGrid";
         this.controlGroup = "Data Grids";
         this.dependencies = ["igGrid"];
+        this.packages = ["file-saver@^2.0.5"];
         this.gridHelper = new GridHelper_1.GridHelper();
         this.hasExtraConfiguration = true;
         this.extraConfigurations.push({
-            choices: ["Summaries", "Hiding"],
+            choices: ["Paging", "Hiding"],
             default: "",
             key: "features",
             message: "Select features for the igGrid",

package/templates/react/es6/grid/grid-templating/files/{client → src}/components/__path__/index.js

@@ -1,9 +1,5 @@
-import React, { Component } from 'react';
-import 'jquery';
-import 'jquery-ui';
-$(igniteImports)
+import { Component } from 'react';
 import $(Control) from "igniteui-react/ui/$(widget).js";
-
 import { northwind } from './northwind.js';
 
 export default class  $(ClassName) extends Component {

package/templates/react/es6/hierarchical-grid/hierarchical-grid/files/{client → src}/components/__path__/index.js

@@ -1,9 +1,5 @@
-import React, { Component } from 'react';
-import 'jquery';
-import 'jquery-ui';
-$(igniteImports)
+import { Component } from 'react';
 import $(Control) from "igniteui-react/ui/$(widget).js";
-
 import { northwind } from './northwind.js';
 
 export default class $(ClassName) extends Component {

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

@@ -0,0 +1,82 @@
+import { Component } from 'react';
+import 'jquery-ui/ui/effects/effect-blind';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+
+import { northwind } from './northwind.js';
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = northwind;
+  }
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <$(Control)
+          id="grid"
+          ref="grid"
+          features={$(gridfeatures)}
+          width="100%"
+          autoCommit={true}
+          dataSource={this.state}
+          dataSourceType="json"
+          responseDataKey="results"
+          autoGenerateColumns={false}
+                  autofitLastColumn={false}
+          primaryKey="EmployeeID"
+          columns={[
+            { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
+            { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
+            { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
+            { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
+            { key: "City", headerText: "City", dataType: "string", width: "15%" },
+            { key: "Region", headerText: "Region", dataType: "string", width: "10%" },
+            { key: "Country", headerText: "Country", dataType: "string", width: "0%", hidden: true }
+          ]}
+          autoGenerateLayouts={false}
+
+          columnLayouts={[
+            {
+              key: "Orders",
+              autoGenerateColumns: false,
+              autofitLastColumn: false,
+              primaryKey: "OrderID",
+              width: "100%",
+              columns: [
+                { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
+                { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "15%" },
+                { key: "Freight", headerText: "Freight", dataType: "number", format:"0.00", width: "15%" },
+                { key: "FreightExpence", headerText: "Freight Expense", unbound: true, dataType: "number", format: "0.00", width: "20%", formula: "CalculateFreightExpence" },
+                { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "25%" },
+                { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "15%" },
+              ],
+              features: [
+                {
+                  name: "Responsive",
+                  enableVerticalRendering: false,
+                  columnSettings: [
+                    {
+                      columnKey: "Freight",
+                      classes: "ui-hidden-phone"
+                    },
+                    {
+                      columnKey: "CustomerID",
+                      classes: "ui-hidden-phone"
+                    },
+                    {
+                      columnKey: "ShipName",
+                      classes: "ui-hidden-phone"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]}
+        />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,81 @@
+import { Component } from 'react';
+import 'jquery-ui/ui/effects/effect-blind';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+import { northwind } from './northwind.js';
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = northwind;
+  }
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <$(Control)
+          id="grid"
+          ref="grid"
+          features={$(gridfeatures)}
+          width="100%"
+          autoCommit={true}
+          dataSource={this.state}
+          dataSourceType="json"
+          responseDataKey="results"
+          autoGenerateColumns={false}
+                  autofitLastColumn={false}
+          primaryKey="EmployeeID"
+          columns={[
+            { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
+            { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
+            { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
+            { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
+            { key: "City", headerText: "City", dataType: "string", width: "15%" },
+            { key: "Region", headerText: "Region", dataType: "string", width: "10%" },
+            { key: "Country", headerText: "Country", dataType: "string", width: "0%", hidden: true }
+          ]}
+          autoGenerateLayouts={false}
+
+          columnLayouts={[
+            {
+              key: "Orders",
+              autoGenerateColumns: false,
+              autofitLastColumn: false,
+              primaryKey: "OrderID",
+              width: "100%",
+              columns: [
+                { key: "OrderID", headerText: "Order ID", dataType: "number", width: "0%", hidden: true },
+                { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "15%" },
+                { key: "Freight", headerText: "Freight", dataType: "number", format:"0.00", width: "15%" },
+                { key: "FreightExpence", headerText: "Freight Expense", unbound: true, dataType: "number", format: "0.00", width: "20%", formula: "CalculateFreightExpence" },
+                { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "25%" },
+                { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "15%" },
+              ],
+              features: [
+                {
+                  name: "Responsive",
+                  enableVerticalRendering: false,
+                  columnSettings: [
+                    {
+                      columnKey: "Freight",
+                      classes: "ui-hidden-phone"
+                    },
+                    {
+                      columnKey: "CustomerID",
+                      classes: "ui-hidden-phone"
+                    },
+                    {
+                      columnKey: "ShipName",
+                      classes: "ui-hidden-phone"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]}
+        />
+      </div>
+    );
+  }
+}