2023 Volume 2 - 22.*
diff --git a/ej2-react/Release-notes/26.2.10.md b/ej2-react/Release-notes/26.2.10.md
deleted file mode 100644
index d7764bca7..000000000
--- a/ej2-react/Release-notes/26.2.10.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Essential Studio for React Weekly Release Release Notes
-description: Essential Studio for React Weekly Release Release Notes
-platform: ej2-react
-documentation: ug
----
-
-# Essential Studio for React Release Notes
-
-{% include release-info.html date="August 20, 2024" version="v26.2.10" %}
-
-{% directory path: _includes/release-notes/v26.2.10 %}
-
-{% include {{file.url}} %}
-
-{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-react/Release-notes/26.2.11.md b/ej2-react/Release-notes/26.2.11.md
deleted file mode 100644
index ef9bdae34..000000000
--- a/ej2-react/Release-notes/26.2.11.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: Essential Studio for React Weekly Release Release Notes
-description: Essential Studio for React Weekly Release Release Notes
-platform: ej2-react
-documentation: ug
----
-
-# Essential Studio for React Release Notes
-
-{% include release-info.html date="August 27, 2024" version="v26.2.11" %}
-
-{% directory path: _includes/release-notes/v26.2.11 %}
-
-{% include {{file.url}} %}
-
-{% enddirectory %}
\ No newline at end of file
diff --git a/ej2-react/chart/getting-started.md b/ej2-react/chart/getting-started.md
index 6972a579c..da23ada3a 100644
--- a/ej2-react/chart/getting-started.md
+++ b/ej2-react/chart/getting-started.md
@@ -9,7 +9,7 @@ domainurl: ##DomainURL##
---
-# Getting Started with React Charts of Syncfusion
+# Getting Started with React charts of Syncfusion
This section explains you the steps required to create a simple chart and demonstrate the basic usage of the chart control.
@@ -272,4 +272,4 @@ The tooltip is useful when you cannot display information by using the data labe
{% previewsample "page.domainurl/code-snippet/chart/getting-started/tooltip-cs2" %}
-> You can refer to our [React Charts](https://www.syncfusion.com/react-components/react-charts) feature tour page for its groundbreaking feature representations. You can also explore our [React Charts example](https://ej2.syncfusion.com/react/demos/#/bootstrap5/chart/line) that shows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.
\ No newline at end of file
+> You can refer to our [React Charts](https://www.syncfusion.com/react-components/react-charts) feature tour page for its groundbreaking feature representations. You can also explore our [React Charts example](https://ej2.syncfusion.com/react/demos/#/material/chart/line) that shows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/enable-sanitizer-cs1/index.html b/ej2-react/code-snippet/common/enable-sanitizer-cs1/index.html
index 4a9d038af..925263750 100644
--- a/ej2-react/code-snippet/common/enable-sanitizer-cs1/index.html
+++ b/ej2-react/code-snippet/common/enable-sanitizer-cs1/index.html
@@ -8,7 +8,7 @@
-
+
@@ -22,13 +22,6 @@
top: 45%;
width: 30%;
}
- #container {
- display: inline-block;
- position: relative;
- left: 50%;
- top: 100px;
- transform: translateX(-50%);
- }
diff --git a/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx b/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx
index dc390ac39..4ea9170b1 100644
--- a/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx
+++ b/ej2-react/code-snippet/listbox/basic-cs13/app/index.jsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
+import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
function App() {
let data = [
{ text: 'Hennessey Venom', id: 'list-01' },
@@ -14,8 +14,8 @@ function App() {
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' }
];
- let selection = { mode: "single" };
- return (
+ let selection = { mode: "single", showCheckbox: true };
+ return ();
}
export default App;
diff --git a/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx b/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx
index 29f2247d0..7a9cc5eec 100644
--- a/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx
+++ b/ej2-react/code-snippet/listbox/basic-cs13/app/index.tsx
@@ -3,7 +3,7 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
+import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
function App() {
let data: { [key: string]: Object }[] = [
@@ -18,9 +18,9 @@ function App() {
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' }
];
- let selection:object = { mode:"single" }
+ let selection:object = { mode:"single", showCheckbox: true }
return (
-
+
);
}
diff --git a/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx b/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx
index 3663309a3..a378af0a1 100644
--- a/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx
+++ b/ej2-react/code-snippet/listbox/basic-cs14/app/index.jsx
@@ -14,8 +14,8 @@ function App() {
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' }
];
- let selection = { mode: "multiple" };
- return (
+ let selection = { mode: "multiple", showCheckbox: true };
+ return ();
}
export default App;
diff --git a/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx b/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx
index 553f3e50b..2d36f00b8 100644
--- a/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx
+++ b/ej2-react/code-snippet/listbox/basic-cs14/app/index.tsx
@@ -3,7 +3,7 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
+import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
function App() {
let data: { [key: string]: Object }[] = [
@@ -20,7 +20,7 @@ function App() {
];
let selection:object = { mode:"multiple", showCheckbox: true }
return (
-
+
);
}
diff --git a/ej2-react/code-snippet/listbox/basic-cs17/app/index.jsx b/ej2-react/code-snippet/listbox/basic-cs17/app/index.jsx
deleted file mode 100644
index 10c4bbdb0..000000000
--- a/ej2-react/code-snippet/listbox/basic-cs17/app/index.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
-function App() {
- let data = [
- { text: 'Hennessey Venom', id: 'list-01' },
- { text: 'Bugatti Chiron', id: 'list-02' },
- { text: 'Bugatti Veyron Super Sport', id: 'list-03' },
- { text: 'SSC Ultimate Aero', id: 'list-04' },
- { text: 'Koenigsegg CCR', id: 'list-05' },
- { text: 'McLaren F1', id: 'list-06' },
- { text: 'Aston Martin One- 77', id: 'list-07' },
- { text: 'Jaguar XJ220', id: 'list-08' },
- { text: 'McLaren P1', id: 'list-09' },
- { text: 'Ferrari LaFerrari', id: 'list-10' }
- ];
- let selection = { showSelectAll: true, showCheckbox: true }
- return (
- );
-}
-export default App;
-ReactDOM.render(, document.getElementById('sample'));
diff --git a/ej2-react/code-snippet/listbox/basic-cs17/app/index.tsx b/ej2-react/code-snippet/listbox/basic-cs17/app/index.tsx
deleted file mode 100644
index dc1546529..000000000
--- a/ej2-react/code-snippet/listbox/basic-cs17/app/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { ListBoxComponent, Inject, CheckBoxSelection } from '@syncfusion/ej2-react-dropdowns';
-
-function App() {
- let data: { [key: string]: Object }[] = [
- { text: 'Hennessey Venom', id: 'list-01' },
- { text: 'Bugatti Chiron', id: 'list-02' },
- { text: 'Bugatti Veyron Super Sport', id: 'list-03' },
- { text: 'SSC Ultimate Aero', id: 'list-04' },
- { text: 'Koenigsegg CCR', id: 'list-05' },
- { text: 'McLaren F1', id: 'list-06' },
- { text: 'Aston Martin One- 77', id: 'list-07' },
- { text: 'Jaguar XJ220', id: 'list-08' },
- { text: 'McLaren P1', id: 'list-09' },
- { text: 'Ferrari LaFerrari', id: 'list-10' }
- ];
- let selection:object = { showSelectAll: true, showCheckbox: true }
- return (
-
-
- );
-}
-export default App;
-ReactDOM.render(, document.getElementById('sample'));
-
-
-
diff --git a/ej2-react/code-snippet/listbox/basic-cs17/index.html b/ej2-react/code-snippet/listbox/basic-cs17/index.html
deleted file mode 100644
index 74d0a3d32..000000000
--- a/ej2-react/code-snippet/listbox/basic-cs17/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- Syncfusion React ListBox
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Loading....
-
-
-
-
\ No newline at end of file
diff --git a/ej2-react/code-snippet/listbox/basic-cs17/systemjs.config.js b/ej2-react/code-snippet/listbox/basic-cs17/systemjs.config.js
deleted file mode 100644
index 6c7d3df8f..000000000
--- a/ej2-react/code-snippet/listbox/basic-cs17/systemjs.config.js
+++ /dev/null
@@ -1,46 +0,0 @@
-System.config({
- transpiler: "ts",
- typescriptOptions: {
- target: "es5",
- module: "commonjs",
- moduleResolution: "node",
- emitDecoratorMetadata: true,
- experimentalDecorators: true,
- "jsx": "react"
- },
- meta: {
- 'typescript': {
- "exports": "ts"
- }
- },
- paths: {
- "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
- },
- map: {
- app: 'app',
- ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
- typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
- "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
- "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
- "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
- "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
- "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
- "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
- "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
- "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
- "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
- "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
-
- "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
- "@syncfusion/ej2-react-dropdowns": "syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js",
- "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
- "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
- "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
- },
- packages: {
- 'app': { main: 'index', defaultExtension: 'tsx' },
- }
-
-});
-
-System.import('app');
\ No newline at end of file
diff --git a/ej2-react/document-editor/collaborative-editing/overview.md b/ej2-react/document-editor/collaborative-editing/overview.md
index b61ae9dd6..d0807a493 100644
--- a/ej2-react/document-editor/collaborative-editing/overview.md
+++ b/ej2-react/document-editor/collaborative-editing/overview.md
@@ -9,7 +9,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Collaborative Editing
+# Collaborative Editing
Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
@@ -27,16 +27,17 @@ Allows multiple users to work on the same document simultaneously. This can be d
To support collaborative editing, it's crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options:
-- ***Distributed Cache***: Handles more HTTP requests per second than a database approach. For example, a server with 2 vCPUs and 8GB RAM can process up to 125 requests per second using a distributed cache. We highly recommend using a distributed cache as a backing system over a database.
+- *Distributed Cache*: Handles a higher number of `HTTP` requests per second compared to a database approach. For instance, a server with 2 vCPUs and 8GB RAM can handle up to 125 requests per second using a distributed cache.
+- *Database*: With the same server configuration, it can handle up to 50 requests per second.
-- ***Database***: With the same server configuration, it can handle up to 50 requests per second.
+Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` Algorithm.
-Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` algorithm.
+> *Recommendation* - If you expect average `http` requests per second of your live application as 50 or below, then the database can provide reliable a backing system for operation queue. If you expect average requests per second of your live application as above 50, then the distributed cache is highly recommended backing system.
->**Tips**: To calculate the average requests per second of your application Assume the editor in your live application is actively used by 1000 users and each user’s edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
-
->**Note**: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app’s traffic and choose a configuration that best suits your needs.
+> Tips to calculate the average requests per second of your application:
+Assume the editor in your live application is actively used by 1000 users and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
+> Note: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app's traffic and choose a configuration that best suits your needs.
#### See Also
- [Collaborative editing using Redis cache in ASP.NET Core](../../document-editor/collaborative-editing/using-distributed-cache-asp-net-core)
diff --git a/ej2-react/getting-started/react-remix-app.md b/ej2-react/getting-started/react-remix-app.md
index 8929eda6e..56e3a9c9c 100644
--- a/ej2-react/getting-started/react-remix-app.md
+++ b/ej2-react/getting-started/react-remix-app.md
@@ -16,13 +16,15 @@ This document helps you to create a simple Remix application with React Framewor
Before getting started with Syncfusion React Components with Remix project, check whether the following are installed in the developer machine.
-[System requirements for Syncfusion React UI components](../system-requirement)
+* Node.js 14 or greater
+
+* npm 7 or greater
## Benefits to using Remix
### Nested pages
-The pages inside `./routes` folder is nested in the route where you can embed these components into the parent page. It reduces the loading time of the page.
+The pages inside `./route` folder is nested in the route where you can embed these components into the parent page. It reduces the loading time of the page.
### Error boundaries
@@ -34,6 +36,12 @@ Remix automatically handles all loading states, you have to do is tell Remix wha
## Create Remix application
+Install [create-remix](https://www.npmjs.com/package/create-remix) by running the following command.
+
+```
+npm install -g create-remix
+```
+
To setup basic Remix sample, use the following commands.
```
@@ -45,20 +53,22 @@ npx create-remix@latest
When you run this command, You will be asked the following questions.
```
-dir :: Where should we create your new project?
- quick-start
+Where would you like to create your app? quick-start
+What type of app do you want to create? Just the basics
+Where do you want to deploy? Choose Remix if you're unsure; it's easy to change deployment targets. Remix App Server
+TypeScript or JavaScript? Typescript
+Do you want me to run `npm install`? Yes
+```
- ◼ Using basic template See https://remix.run/guides/templates for more
- ✔ Template copied
+* The Remix app is created in **quick-start** folder.
-git :: Initialize a new git repository?
- No
+* There are two types of app creation in remix such as A pre-configured stack ready for production and Just the Basics. For this sample **Just the Basics** is chosen.
-deps :: Install dependencies with npm?
- Yes
-```
+* There are a number of servers to choose. We use the default, Remix App Server.
+
+* There is also a choice between TypeScript and JavaScript. In this example Typescript is used.
-Then run the following command to jump into the project directory:
+After app created, use the below command to step inside app folder.
```
cd quick-start
@@ -76,58 +86,33 @@ npm install @syncfusion/ej2-react-grids --save
## Adding CSS reference
-Reference themes for Syncfusion components in the `~/app/routes/_index.tsx` as CSS reference.
+Reference themes for Syncfusion components in the `app/route.tsx` as CSS reference.
```ts
-import '@syncfusion/ej2-base/styles/material3.css';
-import '@syncfusion/ej2-buttons/styles/material3.css';
-import '@syncfusion/ej2-calendars/styles/material3.css';
-import '@syncfusion/ej2-dropdowns/styles/material3.css';
-import '@syncfusion/ej2-inputs/styles/material3.css';
-import '@syncfusion/ej2-navigations/styles/material3.css';
-import '@syncfusion/ej2-popups/styles/material3.css';
-import '@syncfusion/ej2-splitbuttons/styles/material3.css';
-import '@syncfusion/ej2-notifications/styles/material3.css';
-import '@syncfusion/ej2-react-grids/styles/material3.css';
-```
-
-## Adding SSR configuration
-
-To use Syncfusion packages in Server-Side Rendering (SSR) with Vite, you'll need to update the `vite.config.ts` file. This ensures that the Syncfusion packages are properly transpiled to be compatible with the server environment.
-
-```ts
-import { defineConfig } from "vite";
-
-export default defineConfig({
- ...
- ssr: {
- noExternal: [/@syncfusion/]
- },
- ...
-});
+export let links = () => {
+ return [{ rel: "stylesheet", href: "https://cdn.syncfusion.com/ej2/material.css" }];
+};
```
## Adding React Grid component
-Now, you can add Syncfusion React components in the Remix application. For getting started, add the React Grid component in `~/app/routes/_index.tsx` file using following code.
-
-{% tabs %}
-{% highlight ts tabtitle="~/app/routes/_index.tsx" %}
-{% raw %}
+Now, you can add Syncfusion React components in the Remix application. For getting started, add the React Grid component in `app/route/index.tsx` file using following code.
+```ts
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort } from '@syncfusion/ej2-react-grids';
+import * as React from 'react';
import { data } from '../datasource';
export let meta = () => {
- return [{
+ return {
title: "Syncfusion Grid Remix",
description: "Syncfusion Grid components with Remix",
- }];
+ };
};
export default function Index() {
return (
-
+ <>
@@ -136,17 +121,15 @@ export default function Index() {
-
+
);
}
+```
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
-Create a data source file in `~/app/datasource.tsx` and add the following data for the grid component.
+Create a data source file in `app/datasource.tsx` and add the following data for the grid component.
```ts
+
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
@@ -222,13 +205,54 @@ export let data: Object[] = [
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
- }
-];
+ }];
+
+export let sdata: Object[] = [
+ {
+ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
+ ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
+ ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'Brazil', Freight: 32.38, Verified: !0
+ },
+ {
+ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
+ ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
+ ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
+ },
+ {
+ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
+ ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+ ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
+ },
+ {
+ OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
+ ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
+ ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
+ },
+ {
+ OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
+ ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
+ ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
+ },
+ {
+ OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
+ ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
+ ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
+ },
+ {
+ OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
+ ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
+ ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Brazil', Freight: 22.98, Verified: !1
+ },
+ {
+ OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
+ ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
+ ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
+ }];
```
## Run the application
-Run your Remix application in development mode using the following command,
+Run your Remix application in development mode using `run dev` command,
```
npm run dev
diff --git a/ej2-react/getting-started/sharepoint.md b/ej2-react/getting-started/sharepoint.md
index 53f79756d..fec916998 100644
--- a/ej2-react/getting-started/sharepoint.md
+++ b/ej2-react/getting-started/sharepoint.md
@@ -68,7 +68,7 @@ In this article, the `Material` theme is applied using CSS styles, which are ava
{% tabs %}
{% highlight ts tabtitle="App.tsx" %}
-require ('@syncfusion/ej2-grids/styles/material.css');
+require ('@syncfusion/ej2-react-grids/styles/material.css');
{% endhighlight %}
{% endtabs %}
@@ -133,7 +133,7 @@ import * as React from 'react';
import { IAppProps } from './IAppProps';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
-require('@syncfusion/ej2-grids/styles/material.css');
+require('@syncfusion/ej2-react-grids/styles/material.css')
export default class App extends React.Component {
diff --git a/ej2-react/introduction.md b/ej2-react/introduction.md
index a4c995dba..f0b54ca31 100644
--- a/ej2-react/introduction.md
+++ b/ej2-react/introduction.md
@@ -17,6 +17,11 @@ Syncfusion React (Essential JS 2) library is a modern UI components library that
The Syncfusion React UI components are listed below.