-```
-create-react-app quickstart --scripts-version=react-scripts-ts
-cd quickstart
-npm install
+```bash
+yarn create react-app my-app
+cd my-app
+yarn start
```
-
-
-```
-create-react-app quickstart
-cd quickstart
-npm install
+
+To set-up a React application in `TypeScript` environment, run the following command.
+
+```bash
+npx create-react-app my-app --template typescript
+cd my-app
+npm start
```
-
->Note: Creating react app without mentioning typescript, will create `src/app.js` instead of `src/app.tsx` file. You can also add the below code snippet in `src/app.js` file.To create react app using typescript, you can use this **create-react-app quickstart --template typescript** command. This will create `app.tsx` file under `src` folder of project location. +Besides using the [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) package runner tool, also create an application from the `npm init`. To begin with the `npm init`, upgrade the `npm` version to `npm 6+`. + +```bash +npm init react-app my-app +cd my-app +npm start +``` ## Adding Syncfusion packages -All the available Essential JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg/) public registry. +All the available Essential JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install. To install Document Editor component, use the following command @@ -92,9 +102,11 @@ To install Document Editor component, use the following command npm install @syncfusion/ej2-react-documenteditor --save ``` +> The --save will instruct NPM to include the Document Editor package inside of the **dependencies** section of the package.json. + ## Adding CSS reference -Add Document Editor component and its dependent component styles as given below in `src/App.css`. +Add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.css**. ```css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -117,29 +129,31 @@ You can add `DocumentEditorContainer` Component with predefined toolbar and pro >Note: Starting from `v19.3.0.x`, we have optimized the accuracy of text size measurements such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [to disable it and retain the document pagination behavior of older versions](../document-editor/how-to/disable-optimized-text-measuring). -### DocumentEditor component +### DocumentEditorContainer component -DocumentEditor Component is used to create , view and edit word documents. In this , you can customize the UI options based on your requirements to modify the document. +DocumentEditorContainer Component is used to create, view, and edit word document. You can use predefined toolbar and properties pane to view and modify word document. -#### Adding DocumentEditor component +#### Adding DocumentEditorContainer component -Now, you can start adding DocumentEditor component in the application. For getting started, add the DocumentEditor component in `src/App.tsx` file using following code. +Now, you can start adding DocumentEditorContainer component in the application. For getting started, add the DocumentEditorContainer component in `src/App.tsx` file using following code. Add the below code in the `src/App.tsx` to initialize the DocumentEditor. - +{% raw %} ```ts import * as React from 'react'; -import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor'; -DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog); +import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; +DocumentEditorContainerComponent.Inject(Toolbar); function App() { - return (
 @@ -229,10 +241,16 @@ Below is a list of operators and functions that can be used in the formula to cr {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs11/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs11/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs11/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs11/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs11/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs11/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -254,10 +272,16 @@ In the below sample, creating a calculated field without setting the format is r {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs12/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs12/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs12/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs12/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs12/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs12/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -287,10 +311,16 @@ In the below sample, the calculated field button click action, that is, opening {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs13/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs13/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs13/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs13/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs13/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs13/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -317,10 +347,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs14/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs14/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs14/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs14/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs14/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs14/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -342,10 +378,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs15/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs15/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs15/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs15/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs15/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs15/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/conditional-formatting.md b/ej2-react/pivotview/conditional-formatting.md index dfbfa20d6..6887fa115 100644 --- a/ej2-react/pivotview/conditional-formatting.md +++ b/ej2-react/pivotview/conditional-formatting.md @@ -22,10 +22,16 @@ To learn about how to work with conditional formatting options, you can check on {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs16/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs16/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs16/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs16/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs16/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs16/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -50,10 +56,16 @@ Meanwhile, user can also view conditional formatting dialog in UI by invoking [` {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs17/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs17/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs17/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs17/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs17/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs17/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -65,10 +77,16 @@ Allows end user to apply conditional formatting commonly for all value fields ju {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs18/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs18/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs18/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs18/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs18/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs18/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -80,10 +98,16 @@ Allows end user to apply conditional formatting to a specific value field by set {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs19/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs19/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs19/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs19/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs19/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs19/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -111,10 +135,16 @@ The event [`conditionalFormatting`](https://ej2.syncfusion.com/react/documentati {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs20/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs20/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs20/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs20/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs20/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs20/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/css-customization.md b/ej2-react/pivotview/css-customization.md index 5f58fd578..a098f9b3c 100644 --- a/ej2-react/pivotview/css-customization.md +++ b/ej2-react/pivotview/css-customization.md @@ -16,10 +16,10 @@ The visibility of row, column, value and filter axis in Field List and Grouping {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs21/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs21/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs21/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs21/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -31,10 +31,10 @@ The alignment of text inside row headers, column headers, value cells and summar {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs22/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs22/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs22/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs22/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -46,10 +46,10 @@ The elements in pivot table like header cell, value cell and summary cell style {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/background-css-cs1/app/index.jsx %} +{% include code-snippet/pivot-table/background-css-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/background-css-cs1/app/index.tsx %} +{% include code-snippet/pivot-table/background-css-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/data-binding.md b/ej2-react/pivotview/data-binding.md index 9eee68fd7..c46663890 100644 --- a/ej2-react/pivotview/data-binding.md +++ b/ej2-react/pivotview/data-binding.md @@ -24,10 +24,16 @@ In-order to bind local JSON data to the pivot table user can assign the local va {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs23/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs23/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs23/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs23/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs23/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs23/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -37,10 +43,16 @@ Using local variable, the JSON data can also be bound to the pivot table using [ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs24/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs24/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs24/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs24/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs24/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs24/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -93,10 +105,10 @@ In-order to bind remote JSON data, mention the endpoint [`URL`](https://ej2.sync {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs25/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs25/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs25/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs25/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -114,10 +126,10 @@ In-order to bind local CSV data to the pivot table, user needs to convert it as {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs26/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs26/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs26/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs26/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -190,10 +202,10 @@ In-order to bind remote CSV data, mention the endpoint [`URL`](https://ej2.syncf {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs27/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs27/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs27/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs27/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -209,10 +221,10 @@ OData is a standardized protocol for creating and consuming data. User can retri {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs28/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs28/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs28/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs28/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -224,10 +236,10 @@ The OData V4 is an improved version of OData protocols, and the [`DataManager`]( {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs29/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs29/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs29/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs29/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -239,10 +251,10 @@ User can use [`WebApiAdaptor`](https://ej2.syncfusion.com/react/documentation/da {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs30/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs30/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs30/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs30/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -254,10 +266,10 @@ By default, the data manager retrieves all the data from the provider which is m {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs31/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs31/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs31/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs31/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -294,10 +306,16 @@ In the below code sample, visibility of the field button icons are configured. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs32/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs32/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs32/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs32/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs32/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs32/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -309,10 +327,16 @@ By default, the value fields are plotted in column axis. To plot those fields in {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs33/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs33/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs33/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs33/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs33/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs33/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -326,10 +350,16 @@ By default, the value fields are placed at the end of the row or column axis. To {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs34/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs34/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs34/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs34/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs34/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs34/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -341,10 +371,10 @@ By default, the pivot table only shows the field item if it has data in its row {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs35/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs35/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs35/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs35/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -356,10 +386,16 @@ To show value header always in pivot table, even if it holds a single value, use {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs36/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs36/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs36/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs36/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs36/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs36/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -371,10 +407,16 @@ User can show custom string in empty value cells using the [`emptyCellsTextConte {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs37/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs37/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs37/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs37/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs37/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs37/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -388,10 +430,16 @@ The event [`load`](https://ej2.syncfusion.com/react/documentation/api/pivotview/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs38/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs38/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs38/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs38/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs38/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs38/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -403,10 +451,16 @@ The event [`enginePopulated`](https://ej2.syncfusion.com/react/documentation/api {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs39/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs39/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs39/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs39/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs39/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs39/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -418,10 +472,16 @@ The event [`enginePopulating`](https://ej2.syncfusion.com/react/documentation/ap {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs40/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs40/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs40/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs40/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs40/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs40/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/data-compression.md b/ej2-react/pivotview/data-compression.md index 9d76433d8..d69939c4e 100644 --- a/ej2-react/pivotview/data-compression.md +++ b/ej2-react/pivotview/data-compression.md @@ -20,10 +20,10 @@ When binding one million raw data, the pivot table processes all raw data to gen {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs309/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs309/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs309/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs309/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/defer-update.md b/ej2-react/pivotview/defer-update.md index fc613d8e0..68bc37b66 100644 --- a/ej2-react/pivotview/defer-update.md +++ b/ej2-react/pivotview/defer-update.md @@ -23,10 +23,16 @@ To enable deferred updates in the pivot table, set the property [`allowDeferLayo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs41/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs41/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs41/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs41/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs41/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs41/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -42,10 +48,16 @@ To enable deferred updates in the static fieldlist, set the property [`allowDefe {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs42/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs42/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs42/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs42/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs42/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs42/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/drill-down.md b/ej2-react/pivotview/drill-down.md index 8bc7e806f..c3aad7fad 100644 --- a/ej2-react/pivotview/drill-down.md +++ b/ej2-react/pivotview/drill-down.md @@ -32,10 +32,16 @@ Allows to either expand or collapse all headers that are displayed in row and co {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs43/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs43/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs43/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs43/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs43/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs43/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -49,10 +55,16 @@ Allows to expand or collapse all headers for specific fields (only) in row and c {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs44/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs44/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs44/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs44/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs44/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs44/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -71,10 +83,16 @@ In addition to the previous topic, there is an enhancement to expand all headers {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs45/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs45/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs45/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs45/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs45/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs45/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -90,10 +108,16 @@ End user can also manually expand or collapse specific member(s) in each fields {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs46/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs46/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs46/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs46/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs46/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs46/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -110,10 +134,16 @@ The event [`drill`](https://ej2.syncfusion.com/react/documentation/api/pivotview {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs47/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs47/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs47/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs47/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs47/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs47/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -138,10 +168,16 @@ In the below sample, drill down and drill up action can be restricted by setting {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs48/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs48/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs48/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs48/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs48/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs48/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -164,10 +200,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs49/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs49/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs49/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs49/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs49/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs49/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -188,10 +230,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs50/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs50/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs50/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs50/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs50/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs50/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/drill-through.md b/ej2-react/pivotview/drill-through.md index 667982288..379c9781f 100644 --- a/ej2-react/pivotview/drill-through.md +++ b/ej2-react/pivotview/drill-through.md @@ -16,10 +16,16 @@ To use the drill through feature, inject the `DrillThrough` module in the pivot {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs51/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs51/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs51/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs51/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs51/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs51/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -29,10 +35,16 @@ Users can also view the underlying raw data though the pivot chart. By clicking {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs52/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs52/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs52/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs52/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs52/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs52/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -121,10 +133,16 @@ The event [`drillThrough`](https://ej2.syncfusion.com/react/documentation/api/pi {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs53/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs53/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs53/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs53/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs53/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs53/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -141,10 +159,16 @@ The event [`beginDrillThrough`](https://ej2.syncfusion.com/react/documentation/a {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs54/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs54/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs54/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs54/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs54/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs54/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/editing.md b/ej2-react/pivotview/editing.md index 47b07599f..666cfb555 100644 --- a/ej2-react/pivotview/editing.md +++ b/ej2-react/pivotview/editing.md @@ -43,10 +43,16 @@ In normal edit mode, when user starts editing, the state of the currently select {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs55/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs55/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs55/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs55/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs55/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs55/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -60,10 +66,16 @@ In dialog edit mode, when user starts editing, the currently selected row data w {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs56/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs56/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs56/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs56/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs56/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs56/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -75,10 +87,16 @@ In batch edit mode, when user double-clicks any data grid cell, the state of tar {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs57/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs57/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs57/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs57/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs57/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs57/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -90,10 +108,16 @@ An additional column appended in the data grid layout holds the command buttons {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs58/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs58/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs58/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs58/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs58/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs58/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -105,10 +129,16 @@ Allows editing of a value cell directly without the use of an external edit dial {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs59/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs59/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs59/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs59/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs59/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs59/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -120,10 +150,16 @@ Users can also add, delete, or update the underlying raw items of any data point {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs60/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs60/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs60/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs60/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs60/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs60/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -145,10 +181,16 @@ The event [`editCompleted`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs61/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs61/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs61/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs61/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs61/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs61/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -183,10 +225,16 @@ The event [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/piv {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs62/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs62/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs62/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs62/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs62/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs62/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -211,10 +259,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs63/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs63/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs63/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs63/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs63/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs63/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -237,10 +291,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs64/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs64/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs64/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs64/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs64/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs64/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/excel-export.md b/ej2-react/pivotview/excel-export.md index 00c3d4007..43b114e51 100644 --- a/ej2-react/pivotview/excel-export.md +++ b/ej2-react/pivotview/excel-export.md @@ -16,10 +16,16 @@ The Excel export allows Pivot Table data to be exported as Excel document. To en {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs65/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs65/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs65/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs65/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs65/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs65/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -37,10 +43,16 @@ The Excel export provides support to export multiple pivot tables in same sheet. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs66/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs66/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs66/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs66/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs66/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs66/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -52,10 +64,16 @@ Excel export provides support to export multiple pivot tables into new sheets. T {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs67/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs67/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs67/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs67/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs67/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs67/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -69,10 +87,16 @@ The Excel export provides an option to change colors for headers, caption and re {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs68/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs68/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs68/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs68/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs68/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs68/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -84,10 +108,16 @@ The Excel export provides an option to include header and footer content for the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs69/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs69/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs69/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs69/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs69/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs69/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -99,10 +129,16 @@ The Excel export provides an option to change file name of the document before e {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs70/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs70/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs70/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs70/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs70/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs70/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -120,10 +156,16 @@ The Excel export allows pivot table data to be exported in **CSV** file format a {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs71/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs71/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs71/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs71/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs71/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs71/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -140,10 +182,16 @@ You can export the pivot table virtual scroll data as Excel/CSV document by usin {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs72/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs72/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs72/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs72/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs72/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs72/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -153,10 +201,16 @@ You can export the pivot table virtual scroll data as Excel/CSV document by usin {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs73/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs73/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs73/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs73/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs73/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs73/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -170,10 +224,16 @@ The pivot engine exports the entire virtual data of the pivot table (i.e. the da {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs74/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs74/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs74/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs74/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs74/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs74/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -192,10 +252,16 @@ The event `excelQueryCellInfo` triggers while framing each row and value cell du {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs75/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs75/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs75/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs75/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs75/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs75/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -210,10 +276,16 @@ The event `excelHeaderQueryCellInfo` triggers on framing each header cell during {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs76/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs76/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs76/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs76/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs76/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs76/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -228,10 +300,16 @@ The event [`exportComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs77/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs77/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs77/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs77/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs77/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs77/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/field-list.md b/ej2-react/pivotview/field-list.md index fcc883b25..f18d928c8 100644 --- a/ej2-react/pivotview/field-list.md +++ b/ej2-react/pivotview/field-list.md @@ -32,10 +32,16 @@ To use field list, you need to inject the `FieldList` module in pivot table. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs78/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs78/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs78/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs78/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs78/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs78/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -49,10 +55,16 @@ The field list can be rendered in a static position, anywhere in web page layout {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs79/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs79/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs79/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs79/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs79/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs79/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -69,10 +81,16 @@ The below sample code illustrates the field list dialog invoked on an external b {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs80/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs80/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs80/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs80/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs80/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs80/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -88,10 +106,16 @@ To enable search box in the static field list UI, set the [`enableFieldSearching {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs81/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs81/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs81/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs81/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs81/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs81/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -101,10 +125,16 @@ To enable search box in the pivot table's built-in popup field list UI, set the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs82/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs82/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs82/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs82/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs82/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs82/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -124,10 +154,16 @@ To display the fields in descending order by default, set the [defaultFieldListO {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs311/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs311/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs311/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs311/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs311/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs311/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -141,10 +177,16 @@ In the field list UI, you can display fields by grouping them under the desired {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs83/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs83/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs83/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs83/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs83/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs83/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -162,10 +204,16 @@ When a data source is bound to the component, fields will be automatically popul {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs84/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs84/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs84/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs84/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs84/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs84/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -230,10 +278,16 @@ The sample code below shows the built-in field list dialog using `document.body {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs85/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs85/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs85/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs85/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs85/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs85/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -245,10 +299,16 @@ It can also be viewed in toolbar by setting [`showFieldList`](https://ej2.syncfu {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs86/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs86/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs86/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs86/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs86/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs86/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -262,10 +322,16 @@ In the sample, we have set caption to the fields `Year` and `Quarter` dynamicall {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs87/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs87/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs87/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs87/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs87/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs87/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -279,10 +345,16 @@ During runtime, the **Values** button in the field list can be moved to a differ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs88/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs88/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs88/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs88/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs88/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs88/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -304,10 +376,16 @@ The event [`enginePopulated`](https://ej2.syncfusion.com/react/documentation/api {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs89/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs89/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs89/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs89/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs89/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs89/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -319,10 +397,16 @@ The event [`onFieldDropped`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs90/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs90/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs90/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs90/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs90/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs90/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -336,10 +420,16 @@ For example, if we perform a sort operation within the field list, the field lis {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs91/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs91/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs91/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs91/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs91/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs91/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -373,10 +463,16 @@ In the below sample, opening pop-up field list can be restricted by setting the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs92/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs92/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs92/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs92/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs92/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs92/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -408,10 +504,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs93/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs93/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs93/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs93/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs93/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs93/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -437,10 +539,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs94/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs94/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs94/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs94/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs94/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs94/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/filtering.md b/ej2-react/pivotview/filtering.md index 8b57caf75..d0a8827ba 100644 --- a/ej2-react/pivotview/filtering.md +++ b/ej2-react/pivotview/filtering.md @@ -45,10 +45,16 @@ Meanwhile filtering can also be configured at code behind using the [`filterSett {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs95/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs95/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs95/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs95/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs95/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs95/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -84,10 +90,10 @@ The data limit can be set using the [`maxNodeLimitInMemberEditor`](https://ej2.s {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs96/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs96/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs96/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs96/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -108,10 +114,10 @@ This will help to avoid performance lags when opening a member editor whose hier {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs97/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs97/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs97/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs97/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -138,10 +144,10 @@ Allows user to load the members on the basis of the level number set in the [`le {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs98/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs98/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs98/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs98/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -163,10 +169,16 @@ The label filtering dialog can be enabled by setting the [`allowLabelFilter`](ht {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs99/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs99/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs99/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs99/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs99/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs99/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -217,10 +229,16 @@ For example, in a "Country" field, to show countries names that contains "United {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs100/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs100/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs100/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs100/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs100/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs100/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -236,10 +254,16 @@ For example, in a "Sold" field, to show the values between "90" to "100", set [` {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs101/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs101/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs101/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs101/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs101/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs101/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -255,10 +279,16 @@ For example, in a "Delivery Date" field, to show the delivery records of the fir {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs102/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs102/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs102/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs102/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs102/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs102/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -278,10 +308,16 @@ The value filtering dialog can be enabled by setting the [`AllowValueFilter`](ht {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs103/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs103/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs103/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs103/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs103/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs103/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -324,10 +360,16 @@ For example, to show the data where total sum of units sold for each country exc {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs104/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs104/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs104/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs104/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs104/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs104/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -351,10 +393,16 @@ The event [`memberFiltering`](https://ej2.syncfusion.com/react/documentation/api {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs105/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs105/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs105/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs105/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs105/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs105/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -374,10 +422,16 @@ In the below sample, the member editor of field "Country" shows only the selecte {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs106/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs106/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs106/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs106/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs106/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs106/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -401,10 +455,16 @@ In the below sample, filter action can be restricted by setting the **args.cance {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs107/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs107/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs107/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs107/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs107/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs107/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -426,10 +486,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs108/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs108/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs108/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs108/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs108/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs108/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -445,10 +511,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs109/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs109/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs109/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs109/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs109/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs109/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/globalization-and-localization.md b/ej2-react/pivotview/globalization-and-localization.md index 3ccd3818f..f21d2c0b2 100644 --- a/ej2-react/pivotview/globalization-and-localization.md +++ b/ej2-react/pivotview/globalization-and-localization.md @@ -1,6 +1,6 @@ --- layout: post -title: Globalization and localization in React Pivotview component | Syncfusion +title: Globalization and localization in React | Syncfusion description: Learn here all about Globalization and localization in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Globalization and localization platform: ej2-react @@ -65,10 +65,10 @@ The Internationalization library is used to globalize number, date, and time val {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs110/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs110/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs110/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs110/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -88,10 +88,16 @@ The following example demonstrates the decimal separators in `Deutsch` culture. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/locale-cs1/app/index.jsx %} +{% include code-snippet/pivot-table/locale-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/locale-cs1/app/index.tsx %} +{% include code-snippet/pivot-table/locale-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/locale-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/locale-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -553,10 +559,10 @@ The following example demonstrates the pivot table in `Deutsch` culture. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs111/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs111/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs111/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs111/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -568,10 +574,16 @@ Right-to-left (RTL) provides an option to switch the text direction and layout o {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs112/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs112/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs112/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs112/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs112/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs112/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/grid-customization.md b/ej2-react/pivotview/grid-customization.md index 55e8202aa..8c8b75467 100644 --- a/ej2-react/pivotview/grid-customization.md +++ b/ej2-react/pivotview/grid-customization.md @@ -20,10 +20,10 @@ To set the `width` and `height`, you can provide the pixel values either in numb {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs113/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs113/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs113/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs113/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -43,10 +43,10 @@ In the below example, the `rowHeight` is set as '60px'. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs114/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs114/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs114/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs114/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -60,10 +60,10 @@ In the below example, the `columnWidth` is set as '120px'. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs115/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs115/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs115/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs115/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -75,10 +75,10 @@ Reordering can be done by simple drag and drop of a particular column header fro {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs116/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs116/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs116/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs116/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -92,10 +92,10 @@ Column width can be resized by clicking and dragging the right edge of the colum {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs117/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs117/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs117/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs117/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -109,10 +109,10 @@ The text wrap allows to wrap the cell content to the next line when it exceeds t {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs118/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs118/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs118/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs118/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -136,10 +136,10 @@ Available modes of grid lines are: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs119/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs119/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs119/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs119/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -156,10 +156,10 @@ The pivot table supports two types of selection that can be set using `selection {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs120/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs120/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs120/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs120/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -176,10 +176,10 @@ The pivot table supports four types of selection mode that can be set using `sel {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs121/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs121/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs121/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs121/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -196,10 +196,10 @@ The pivot table supports two types of cell selection mode that can be set using {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs122/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs122/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs122/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs122/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -219,10 +219,10 @@ The clip mode provides options to display its overflow cell content in the pivot {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs123/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs123/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs123/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs123/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/grouping-bar.md b/ej2-react/pivotview/grouping-bar.md index df655a857..0d905bf97 100644 --- a/ej2-react/pivotview/grouping-bar.md +++ b/ej2-react/pivotview/grouping-bar.md @@ -27,10 +27,16 @@ Similar to Field List, Grouping Bar UI also comes with basic interactions like, {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs124/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs124/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs124/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs124/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs124/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs124/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -44,10 +50,16 @@ The fields panel, which is positioned above the grouping bar, displays the field {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs125/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs125/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs125/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs125/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs125/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs125/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -61,10 +73,16 @@ The Grouping Bar has an option to filter members of particular fields at runtime {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs126/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs126/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs126/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs126/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs126/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs126/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -78,10 +96,16 @@ In the below sample, the filter icon of "Quarter" and "Products" fields have bee {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs127/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs127/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs127/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs127/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs127/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs127/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -95,10 +119,16 @@ The Grouping Bar has an option to order members of a particular fields either in {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs128/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs128/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs128/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs128/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs128/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs128/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -112,10 +142,16 @@ In the below sample, the sort icon of "Quarter" and "Country" fields have been h {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs129/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs129/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs129/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs129/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs129/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs129/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -129,10 +165,16 @@ The Grouping Bar has an option to remove a particular field at run time. In orde {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs130/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs130/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs130/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs130/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs130/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs130/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -146,10 +188,16 @@ In the below sample, the remove icon of fields "Year", "Sold" and "Products" hav {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs131/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs131/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs131/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs131/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs131/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs131/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -161,10 +209,16 @@ The Grouping Bar has an option to drag-and-drop fields between row, column, valu {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs132/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs132/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs132/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs132/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs132/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs132/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -178,10 +232,16 @@ In the below sample, the drag and drop of the fields "Year" and "Products" have {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs133/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs133/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs133/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs133/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs133/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs133/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -195,10 +255,16 @@ When a report is bound to the pivot table, fields will be automatically populate {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs134/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs134/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs134/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs134/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs134/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs134/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -210,10 +276,16 @@ End user can perform calculations over a group of values using the aggregation o {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs135/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs135/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs135/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs135/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs135/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs135/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -227,10 +299,16 @@ In the below sample, the dropdown icon of field "Sold" is hidden. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs136/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs136/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs136/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs136/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs136/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs136/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -246,10 +324,16 @@ During runtime, the **Values** button in the grouping bar can be moved to a diff {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs137/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs137/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs137/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs137/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs137/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs137/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -265,10 +349,16 @@ It has following parameters - `droppedAxis`, `droppedField` and `dataSourceSetti {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs138/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs138/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs138/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs138/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs138/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs138/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -290,10 +380,16 @@ In the below sample, the drag operation for the fields in row axis alone is rest {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs139/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs139/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs139/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs139/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs139/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs139/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -321,10 +417,16 @@ In the below sample, dropping of any fields in value axis alone is restricted. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs140/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs140/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs140/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs140/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs140/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs140/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -348,10 +450,16 @@ In the below sample, the field "Country" could not be removed from report by any {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs141/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs141/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs141/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs141/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs141/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs141/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -373,10 +481,16 @@ In the below sample, the aggregate types of the field "Amount" has been customiz {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs142/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs142/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs142/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs142/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs142/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs142/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -410,10 +524,16 @@ The event [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/piv {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs143/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs143/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs143/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs143/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs143/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs143/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -443,10 +563,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs144/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs144/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs144/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs144/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs144/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs144/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -470,10 +596,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs145/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs145/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs145/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs145/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs145/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs145/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/grouping.md b/ej2-react/pivotview/grouping.md index 6ef38d696..fe175974b 100644 --- a/ej2-react/pivotview/grouping.md +++ b/ej2-react/pivotview/grouping.md @@ -31,10 +31,16 @@ To have a quick glance on how to group row and column field items in the React P {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs146/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs146/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs146/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs146/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs146/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs146/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -46,10 +52,16 @@ Number grouping allows users to organize data, which is in number format into di {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs147/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs147/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs147/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs147/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs147/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs147/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -82,10 +94,16 @@ Number grouping can also be configured using the [`groupSettings`](https://ej2.s {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs148/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs148/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs148/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs148/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs148/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs148/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -103,10 +121,16 @@ Date grouping allows users to organize data, which is in date format into differ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs149/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs149/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs149/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs149/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs149/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs149/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -142,10 +166,16 @@ Date grouping can also be configured using the [`groupSettings`](https://ej2.syn {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs150/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs150/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs150/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs150/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs150/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs150/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -153,7 +183,7 @@ Date grouping can also be configured using the [`groupSettings`](https://ej2.syn Furthermore, in the field list UI, these date group fields **Years (Date)**, **Quarters (Date)**, **Months (Date)**, etc... will be automatically grouped and displayed under the **Date** folder name. - + ### Ungrouping the existing date groups @@ -167,10 +197,16 @@ Custom grouping can group any data type, such as date, time, number and string, {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs151/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs151/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs151/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs151/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs151/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs151/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -214,10 +250,16 @@ The available custom group properties in [`customGroups`](https://ej2.syncfusion {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs152/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs152/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs152/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs152/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs152/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs152/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md b/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md index cf7a6002a..60c1cf0b9 100644 --- a/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md +++ b/ej2-react/pivotview/how-to/add-custom-aggregation-type-in-menu.md @@ -1,6 +1,6 @@ --- layout: post -title: Add custom aggregation type to the menu in React Pivotview component | Syncfusion +title: Add custom aggregation type to the menu in React | Syncfusion description: Learn here all about how to add custom aggregation type to the menu in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Add custom aggregation type to the menu @@ -18,10 +18,16 @@ In the following example, we have added the aggregation types **CustomAggregateT {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs317/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs317/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs317/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs317/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs317/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs317/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md b/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md index 8c212c196..4796ddbe5 100644 --- a/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md +++ b/ej2-react/pivotview/how-to/apply-condition-based-hyper-link-for-specific-row-or-column.md @@ -1,14 +1,14 @@ --- layout: post -title: Apply condition based hyper link for specific row or column in React Pivotview component | Syncfusion -description: Learn here all about Apply condition based hyper link for specific row or column in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. +title: Apply conditional hyper link for row or column in React | Syncfusion +description: Learn here all about Apply condition based hyper link for specific row or column in Syncfusion React of Syncfusion Essential JS 2 and more. control: Apply condition based hyper link for specific row or column platform: ej2-react documentation: ug domainurl: ##DomainURL## --- -# Apply condition based hyper link for specific row or column in React Pivotview component +# Apply condition based hyper link for specific row or column in React You can apply conditions for specific row or column using `label` option to show hyperlink option in the pivot table. It can be configured using the `conditionalSettings` option through code behind, during initial rendering. The required settings are: @@ -19,10 +19,10 @@ You can apply conditions for specific row or column using `label` option to show {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs153/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs153/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs153/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs153/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md b/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md index 576685131..c2efefe23 100644 --- a/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md +++ b/ej2-react/pivotview/how-to/apply-conditional-formatting-for-specific-row-or-column.md @@ -1,6 +1,6 @@ --- layout: post -title: Apply conditional formatting for specific row or column in React Pivotview component | Syncfusion +title: Apply conditional formatting for row or column in React | Syncfusion description: Learn here all about Apply conditional formatting for specific row or column in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Apply conditional formatting for specific row or column platform: ej2-react @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Apply conditional formatting for specific row or column in React Pivotview component +# Apply conditional formatting for specific row or column in React You can apply conditional formatting for specific row or column using `label` option in the pivot table. It can be configured using the `conditionalFormatSettings` option through code behind, during initial rendering. The required settings are: @@ -22,10 +22,10 @@ To use the conditional formatting feature, You need to inject the `ConditionalFo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs154/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs154/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs154/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs154/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md b/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md index 7e740d2d3..1fa903b45 100644 --- a/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md +++ b/ej2-react/pivotview/how-to/apply-custom-styles-to-pivot-cells.md @@ -1,6 +1,6 @@ --- layout: post -title: Apply custom style to pivot cells in React Pivotview component | Syncfusion +title: Apply custom style to pivot cells in React | Syncfusion description: Learn here all about Apply custom style to pivot cells in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Apply custom style to pivot cells @@ -16,10 +16,16 @@ In the following example, a custom style has been applied to the column header * {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs312/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs312/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs312/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs312/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs312/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs312/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md b/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md index 473439e4a..816b33020 100644 --- a/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md +++ b/ej2-react/pivotview/how-to/bind-complex-data-to-the-pivot-table.md @@ -1,7 +1,7 @@ --- layout: post -title: Convert complex JSON to flat JSON and assign it to the pivot table in React Pivotview component | Syncfusion -description: Learn here all about how to convert complex JSON to flat JSON and assign it to the pivot table in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. +title: Complex JSON to flat JSON in React Pivotview component | Syncfusion +description: Learn here all about how to convert complex JSON to flat JSON and assign it to the pivot table in Syncfusion React of Syncfusion Essential JS 2 and more. platform: ej2-react control: Convert complex JSON to flat JSON and assign it to the pivot table documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## -# Convert complex JSON to flat JSON and assign it to the pivot table in React Pivotview component +# Complex JSON to flat JSON in React Pivotview component By default, flat JSON can only bind to the pivot table. However, you can connect complex JSON to the pivot table by converting it to flat JSON via code-behind and binding it to the pivot table using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/pivotview/dataSourceSettings/#datasource) property in the [`load`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#load) event. @@ -18,10 +18,10 @@ In the following example, the **complexToFlatJson()** method is used to convert {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs318/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs318/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs318/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs318/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md b/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md index 6ad106745..39302f14c 100644 --- a/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md +++ b/ej2-react/pivotview/how-to/change-load-limited-data-in-member-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Change load limited data in member editor in React Pivotview component | Syncfusion +title: Change load limited data in member editor in React | Syncfusion description: Learn here all about Change load limited data in member editor in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Change load limited data in member editor platform: ej2-react @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Change load limited data in member editor in React Pivotview component +# Change load limited data in member editor in React In the filter dialog, you can set the limit to display the field values while loading large data. Based on this limit, the initial loading will complete quickly without any performance constraint. You can use the search option to refine the field values from the exceeded limit and refine the data further. A message with the remaining data count will be displayed in the member editor. The data limit can be set in the `maxNodeLimitInMemberEditor` property. @@ -20,10 +20,10 @@ In the following example, the limit of data in the member editor is set to 100. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs155/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs155/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs155/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs155/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md b/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md index c20bb1243..bcfcc4022 100644 --- a/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md +++ b/ej2-react/pivotview/how-to/changing-the-pivotview-component-minimum-height.md @@ -1,6 +1,6 @@ --- layout: post -title: Changing the pivotview component minimum height in React Pivotview component | Syncfusion +title: Changing the pivotview component minimum height in React | Syncfusion description: Learn here all about Changing the pivotview component minimum height in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Changing the pivotview component minimum height platform: ej2-react @@ -8,16 +8,22 @@ documentation: ug domainurl: ##DomainURL## --- -# Changing the pivotview component minimum height in React Pivotview component +# Changing the pivotview component minimum height in React The `minHeight` property allows you to change the minimum height for the pivot table control. For the pivot table control, the default minimum height is **300px**. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs156/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs156/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs156/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs156/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs156/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs156/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md b/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md index 4e10af3c9..dcd009f71 100644 --- a/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md +++ b/ej2-react/pivotview/how-to/chart-based-on-pivot-table-selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart based on pivot table selection in React Pivotview component | Syncfusion +title: Chart based on pivot table selection in React | Syncfusion description: Learn here all about Chart based on pivot table selection in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Chart based on pivot table selection platform: ej2-react @@ -14,10 +14,16 @@ The cell selection support is enabled using the [`allowSelection`](https://ej2.s {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs157/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs157/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs157/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs157/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs157/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs157/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/configure-data-grid-options-on-editing-mode.md b/ej2-react/pivotview/how-to/configure-data-grid-options-on-editing-mode.md index fdf710ce7..369868e0a 100644 --- a/ej2-react/pivotview/how-to/configure-data-grid-options-on-editing-mode.md +++ b/ej2-react/pivotview/how-to/configure-data-grid-options-on-editing-mode.md @@ -1,6 +1,6 @@ --- layout: post -title: Configure data grid options on editing mode in React Pivotview component | Syncfusion +title: Configure data grid options on editing mode in React | Syncfusion description: Learn here all about Configure data grid options on editing mode in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Configure data grid options on editing mode platform: ej2-react @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Configure data grid options on editing mode in React Pivotview component +# Configure data grid options on editing mode in React You can access the data grid options such as sort, group, filter, etc on editing mode using `beginDrillThrough` event in the pivot table. The event fires on every value cell click and provides the data grid information before it displays. @@ -16,10 +16,16 @@ You can access the data grid options such as sort, group, filter, etc on editing {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs158/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs158/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs158/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs158/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs158/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs158/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/customize-cells-elements.md b/ej2-react/pivotview/how-to/customize-cells-elements.md index 90c86138d..68264472d 100644 --- a/ej2-react/pivotview/how-to/customize-cells-elements.md +++ b/ej2-react/pivotview/how-to/customize-cells-elements.md @@ -17,10 +17,10 @@ In this demo, the revenue cost for each year is represented with trend icons. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs159/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs159/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs159/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs159/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/customize-empty-value-cells.md b/ej2-react/pivotview/how-to/customize-empty-value-cells.md index 8726c0fce..37226a719 100644 --- a/ej2-react/pivotview/how-to/customize-empty-value-cells.md +++ b/ej2-react/pivotview/how-to/customize-empty-value-cells.md @@ -14,10 +14,10 @@ You can customize empty value cells to display with custom text using `emptyCell {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs160/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs160/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs160/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs160/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/customize-number-date-and-time-values.md b/ej2-react/pivotview/how-to/customize-number-date-and-time-values.md index 2edcc69c6..2d4cab2ca 100644 --- a/ej2-react/pivotview/how-to/customize-number-date-and-time-values.md +++ b/ej2-react/pivotview/how-to/customize-number-date-and-time-values.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize number date and time values in React Pivotview component | Syncfusion +title: Customize number date and time values in React | Syncfusion description: Learn here all about Customize number date and time values in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Customize number date and time values platform: ej2-react @@ -23,10 +23,16 @@ For numbers, the formatting settings required to apply through code behind are: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs161/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs161/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs161/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs161/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs161/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs161/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -44,10 +50,16 @@ For date and time, the formatting settings required to apply through code behind {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs162/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs162/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs162/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs162/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs162/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs162/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-grid.md b/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-grid.md index d8c4f06e3..197b8cf2c 100644 --- a/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-grid.md +++ b/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-grid.md @@ -24,10 +24,10 @@ In the below sample, pivot grid is rendered with a customized pivot button icons {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-grid/icon-customization-cs1/app/index.jsx %} +{% include code-snippet/pivot-grid/icon-customization-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-grid/icon-customization-cs1/app/index.tsx %} +{% include code-snippet/pivot-grid/icon-customization-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-table.md b/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-table.md index 963fcbed7..7310b166a 100644 --- a/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-table.md +++ b/ej2-react/pivotview/how-to/customize-the-icons-for-pivot-table.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize the icons for pivot table in React Pivotview component | Syncfusion +title: Customize the icons for pivot table in React | Syncfusion description: Learn here all about Customize the icons for pivot table in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Customize the icons for pivot table platform: ej2-react @@ -34,10 +34,16 @@ In the below sample, pivot table is rendered with a customized pivot button icon {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/icon-customization-cs1/app/index.jsx %} +{% include code-snippet/pivot-table/icon-customization-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/icon-customization-cs1/app/index.tsx %} +{% include code-snippet/pivot-table/icon-customization-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/icon-customization-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/icon-customization-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/customizing-loading-indicator.md b/ej2-react/pivotview/how-to/customizing-loading-indicator.md index 0aa395a62..7f4a92d9e 100644 --- a/ej2-react/pivotview/how-to/customizing-loading-indicator.md +++ b/ej2-react/pivotview/how-to/customizing-loading-indicator.md @@ -1,6 +1,6 @@ --- layout: post -title: Customizing loading indicator in React Pivotview component | Syncfusion +title: Customizing loading indicator in React | Syncfusion description: Learn here all about Customizing loading indicator in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Customizing loading indicator platform: ej2-react @@ -16,10 +16,16 @@ You can customize the appearance of the loading indicator in the pivot table by {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs163/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs163/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs163/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs163/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs163/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs163/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/display-value-in-hrs-min-sec-format.md b/ej2-react/pivotview/how-to/display-value-in-hrs-min-sec-format.md index f2e74b938..5920b5f2c 100644 --- a/ej2-react/pivotview/how-to/display-value-in-hrs-min-sec-format.md +++ b/ej2-react/pivotview/how-to/display-value-in-hrs-min-sec-format.md @@ -1,6 +1,6 @@ --- layout: post -title: Display string value to pivot table values in React Pivotview component | Syncfusion +title: Display string value to pivot table values in React | Syncfusion description: Learn here all about how to display string value to pivot table values in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Display string value to pivot table values @@ -10,7 +10,7 @@ domainurl: ##DomainURL## -# Display string value to pivot table values in React Pivotview component +# Display string value to pivot table values in React End user can display string value to the pivot table's value cell by using the [`aggregateCellInfo`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#aggregatecellinfo) event. @@ -18,10 +18,16 @@ In the following example, each cell value of the **Sold** field's actual value {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs316/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs316/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs316/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs316/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs316/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs316/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/drill-through-grid-cell-edit-type.md b/ej2-react/pivotview/how-to/drill-through-grid-cell-edit-type.md index 07ab412f9..a781fe621 100644 --- a/ej2-react/pivotview/how-to/drill-through-grid-cell-edit-type.md +++ b/ej2-react/pivotview/how-to/drill-through-grid-cell-edit-type.md @@ -1,6 +1,6 @@ --- layout: post -title: Drill through grid cell edit type in React Pivotview component | Syncfusion +title: Drill through grid cell edit type in React | Syncfusion description: Learn here all about Drill through grid cell edit type in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. control: Drill through grid cell edit type platform: ej2-react @@ -25,10 +25,16 @@ In the below example, the data type of the `Country` column is set to `DropDownL {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs164/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs164/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs164/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs164/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs164/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs164/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/export-table-and-chart-into-the-same-document-using-toolbar.md b/ej2-react/pivotview/how-to/export-table-and-chart-into-the-same-document-using-toolbar.md index 4d50b1435..bada9103a 100644 --- a/ej2-react/pivotview/how-to/export-table-and-chart-into-the-same-document-using-toolbar.md +++ b/ej2-react/pivotview/how-to/export-table-and-chart-into-the-same-document-using-toolbar.md @@ -1,7 +1,7 @@ --- layout: post -title: Export table and chart into the same document using toolbar in React Pivotview component | Syncfusion -description: Learn here all about how to export table and chart into the same document using toolbar in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. +title: Export table and chart into the same document in React | Syncfusion +description: Learn here all about how to export table and chart into the same document using toolbar in Syncfusion React of Syncfusion Essential JS 2 and more. platform: ej2-react control: Export table and chart into the same document using toolbar documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## -# Export table and chart into the same document using toolbar in React Pivotview component +# Export table and chart into the same document using toolbar in React Even if the [displayOption.view](https://ej2.syncfusion.com/react/documentation/api/pivotview/displayOptionModel/#view) property is set to **Both** in the pivot table, you can only export either the table or the chart to the PDF document based on the current value set in the [displayOption.primary](https://ej2.syncfusion.com/react/documentation/api/pivotview/primary/) property. But, to export both the table and the chart to the same PDF document, use the [`pdfExport`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#pdfexport) method during the [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#actionbegin) event invoke. @@ -18,10 +18,16 @@ In the following example, the built-in export action can be restricted by settin {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs315/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs315/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs315/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs315/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs315/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs315/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/hide-empty-headers.md b/ej2-react/pivotview/how-to/hide-empty-headers.md index 12ae92ee8..e5a18a019 100644 --- a/ej2-react/pivotview/how-to/hide-empty-headers.md +++ b/ej2-react/pivotview/how-to/hide-empty-headers.md @@ -18,10 +18,16 @@ For example, if the raw data for the field 'Country' is defined as **"United Kin {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs165/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs165/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs165/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs165/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs165/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs165/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/hide-specific-columns-in-pivot-table.md b/ej2-react/pivotview/how-to/hide-specific-columns-in-pivot-table.md index 7d4fcd3c2..c7a093fd5 100644 --- a/ej2-react/pivotview/how-to/hide-specific-columns-in-pivot-table.md +++ b/ej2-react/pivotview/how-to/hide-specific-columns-in-pivot-table.md @@ -1,6 +1,6 @@ --- layout: post -title: Hide specific columns in pivot table in React Pivotview component | Syncfusion +title: Hide specific columns in pivot table in React | Syncfusion description: Learn here all about Hide specific columns in pivot table in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Hide specific columns in pivot table @@ -16,10 +16,16 @@ N> The **dot(.)** character in **FY 2016.Units Sold** is used by default to iden {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs314/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs314/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs314/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs314/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs314/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs314/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/load-pre-defined-report-in-initial-rendering.md b/ej2-react/pivotview/how-to/load-pre-defined-report-in-initial-rendering.md index 56a671d11..9b9ef88c7 100644 --- a/ej2-react/pivotview/how-to/load-pre-defined-report-in-initial-rendering.md +++ b/ej2-react/pivotview/how-to/load-pre-defined-report-in-initial-rendering.md @@ -1,6 +1,6 @@ --- layout: post -title: Load desired report from the report list as default in React Pivotview component | Syncfusion +title: Load desired report from the report list in React | Syncfusion description: Learn here all about how to load desired report from the report list as default in Syncfusion React Pivotview component of Syncfusion Essential JS 2 and more. platform: ej2-react control: Load desired report from the report list as default @@ -10,16 +10,22 @@ domainurl: ##DomainURL## -# Load desired report from the report list as default in React Pivotview component +# Load desired report from the report list as default in React By default, the pivot table is displayed with the report bound at the code-behind. To load a desired report from the previously saved report collection during initial rendering, set the desired report name in the [`dataBound`](https://ej2.syncfusion.com/react/documentation/api/pivotview/#databound) event, along with the additional report-based customization code shown below. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs319/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs319/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs319/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs319/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs319/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs319/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md b/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md index 54dea241d..53f934924 100644 --- a/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md +++ b/ej2-react/pivotview/how-to/perform-cell-selection-and-get-selected-cells-information.md @@ -34,10 +34,10 @@ The event `cellSelected` fires on every cell/row/column on selected/deselected o {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs166/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs166/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs166/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs166/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/refresh-the-field-list.md b/ej2-react/pivotview/how-to/refresh-the-field-list.md index 92d9bdb66..48e579a2b 100644 --- a/ej2-react/pivotview/how-to/refresh-the-field-list.md +++ b/ej2-react/pivotview/how-to/refresh-the-field-list.md @@ -14,10 +14,16 @@ You can refresh pivot table and field list with new data source dynamically. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs167/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs167/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs167/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs167/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs167/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs167/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/show-custom-tooltip-for-row-and-column-headers.md b/ej2-react/pivotview/how-to/show-custom-tooltip-for-row-and-column-headers.md index 9b2a97e40..ae0c795e3 100644 --- a/ej2-react/pivotview/how-to/show-custom-tooltip-for-row-and-column-headers.md +++ b/ej2-react/pivotview/how-to/show-custom-tooltip-for-row-and-column-headers.md @@ -14,10 +14,16 @@ You can create and display the tooltip for each row and column header(s) in the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs313/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs313/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs313/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs313/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs313/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs313/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/show-field-list-when-pivot-table-empty.md b/ej2-react/pivotview/how-to/show-field-list-when-pivot-table-empty.md index bc95e076b..f8d5efce7 100644 --- a/ej2-react/pivotview/how-to/show-field-list-when-pivot-table-empty.md +++ b/ej2-react/pivotview/how-to/show-field-list-when-pivot-table-empty.md @@ -14,10 +14,16 @@ When there are no fields in a pivot table's row, column, value, and filter axes, {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs168/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs168/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs168/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs168/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs168/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs168/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/show-hide-tool-tip.md b/ej2-react/pivotview/how-to/show-hide-tool-tip.md index 2373143f1..3597647d4 100644 --- a/ej2-react/pivotview/how-to/show-hide-tool-tip.md +++ b/ej2-react/pivotview/how-to/show-hide-tool-tip.md @@ -16,10 +16,10 @@ You can set the visibility of tooltip using `showTooltip` in the pivot table. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs169/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs169/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs169/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs169/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/how-to/switching-older-themes-style.md b/ej2-react/pivotview/how-to/switching-older-themes-style.md index 4fe10cdad..b129f3196 100644 --- a/ej2-react/pivotview/how-to/switching-older-themes-style.md +++ b/ej2-react/pivotview/how-to/switching-older-themes-style.md @@ -72,10 +72,10 @@ In the below code sample, we replicate the older theme style. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/switch-theme-cs1/app/index.jsx %} +{% include code-snippet/pivot-table/switch-theme-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/switch-theme-cs1/app/index.tsx %} +{% include code-snippet/pivot-table/switch-theme-cs1/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/hyper-link.md b/ej2-react/pivotview/hyper-link.md index 9c507084f..1f7802c72 100644 --- a/ej2-react/pivotview/hyper-link.md +++ b/ej2-react/pivotview/hyper-link.md @@ -30,10 +30,16 @@ The pivot table has an option to show hyperlink option for all cells that are cu {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs170/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs170/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs170/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs170/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs170/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs170/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -45,10 +51,16 @@ The pivot table has an option to show hyperlink option for row header cells alon {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs171/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs171/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs171/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs171/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs171/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs171/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -60,10 +72,16 @@ The pivot table has an option to show hyperlink option for column header cells a {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs172/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs172/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs172/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs172/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs172/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs172/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -75,10 +93,16 @@ The pivot table has an option to show hyperlink option for value cells alone tha {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs173/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs173/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs173/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs173/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs173/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs173/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -90,10 +114,16 @@ The pivot table has an option to show hyperlink option for summary cells alone t {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs174/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs174/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs174/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs174/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs174/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs174/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -110,10 +140,16 @@ The pivot table has an option to show hyperlink option to the cells based on spe {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs175/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs175/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs175/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs175/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs175/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs175/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -125,10 +161,16 @@ The pivot table has an option to show hyperlink in the cells based on specific r {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs176/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs176/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs176/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs176/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs176/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs176/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -142,10 +184,16 @@ It has following parameters - `Cancel` and `CurrentCell`. The parameter `Current {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs177/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs177/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs177/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs177/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs177/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs177/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/images/calculatdfield-grouping-edit1.png b/ej2-react/pivotview/images/calculatdfield-grouping-edit1.png index 774efef12..4da41be5f 100644 Binary files a/ej2-react/pivotview/images/calculatdfield-grouping-edit1.png and b/ej2-react/pivotview/images/calculatdfield-grouping-edit1.png differ diff --git a/ej2-react/pivotview/images/locale.png b/ej2-react/pivotview/images/locale.png index edf737d91..1744c49fb 100644 Binary files a/ej2-react/pivotview/images/locale.png and b/ej2-react/pivotview/images/locale.png differ diff --git a/ej2-react/pivotview/label-filtering.md b/ej2-react/pivotview/label-filtering.md index 7b87d8fa0..7ca9736b6 100644 --- a/ej2-react/pivotview/label-filtering.md +++ b/ej2-react/pivotview/label-filtering.md @@ -53,10 +53,10 @@ Operators that can be used in label filtering are: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs178/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs178/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs178/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs178/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -91,10 +91,10 @@ Operators that can be used in date filtering are: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs179/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs179/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs179/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs179/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -129,10 +129,10 @@ Operators that can be used in date filtering are: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs180/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs180/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs180/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs180/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/member-filtering.md b/ej2-react/pivotview/member-filtering.md index 8daef62fd..a528e0bdd 100644 --- a/ej2-react/pivotview/member-filtering.md +++ b/ej2-react/pivotview/member-filtering.md @@ -25,10 +25,10 @@ It can be configured using the `filterSettings` option through code-behind. The {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs181/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs181/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs181/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs181/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -42,10 +42,10 @@ Users can load members on demand by setting the [`loadOnDemandInMemberEditor`](h {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs182/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs182/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs182/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs182/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -65,10 +65,10 @@ User can load the members based on the level count by using the property [`level {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs183/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs183/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs183/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs183/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/number-formatting.md b/ej2-react/pivotview/number-formatting.md index a600fcbd1..377792401 100644 --- a/ej2-react/pivotview/number-formatting.md +++ b/ej2-react/pivotview/number-formatting.md @@ -37,10 +37,16 @@ Other properties include: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs184/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs184/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs184/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs184/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs184/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs184/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -68,10 +74,16 @@ You can add any custom format directly to the [`format`](https://ej2.syncfusion. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs185/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs185/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs185/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs185/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs185/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs185/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -83,10 +95,16 @@ You can enable formatting dialog option in the toolbar by adding `NumberFormatti {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs186/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs186/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs186/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs186/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs186/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs186/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -98,10 +116,16 @@ You can invoke the formatting dialog by clicking an external button using the `S {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs187/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs187/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs187/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs187/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs187/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs187/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -123,10 +147,16 @@ In the below sample, the customization done in number formatting dialog for the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs188/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs188/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs188/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs188/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs188/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs188/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/olap.md b/ej2-react/pivotview/olap.md index 58b7b1929..66612b292 100644 --- a/ej2-react/pivotview/olap.md +++ b/ej2-react/pivotview/olap.md @@ -212,10 +212,10 @@ In this sample, "Product Categories" is added in column, "Customer Geography" in {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs189/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs189/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs189/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs189/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -229,10 +229,10 @@ Formatting defines a way in which values should be displayed in pivot table. For {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs190/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs190/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs190/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs190/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -246,10 +246,10 @@ The Grouping Bar feature automatically populates [OLAP cube elements](#olap-cube {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs191/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs191/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs191/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs191/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -263,10 +263,10 @@ The component provides a built-in Field List similar to Microsoft Excel. It allo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs192/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs192/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs192/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs192/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -278,10 +278,10 @@ The filter axis contains collection of [OLAP cube elements](#olap-cube-elements) {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs193/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs193/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs193/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs193/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -310,10 +310,10 @@ Also calculated fields can be added at run time through the built-in dialog. The {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs194/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs194/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs194/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs194/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -425,10 +425,10 @@ To use the virtual scrolling feature, inject the `VirtualScroll` module into the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs195/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs195/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs195/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs195/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -452,10 +452,10 @@ npm start {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs196/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs196/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs196/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs196/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -474,10 +474,10 @@ To bind OLAP datasource to the pivot table, you need to specify following proper {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs197/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs197/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs197/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs197/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -491,10 +491,10 @@ By default, the measures are plotted in column axis. To plot those measures in r {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs198/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs198/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs198/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs198/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -506,10 +506,10 @@ You can place measures in different position in row or column axis either thorou {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs199/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs199/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs199/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs199/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -523,10 +523,10 @@ You can bind the named sets in the pivot table by setting it's unique name in th {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs200/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs200/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs200/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs200/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/paging.md b/ej2-react/pivotview/paging.md index 1bc4c7b15..392fcfc6e 100644 --- a/ej2-react/pivotview/paging.md +++ b/ej2-react/pivotview/paging.md @@ -27,10 +27,16 @@ You can also change the position, visibility, compact view, and template of the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs201/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs201/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs201/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs201/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs201/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs201/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -44,10 +50,16 @@ You can display the pager UI at top or bottom of the pivot table by using the [` {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs202/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs202/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs202/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs202/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs202/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs202/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -61,10 +73,16 @@ Toggles and displays row and column pager. To show the column pager on the left {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs203/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs203/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs203/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs203/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs203/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs203/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -76,10 +94,16 @@ By hiding all except the previous and next navigation buttons, the pager UI can {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs204/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs204/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs204/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs204/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs204/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs204/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -93,10 +117,16 @@ In the following example, row pager has been disabled by setting the [`showRowPa {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs205/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs205/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs205/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs205/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs205/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs205/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -108,10 +138,16 @@ By using the [`showRowPageSize`](https://ej2.syncfusion.com/react/documentation/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs206/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs206/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs206/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs206/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs206/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs206/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -127,10 +163,16 @@ In the following example, the "Rows per page" dropdown is set with user-defined {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs207/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs207/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs207/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs207/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs207/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs207/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -142,10 +184,16 @@ The [`template`](https://ej2.syncfusion.com/react/documentation/api/pivotview/pa {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/pagingTemplate-cs1/app/index.jsx %} +{% include code-snippet/pivot-table/pagingTemplate-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/pagingTemplate-cs1/app/index.tsx %} +{% include code-snippet/pivot-table/pagingTemplate-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/pagingTemplate-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/pagingTemplate-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/pdf-export.md b/ej2-react/pivotview/pdf-export.md index b09ffdb52..0fbefbcb2 100644 --- a/ej2-react/pivotview/pdf-export.md +++ b/ej2-react/pivotview/pdf-export.md @@ -14,10 +14,16 @@ PDF export allows exporting pivot table data as PDF document. To enable PDF expo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs208/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs208/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs208/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs208/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs208/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs208/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -29,10 +35,16 @@ PDF export provides an option for exporting multiple pivot tables to same file. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs209/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs209/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs209/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs209/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs209/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs209/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -44,10 +56,16 @@ When the [displayOption](https://ej2.syncfusion.com/react/documentation/api/pivo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs322/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs322/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs322/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs322/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs322/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs322/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -206,10 +224,16 @@ The below code illustrates the PDF export customization options. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs210/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs210/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs210/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs210/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs210/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs210/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -240,10 +264,16 @@ The below code illustrates the PDF export customization options. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs327/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs327/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs327/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs327/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs327/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs327/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -255,10 +285,16 @@ The PDF export provides an option to change file name of the document before exp {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs211/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs211/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs211/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs211/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs211/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs211/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -270,10 +306,16 @@ The PDF export provides an option to change page orientation of the document bef {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs212/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs212/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs212/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs212/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs212/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs212/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -287,10 +329,16 @@ The PDF export provides an option to change page size of the document before exp {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs213/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs213/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs213/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs213/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs213/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs213/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -304,10 +352,16 @@ Before exporting, you can change the height and width of the PDF document. To ac {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs323/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs323/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs323/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs323/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs323/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs323/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -321,10 +375,16 @@ Before exporting, you can split and export the pivot table columns on each page {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs324/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs324/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs324/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs324/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs324/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs324/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -338,10 +398,16 @@ As shown in the code example below, the **"Unit Sold"** column under **"FY 2015" {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs325/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs325/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs325/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs325/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs325/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs325/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -353,10 +419,16 @@ As shown in the code example below, the **"Mountain Bikes"** row under **"France {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs326/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs326/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs326/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs326/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs326/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs326/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -372,10 +444,16 @@ The PDF export provides an option to change colors for headers, caption and reco {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs214/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs214/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs214/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs214/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs214/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs214/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -397,10 +475,16 @@ The available built-in fonts are, {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs215/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs215/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs215/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs215/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs215/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs215/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -415,10 +499,16 @@ You can export the pivot table virtual scroll data as PDF document by using Pivo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs216/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs216/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs216/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs216/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs216/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs216/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -433,10 +523,16 @@ Repeat row headers on each page can be achieved using PivotEngine export option. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs217/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs217/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs217/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs217/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs217/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs217/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -450,10 +546,16 @@ The pivot engine exports the entire virtual data of the pivot table (i.e. the da {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs218/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs218/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs218/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs218/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs218/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs218/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -472,10 +574,16 @@ The event `pdfQueryCellInfo` triggers on framing each row and value cell during {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs219/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs219/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs219/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs219/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs219/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs219/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -490,10 +598,16 @@ The event `pdfHeaderQueryCellInfo` triggers on framing each column header cell d {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs220/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs220/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs220/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs220/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs220/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs220/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -508,10 +622,16 @@ The event [`exportComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs221/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs221/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs221/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs221/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs221/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs221/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/pivot-chart.md b/ej2-react/pivotview/pivot-chart.md index 04858f476..bada5484a 100644 --- a/ej2-react/pivotview/pivot-chart.md +++ b/ej2-react/pivotview/pivot-chart.md @@ -23,10 +23,16 @@ The below sample displays the pivot chart component based on the pivot report bo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs222/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs222/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs222/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs222/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs222/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs222/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -69,10 +75,16 @@ In the below code sample, the pivot chart type is set as **Bar**. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs223/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs223/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs223/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs223/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs223/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs223/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -93,10 +105,16 @@ In the below code sample, the **Pie** chart is rendered, and the other accumulat {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs224/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs224/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs224/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs224/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs224/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs224/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -113,10 +131,16 @@ In the accumulation charts, drill down and drill up operations can be performed {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs225/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs225/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs225/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs225/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs225/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs225/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -132,10 +156,16 @@ If the column has more than one header, then need to mention all the headers sep {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs226/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs226/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs226/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs226/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs226/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs226/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -152,10 +182,16 @@ In the following code sample, the data labels are placed inside. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs227/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs227/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs227/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs227/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs227/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs227/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -165,10 +201,16 @@ The **Connector Line** will be visible when the data label is placed outside the {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs228/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs228/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs228/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs228/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs228/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs228/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -180,10 +222,16 @@ User can draw pie and doughnut charts within the specified range using the `star {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs229/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs229/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs229/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs229/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs229/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs229/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -194,10 +242,16 @@ Users can get doughnut chart from pie chart and vice-versa using the `innerRadiu {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs230/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs230/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs230/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs230/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs230/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs230/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -209,10 +263,16 @@ Exploding can be enabled by setting the `explode` property in [`chartSeries`](ht {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs231/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs231/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs231/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs231/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs231/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs231/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -227,10 +287,16 @@ In the following sample, the Popup mode of field list is enabled in the pivot ch {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs232/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs232/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs232/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs232/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs232/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs232/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -244,10 +310,16 @@ User can enable the grouping bar by setting the property [`showGroupingBar`](htt {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs233/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs233/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs233/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs233/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs233/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs233/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -257,10 +329,16 @@ For accumulation charts alone, a drop-down list will be placed in the column axi {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs234/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs234/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs234/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs234/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs234/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs234/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -272,10 +350,16 @@ By default, the pivot chart will be drawn with the value field (measure) which i {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs235/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs235/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs235/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs235/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs235/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs235/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -289,10 +373,16 @@ User can draw the pivot chart with multiple value fields by setting the property {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs236/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs236/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs236/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs236/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs236/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs236/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -302,10 +392,16 @@ If the user binds more value fields, the result will be multiple pivot charts, a {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs237/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs237/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs237/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs237/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs237/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs237/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -317,10 +413,16 @@ In the following code sample, the pivot chart can be seen as a single chart with {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs238/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs238/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs238/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs238/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs238/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs238/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -334,10 +436,16 @@ Furthermore, with a single click over the legend item, you can show or hide spec {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs239/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs239/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs239/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs239/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs239/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs239/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -349,10 +457,16 @@ User can customize series of the pivot chart using [`chartSeries`](https://ej2.s {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs240/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs240/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs240/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs240/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs240/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs240/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -364,10 +478,16 @@ In the following sample, the even series are hidden in the pivot chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs241/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs241/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs241/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs241/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs241/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs241/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -383,10 +503,16 @@ In the following sample, title of y-axis and x-axis are customized. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs242/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs242/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs242/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs242/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs242/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs242/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -404,10 +530,16 @@ One can also customize multi-level labels of primary x-axis by using the [`multi {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs243/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs243/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs243/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs243/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs243/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs243/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -445,10 +577,16 @@ Also user can set the position of the legend in pivot chart using the property [ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs244/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs244/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs244/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs244/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs244/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs244/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -466,10 +604,16 @@ Also user can enable and customize the crosshair tooltip for axes using [`crossh {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs245/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs245/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs245/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs245/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs245/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs245/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -498,10 +642,16 @@ This can be set using the property [`mode`](https://ej2.syncfusion.com/react/doc {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs246/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs246/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs246/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs246/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs246/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs246/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -515,10 +665,16 @@ By default, tooltip for the pivot chart is enabled. User can customize it by usi {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs247/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs247/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs247/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs247/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs247/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs247/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -539,10 +695,16 @@ In the following code sample, exporting can be done using an external button nam {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs248/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs248/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs248/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs248/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs248/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs248/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -556,10 +718,16 @@ In the following code sample, printing can be done using an external button name {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs249/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs249/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs249/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs249/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs249/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs249/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/print.md b/ej2-react/pivotview/print.md index 0b60c4c9f..38f384190 100644 --- a/ej2-react/pivotview/print.md +++ b/ej2-react/pivotview/print.md @@ -14,10 +14,16 @@ The rendered pivot table can be printed directly from the browser by invoking th {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs320/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs320/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs320/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs320/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs320/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs320/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -31,10 +37,16 @@ Similarly, to print the pivot chart, use the [`print`](https://ej2.syncfusion.co {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs321/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs321/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs321/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs321/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs321/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs321/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/row-and-column.md b/ej2-react/pivotview/row-and-column.md index f3f182f8f..1f2efeb02 100644 --- a/ej2-react/pivotview/row-and-column.md +++ b/ej2-react/pivotview/row-and-column.md @@ -26,10 +26,16 @@ Allows end user to set the pivot table's height and width by using [`height`](ht {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs250/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs250/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs250/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs250/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs250/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs250/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -46,10 +52,16 @@ In the below code sample, the [`rowHeight`](https://ej2.syncfusion.com/react/doc {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs251/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs251/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs251/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs251/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs251/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs251/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -65,10 +77,16 @@ In the below example, the [`columnWidth`](https://ej2.syncfusion.com/react/docum {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs252/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs252/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs252/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs252/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs252/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs252/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -80,10 +98,16 @@ By default, if the component width set in code-behind is more than the width of {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs253/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs253/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs253/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs253/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs253/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs253/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -95,10 +119,16 @@ Allows end user to reorder a particular column header from one index to another {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs254/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs254/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs254/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs254/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs254/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs254/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -113,10 +143,16 @@ Allows end user to resize the columns by clicking and dragging the right edge of {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs255/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs255/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs255/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs255/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs255/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs255/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -130,10 +166,16 @@ Allows end user to wrap the cell content to the next line when it exceeds the bo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs256/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs256/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs256/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs256/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs256/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs256/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -150,10 +192,16 @@ Allows end user to align the content of the pivot table's row and column headers {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs257/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs257/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs257/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs257/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs257/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs257/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -165,10 +213,16 @@ Allows the user to fit the Pivot Table columns as wide as the content of the cel {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs258/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs258/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs258/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs258/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs258/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs258/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -178,10 +232,16 @@ Allows the user to fit the Pivot Table columns as wide as the content of the cel {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs259/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs259/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs259/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs259/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs259/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs259/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -193,10 +253,16 @@ During initial rendering, the parameter `autoFit` in the [`columnRender`](https: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs260/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs260/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs260/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs260/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs260/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs260/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -220,10 +286,16 @@ Available mode of grid lines are: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs261/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs261/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs261/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs261/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs261/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs261/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -240,10 +312,16 @@ The pivot table supports two types of selection that can be set using [`type`](h {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs262/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs262/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs262/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs262/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs262/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs262/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -260,10 +338,16 @@ The pivot table supports four types of selection mode that can be set using [`mo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs263/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs263/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs263/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs263/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs263/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs263/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -278,10 +362,16 @@ The pivot table supports two types of cell selection mode that can be set using {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs264/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs264/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs264/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs264/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs264/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs264/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -295,10 +385,16 @@ The background-color of the selected cell can be changed using built-in CSS name {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/selection-css-cs1/app/index.jsx %} +{% include code-snippet/pivot-table/selection-css-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/selection-css-cs1/app/index.tsx %} +{% include code-snippet/pivot-table/selection-css-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/selection-css-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/selection-css-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -312,10 +408,16 @@ The event [`cellSelected`](https://ej2.syncfusion.com/react/documentation/api/pi {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs265/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs265/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs265/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs265/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs265/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs265/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -327,10 +429,16 @@ The event `cellSelecting` triggers before cell gets selected gets completed. It {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs266/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs266/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs266/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs266/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs266/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs266/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -348,10 +456,16 @@ The clip mode provides options to display its overflow cell content in the pivot {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs267/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs267/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs267/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs267/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs267/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs267/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -365,10 +479,16 @@ In this demo, the revenue cost for each year is represented with trend icons. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs268/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs268/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs268/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs268/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs268/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs268/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -387,10 +507,16 @@ The event `queryCellInfo` triggers while rendering each row and value cells in t {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs269/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs269/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs269/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs269/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs269/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs269/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -404,10 +530,16 @@ The event `headerCellInfo` triggers while rendering each column header cell in t {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs270/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs270/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs270/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs270/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs270/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs270/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -424,10 +556,16 @@ The event [`columnRender`](https://ej2.syncfusion.com/react/documentation/api/pi {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs271/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs271/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs271/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs271/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs271/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs271/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -442,10 +580,16 @@ The event [`cellClick`](https://ej2.syncfusion.com/react/documentation/api/pivot {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs272/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs272/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs272/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs272/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs272/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs272/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/show-hide-totals.md b/ej2-react/pivotview/show-hide-totals.md index 642c8bbc4..ac25f8fa7 100644 --- a/ej2-react/pivotview/show-hide-totals.md +++ b/ej2-react/pivotview/show-hide-totals.md @@ -18,10 +18,16 @@ Allows to show or hide grand totals in rows and columns using the [`showGrandTot {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs273/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs273/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs273/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs273/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs273/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs273/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -33,10 +39,16 @@ Allows to show grand totals either at top or bottom in rows and columns using th {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs274/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs274/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs274/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs274/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs274/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs274/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -50,10 +62,16 @@ Allows to show or hide sub-totals in rows and columns using the [`showSubTotals` {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs275/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs275/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs275/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs275/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs275/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs275/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -67,10 +85,16 @@ Allows to show or hide sub-totals for specific fields in rows and columns using {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs276/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs276/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs276/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs276/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs276/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs276/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -82,10 +106,16 @@ It can also be achieved using built-in toolbar options by setting the [`showTool {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs277/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs277/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs277/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs277/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs277/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs277/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/sorting.md b/ej2-react/pivotview/sorting.md index 3b26cd40a..71e265c71 100644 --- a/ej2-react/pivotview/sorting.md +++ b/ej2-react/pivotview/sorting.md @@ -37,10 +37,16 @@ Member sorting can also be configured using the [`sortSettings`](https://ej2.syn {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs278/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs278/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs278/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs278/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs278/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs278/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -52,10 +58,16 @@ Usually string sorting is applied to field members even if it starts with number {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs279/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs279/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs279/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs279/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs279/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs279/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -71,10 +83,16 @@ Allows to sort field headers (aka, members) in rows and columns based on user-de {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs280/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs280/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs280/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs280/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs280/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs280/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -94,10 +112,16 @@ The value sorting can also be configured using the [`valueSortSettings`](https:/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs281/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs281/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs281/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs281/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs281/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs281/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -121,10 +145,16 @@ When sorting is applied, the event [`onHeadersSort`](https://ej2.syncfusion.com/ {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs282/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs282/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs282/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs282/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs282/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs282/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -153,10 +183,16 @@ The event [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/piv {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs283/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs283/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs283/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs283/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs283/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs283/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -183,10 +219,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs284/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs284/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs284/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs284/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs284/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs284/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -207,10 +249,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs285/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs285/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs285/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs285/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs285/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs285/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/state-persistence.md b/ej2-react/pivotview/state-persistence.md index ba38909b6..1d210c3b4 100644 --- a/ej2-react/pivotview/state-persistence.md +++ b/ej2-react/pivotview/state-persistence.md @@ -14,10 +14,16 @@ State persistence allows user to maintain the current state of the component alo {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs286/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs286/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs286/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs286/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs286/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs286/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -29,10 +35,16 @@ You can save the current layout of the pivot table by using [`getPersistData`](h {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs287/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs287/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs287/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs287/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs287/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs287/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/summary-customization.md b/ej2-react/pivotview/summary-customization.md index d2cc676f1..70bf71ed3 100644 --- a/ej2-react/pivotview/summary-customization.md +++ b/ej2-react/pivotview/summary-customization.md @@ -18,10 +18,10 @@ Allows to show or hide grand totals in rows and columns using the [`showGrandTot {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs288/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs288/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs288/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs288/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -35,10 +35,10 @@ Allows to show or hide sub-totals in rows and columns using the [`showSubTotals` {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs289/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs289/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs289/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs289/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -52,10 +52,10 @@ Allows to show or hide sub-totals for specific fields in rows and columns using {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs290/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs290/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs290/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs290/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -69,10 +69,10 @@ To show sub-totals at top of the header group in rows and columns, set the [`sub {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs291/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs291/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs291/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs291/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -82,10 +82,10 @@ To show sub-totals at bottom of the header group in rows and columns, set the [` {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs292/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs292/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs292/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs292/app/App.tsx %} {% endhighlight %} {% endtabs %} @@ -99,10 +99,10 @@ The grand totals and sub-totals can be dynamically displayed at the top or botto {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs293/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs293/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs293/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs293/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/switching-older-themes-style.md b/ej2-react/pivotview/switching-older-themes-style.md index c32c6bd05..4383fbf29 100644 --- a/ej2-react/pivotview/switching-older-themes-style.md +++ b/ej2-react/pivotview/switching-older-themes-style.md @@ -72,10 +72,16 @@ In the below code sample, we replicate the older theme style. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/switch-theme-cs2/app/index.jsx %} +{% include code-snippet/pivot-table/switch-theme-cs2/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/switch-theme-cs2/app/index.tsx %} +{% include code-snippet/pivot-table/switch-theme-cs2/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-tableswitch-theme-cs2/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/switch-theme-cs2/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/tool-bar.md b/ej2-react/pivotview/tool-bar.md index 3fb7576a3..c39bb1cd5 100644 --- a/ej2-react/pivotview/tool-bar.md +++ b/ej2-react/pivotview/tool-bar.md @@ -42,10 +42,16 @@ The following table shows built-in toolbar options and its actions. {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs294/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs294/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs294/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs294/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs294/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs294/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -57,10 +63,16 @@ By default, all chart types are displayed in the dropdown menu included in the t {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs295/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs295/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs295/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs295/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs295/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs295/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -94,10 +106,16 @@ In addition to the existing built-in toolbar items, new toolbar item(s) may also {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs296/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs296/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs296/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs296/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs296/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs296/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -113,10 +131,16 @@ Here, the entire toolbar panel can be framed in HTML elements that are appended {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs297/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs297/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs297/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs297/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs297/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs297/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -126,10 +150,16 @@ Another option allows to frame a custom toolbar item using HTML elements and inc {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs298/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs298/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs298/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs298/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs298/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs298/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -145,10 +175,16 @@ The current pivot report can be saved as a JSON file in the desired path and loa {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs299/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs299/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs299/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs299/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs299/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs299/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -891,10 +927,16 @@ The [`toolbarRender`](https://ej2.syncfusion.com/react/documentation/api/pivotvi {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs300/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs300/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs300/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs300/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs300/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs300/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -908,10 +950,16 @@ For example, you can add the header and footer for the pdf document by setting t {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs301/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs301/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs301/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs301/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs301/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs301/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -948,10 +996,16 @@ The event [`actionBegin`](https://ej2.syncfusion.com/react/documentation/api/piv {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs302/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs302/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs302/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs302/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs302/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs302/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -985,10 +1039,16 @@ The event [`actionComplete`](https://ej2.syncfusion.com/react/documentation/api/ {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs303/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs303/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs303/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs303/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs303/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs303/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -1021,10 +1081,16 @@ The event [`actionFailure`](https://ej2.syncfusion.com/react/documentation/api/p {% tabs %} {% highlight js tabtitle="index.jsx" %} - {% include code-snippet/pivot-table/default-cs304/app/index.jsx %} + {% include code-snippet/pivot-table/default-cs304/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} - {% include code-snippet/pivot-table/default-cs304/app/index.tsx %} + {% include code-snippet/pivot-table/default-cs304/app/App.tsx %} + {% endhighlight %} + {% highlight js tabtitle="datasource.jsx" %} + {% include code-snippet/pivot-table/default-cs304/app/datasource.jsx %} + {% endhighlight %} + {% highlight ts tabtitle="datasource.tsx" %} + {% include code-snippet/pivot-table/default-cs304/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/tool-tip.md b/ej2-react/pivotview/tool-tip.md index 8b88b7299..c5cffd01d 100644 --- a/ej2-react/pivotview/tool-tip.md +++ b/ej2-react/pivotview/tool-tip.md @@ -14,10 +14,16 @@ The tooltip can be enabled or disabled by setting the [`showTooltip`](https://ej {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs305/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs305/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs305/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs305/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs305/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs305/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -47,10 +53,16 @@ In the below sample, the pivot table and pivot chart shows customized tooltip la {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/tooltipTemplate-cs1/app/index.jsx %} +{% include code-snippet/pivot-table/tooltipTemplate-cs1/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/tooltipTemplate-cs1/app/index.tsx %} +{% include code-snippet/pivot-table/tooltipTemplate-cs1/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/tooltipTemplate-cs1/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/tooltipTemplate-cs1/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/value-filtering.md b/ej2-react/pivotview/value-filtering.md index e5178877f..5b7d82dbf 100644 --- a/ej2-react/pivotview/value-filtering.md +++ b/ej2-react/pivotview/value-filtering.md @@ -44,10 +44,10 @@ Operators that can be used in label filtering are: {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs306/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs306/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs306/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs306/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/value-sorting.md b/ej2-react/pivotview/value-sorting.md index efb472789..9ee32c28d 100644 --- a/ej2-react/pivotview/value-sorting.md +++ b/ej2-react/pivotview/value-sorting.md @@ -19,10 +19,10 @@ Value sorting can be configured using the `valueSortSettings` option through cod {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs307/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs307/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs307/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs307/app/App.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/pivotview/virtual-scrolling.md b/ej2-react/pivotview/virtual-scrolling.md index 985f1be5c..08d113238 100644 --- a/ej2-react/pivotview/virtual-scrolling.md +++ b/ej2-react/pivotview/virtual-scrolling.md @@ -20,10 +20,16 @@ To use the virtual scrolling feature, inject the `VirtualScroll` module in to th {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs308/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs308/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs308/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs308/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs308/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs308/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -39,10 +45,16 @@ Enabling this property causes the pivot table to render only the rows and column {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/single-page-mode/app/index.jsx %} +{% include code-snippet/pivot-table/single-page-mode/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/single-page-mode/app/index.tsx %} +{% include code-snippet/pivot-table/single-page-mode/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/single-page-mode/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/single-page-mode/app/datasource.tsx %} {% endhighlight %} {% endtabs %} @@ -64,10 +76,16 @@ Virtual scrolling automatically works with "Popup" field list on setting the [en {% tabs %} {% highlight js tabtitle="index.jsx" %} -{% include code-snippet/pivot-table/default-cs310/app/index.jsx %} +{% include code-snippet/pivot-table/default-cs310/app/App.jsx %} {% endhighlight %} {% highlight ts tabtitle="index.tsx" %} -{% include code-snippet/pivot-table/default-cs310/app/index.tsx %} +{% include code-snippet/pivot-table/default-cs310/app/App.tsx %} +{% endhighlight %} +{% highlight js tabtitle="datasource.jsx" %} +{% include code-snippet/pivot-table/default-cs310/app/datasource.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="datasource.tsx" %} +{% include code-snippet/pivot-table/default-cs310/app/datasource.tsx %} {% endhighlight %} {% endtabs %} diff --git a/ej2-react/toast/accessibility.md b/ej2-react/toast/accessibility.md index 2bdb5a624..621583ead 100644 --- a/ej2-react/toast/accessibility.md +++ b/ej2-react/toast/accessibility.md @@ -22,7 +22,7 @@ The accessibility compliance for the Toast component is outlined below. | [Right-To-Left Support](../common/accessibility#right-to-left-support) |
|
| [Color Contrast](../common/accessibility#color-contrast) | |
| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | 
|
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | Not Applicable |
| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
@@ -84,4 +84,4 @@ The accessibility compliance of the Toast component is shown in the following sa
## See also
-* [Accessibility in Syncfusion React components](../common/accessibility)
\ No newline at end of file
+* [Accessibility in Syncfusion React components](../common/accessibility)