diff --git a/ej2-react-toc.html b/ej2-react-toc.html index 84548f8a6..43a588d1d 100644 --- a/ej2-react-toc.html +++ b/ej2-react-toc.html @@ -402,6 +402,11 @@
  • Animations and Transitions
  • Accessibility
  • Styles and Appearances
    • +
  • How To + +
  • Chart diff --git a/ej2-react/carousel/how-to/load-images-in-webp-format.md b/ej2-react/carousel/how-to/load-images-in-webp-format.md new file mode 100644 index 000000000..fd5f7ff8c --- /dev/null +++ b/ej2-react/carousel/how-to/load-images-in-webp-format.md @@ -0,0 +1,30 @@ +--- +layout: post +title: Load webp format image in React Carousel component | Syncfusion +description: Learn here all about how to load webp format image in Syncfusion React Carousel component of Syncfusion Essential JS 2 and more. +control: Load images in webp format +platform: ej2-react +documentation: ug +domainurl: ##DomainURL## +--- + +# Load webp format image in React carousel component + +You can load the carousel image in the webp format, which aims to create smaller, better-looking images. Choosing webp as your image format can significantly improve your website's performance without sacrificing visual quality. webp images are significantly smaller in file size compared to formats like JPEG and PNG. This results in faster load times and less data usage. To achieve this, you can convert your image format to webp and pass them to Carousel items. The following sample illustrates how to load a carousel image in the webp format component. + +{% tabs %} +{% highlight js tabtitle="index.jsx" %} +{% include code-snippet/accordion/accordion-disable-cs1/app/index.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="index.tsx" %} +{% include code-snippet/accordion/accordion-disable-cs1/app/index.tsx %} +{% endhighlight %} +{% highlight html tabtitle="index.html" %} +{% include code-snippet/accordion/accordion-disable-cs1/index.html %} +{% endhighlight %} +{% highlight css tabtitle="index.css" %} +{% include code-snippet/accordion/accordion-disable-cs1/index.css %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "page.domainurl/code-snippet/accordion/accordion-disable-cs1" %} diff --git a/ej2-react/code-snippet/carousel/default-webp/app/index.jsx b/ej2-react/code-snippet/carousel/default-webp/app/index.jsx new file mode 100644 index 000000000..48217be73 --- /dev/null +++ b/ej2-react/code-snippet/carousel/default-webp/app/index.jsx @@ -0,0 +1,16 @@ +import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; +const App = () => { + return (
    + + + + + + + +
    ); +} +const root = ReactDOM.createRoot(document.getElementById('element')); +root.render(); diff --git a/ej2-react/code-snippet/carousel/default-webp/app/index.tsx b/ej2-react/code-snippet/carousel/default-webp/app/index.tsx new file mode 100644 index 000000000..076db07b4 --- /dev/null +++ b/ej2-react/code-snippet/carousel/default-webp/app/index.tsx @@ -0,0 +1,22 @@ +import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from "@syncfusion/ej2-react-navigations"; +import * as React from "react"; +import * as ReactDOM from "react-dom"; + + const App = () => { + return ( +
    + + + + + + + +
    + ); +} + +const root = ReactDOM.createRoot(document.getElementById('element')); +root.render(); + + diff --git a/ej2-react/code-snippet/carousel/default-webp/index.css b/ej2-react/code-snippet/carousel/default-webp/index.css new file mode 100644 index 000000000..5ae27451e --- /dev/null +++ b/ej2-react/code-snippet/carousel/default-webp/index.css @@ -0,0 +1,19 @@ +.control-container { + height: 360px; + margin: 0 auto; + width: 600px; +} + +.img-container { + height: 100%; + margin: 0; +} + +.img-caption { + color: #fff; + font-size: 1rem; + position: absolute; + bottom: 3rem; + width: 100%; + text-align: center; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/carousel/default-webp/index.html b/ej2-react/code-snippet/carousel/default-webp/index.html new file mode 100644 index 000000000..a26b0c279 --- /dev/null +++ b/ej2-react/code-snippet/carousel/default-webp/index.html @@ -0,0 +1,24 @@ + + + + + Syncfusion React Carousel + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/carousel/default-webp/systemjs.config.js b/ej2-react/code-snippet/carousel/default-webp/systemjs.config.js new file mode 100644 index 000000000..680b6ecea --- /dev/null +++ b/ej2-react/code-snippet/carousel/default-webp/systemjs.config.js @@ -0,0 +1,42 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/", + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-navigations": "syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + '@syncfusion/ej2-buttons': 'syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js', + '@syncfusion/ej2-data': 'syncfusion:ej2-data/dist/ej2-data.umd.min.js', + '@syncfusion/ej2-lists': 'syncfusion:ej2-lists/dist/ej2-lists.umd.min.js', + '@syncfusion/ej2-popups': 'syncfusion:ej2-popups/dist/ej2-popups.umd.min.js', + '@syncfusion/ej2-inputs': 'syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js', + '@syncfusion/ej2-splitbuttons': 'syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js', + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); \ No newline at end of file diff --git a/ej2-react/code-snippet/chart/series/line-cs32/app/index.jsx b/ej2-react/code-snippet/chart/series/line-cs32/app/index.jsx index 9cce663f5..0bdfcd3d9 100644 --- a/ej2-react/code-snippet/chart/series/line-cs32/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/line-cs32/app/index.jsx @@ -3,8 +3,30 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts'; -import { scatterData } from 'datasource.ts'; function App() { + const scatterData = [ + { height: 130, male: 35, female: 32 }, + { height: 132, male: 38, female: 33 }, + { height: 135, male: 41, female: 38 }, + { height: 137, male: 43, female: 40 }, + { height: 140, male: 45, female: 42 }, + { height: 142, male: 46, female: 42.5 }, + { height: 145, male: 48, female: 43 }, + { height: 147, male: 50, female: 44 }, + { height: 150, male: 52, female: 45 }, + { height: 152, male: 55, female: 45 }, + { height: 155, male: 58, female: 46 }, + { height: 157, male: 60, female: 48 }, + { height: 160, male: 63, female: 51 }, + { height: 162, male: 70, female: 54 }, + { height: 165, male: 75, female: 58 }, + { height: 167, male: 78, female: 62 }, + { height: 170, male: 82, female: 68 }, + { height: 172, male: 87, female: 72 }, + { height: 175, male: 89, female: 78 }, + { height: 177, male: 92, female: 82 }, + { height: 180, male: 95, female: 85 } + ]; const primaryxAxis = { title: 'Height (cm)', minimum: 130, maximum: 180, edgeLabelPlacement: 'Shift', labelFormat: '{value}cm' diff --git a/ej2-react/code-snippet/chart/series/line-cs32/app/index.tsx b/ej2-react/code-snippet/chart/series/line-cs32/app/index.tsx index 76aa31ab5..c3f8d8154 100644 --- a/ej2-react/code-snippet/chart/series/line-cs32/app/index.tsx +++ b/ej2-react/code-snippet/chart/series/line-cs32/app/index.tsx @@ -5,10 +5,31 @@ import * as ReactDOM from "react-dom"; import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker} from'@syncfusion/ej2-react-charts'; -import { scatterData } from 'datasource.ts'; function App() { - + const scatterData: any[] = [ + { height: 130, male: 35, female: 32 }, + { height: 132, male: 38, female: 33 }, + { height: 135, male: 41, female: 38 }, + { height: 137, male: 43, female: 40 }, + { height: 140, male: 45, female: 42 }, + { height: 142, male: 46, female: 42.5 }, + { height: 145, male: 48, female: 43 }, + { height: 147, male: 50, female: 44 }, + { height: 150, male: 52, female: 45 }, + { height: 152, male: 55, female: 45 }, + { height: 155, male: 58, female: 46 }, + { height: 157, male: 60, female: 48 }, + { height: 160, male: 63, female: 51 }, + { height: 162, male: 70, female: 54 }, + { height: 165, male: 75, female: 58 }, + { height: 167, male: 78, female: 62 }, + { height: 170, male: 82, female: 68 }, + { height: 172, male: 87, female: 72 }, + { height: 175, male: 89, female: 78 }, + { height: 177, male: 92, female: 82 }, + { height: 180, male: 95, female: 85 } + ]; const primaryxAxis: AxisModel = { title: 'Height (cm)', minimum: 130, maximum: 180, edgeLabelPlacement: 'Shift', labelFormat: '{value}cm' diff --git a/ej2-react/code-snippet/chart/series/scatter-cs/app/index.jsx b/ej2-react/code-snippet/chart/series/scatter-cs/app/index.jsx index 450027226..5c123e938 100644 --- a/ej2-react/code-snippet/chart/series/scatter-cs/app/index.jsx +++ b/ej2-react/code-snippet/chart/series/scatter-cs/app/index.jsx @@ -3,8 +3,30 @@ import * as React from "react"; import * as ReactDOM from "react-dom"; import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries } from '@syncfusion/ej2-react-charts'; -import { scatterData } from 'datasource.ts'; function App() { + const scatterData = [ + { height: 130, male: 35, female: 32 }, + { height: 132, male: 38, female: 33 }, + { height: 135, male: 41, female: 38 }, + { height: 137, male: 43, female: 40 }, + { height: 140, male: 45, female: 42 }, + { height: 142, male: 46, female: 42.5 }, + { height: 145, male: 48, female: 43 }, + { height: 147, male: 50, female: 44 }, + { height: 150, male: 52, female: 45 }, + { height: 152, male: 55, female: 45 }, + { height: 155, male: 58, female: 46 }, + { height: 157, male: 60, female: 48 }, + { height: 160, male: 63, female: 51 }, + { height: 162, male: 70, female: 54 }, + { height: 165, male: 75, female: 58 }, + { height: 167, male: 78, female: 62 }, + { height: 170, male: 82, female: 68 }, + { height: 172, male: 87, female: 72 }, + { height: 175, male: 89, female: 78 }, + { height: 177, male: 92, female: 82 }, + { height: 180, male: 95, female: 85 } + ]; const primaryxAxis = { title: 'Height (cm)', minimum: 130, maximum: 180, edgeLabelPlacement: 'Shift', labelFormat: '{value}cm' diff --git a/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx b/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx index b1b52c37d..4f24b5818 100644 --- a/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx +++ b/ej2-react/code-snippet/chart/series/scatter-cs/app/index.tsx @@ -5,10 +5,31 @@ import * as ReactDOM from "react-dom"; import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ScatterSeries, Marker} from'@syncfusion/ej2-react-charts'; -import { scatterData } from 'datasource.ts'; function App() { - + const scatterData: any[] = [ + { height: 130, male: 35, female: 32 }, + { height: 132, male: 38, female: 33 }, + { height: 135, male: 41, female: 38 }, + { height: 137, male: 43, female: 40 }, + { height: 140, male: 45, female: 42 }, + { height: 142, male: 46, female: 42.5 }, + { height: 145, male: 48, female: 43 }, + { height: 147, male: 50, female: 44 }, + { height: 150, male: 52, female: 45 }, + { height: 152, male: 55, female: 45 }, + { height: 155, male: 58, female: 46 }, + { height: 157, male: 60, female: 48 }, + { height: 160, male: 63, female: 51 }, + { height: 162, male: 70, female: 54 }, + { height: 165, male: 75, female: 58 }, + { height: 167, male: 78, female: 62 }, + { height: 170, male: 82, female: 68 }, + { height: 172, male: 87, female: 72 }, + { height: 175, male: 89, female: 78 }, + { height: 177, male: 92, female: 82 }, + { height: 180, male: 95, female: 85 } + ]; const primaryxAxis: AxisModel = { title: 'Height (cm)', minimum: 130, maximum: 180, edgeLabelPlacement: 'Shift', labelFormat: '{value}cm' diff --git a/ej2-react/code-snippet/grid/template-cs8/app/App.jsx b/ej2-react/code-snippet/grid/template-cs8/app/App.jsx new file mode 100644 index 000000000..7437e94ed --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/app/App.jsx @@ -0,0 +1,25 @@ +import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { data } from './datasource'; +import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar'; + +function App() { + const progressbarTemplate = ((props) => { + return ( +
    + +
    + ) + }) + return ( +
    + + + + + + +
    ) +} +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/app/App.tsx b/ej2-react/code-snippet/grid/template-cs8/app/App.tsx new file mode 100644 index 000000000..7347f96d5 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/app/App.tsx @@ -0,0 +1,25 @@ +import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { data } from './datasource'; +import { ProgressBarComponent } from '@syncfusion/ej2-react-progressbar'; + +function App() { + const progressbarTemplate = ((props: any) => { + return ( +
    + +
    + ) + }) + return ( +
    + + + + + + +
    ) +} +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/app/datasource.jsx b/ej2-react/code-snippet/grid/template-cs8/app/datasource.jsx new file mode 100644 index 000000000..24591f7b5 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/app/datasource.jsx @@ -0,0 +1,127 @@ +export let data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, + Employee: { + EmployeeID: 1 + }, + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1, + Employee: { + EmployeeID: 2 + }, + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0, + Employee: { + EmployeeID: 3 + }, + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0, + Employee: { + EmployeeID: 4 + }, + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0, + Employee: { + EmployeeID: 5 + } + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + + , Employee: { + EmployeeID: 7 + } + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + + , Employee: { + EmployeeID: 8 + } + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + , Employee: { + EmployeeID: 2 + } + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + , Employee: { + EmployeeID: 4 + } + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/app/datasource.tsx b/ej2-react/code-snippet/grid/template-cs8/app/datasource.tsx new file mode 100644 index 000000000..e635eb51c --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/app/datasource.tsx @@ -0,0 +1,127 @@ +export let data: Object[] = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, + Employee: { + EmployeeID: 1 + }, + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1, + Employee: { + EmployeeID: 2 + }, + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0, + Employee: { + EmployeeID: 3 + }, + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0, + Employee: { + EmployeeID: 4 + }, + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0, + Employee: { + EmployeeID: 5 + } + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + + , Employee: { + EmployeeID: 7 + } + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + + , Employee: { + EmployeeID: 8 + } + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + , Employee: { + EmployeeID: 2 + } + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + , Employee: { + EmployeeID: 4 + } + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/app/index.tsx b/ej2-react/code-snippet/grid/template-cs8/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/custom.css b/ej2-react/code-snippet/grid/template-cs8/custom.css new file mode 100644 index 000000000..d6e15e401 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/custom.css @@ -0,0 +1,3 @@ +.e-grid .customcss { + background-color: #ecedee; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/index.css b/ej2-react/code-snippet/grid/template-cs8/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/index.html b/ej2-react/code-snippet/grid/template-cs8/index.html new file mode 100644 index 000000000..38114a40c --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/index.html @@ -0,0 +1,86 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs8/systemjs.config.js b/ej2-react/code-snippet/grid/template-cs8/systemjs.config.js new file mode 100644 index 000000000..a63bd1142 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs8/systemjs.config.js @@ -0,0 +1,59 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-progressbar": "syncfusion:ej2-progressbar/dist/ej2-progressbar.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-progressbar": "syncfusion:ej2-react-progressbar/dist/ej2-react-progressbar.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/code-snippet/grid/template-cs9/app/App.jsx b/ej2-react/code-snippet/grid/template-cs9/app/App.jsx new file mode 100644 index 000000000..361385da8 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/app/App.jsx @@ -0,0 +1,57 @@ +import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { data } from './datasource'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; + +function App() { + let grid; + let fields = { text: 'ShipCountry', value: 'ShipCountry' }; + const columnTemplate = (props) => { + return ( +
    + +
    + ); + }; + const headerTemplate = (props) => { + return (
    + Ship Country +
    + ); + }; + const addTemplateColumn = () => { + var templateColumnValues = { + field: 'ShipCountry', + headerText: 'Ship Country', + width: 100, + template: columnTemplate, + headerTemplate: headerTemplate, + }; + grid.columns.push(templateColumnValues); + grid.refreshColumns(); + }; + return ( +
    + + Add Column + + grid = g} dataSource={data} height={315} enableHover={false}> + + + + + +
    ) +} +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/app/App.tsx b/ej2-react/code-snippet/grid/template-cs9/app/App.tsx new file mode 100644 index 000000000..458470b1c --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/app/App.tsx @@ -0,0 +1,57 @@ +import { Grid, ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids'; +import * as React from 'react'; +import { data } from './datasource'; +import { ButtonComponent } from '@syncfusion/ej2-react-buttons'; +import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns'; + +function App() { + let grid: Grid | null; + let fields: Object = { text: 'ShipCountry', value: 'ShipCountry' }; + const columnTemplate = ((props: any) => { + return ( +
    + +
    + ); + }); + const headerTemplate = ((props: any) => { + return (
    + Ship Country +
    + ); + }); + const addTemplateColumn = () => { + let templateColumnValues: Object = { + field: 'ShipCountry', + headerText: 'Ship Country', + width: 100, + template: columnTemplate, + headerTemplate: headerTemplate, + }; + grid.columns.push(templateColumnValues); + grid.refreshColumns(); + }; + return ( +
    + + Add Column + + grid = g} dataSource={data} height={315} enableHover={false}> + + + + + +
    ) +} +export default App; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/app/datasource.jsx b/ej2-react/code-snippet/grid/template-cs9/app/datasource.jsx new file mode 100644 index 000000000..24591f7b5 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/app/datasource.jsx @@ -0,0 +1,127 @@ +export let data = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, + Employee: { + EmployeeID: 1 + }, + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1, + Employee: { + EmployeeID: 2 + }, + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0, + Employee: { + EmployeeID: 3 + }, + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0, + Employee: { + EmployeeID: 4 + }, + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0, + Employee: { + EmployeeID: 5 + } + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + + , Employee: { + EmployeeID: 7 + } + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + + , Employee: { + EmployeeID: 8 + } + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + , Employee: { + EmployeeID: 2 + } + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + , Employee: { + EmployeeID: 4 + } + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/app/datasource.tsx b/ej2-react/code-snippet/grid/template-cs9/app/datasource.tsx new file mode 100644 index 000000000..e635eb51c --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/app/datasource.tsx @@ -0,0 +1,127 @@ +export let data: Object[] = [ + { + OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), + ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', + ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, + Employee: { + EmployeeID: 1 + }, + }, + { + OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), + ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', + ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1, + Employee: { + EmployeeID: 2 + }, + }, + { + OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0, + Employee: { + EmployeeID: 3 + }, + }, + { + OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5), + ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce', + ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0, + Employee: { + EmployeeID: 4 + }, + }, + { + OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5), + ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255', + ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0, + Employee: { + EmployeeID: 5 + } + }, + { + OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6), + ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', + ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5), + ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31', + ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1 + + , Employee: { + EmployeeID: 7 + } + }, + { + OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5), + ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5', + ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0 + + , Employee: { + EmployeeID: 8 + } + }, + { + OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6), + ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12', + ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5), + ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35', + ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0 + + , Employee: { + EmployeeID: 9 + } + }, + { + OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5), + ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6', + ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0 + + , Employee: { + EmployeeID: 6 + } + }, + { + OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5), + ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993', + ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1 + , Employee: { + EmployeeID: 2 + } + }, + { + OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369', + ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }, + { + OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5), + ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12', + ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1 + , Employee: { + EmployeeID: 4 + } + }, + { + OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5), + ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.', + ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0 + , Employee: { + EmployeeID: 3 + } + }]; \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/app/index.tsx b/ej2-react/code-snippet/grid/template-cs9/app/index.tsx new file mode 100644 index 000000000..80b1b6ab0 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/app/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App'; + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/custom.css b/ej2-react/code-snippet/grid/template-cs9/custom.css new file mode 100644 index 000000000..d6e15e401 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/custom.css @@ -0,0 +1,3 @@ +.e-grid .customcss { + background-color: #ecedee; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/index.css b/ej2-react/code-snippet/grid/template-cs9/index.css new file mode 100644 index 000000000..e2de99fc9 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/index.css @@ -0,0 +1,9 @@ +.e-grid .custom { + background-color: #f48fb1 !important;/* csslint allow: important */ + color: white; +} + +.e-grid .custom { + background-color: #fce4ec; + color: white; +} \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/index.html b/ej2-react/code-snippet/grid/template-cs9/index.html new file mode 100644 index 000000000..38114a40c --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/index.html @@ -0,0 +1,86 @@ + + + + + Syncfusion React Grid + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + + \ No newline at end of file diff --git a/ej2-react/code-snippet/grid/template-cs9/systemjs.config.js b/ej2-react/code-snippet/grid/template-cs9/systemjs.config.js new file mode 100644 index 000000000..e85666999 --- /dev/null +++ b/ej2-react/code-snippet/grid/template-cs9/systemjs.config.js @@ -0,0 +1,57 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "system", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-grids": "syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js", +"react-dom":"https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js", +"react":"https://unpkg.com/react@16.3.1/umd/react.development.js", + + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + + diff --git a/ej2-react/grid/columns/column-template.md b/ej2-react/grid/columns/column-template.md index f504161a7..d418011c1 100644 --- a/ej2-react/grid/columns/column-template.md +++ b/ej2-react/grid/columns/column-template.md @@ -175,6 +175,36 @@ In the following code, we rendered the Chips component in the Grid **First Name* {% previewsample "page.domainurl/code-snippet/grid/template-cs3" %} +### Render ProgressBar component in a column + +The Syncfusion Grid component supports rendering the [Progress Bar](https://ej2.syncfusion.com/react/documentation/progress-bar/getting-started) component within a column using the [template](https://ej2.syncfusion.com/react/documentation/api/grid/column/#template) property. Displaying the `Progress Bar` component in a grid column allows users to visually track the progress of tasks or operations associated with specific records. This feature is particularly useful for applications involving processes such as data loading, task completion, or other progressive activities. + +In the following code, the `Progress Bar` component render in the Grid **Freight** column by defining the [template](https://ej2.syncfusion.com/react/documentation/api/grid/column/#template) property. + +``` +
    + +
    +``` + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/template-cs8/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/template-cs8/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/template-cs8/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/template-cs8/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/grid/template-cs8" %} + ## Using condition template The conditional column [template](https://ej2.syncfusion.com/react/documentation/api/grid/column/#template) allows you to display template elements based on specific conditions. @@ -254,4 +284,29 @@ The following example demonstrates how to use a custom helper function inside th {% previewsample "page.domainurl/code-snippet/grid/template-cs5" %} -> Custom helpers can only be used inside the template method of a column. \ No newline at end of file +> Custom helpers can only be used inside the template method of a column. + +## Dynamically adding template column + +The Syncfusion Grid component allows you to dynamically add template columns at runtime. This capability is particularly useful when the structure of the grid needs to be modified based on individual interactions or other dynamic conditions. + +Dynamically adding template columns involves creating and inserting columns with custom templates after the grid has been initialized. This approach provides flexibility in presenting data in a highly customizable manner. + +The following example demonstrates how to add template column using external button click. In this example, the **ShipCountry** column with a [Dropdownlist](https://ej2.syncfusion.com/react/documentation/drop-down-list/getting-started) is added in column [template](https://ej2.syncfusion.com/react/documentation/api/grid/column/#template), and an icon is displayed using the [headerTemplate](https://ej2.syncfusion.com/react/documentation/api/grid/column/#headertemplate) for the **ShipCountry** column. + +{% tabs %} +{% highlight js tabtitle="App.jsx" %} +{% include code-snippet/grid/template-cs9/app/App.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="App.tsx" %} +{% include code-snippet/grid/template-cs9/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/grid/template-cs9/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/grid/template-cs9/app/datasource.tsx %} +{% endhighlight %} +{% endtabs %} + + {% previewsample "page.domainurl/code-snippet/grid/template-cs9" %} \ No newline at end of file diff --git a/ej2-react/schedule/localization.md b/ej2-react/schedule/localization.md index e63821935..c622c1639 100644 --- a/ej2-react/schedule/localization.md +++ b/ej2-react/schedule/localization.md @@ -132,6 +132,7 @@ L10n.load({ "week": "Week", "workWeek": "Work Week", "month": "Month", + "year": "Year", "agenda": "Agenda", "weekAgenda": "Week Agenda", "workWeekAgenda": "Work Week Agenda", @@ -158,6 +159,7 @@ L10n.load({ "subject": "Subject", "addTitle": "Add title", "moreDetails": "More Details", + "moreEvents": "More Events", "save": "Save", "editContent": "Do you want to edit only this event or entire series?", "deleteRecurrenceContent": "Do you want to delete only this event or entire series?", @@ -180,12 +182,16 @@ L10n.load({ "createError": "The duration of the event must be shorter than how frequently it occurs. Shorten the duration, or change the recurrence pattern in the recurrence event editor.", "recurrenceDateValidation": "Some months have fewer than the selected date. For these months, the occurrence will fall on the last date of the month.", "sameDayAlert": "Two occurrences of the same event cannot occur on the same day.", + "occurenceAlert": "Cannot reschedule an occurrence of the recurring appointment if it skips over a later occurrence of the same appointment.", "editRecurrence": "Edit Recurrence", "repeats": "Repeats", "alert": "Alert", "startEndError": "The selected end date occurs before the start date.", "invalidDateError": "The entered date value is invalid.", + "blockAlert": "Events cannot be scheduled within the blocked time range.", "ok": "Ok", + "yes": "Yes", + "no": "No", "occurrence": "Occurrence", "series": "Series", "previous": "Previous", @@ -195,7 +201,15 @@ L10n.load({ "timelineWorkWeek": "Timeline Work Week", "timelineMonth": "Timeline Month", "expandAllDaySection": "Expand", - "collapseAllDaySection": "Collapse" + "collapseAllDaySection": "Collapse", + "timelineYear": "Timeline Year", + "editFollowingEvent": "Following Events", + "deleteTitle": "Delete Event", + "editTitle": "Edit Event", + "beginFrom": "Begin From", + "endAt": "End At", + "searchTimezone": "Search Timezone", + "noRecords": "No records found", }, "recurrenceeditor": { "none": "None",