diff --git a/ej2-javascript/3D-chart/js/es5-getting-started.md b/ej2-javascript/3D-chart/js/es5-getting-started.md index 7d4031eaf..df97367ea 100644 --- a/ej2-javascript/3D-chart/js/es5-getting-started.md +++ b/ej2-javascript/3D-chart/js/es5-getting-started.md @@ -35,20 +35,20 @@ Refer the following steps for setup your local environment. **Step 2:** Create **myapp/resources** folder to store local scripts and styles files. -**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential JS 2 3D Chart control. +**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential® JS 2 3D Chart control. -## Adding Syncfusion resources +## Adding Syncfusion® resources -The Essential JS 2 3D Chart control can be initialized by using either of the following ways. +The Essential® JS 2 3D Chart control can be initialized by using either of the following ways. * Using local script. * Using CDN link for script. ### Using local script -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. -After installing the Essential JS 2 product build, you can copy the chart and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. +After installing the Essential® JS 2 product build, you can copy the chart and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. Refer the below code to find location chart's script and style file. @@ -123,7 +123,7 @@ The below html code example shows the minimal dependency of chart. Now, you can start adding 3D Chart control in the application. For getting started, add a **div** element for 3D Chart control in **index.html**. Then refer the **index.js** file into the **index.html** file. -In this document context we are going to use **ej2.min.js** which includes all the Essential JS 2 components and its dependent scripts. +In this document context we are going to use **ej2.min.js** which includes all the Essential® JS 2 components and its dependent scripts. ```html diff --git a/ej2-javascript/3D-chart/ts/getting-started.md b/ej2-javascript/3D-chart/ts/getting-started.md index 9d60f98a3..8e3b12b4c 100644 --- a/ej2-javascript/3D-chart/ts/getting-started.md +++ b/ej2-javascript/3D-chart/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## 3D Chart control -This section explains how to create a simple 3D Chart and configure its available functionalities in TypeScript using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. +This section explains how to create a simple 3D Chart and configure its available functionalities in TypeScript using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -31,7 +31,7 @@ Below is the list of minimum dependencies required to use the 3D Chart. ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -51,9 +51,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -67,7 +67,7 @@ npm install ## Add 3D Chart to the project -Open the application in Visual Studio Code and add the Syncfusion JavaScript UI controls. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. Add the HTML div tag with its `id` attribute as `element` in your `~/src/index.html` file to initialize the 3D Chart. diff --git a/ej2-javascript/accumulation-chart/accessibility.md b/ej2-javascript/accumulation-chart/accessibility.md index 7d5bdd27d..b8f15c036 100644 --- a/ej2-javascript/accumulation-chart/accessibility.md +++ b/ej2-javascript/accumulation-chart/accessibility.md @@ -77,4 +77,4 @@ The accessibility compliance of the Accumulation chart control is shown in the f ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/accumulation-chart/ej1-api-migration.md b/ej2-javascript/accumulation-chart/ej1-api-migration.md index 0b9c7a233..eb9dcb521 100644 --- a/ej2-javascript/accumulation-chart/ej1-api-migration.md +++ b/ej2-javascript/accumulation-chart/ej1-api-migration.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Accumulation chart control -This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Chart component from Essential® JS 1 to Essential® JS 2. ## Accumulation Chart @@ -19,8 +19,8 @@ This article describes the API migration process of Chart component from Essenti - - + + @@ -491,8 +491,8 @@ pie.appendTo('#chart');
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -762,8 +762,8 @@ chart.appendTo('#chart');
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -1594,8 +1594,8 @@ chart.appendTo('#chart);
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -1849,8 +1849,8 @@ chart.appendTo('#chart);
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -2356,8 +2356,8 @@ Not applicable
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -2509,8 +2509,8 @@ chart.removeSeries();
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + diff --git a/ej2-javascript/accumulation-chart/getting-started.md b/ej2-javascript/accumulation-chart/getting-started.md index bcb66f8b3..33f3ac15f 100644 --- a/ej2-javascript/accumulation-chart/getting-started.md +++ b/ej2-javascript/accumulation-chart/getting-started.md @@ -30,7 +30,7 @@ The list of minimum dependencies required to use an accumulation chart are follo ## Installation and Configuration -* To get started with accumulation chart component, clone the [`Essential JS 2 quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project, and install necessary packages by using the following commands: +* To get started with accumulation chart component, clone the [Essential® JS 2 quickstart](https://github.com/syncfusion/ej2-quickstart.git) project, and install necessary packages by using the following commands: ``` git clone https://github.com/syncfusion/ej2-quickstart.git quickstart @@ -72,7 +72,7 @@ System.config({ ``` > The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with common settings -(`src/styles/styles.css, system.config.js`) to start with all Essential JS 2 components. +(`src/styles/styles.css, system.config.js`) to start with all Essential® JS 2 components. ## Add Accumulation Chart to the Project diff --git a/ej2-javascript/accumulation-chart/js/es5-getting-started.md b/ej2-javascript/accumulation-chart/js/es5-getting-started.md index 495d7a06f..2e3bdd4bf 100644 --- a/ej2-javascript/accumulation-chart/js/es5-getting-started.md +++ b/ej2-javascript/accumulation-chart/js/es5-getting-started.md @@ -36,20 +36,20 @@ Refer the following steps for setup your local environment. **Step 2:** Create **myapp/resources** folder to store local scripts and styles files. -**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential JS 2 Accumulation Chart control. +**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential® JS 2 Accumulation Chart control. -## Adding Syncfusion resources +## Adding Syncfusion® resources -The Essential JS 2 Accumulation Chart control can be initialized by using either of the following ways. +The Essential® JS 2 Accumulation Chart control can be initialized by using either of the following ways. * Using local script. * Using CDN link for script. ### Using local script -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. -After installing the Essential JS 2 product build, you can copy the chart and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. +After installing the Essential® JS 2 product build, you can copy the chart and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. Refer the below code to find location accumulation chart's script and style file. @@ -124,7 +124,7 @@ The below html code example shows the minimal dependency of chart. Now, you can start adding accumulation chart control in the application. For getting started, add a **div** element for Chart control in **index.html**. Then refer the **index.js** file into the **index.html** file. -In this document context we are going to use **ej2.min.js** which includes all the Essential JS 2 components and its dependent scripts. +In this document context we are going to use **ej2.min.js** which includes all the Essential® JS 2 components and its dependent scripts. ```html diff --git a/ej2-javascript/accumulation-chart/ts/getting-started.md b/ej2-javascript/accumulation-chart/ts/getting-started.md index 7d7dd40ef..3a12c5013 100644 --- a/ej2-javascript/accumulation-chart/ts/getting-started.md +++ b/ej2-javascript/accumulation-chart/ts/getting-started.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Accumulation chart control -This article provides a step-by-step guide to configuring the Syncfusion JavaScript (Essential JS 2) library and building a simple JavaScript web application using the GitHub [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This article provides a step-by-step guide to configuring the Syncfusion® JavaScript (Essential® JS 2) library and building a simple JavaScript web application using the GitHub [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -32,7 +32,7 @@ The list of minimum dependencies required to use an accumulation chart are follo ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -52,9 +52,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -68,7 +68,7 @@ npm install ## Add Accumulation Chart to the Project -Open the application in Visual Studio Code and add the Syncfusion JavaScript UI controls. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. Add the HTML div tag with its `id` attribute as `element` in your `~/src/index.html` file to initialize the Accumulation chart. diff --git a/ej2-javascript/ai-assistview/accessibility.md b/ej2-javascript/ai-assistview/accessibility.md index c92328752..3ebe7f564 100644 --- a/ej2-javascript/ai-assistview/accessibility.md +++ b/ej2-javascript/ai-assistview/accessibility.md @@ -74,4 +74,4 @@ The AI AssistView control's accessibility levels are ensured through an [accessi ## See also -* [Accessibility in Syncfusion controls](../common/accessibility) +* [Accessibility in Syncfusion® controls](../common/accessibility) diff --git a/ej2-javascript/ai-assistview/js/es5-getting-started.md b/ej2-javascript/ai-assistview/js/es5-getting-started.md index 63228d9ee..1feff443b 100644 --- a/ej2-javascript/ai-assistview/js/es5-getting-started.md +++ b/ej2-javascript/ai-assistview/js/es5-getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## AI AssistView control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Dependencies @@ -35,7 +35,7 @@ The JavaScript (ES5) AI AssistView control can be initialized by using either of **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` @@ -56,7 +56,7 @@ The JavaScript (ES5) AI AssistView control can be initialized by using either of > > Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-interactive-chat\styles\material.css` -The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > @@ -66,7 +66,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder `~/quickstart/resources` and copy/paste the global scripts and styles from the above installed location to `~/quickstart/resources/package` corresponding package location. -**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essential® JS 2 script and style references. ```html @@ -149,7 +149,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript (ES5) AI AssistView** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript (ES5) AI AssistView** control. ## Using CDN link for script and style reference @@ -181,7 +181,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/ai-assistview/gettingstarted" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript AI AssistView` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript AI AssistView** control. ## Configure suggestions and responses diff --git a/ej2-javascript/ai-assistview/ts/getting-started.md b/ej2-javascript/ai-assistview/ts/getting-started.md index 4eccb14d2..484808c40 100644 --- a/ej2-javascript/ai-assistview/ts/getting-started.md +++ b/ej2-javascript/ai-assistview/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## AI AssistView control -This section explains how to create a simple AI AssistView control and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple AI AssistView control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -28,7 +28,7 @@ The list of dependencies required to use the AI AssistView control in your appli ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -48,9 +48,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -62,7 +62,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render AI AssistView control, need to import interactive-chat and its dependent controls styles as given below in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/appearance/css-variables.md b/ej2-javascript/appearance/css-variables.md index 712113f92..9e0aa2161 100644 --- a/ej2-javascript/appearance/css-variables.md +++ b/ej2-javascript/appearance/css-variables.md @@ -13,16 +13,16 @@ domainurl: ##DomainURL## [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used. -Syncfusion currently offers two modern and highly customizable themes using CSS variables. These themes are designed to provide a consistent and visually appealing look and feel across all Syncfusion components. The themes available are: +Syncfusion® currently offers two modern and highly customizable themes using CSS variables. These themes are designed to provide a consistent and visually appealing look and feel across all Syncfusion® components. The themes available are: * Material 3 Theme * Fluent 2 Theme * Bootstrap 5.3 Theme * Tailwind 3.4 Theme -## CSS themes - Syncfusion ##Platform_Name## Controls +## CSS themes - Syncfusion® ##Platform_Name## Controls -[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. +[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation/using-vite) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. > Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;. @@ -70,7 +70,7 @@ Below are examples of how CSS variables can be defined for these themes: ### How to get these themes? -To access themes provided by Syncfusion, you have two primary options, +To access themes provided by Syncfusion®, you have two primary options, * Package * CDN links @@ -382,7 +382,7 @@ Example for `Tailwind 3.4` customization using JavaScript. ![customized primary value](images/tailwind3-customize.png) -With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion JavaScript controls. +With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion® JavaScript controls. ### Switching Light and Dark mode with CSS variables @@ -532,4 +532,4 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2, Bootstrap 5.3 and Tailwind 3.4 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes. -Access the Syncfusion ThemeStudio application, featuring our themes, via the following link: [Link to Syncfusion ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=material3) +Access the Syncfusion® ThemeStudio application, featuring our themes, via the following link: [Link to Syncfusion® ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=material3) diff --git a/ej2-javascript/appearance/figma.md b/ej2-javascript/appearance/figma.md index 69f061262..da4743198 100644 --- a/ej2-javascript/appearance/figma.md +++ b/ej2-javascript/appearance/figma.md @@ -8,25 +8,25 @@ documentation: ug domainurl: ##DomainURL## --- -# Figma UI Kits for Syncfusion ##Platform_Name## Controls +# Figma UI Kits for Syncfusion® ##Platform_Name## Controls -Syncfusion offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1385969023252455137), [Fluent](https://www.figma.com/community/file/1385969120047188707), [Tailwind](https://www.figma.com/community/file/1385969065626384098), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272). These kits match the themes used in Syncfusion ##Platform_Name## controls. +Syncfusion® offers [Figma UI kits](https://www.figma.com/@syncfusion) to facilitate effective collaboration between designers and developers. The Figma UI kits are available in four themes: [Material 3](https://www.figma.com/community/file/1454123774600129202), [Fluent](https://www.figma.com/community/file/1385969120047188707), [Tailwind](https://www.figma.com/community/file/1385969065626384098), and [Bootstrap 5](https://www.figma.com/community/file/1385968977953858272). These kits match the themes used in Syncfusion® ##Platform_Name## controls. -The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion ##Platform_Name## controls. +The kits contain reusable design controls with various possible states and variants, along with detailed figures, measurements, and icons, representing the Syncfusion® ##Platform_Name## controls. ![Material 3](./images/material3.png) ## Advantages of UI kits -The Syncfusion Figma UI kit offers the following key advantages: -- The UI kit includes detailed information about Syncfusion ##Platform_Name## controls, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion ##Platform_Name## controls. +The Syncfusion® Figma UI kit offers the following key advantages: +- The UI kit includes detailed information about Syncfusion® ##Platform_Name## controls, such as available control lists, their states, and variants. This facilitates a quick understanding of Syncfusion® ##Platform_Name## controls. - Design controls are developed using the [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/), making customization straightforward and efficient. -- Developers can seamlessly match Syncfusion ##Platform_Name## controls with your design requirements, ensuring alignment and accuracy. +- Developers can seamlessly match Syncfusion® ##Platform_Name## controls with your design requirements, ensuring alignment and accuracy. - By using standardized controls and themes, the UI kit ensures consistency in your designs, maintaining a uniform look and feel across projects. ## Downloading the UI kits -Syncfusion Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion theme-specific Figma UI kits from the following links: +Syncfusion® Figma UI kits are available in the [Figma community](https://www.figma.com/@syncfusion). You can download the Syncfusion® theme-specific Figma UI kits from the following links: - [Material 3](https://www.figma.com/community/file/1385969023252455137) - [Fluent](https://www.figma.com/community/file/1385969120047188707) @@ -35,24 +35,24 @@ Syncfusion Figma UI kits are available in the [Figma community](https://www.figm ## Structure of the UI kits -Syncfusion’s Figma UI kit is structured to offer a comprehensive and user-friendly layout, facilitating easy navigation and exploration of various controls. It includes the following pages: +Syncfusion’s® Figma UI kit is structured to offer a comprehensive and user-friendly layout, facilitating easy navigation and exploration of various controls. It includes the following pages: - **Thumbnail**: This page serves as the cover page for the UI kit. - **Index**: Here, users can find a detailed list of all control names, making it simple to identify and locate specific controls within the UI kit. - **Icons**: Contains a collection of all icons used in the design controls. -- **UI Controls**: At the core of the UI kit, this section features a wide range of essential UI controls. Each control is meticulously designed with detailed figures, measurements, and icons, showcasing various states and variants. +- **UI Controls**: At the core of the UI kit, this section features a wide range of Essential® UI controls. Each control is meticulously designed with detailed figures, measurements, and icons, showcasing various states and variants. ![Layout](./images/layout.png) ## Customizing the UI kits -The Syncfusion Figma UI kits are easily customizable to meet your specific needs, allowing you to create unique designs and adjust colors to match your brand guidelines. The [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/) used in developing these controls, your customizations will be seamlessly reflected across multiple controls and their variants. +The Syncfusion® Figma UI kits are easily customizable to meet your specific needs, allowing you to create unique designs and adjust colors to match your brand guidelines. The [atomic design methodology](https://atomicdesign.bradfrost.com/chapter-2/) used in developing these controls, your customizations will be seamlessly reflected across multiple controls and their variants. Here's how to customize the primary button color of the Material 3 theme within your layout: 1. Visit our [UI kits](#downloading-the-ui-kits) and choose your preferred theme, such as the Material 3 theme. 2. Open the selected theme in the Figma web application by clicking the **Open in Figma** button. -3. For the desktop application, click the **Import** button in the top-right corner of the page. Select the downloaded Syncfusion fig file you want to import and click the **Open** button. +3. For the desktop application, click the **Import** button in the top-right corner of the page. Select the downloaded Syncfusion® fig file you want to import and click the **Open** button. 4. Identify the button you wish to customize within your layout. 5. On the right side of the Figma interface, find the color variable options listed. For example, the variable for a particular button color might be labeled as `$primary-bg-color`, derived from the primary color variable. 6. To customize this primary button control color, click outside the button to see the **Local variables** option on the right side of the Figma interface. It contains the design token for the color variables. Click the **Local variables** option. @@ -67,13 +67,13 @@ Feel free to experiment with these customization options to create a design that ## Downloading the customized styles -Effortlessly download customized style changes as tokens and CSS variables using the `Syncfusion Design Tokens` plugin. This plugin bridges the gap between design and development by converting Figma design variables into Syncfusion tokens for direct use in your applications to ensure a smooth transition from design to implementation. +Effortlessly download customized style changes as tokens and CSS variables using the `Syncfusion Design Tokens` plugin. This plugin bridges the gap between design and development by converting Figma design variables into Syncfusion® tokens for direct use in your applications to ensure a smooth transition from design to implementation. ### Exporting design tokens Follow these steps to download the customized styles from the Figma UI Kit: -- First, open a [Syncfusion Figma UI Kit](https://www.figma.com/@syncfusion). +- First, open a [Syncfusion® Figma UI Kit](https://www.figma.com/@syncfusion). - Navigate to the `Plugins & widgets` section in Figma and search for the `Syncfusion Design Tokens`. - Once found, run the plugin. A popup will appear with an `Export` button. - Click the `Export` button. This action will generate a zip file containing your design tokens. @@ -94,9 +94,9 @@ This streamlined process ensures that your unique design vision, crafted in Figm To upgrade your UI kits, download the latest version from the provided links. Follow these guidelines for a seamless upgrade process: -- Keep track of updates or new versions of UI kits from Syncfusion. +- Keep track of updates or new versions of UI kits from Syncfusion®. - Before upgrading, back up your ongoing projects to prevent data loss or compatibility issues. -- Share your experience with Syncfusion regarding the upgraded UI kits, including any issues encountered or suggestions for improvement. +- Share your experience with Syncfusion® regarding the upgraded UI kits, including any issues encountered or suggestions for improvement. ## See also diff --git a/ej2-javascript/appearance/icons.md b/ej2-javascript/appearance/icons.md index 15e198b8a..510d0d470 100644 --- a/ej2-javascript/appearance/icons.md +++ b/ej2-javascript/appearance/icons.md @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Predefined Icons Library in Syncfusion ##Platform_Name## Control +# Predefined Icons Library in Syncfusion® ##Platform_Name## Control -Syncfusion's icon library is a collection of pre-designed icons that can be used to enhance the user interface of an application. This pre-designed icons are set of `base64` formatted font icons. Utilizing this icon library can make it simpler to create a cohesive, visually pleasing design for an application. +Syncfusion's® icon library is a collection of pre-designed icons that can be used to enhance the user interface of an application. This pre-designed icons are set of `base64` formatted font icons. Utilizing this icon library can make it simpler to create a cohesive, visually pleasing design for an application. ## Referring icons in JavaScript application @@ -23,7 +23,7 @@ Using the below approaches, the icons can be referenced in the JavaScript applic ### The npm package -All Syncfusion theme icons are shipped in the [ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package, which is published on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. This package contains both CSS and SCSS theme files for all themes. +All Syncfusion® theme icons are shipped in the [ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package, which is published on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. This package contains both CSS and SCSS theme files for all themes. Icons can be used from the npm package `ej2-icons`. To use the icons, install the npm package using the following command: @@ -47,9 +47,9 @@ Refer to the following syntax to use icons in a JavaScript application: ### CDN reference -All Syncfusion theme icons are available on the CDN. Instead of using a local resource on the server, use a cloud CDN to refer to the icons. +All Syncfusion® theme icons are available on the CDN. Instead of using a local resource on the server, use a cloud CDN to refer to the icons. -Make sure that the version of the icons in the URL matches the version of the Syncfusion React package. This will prevent compatibility issues and ensure that the correct version of the icons is loaded. +Make sure that the version of the icons in the URL matches the version of the Syncfusion® React package. This will prevent compatibility issues and ensure that the correct version of the icons is loaded. To use the icons from the CDN, refer to the icons by URLs in the application. This can be done by linking the icons in the HTML file by adding a link tag to the head section. @@ -68,13 +68,13 @@ To use the icons from the CDN, refer to the icons by URLs in the application. Th Let's create a JavaScript application using the following command: -For an introduction and configuration of the common specifications, see [getting started with the Syncfusion JavaScript application](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start/). +For an introduction and configuration of the common specifications, see [getting started with the Syncfusion® JavaScript application](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start/). ### Using icons directly in HTML element -The built-in Syncfusion icons can be rendered directly in the HTML element by defining the `e-icons` class, which contains the font-family and common properties of font icons, and defining the available icon's class with the `e-` prefix. +The built-in Syncfusion® icons can be rendered directly in the HTML element by defining the `e-icons` class, which contains the font-family and common properties of font icons, and defining the available icon's class with the `e-` prefix. -The following steps explain the direct rendering of the Syncfusion icon in the HTML element. +The following steps explain the direct rendering of the Syncfusion® icon in the HTML element. 1.Add the class name `e-icons` to the HTML element that needs to render the icon. @@ -139,7 +139,7 @@ The pre-defined icon size is present in the available classes listed below. ### Icon appearance customization -The Syncfusion JavaScript icons can be customized with custom color and size by overriding the `e-icons` class. Customizing the icons in the library can be useful for making the icons more visually appealing and fitting to the design of the application. For example, a user can change the color of an icon to match the color scheme of their application, or increase the size of an icon to make it more visible on smaller screens. It may also be useful for creating a consistent look and feel across different parts of the application. Overall, customizing the icons in the library can improve the overall user experience of the application. +The Syncfusion® JavaScript icons can be customized with custom color and size by overriding the `e-icons` class. Customizing the icons in the library can be useful for making the icons more visually appealing and fitting to the design of the application. For example, a user can change the color of an icon to match the color scheme of their application, or increase the size of an icon to make it more visible on smaller screens. It may also be useful for creating a consistent look and feel across different parts of the application. Overall, customizing the icons in the library can improve the overall user experience of the application. In the example below, the icon color is customized with custom color. @@ -166,7 +166,7 @@ In the example below, the icon color is customized with custom color. ## Available icons -The complete package of Essential JS 2 icons is listed below. The corresponding icon content can be referred in the content section. +The complete package of Essential® JS 2 icons is listed below. The corresponding icon content can be referred in the content section. diff --git a/ej2-javascript/appearance/index.md b/ej2-javascript/appearance/index.md index 7ce186ba3..0934409e6 100644 --- a/ej2-javascript/appearance/index.md +++ b/ej2-javascript/appearance/index.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Index -The Syncfusion JavaScript library styles are developed under the SCSS environment with `base64` embed font icons. The list of key features are described in the below topics. +The Syncfusion® JavaScript library styles are developed under the SCSS environment with `base64` embed font icons. The list of key features are described in the below topics. ## Key Features diff --git a/ej2-javascript/appearance/material3.md b/ej2-javascript/appearance/material3.md index ea69c461b..19f9787f7 100644 --- a/ej2-javascript/appearance/material3.md +++ b/ej2-javascript/appearance/material3.md @@ -15,15 +15,15 @@ domainurl: ##DomainURL## [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used. -## Material 3 - Syncfusion ##Platform_Name## Controls +## Material 3 - Syncfusion® ##Platform_Name## Controls -Syncfusion has introduced the Material 3 theme across all EJ2 Controls, featuring both `light` and `dark` variants. This theme utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. +Syncfusion® has introduced the Material 3 theme across all EJ2 Controls, featuring both `light` and `dark` variants. This theme utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs. -> Kindly note that in the Material 3 theme, Syncfusion utilizes CSS variables with rgb() values for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;. +> Kindly note that in the Material 3 theme, Syncfusion® utilizes CSS variables with rgb() values for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;. -### How does Syncfusion Material 3 theme utilize CSS Variables? +### How does Syncfusion® Material 3 theme utilize CSS Variables? -Syncfusion's Material 3 theme incorporates support for CSS variables, utilizing rgb() values for customizing colors. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of material 3 theme. +Syncfusion's® Material 3 theme incorporates support for CSS variables, utilizing rgb() values for customizing colors. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of material 3 theme. ```CSS :root { @@ -47,7 +47,7 @@ Syncfusion's Material 3 theme incorporates support for CSS variables, utilizing ``` ### How to get the Material 3 theme? -To access the Material 3 theme provided by Syncfusion, you have two primary options, +To access the Material 3 theme provided by Syncfusion®, you have two primary options, * Package * CDN links @@ -131,11 +131,11 @@ Here you can find the example for Material 3 customization using JavaScript. ![customized primary value](images/material3-customize.PNG) -With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion JavaScript controls. +With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion® JavaScript controls. ### Material 3 Light Theme -Syncfusion has implemented the Material 3 theme, offering both Light and Dark variants. In the Material 3 light theme, there are distinct class variables for both light and dark modes, providing flexibility for seamless switching between the two modes within your application. +Syncfusion® has implemented the Material 3 theme, offering both Light and Dark variants. In the Material 3 light theme, there are distinct class variables for both light and dark modes, providing flexibility for seamless switching between the two modes within your application. {% if page.publishingplatform == "typescript" %} @@ -174,4 +174,4 @@ With CSS variable support, transitioning between light and dark theme modes has The ThemeStudio application now includes seamless integration with the Material 3 theme, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes. -Access the Syncfusion ThemeStudio application, featuring the Material 3 theme, via the following link: [Link to Syncfusion ThemeStudio with Material 3 Theme](https://ej2.syncfusion.com/themestudio/?theme=material3) +Access the Syncfusion® ThemeStudio application, featuring the Material 3 theme, via the following link: [Link to Syncfusion® ThemeStudio with Material 3 Theme](https://ej2.syncfusion.com/themestudio/?theme=material3) diff --git a/ej2-javascript/appearance/size-modes.md b/ej2-javascript/appearance/size-modes.md index 8bdfba053..7344db71a 100644 --- a/ej2-javascript/appearance/size-modes.md +++ b/ej2-javascript/appearance/size-modes.md @@ -9,11 +9,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Size modes Size Mode for Syncfusion ##Platform_Name## Controls +# Size modes Size Mode for Syncfusion® ##Platform_Name## Controls An application that is designed to be accessed through a web browser on various devices, including desktop computers and mobile devices, may have a distinct layout or user interface on a mobile device compared to a desktop computer to better suit the smaller screen size. -Syncfusion JavaScript controls support both touch (bigger) and normal size modes. Touch mode creates a responsive design for mobile devices by adding the `e-bigger` class, which enhances interactions, visibility, and the overall experience. +Syncfusion® JavaScript controls support both touch (bigger) and normal size modes. Touch mode creates a responsive design for mobile devices by adding the `e-bigger` class, which enhances interactions, visibility, and the overall experience. ## Size mode for application diff --git a/ej2-javascript/appearance/theme-studio.md b/ej2-javascript/appearance/theme-studio.md index 46975a154..bf6777c19 100644 --- a/ej2-javascript/appearance/theme-studio.md +++ b/ej2-javascript/appearance/theme-studio.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Overview -Theme Studio for Essential JS 2 can be used to customize a new theme from an existing theme. It doesn't support with Data visualization controls like Chart, Diagram, Gauge, Range Navigator, Maps. +Theme Studio for Essential® JS 2 can be used to customize a new theme from an existing theme. It doesn't support with Data visualization controls like Chart, Diagram, Gauge, Range Navigator, Maps. ## Customizing theme color from theme studio -The Essential JS 2 themes are developed under the SCSS environment. Each theme has a unique common variable list. When you change the common variable color code value, it will reflect in all the Syncfusion JavaScript controls. All Syncfusion JavaScript control styles are derived from these [theme-based common variables](theme#common-variables).This common variable list is handled inside the theme studio application for customizing theme-based colors. +The Essential® JS 2 themes are developed under the SCSS environment. Each theme has a unique common variable list. When you change the common variable color code value, it will reflect in all the Syncfusion® JavaScript controls. All Syncfusion® JavaScript control styles are derived from these [theme-based common variables](theme#common-variables).This common variable list is handled inside the theme studio application for customizing theme-based colors. **Step 1:** Navigate to the theme studio application at [Themestudio](https://ej2.syncfusion.com/themestudio/?theme=bootstrap5). @@ -27,13 +27,13 @@ The Essential JS 2 themes are developed under the SCSS environment. Each theme h ![theme studio colpr-picker](images/colorpicker.png) -**Step 4:** The Syncfusion JavaScript UI controls will rendered with the newly selected colors in the preview section, after selecting the custom color form pickers. +**Step 4:** The Syncfusion® JavaScript UI controls will rendered with the newly selected colors in the preview section, after selecting the custom color form pickers. ![theme studio customized](images/customized.png) ### Filtering a specific list of controls -Using the theme studio, you can apply custom themes to a list of specific controls. This option is useful when you have integrated a selective list of Syncfusion JavaScript UI controls in your application. The theme studio will filter the selected controls and customize the final output for those controls’ styles alone, reducing the final output file size. +Using the theme studio, you can apply custom themes to a list of specific controls. This option is useful when you have integrated a selective list of Syncfusion® JavaScript UI controls in your application. The theme studio will filter the selected controls and customize the final output for those controls’ styles alone, reducing the final output file size. **Step 1:** Click the Filter icon in the top right corner and select the controls whose theme you want to customize. @@ -55,11 +55,11 @@ You can download the custom styles after customizing the theme colors. ![theme studio download-icon](images/download-icon.png) -**Step 2:** Assign a theme name in the File Name field and click the Download button. If your application uses both Essential JS 1 and Essential JS 2 controls, then select the Include compatibility css check box before downloading the theme. This option will generate the custom theme for Essential JS 2 compatibility styles, which are compatible as Essential JS 1 styles. Refer this [link](../getting-started/compatible-with-essential-js1) for more details about Essential JS 1 and Essential JS 2 compatibility. +**Step 2:** Assign a theme name in the File Name field and click the Download button. If your application uses both Essential® JS 1 and Essential® JS 2 controls, then select the Include compatibility css check box before downloading the theme. This option will generate the custom theme for Essential® JS 2 compatibility styles, which are compatible as Essential® JS 1 styles. Refer this [link](../getting-started/compatible-with-essential-js1) for more details about Essential® JS 1 and Essential® JS 2 compatibility. ![theme studio download-dialog](images/download-dialog.png) -**Step 3:** The download styles will come as a zip file that contains SCSS and CSS files for the selected Syncfusion JavaScript UI controls. The current settings are stored in the `settings.json` file. +**Step 3:** The download styles will come as a zip file that contains SCSS and CSS files for the selected Syncfusion® JavaScript UI controls. The current settings are stored in the `settings.json` file. ![theme studio output-files](images/output-files.png) @@ -77,11 +77,11 @@ You can directly use the customized CSS file in the web application. ``` -> If you are using Essential JS 1 and Essential JS 2 controls in a same web application, then you have to copy/paste the customized CSS file from the `compatibility` folder in the download location. +> If you are using Essential® JS 1 and Essential® JS 2 controls in a same web application, then you have to copy/paste the customized CSS file from the `compatibility` folder in the download location. ## Import previously changed settings into the theme studio -When you want to change your application theme and UI design in the future, you won’t need to customize the Syncfusion JavaScript UI controls from scratch in the theme studio. Just import the old `settings.json` file to review and update your stored settings in the theme studio application. +When you want to change your application theme and UI design in the future, you won’t need to customize the Syncfusion® JavaScript UI controls from scratch in the theme studio. Just import the old `settings.json` file to review and update your stored settings in the theme studio application. **Step 1:** Click the Import icon in the top right corner. diff --git a/ej2-javascript/appearance/theme.md b/ej2-javascript/appearance/theme.md index 01deebfc7..716e54c77 100644 --- a/ej2-javascript/appearance/theme.md +++ b/ej2-javascript/appearance/theme.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Theme in ##Platform_Name## controls -The Syncfusion JavaScript library has provided the below list of in-built themes: +The Syncfusion® JavaScript library has provided the below list of in-built themes: |Theme | Style Sheet Name | |--------|--------| @@ -38,11 +38,11 @@ The Syncfusion JavaScript library has provided the below list of in-built themes |Microsoft Office Fabric Dark | fabric-dark.css | |High Contrast | highcontrast.css | -> The Syncfusion Bootstrap theme is designed based on `Bootstrap v3`, but it can be compatible with `Bootstrap v4` applications. In addition to these four built-in themes, [ThemeStudio](https://ej2.syncfusion.com/documentation/appearance/theme-studio/) also provides support for the Fusion theme, which can only be downloaded from [ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=fusion). +> The Syncfusion® Bootstrap theme is designed based on `Bootstrap v3`, but it can be compatible with `Bootstrap v4` applications. In addition to these four built-in themes, [ThemeStudio](https://ej2.syncfusion.com/documentation/appearance/theme-studio/) also provides support for the Fusion theme, which can only be downloaded from [ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=fusion). ## Optimized CSS files -Syncfusion controls provide two size modes for each theme: **normal** and **bigger**. By default, the **normal size mode** is applied, offering a standard appearance that is suitable for all devices. The **bigger size mode** provides an enlarged interface for enhanced interactions, visibility, and an overall improved user experience by increasing the size of the UI controls. +Syncfusion® controls provide two size modes for each theme: **normal** and **bigger**. By default, the **normal size mode** is applied, offering a standard appearance that is suitable for all devices. The **bigger size mode** provides an enlarged interface for enhanced interactions, visibility, and an overall improved user experience by increasing the size of the UI controls. The bigger size mode is ideal when an enlarged appearance is needed, while the normal size mode works best for maintaining the default appearance of controls. @@ -50,7 +50,7 @@ Below is a comparison of the Button control in normal and bigger size modes: ![bigger-sized-button](./images/bigger-theme-button.png) -Each theme includes both normal and bigger size modes, which increases the overall file size. To optimize performance, Syncfusion offers additional theme files (e.g., `fluent2-lite.css`), which only include the normal size mode styles. This results in a significant reduction in file size, improving load times and overall application performance, especially when the bigger size mode is unnecessary. +Each theme includes both normal and bigger size modes, which increases the overall file size. To optimize performance, Syncfusion® offers additional theme files (e.g., `fluent2-lite.css`), which only include the normal size mode styles. This results in a significant reduction in file size, improving load times and overall application performance, especially when the bigger size mode is unnecessary. Refer to the comparison below for the default and optimized theme file sizes: @@ -60,7 +60,7 @@ Refer to the comparison below for the default and optimized theme file sizes: ## Reference themes in the application -Syncfusion JavaScript controls themes that can be used in the application by referencing the style sheet. Using the following approaches, themes can be referenced in the application. +Syncfusion® JavaScript controls themes that can be used in the application by referencing the style sheet. Using the following approaches, themes can be referenced in the application. * [NPM Packages](#npm-packages) - Used to customize the existing themes and bundle stylesheet’s in an application. * [Content Delivery Network (CDN)](#cdn-reference) - Used to reference complete css via static web assets. @@ -68,7 +68,7 @@ Syncfusion JavaScript controls themes that can be used in the application by ref ## NPM packages -All Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. Themes are shipped as individual and combined CSS files. A combined CSS file can be referred to from the npm package [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) and individual CSS files are available within the same control repository’s `style` folder. In the `ej2` npm package, we have shipped both CSS and SCSS files for all controls. +All Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. Themes are shipped as individual and combined CSS files. A combined CSS file can be referred to from the npm package [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) and individual CSS files are available within the same control repository’s `style` folder. In the `ej2` npm package, we have shipped both CSS and SCSS files for all controls. ### Referring all controls theme @@ -102,7 +102,7 @@ Referring individual control SCSS theme from an individual package. @import "ej2-buttons/styles/button/material.scss"; ``` -> `ej2-base` is common dependent package for all Syncfusion JavaScript control styles. so, it needs to be added first in the import statement. +> `ej2-base` is common dependent package for all Syncfusion® JavaScript control styles. so, it needs to be added first in the import statement. Referring individual control SCSS theme from ej2 package @@ -156,11 +156,11 @@ To refer to individual control's optimized CSS files from an individual packages ## CDN reference -Syncfusion hosts every Syncfusion JavaScript control as a separate package on the CDN. This allows you to load the scripts and styles for each individual package. Syncfusion also provides a single package that includes all Syncfusion JavaScript controls, allowing you to load the scripts and styles for all controls as a single script and style file. +Syncfusion® hosts every Syncfusion® JavaScript control as a separate package on the CDN. This allows you to load the scripts and styles for each individual package. Syncfusion® also provides a single package that includes all Syncfusion® JavaScript controls, allowing you to load the scripts and styles for all controls as a single script and style file. ### Single CDN theme reference for all controls -Refer to a single CDN link that contains all Syncfusion JavaScript control styles as follows: +Refer to a single CDN link that contains all Syncfusion® JavaScript control styles as follows: ``` https://cdn.syncfusion.com/ej2//.css @@ -222,7 +222,7 @@ The primary goal of individual CDN control is to optimize the loading time and m ## Change theme dynamically -In the application, Syncfusion themes can be changed dynamically by changing their style reference as follows. +In the application, Syncfusion® themes can be changed dynamically by changing their style reference as follows. * Add the theme CDN link and DropDownList element to the HTML file using the following code. @@ -252,7 +252,7 @@ In the application, Syncfusion themes can be changed dynamically by changing the ``` -* The following code example demonstrates how to change the theme dynamically in the application using Syncfusion JavaScript DropDownList control. +* The following code example demonstrates how to change the theme dynamically in the application using Syncfusion® JavaScript DropDownList control. ```ts import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; @@ -301,11 +301,11 @@ dropDownListObject.appendTo('#themes-dropdown'); ## Common variables -The following list of common variables are used in the Syncfusion JavaScript library themes for all UI controls. You can change these variables to customize the corresponding theme. +The following list of common variables are used in the Syncfusion® JavaScript library themes for all UI controls. You can change these variables to customize the corresponding theme. -### Syncfusion Tailwind 3.4 theme +### Syncfusion® Tailwind 3.4 theme
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
-![Yes](https://cdn.syncfusion.com/content/images/documentation/full.png) - All features of the component meet the requirement. +![Yes](images/full.png) - All features of the component meet the requirement. -![Intermediate](https://cdn.syncfusion.com/content/images/documentation/partial.png) - Some features of the component do not meet the requirement. +![Intermediate](images/partial.png) - Some features of the component do not meet the requirement. -![No](https://cdn.syncfusion.com/content/images/documentation/not-supported.png) - The component does not meet the requirement. +![No](images/not-supported.png) - The component does not meet the requirement. ## WAI-ARIA attributes @@ -116,4 +116,4 @@ The accessibility compliance of the Kanban component is shown in the following s ## See also -* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® ##Platform_Name## components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/kanban/images/full.png b/ej2-javascript/kanban/images/full.png new file mode 100644 index 000000000..a3a5136eb Binary files /dev/null and b/ej2-javascript/kanban/images/full.png differ diff --git a/ej2-javascript/kanban/images/not-supported.png b/ej2-javascript/kanban/images/not-supported.png new file mode 100644 index 000000000..f991927b2 Binary files /dev/null and b/ej2-javascript/kanban/images/not-supported.png differ diff --git a/ej2-javascript/kanban/images/partial.png b/ej2-javascript/kanban/images/partial.png new file mode 100644 index 000000000..671b23056 Binary files /dev/null and b/ej2-javascript/kanban/images/partial.png differ diff --git a/ej2-javascript/kanban/js/ej1-api-migration.md b/ej2-javascript/kanban/js/ej1-api-migration.md index 14145506a..752c3b3c3 100644 --- a/ej2-javascript/kanban/js/ej1-api-migration.md +++ b/ej2-javascript/kanban/js/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Kanban control -This article describes the API migration process of Kanban component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Kanban component from Essential® JS 1 to Essential® JS 2. ## Columns -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property** : *columns*

$("#Kanban").ejKanban({
columns : [] }); | **Property** : *columns*

var obj = new
ej.kanban.Kanban({
columns : [] })
obj.appendTo("#Kanban"); | | Header Text | **Property** : *headerText*

$("#Kanban").ejKanban({
columns: [{
headerText : "Backlog"}]
}); | **Property** : *headerText*

var obj = new
ej.kanban.Kanban({ columns: [{
headerText : "Backlog"}]
});
obj.appendTo("#Kanban"); | @@ -39,7 +39,7 @@ This article describes the API migration process of Kanban component from Essent ## Cards -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Card unique field | **Property** :
*fields.primaryKey*

$("#Kanban").ejKanban({
fields: { primaryKey: "Id"
} }); | **Property** :
*cardSettings.headerField*
var obj =
new ej.kanban.Kanban({
cardSettings: {
headerField: "Id"
} });
obj.appendTo("#kanban"); | | Content | **Property:**
*fields.content*

$("#Kanban").ejKanban({
fields: {
content: "Summary"
}}); | **Property:**
*cardSettings.contentField*

var obj =
new ej.kanban.Kanban({
cardSettings: {
contentField: "Id"
} });
obj.appendTo("#kanban") | @@ -63,7 +63,7 @@ This article describes the API migration process of Kanban component from Essent ## DataSource -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | DataSource | **Property**: *dataSource*

$("#Kanban").ejKanban({
dataSource: data});

**Method**:
*dataSource(datasource)*
var kanbanObj = $("#Kanban")
.data("ejKanban");
kanbanObj.dataSource
(newDataSource); | **Property**: *dataSource*
var obj = new
ej.kanban.Kanban({
datasource: data
});

**Method**:
*dataSource(datasource)*
var obj = new ej.kanban.Kanban({});
obj.appendTo("#kanban");
obj.dataSource(newDataSource); | | Triggers before
data load | **Event**: *load*

$("#Kanban").ejKanban({
load: function (args) {}}); | **Event**: *dataBinding*

var obj = new
ej.kanban.Kanban({
dataBinding:
function(args){}}); | @@ -71,7 +71,7 @@ This article describes the API migration process of Kanban component from Essent **Common:** -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Drag And Drop | **Property**: *allowDragAndDrop*

$("#Kanban").ejKanban({
allowDragAndDrop: true
}); | **Property**: *allowDragAndDrop*

var obj = new
ej.kanban.Kanban
allowDragAndDrop: true
});
obj.appendTo("#kanban"); | | Key Field | **Property**: *keyField*

$("#Kanban").ejKanban({
keyField: "Status"}); | **Property** : *keyField*

var obj = new ej.kanban.Kanban({
keyField: "Status"
});
obj.appendTo("#kanban"); | @@ -96,7 +96,7 @@ This article describes the API migration process of Kanban component from Essent **Swimlane:** -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *swimlaneKey*

$("#Kanban").ejKanban({
fields: {
swimlaneKey: "Assignee"}}); | **Property**: *keyField*

var obj = new ej.kanban.Kanban({
swimlaneSettings: {
keyField: "Assignee"} });
obj.appendTo("#kanban"); | | Header | **Property**: *headers*

$("#Kanban").ejKanban({
headers: [{
text: "Andrew",
key: "Andrew Fuller"}]}); | **Property**: *textField*

var obj = new ej.kanban.Kanban({
swimlaneSettings: {
textField: "AssigneeName"} });
obj.appendTo("#kanban"); | @@ -112,14 +112,14 @@ This article describes the API migration process of Kanban component from Essent ## Stacked Headers -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Multiple stacked headers | **Property**: *stackedHeaderColumns*

$("#Kanban").ejKanban({
stackedHeaderRows: [{
stackedHeaderColumns: [{
headerText: "Status",
column: "Backlog,
In Progress, Testing,
Done"}] },
{ stackedHeaderColumns: [{
headerText: "Unresolved",
column: "Backlog,
In Progress"}]}]}); | Not Applicable | | Single Stacked Header | **Property**: *stackedHeaderColumns*

$("#Kanban").ejKanban({
stackedHeaderRows: [{
stackedHeaderColumns: [{
headerText: "Unresolved",
column: "Backlog,
In Progress"}]}]}); | **Property**:
*stackedHeaders*
var obj = new
ej.kanban.Kanban({
stackedHeaders: [{
text: "To Do",
keyField: "Open,
InProgress"}]});
obj.appendTo("#kanban"); | ## WIP Validation -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Constraints Type | **Property:**
*constraints.type*

$("#Kanban").ejKanban({
columns: [{
headerText: "Backlog",
key: "Open",
constraints: {
type: "swimlane", max: 5}}]}); | **Property**:
*constraintType*

var kanban = new
ej.kanban.Kanban({
constraintType:
"swimlane" }); | | Maximum card Count at
particular column/swimlane | **Property**:
*constraints.max*

$("#Kanban").ejKanban({
columns: [{
headerText: "Backlog",
key: "Open",
constraints: {
type: "swimlane",
max: 5}}]}); | **Property**:
*maxCount*

var obj = new ej.kanban.Kanban({
columns:[{
headerText: "Backlog",
keyField: "Open",
maxCount: 5}] });
obj.appendTo("#kanban"); | @@ -127,21 +127,21 @@ This article describes the API migration process of Kanban component from Essent ## Keyboard -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | KeyBoard | **Property**:
*allowKeyboardNavigation*

$("#Kanban").ejKanban({
allowKeyboardNavigation:
true}); | **Property**:
*allowKeyboard*

var obj = new
ej.kanban.Kanban({
allowKeyboard: true });
obj.appendTo("#kanban"); | | Settings | **Property**:
*keySettings*

$("#Kanban").ejKanban({
keySettings: {
focus: "e",
insertCard: "45"
} }); | **Not Applicable** | ## Toggle Columns -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*allowToggleColumn*

$("#Kanban").ejKanban({
allowToggleColumn
: true}); | **Property**:
*allowToggle*

var obj = new ej.kanban.Kanban({
columns:[{
allowToggle: true
}]});
obj.appendTo("#kanban"); | | Toggle | **Method**: *toggleColumn
(headerText or $div)*

var kanbanObj = $("#Kanban")
.data("ejKanban");
kanbanObj.toggleColumn
("Backlog"); | **Not Applicable** | ## Dialog Editing -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Fields | **Property**: *editItems*

$("#Kanban").ejKanban({
editSettings: {
editItems: [{}] }}); | **Property**: *fields*

var obj = new ej.kanban.Kanban({
dialogSettings: {
fields: [{}] }});
obj.appendTo("#kanban"); | | Dialog Model | **Not Available** | **Property**: *model*

var obj = new
ej.kanban.Kanban({
dialogSettings: {
model: {
width: 250 }}});
obj.appendTo("#kanban"); | @@ -167,7 +167,7 @@ This article describes the API migration process of Kanban component from Essent ## Dialog Editing Fields -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Fields | **Property**:
*editItems*

$("#Kanban").ejKanban({
editSettings: {
editItems: [{}] }}); | **Property**: *fields*
var obj = new
ej.kanban.Kanban({
dialogSettings: {
fields: [{}] }});
obj.appendTo("#kanban"); | | Mapping key | **Property**: *field*

$("#Kanban").ejKanban({
editSettings: {
editItems: [{
field: "Id"}] }}); | **Property**: *key*

var obj = new ej.kanban.Kanban({
dialogSettings: {
fields: [{
key: "Id"}]}});
obj.appendTo("#kanban"); | @@ -179,14 +179,14 @@ This article describes the API migration process of Kanban component from Essent ## Tooltip -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*tooltipSettings.enable*

$("#Kanban").ejKanban({
tooltipSettings: {
enable: true
}}); | **Property**:
*enableTooltip*

var obj = new ej.kanban.Kanban({
enableTooltip: true});
obj.appendTo("#kanban"); | | Template | **Property:**
*tooltipSettings.template*

$("#Kanban").ejKanban({
tooltipSettings: {
template:
"#tooltipTemplate"
}}); | **Property**: *tooltipTemplate*

var obj = new ej.kanban.Kanban({
tooltipTemplate:
"#tooltipTemplate"});
obj.appendTo("#kanban"); | ## Context Menu -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *enable*

$("#Kanban").ejKanban({
contextMenuSettings: {
enable: true }}); | **Not Applicable** | | Menu Items | **Property**: *menuItems*

$("#Kanban").ejKanban({
contextMenuSettings: {
enable: true,
menuItems: ["Move Right"] }}); | **Not Applicable** | @@ -197,7 +197,7 @@ This article describes the API migration process of Kanban component from Essent ## WorkFlows -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *workFlows*

$("#Kanban").ejKanban({
workFlows: [{}]}); | **Not Applicable** | | Key | **Property**: *key*

$("#Kanban").ejKanban({
workFlows: [{
key: "Order"}]}); | **Not Applicable** | @@ -205,7 +205,7 @@ This article describes the API migration process of Kanban component from Essent ## Filtering -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *filterSettings*

$("#Kanban").ejKanban({
filterSettings: []}); | **Not Applicable** | | Enable | **Property**: *allowFiltering*

$("#Kanban").ejKanban({
allowFiltering: true}); | **Not Applicable** | @@ -217,7 +217,7 @@ This article describes the API migration process of Kanban component from Essent ## Searching -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*searchSettings*

$("#Kanban").ejKanban({
searchSettings: []}); | **Not Applicable** | | Enable | **Property**:
*allowSearching*

$("#Kanban").ejKanban({
allowSearching: true
}); | **Not Applicable** | @@ -230,14 +230,14 @@ This article describes the API migration process of Kanban component from Essent ## External Drag And Drop -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*allowExternalDragAndDrop*

$("#Kanban").ejKanban({
allowExternalDragAndDrop
: true}); | **Not Applicable** | | Target | **Property**:
*externalDropTarget*

$("#Kanban").ejKanban({
cardSettings: {
externalDropTarget:
"#DroppedKanban" }}); | **Not Applicable** | ## Scrolling -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *allowScrolling*

$("#Kanban").ejKanban({
allowScrolling: true}); | **Not Applicable** | | height | **Property**: *height*

$("#Kanban").ejKanban({
allowScrolling: true,
scrollSettings: {
height: 400 }}); | **Property**: *height*

var obj = new ej.kanban.Kanban({
height: 400});
obj.appendTo("#kanban"); | @@ -247,7 +247,7 @@ This article describes the API migration process of Kanban component from Essent ## Card Selection and Hover -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Enable | **Property**: *allowSelection*

$("#Kanban").ejKanban({
allowSelection: true}); | **Property**: *cardSettings.
selectionType*

var obj = new
ej.kanban.Kanban({ cardSettings: {
selectionType: "Single"} });
obj.appendTo("#kanban"); | | Type | **Property**: *selectionType*

$("#Kanban").ejKanban({
selectionType: "single"}); | It is covered under
**selectionType** property. | @@ -258,26 +258,26 @@ This article describes the API migration process of Kanban component from Essent ## Toolbar -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Custom Toolbar | **Property**:
*customToolbarItems.template*

$("#Kanban").ejKanban({
customToolbarItems: {
template: "#Delete"
}}); | **Not Applicable** | | Triggers toolbar
item click | **Event**: *toolbarClick*

$("#Kanban").ejKanban({
toolbarClick: function
(args) {}}); | **Not Applicable** | ## Responsive -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *isResponsive*

$("#Kanban").ejKanban({
isResponsive: true}); | **Not Applicable** | | Minimum width | **Property**: *minWidth*

$("#Kanban").ejKanban({
isResponsive: true,
minWidth: 400}); | **Not Applicable** | ## State Persistence -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Persistence | **Not Applicable** | **Property**:
*enablePersistence*

var obj = new ej.kanban.Kanban({
enablePersistence: true
});
obj.appendTo("#kanban"); | ## Right to Left - RTL -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | default | **Property**: *enableRTL*

$("#Kanban").ejKanban({
enableRTL: true}) | **Property**: *enableRtl*

var obj = new ej.kanban.Kanban({
enableRtl: true});
obj.appendTo("#kanban"); | diff --git a/ej2-javascript/kanban/js/getting-started.md b/ej2-javascript/kanban/js/getting-started.md index 463a55464..17d5310ce 100644 --- a/ej2-javascript/kanban/js/getting-started.md +++ b/ej2-javascript/kanban/js/getting-started.md @@ -40,20 +40,20 @@ Refer to the following steps to setup your local environment: **Step 2:** Create `myapp/resources` folder to store local scripts and styles files. -**Step 3:** Create `myapp/index.js` and `myapp/index.html` files for initializing Essential JS 2 Kanban control. +**Step 3:** Create `myapp/index.js` and `myapp/index.html` files for initializing Essential® JS 2 Kanban control. -## Adding Syncfusion resources +## Adding Syncfusion® resources -The Essential JS 2 Kanban control can be initialized by using one of the following ways. +The Essential® JS 2 Kanban control can be initialized by using one of the following ways. * Using local scripts and styles. * Using CDN links for scripts and styles. ### Using local scripts and styles -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. -After installing the Essential JS 2 product build, you can copy the Kanban and its dependency scripts and style files into the `resources/scripts` and `resources/styles` folder respectively. +After installing the Essential® JS 2 product build, you can copy the Kanban and its dependency scripts and style files into the `resources/scripts` and `resources/styles` folder respectively. Refer to the following location from where the Kanban's script and styles can be referenced. @@ -185,7 +185,7 @@ kanbanObj.appendTo('#Kanban'); Now, you can add the Kanban control to the application. For getting started, add a `div` element for Kanban control in `index.html`. Then refer the `index.js` file into the `index.html` file. -In this document context, we are going to use `ej2.min.js`, which includes all the Essential JS 2 components and their dependent scripts. +In this document context, we are going to use `ej2.min.js`, which includes all the Essential® JS 2 components and their dependent scripts. ```html diff --git a/ej2-javascript/kanban/ts/ej1-api-migration.md b/ej2-javascript/kanban/ts/ej1-api-migration.md index 16b22e91b..ebc00614a 100644 --- a/ej2-javascript/kanban/ts/ej1-api-migration.md +++ b/ej2-javascript/kanban/ts/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Kanban control -This article describes the API migration process of Kanban component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Kanban component from Essential® JS 1 to Essential® JS 2. ## Columns -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property** : *columns*

var kanbanObj = new
ej.Kanban($("#Kanban"),
{ columns : [] }); | **Property** : *columns*

let obj: Kanban = new
Kanban({ columns : [] })
obj.appendTo("#Kanban"); | | Header Text | **Property** : *headerText*

var kanbanObj = new
ej.Kanban($("#Kanban"),
{ columns: [{
headerText : "Backlog"}]
}); | **Property** : *headerText*

let obj: Kanban = new
Kanban({ columns: [{
headerText : "Backlog"}]
});
obj.appendTo("#Kanban"); | @@ -39,7 +39,7 @@ This article describes the API migration process of Kanban component from Essent ## Cards -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Card unique field | **Property** :
*fields.primaryKey*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
fields: { primaryKey: "Id"
} }); | **Property** :
*cardSettings.headerField*
let obj: Kanban =
new Kanban({
cardSettings: {
headerField: "Id"
} });
obj.appendTo("#kanban"); | | Content | **Property:**
*fields.content*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
fields: {
content: "Summary"
}}); | **Property:**
*cardSettings.contentField*

let obj: Kanban =
new Kanban({
cardSettings: {
contentField: "Id"
} });
obj.appendTo("#kanban") | @@ -63,7 +63,7 @@ This article describes the API migration process of Kanban component from Essent ## DataSource -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | DataSource | **Property**: *dataSource*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
dataSource: data});

**Method**:
*dataSource(datasource)*
var kanbanObj = $("#Kanban")
.data("ejKanban");
kanbanObj.dataSource
(newDataSource); | **Property**: *dataSource*
let obj: Kanban = new
Kanban({
datasource: data
});

**Method**:
*dataSource(datasource)*
let obj: Kanban = new Kanban({});
obj.appendTo("#kanban");
obj.dataSource(newDataSource); | | Triggers before
data load | **Event**: *load*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
load: function (args) {}}); | **Event**: *dataBinding*

let obj: Kanban = new
Kanban({
dataBinding:
function(args){}}); | @@ -71,7 +71,7 @@ This article describes the API migration process of Kanban component from Essent **Common:** -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Drag And Drop | **Property**: *allowDragAndDrop*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowDragAndDrop: true
}); | **Property**: *allowDragAndDrop*

let obj: Kanban = new
Kanban({
allowDragAndDrop: true
});
obj.appendTo("#kanban"); | | Key Field | **Property**: *keyField*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
keyField: "Status"}); | **Property** : *keyField*

let obj: Kanban = new Kanban({
keyField: "Status"
});
obj.appendTo("#kanban"); | @@ -96,7 +96,7 @@ This article describes the API migration process of Kanban component from Essent **Swimlane:** -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *swimlaneKey*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
fields: {
swimlaneKey: "Assignee"}}); | **Property**: *keyField*

let obj: Kanban = new Kanban({
swimlaneSettings: {
keyField: "Assignee"} });
obj.appendTo("#kanban"); | | Header | **Property**: *headers*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
headers: [{
text: "Andrew",
key: "Andrew Fuller"}]}); | **Property**: *textField*

let obj: Kanban = new Kanban({
swimlaneSettings: {
textField: "AssigneeName"} });
obj.appendTo("#kanban"); | @@ -112,14 +112,14 @@ This article describes the API migration process of Kanban component from Essent ## Stacked Headers -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Multiple stacked headers | **Property**: *stackedHeaderColumns*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
stackedHeaderRows: [{
stackedHeaderColumns: [{
headerText: "Status",
column: "Backlog,
In Progress, Testing,
Done"}] },
{ stackedHeaderColumns: [{
headerText: "Unresolved",
column: "Backlog,
In Progress"}]}]}); | Not Applicable | | Single Stacked Header | **Property**: *stackedHeaderColumns*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
stackedHeaderRows: [{
stackedHeaderColumns: [{
headerText: "Unresolved",
column: "Backlog,
In Progress"}]}]}); | **Property**:
*stackedHeaders*
let obj: Kanban = new
Kanban({
stackedHeaders: [{
text: "To Do",
keyField: "Open,
InProgress"}]});
obj.appendTo("#kanban"); | ## WIP Validation -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Constraints Type | **Property:**
*constraints.type*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
columns: [{
headerText: "Backlog",
key: "Open",
constraints: {
type: "swimlane", max: 5}}]}); | **Property**:
*constraintType*

var kanban = new
ej.Kanban($("#kanban"), {
constraintType:
"swimlane" }); | | Maximum card Count
at particular
column/swimlane | **Property**:
*constraints.max*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
columns: [{
headerText: "Backlog",
key: "Open",
constraints: {
type: "swimlane",
max: 5}}]}); | **Property**:
*maxCount*

let obj: Kanban = new Kanban({
columns:[{
headerText: "Backlog",
keyField: "Open",
maxCount: 5}] });
obj.appendTo("#kanban"); | @@ -127,21 +127,21 @@ This article describes the API migration process of Kanban component from Essent ## Keyboard -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | KeyBoard | **Property**:
*allowKeyboardNavigation*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowKeyboardNavigation:
true}); | **Property**:
*allowKeyboard*

let obj: Kanban = new
Kanban({
allowKeyboard: true });
obj.appendTo("#kanban"); | | Settings | **Property**:
*keySettings*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
keySettings: {
focus: "e",
insertCard: "45"
} }); | **Not Applicable** | ## Toggle Columns -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*allowToggleColumn*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowToggleColumn
: true}); | **Property**:
*allowToggle*

let obj: Kanban = new
Kanban({
columns:[{
allowToggle: true
}]});
obj.appendTo("#kanban"); | | Toggle | **Method**: *toggleColumn
(headerText or $div)*

var kanbanObj = $("#Kanban")
.data("ejKanban");
kanbanObj.toggleColumn
("Backlog"); | **Not Applicable** | ## Dialog Editing -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Fields | **Property**: *editItems*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
editSettings: {
editItems: [] }}); | **Property**: *fields*

let obj: Kanban = new
Kanban({
dialogSettings: {
fields: []}});
obj.appendTo("#kanban"); | | Dialog Model | **Not Available** | **Property**: *model*

let obj: Kanban = new
Kanban({
dialogSettings: {
model: {
width: 250 }}});
obj.appendTo("#kanban"); | @@ -167,7 +167,7 @@ This article describes the API migration process of Kanban component from Essent ## Dialog Editing Fields -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Fields | **Property**:
*editItems*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
editSettings: {
editItems: [] }}); | **Property**: *fields*
let obj: Kanban = new
Kanban({
dialogSettings: {
fields: []}});
obj.appendTo("#kanban"); | | Mapping key | **Property**: *field*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
editSettings: {
editItems: [{
field: "Id"}] }});| **Property**: *key*

let obj: Kanban = new
Kanban({
dialogSettings: {
fields: [{
key: "Id"}]}});
obj.appendTo("#kanban"); | @@ -179,14 +179,14 @@ This article describes the API migration process of Kanban component from Essent ## Tooltip -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*tooltipSettings.enable*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
tooltipSettings: {
enable: true
}}); | **Property**:
*enableTooltip*

let obj: Kanban = new
Kanban({
enableTooltip: true});
obj.appendTo("#kanban"); | | Template | **Property:**
*tooltipSettings.template*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
tooltipSettings: {
template:
"#tooltipTemplate"
}}); | **Property**: *tooltipTemplate*

let obj: Kanban = new Kanban({
tooltipTemplate:
"#tooltipTemplate"});
obj.appendTo("#kanban"); | ## Context Menu -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *enable*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
contextMenuSettings: {
enable: true }}); | **Not Applicable** | | Menu Items | **Property**: *menuItems*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
contextMenuSettings: {
enable: true,
menuItems: ["Move Right"] }}); | **Not Applicable** | @@ -197,7 +197,7 @@ This article describes the API migration process of Kanban component from Essent ## WorkFlows -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *workFlows*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
workFlows: [{}]}); | **Not Applicable** | | Key | **Property**: *key*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
workFlows: [{
key: "Order"}]}); | **Not Applicable** | @@ -205,7 +205,7 @@ This article describes the API migration process of Kanban component from Essent ## Filtering -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *filterSettings*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
filterSettings: []}); | **Not Applicable** | | Enable | **Property**: *allowFiltering*

$("#Kanban").ejKanban({
allowFiltering: true}); | **Not Applicable** | @@ -217,7 +217,7 @@ This article describes the API migration process of Kanban component from Essent ## Searching -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*searchSettings*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
searchSettings: []}); | **Not Applicable** | | Enable | **Property**:
*allowSearching*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowSearching: true
}); | **Not Applicable** | @@ -230,14 +230,14 @@ This article describes the API migration process of Kanban component from Essent ## External Drag And Drop -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**:
*allowExternalDragAndDrop*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowExternalDragAndDrop
: true}); | **Not Applicable** | | Target | **Property**:
*externalDropTarget*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
cardSettings: {
externalDropTarget:
"#DroppedKanban" }}); | **Not Applicable** | ## Scrolling -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *allowScrolling*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowScrolling: true}); | **Not Applicable** | | height | **Property**: *height*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowScrolling: true,
scrollSettings: {
height: 400 }}); | **Property**: *height*

let obj: Kanban = new Kanban({
height: 400});
obj.appendTo("#kanban"); | @@ -247,7 +247,7 @@ This article describes the API migration process of Kanban component from Essent ## Card Selection and Hover -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Enable | **Property**: *allowSelection*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
allowSelection: true}); | **Property**: *cardSettings.
selectionType*

let obj: Kanban = new
Kanban({ cardSettings: {
selectionType: "Single"} });
obj.appendTo("#kanban"); | | Type | **Property**: *selectionType*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
selectionType: "single"}); | It is covered under
**selectionType** property. | @@ -258,26 +258,26 @@ This article describes the API migration process of Kanban component from Essent ## Toolbar -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Custom Toolbar | **Property**:
*customToolbarItems.template*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
customToolbarItems: {
template: "#Delete"
}}); | **Not Applicable** | | Triggers toolbar
item click | **Event**: *toolbarClick*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
toolbarClick: function
(args) {}}); | **Not Applicable** | ## Responsive -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Default | **Property**: *isResponsive*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
isResponsive: true}); | **Not Applicable** | | Minimum width | **Property**: *minWidth*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
isResponsive: true,
minWidth: 400}); | **Not Applicable** | ## State Persistence -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Persistence | **Not Applicable** | **Property**:
*enablePersistence*

let obj: Kanban = new Kanban({
enablePersistence: true
});
obj.appendTo("#kanban"); | ## Right to Left - RTL -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | default | **Property**: *enableRTL*

var kanbanObj = new
ej.Kanban($("#Kanban"), {
enableRTL: true}) | **Property**: *enableRtl*

let obj: Kanban = new Kanban({
enableRtl: true});
obj.appendTo("#kanban"); | \ No newline at end of file diff --git a/ej2-javascript/kanban/ts/getting-started.md b/ej2-javascript/kanban/ts/getting-started.md index 8f521006d..a9e9be51b 100644 --- a/ej2-javascript/kanban/ts/getting-started.md +++ b/ej2-javascript/kanban/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Kanban control -This section briefly explains how to create **Kanban** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create **Kanban** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -36,7 +36,7 @@ The following list of dependencies are required to use the Kanban component in y ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -56,9 +56,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -70,7 +70,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles Kanban CSS files are available in the ej2-kanban and its sub-component package folder. This can be referenced in your application using the following code. @@ -91,7 +91,7 @@ The quickstart application is preconfigured to use the `Material` theme in the ` {% endhighlight %} {% endtabs %} -In case, if you want to make use of the combined CSS files of entire components, then you can avail it from the root folder of Essential JS 2 package and reference it with the following code. +In case, if you want to make use of the combined CSS files of entire components, then you can avail it from the root folder of Essential® JS 2 package and reference it with the following code. {% tabs %} {% highlight css tabtitle="style.css" %} diff --git a/ej2-javascript/linear-gauge/accessibility.md b/ej2-javascript/linear-gauge/accessibility.md index 8a960abf1..273347345 100644 --- a/ej2-javascript/linear-gauge/accessibility.md +++ b/ej2-javascript/linear-gauge/accessibility.md @@ -70,4 +70,4 @@ The accessibility compliance of the Linear Gauge control is shown in the followi ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) diff --git a/ej2-javascript/linear-gauge/ej1-api-migration.md b/ej2-javascript/linear-gauge/ej1-api-migration.md index fd1f91db3..f22e36fa4 100644 --- a/ej2-javascript/linear-gauge/ej1-api-migration.md +++ b/ej2-javascript/linear-gauge/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Linear gauge control -This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. ## Linear gauge dimensions -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Height| **Property:** *height*

$("#container").ejLinearGauge({ height: 150 });|**Property:** *height*

let gauge: LinearGauge = new LinearGauge({
  height : '150px'
});
gauge.appendTo('#container');| |Width| **Property:** *width*

$("#container").ejLinearGauge({ width: 200 });|**Property:** *width*

let gauge: LinearGauge = new LinearGauge({
  width : '200px'
});
gauge.appendTo('#container');| @@ -24,7 +24,7 @@ This article describes the API migration process of Accordion component from Ess ## Line customizaton -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Height| **Property:** *scales.length*

$("#container").ejLinearGauge({
  scales:[{
    length: 300
  }] });|**Property:** *axes.line.height*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    line: { height : 150 }
  }] });
gauge.appendTo('#container');| |Width| **Property:** *scales.width*

$("#container").ejLinearGauge({
  scales:[{
    width: 300
  }] });|**Property:** *axes.line.width*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    line: { width : 2 }
  }] });
gauge.appendTo('#container');| @@ -35,7 +35,7 @@ This article describes the API migration process of Accordion component from Ess ## Ticks -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Type of Ticks| **Property:** *scales.ticks.type*

$("#container").ejLinearGauge({
  scales:[{
    ticks: [{ type: "majorinterval" }]
  }] });| **Property:** *axes.majorTicks.height*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { }
  }] });
gauge.appendTo('#container');| |Height of Major Ticks| **Property:** *scales.ticks.height*

$("#container").ejLinearGauge({
  scales: [{
    ticks: [{ type: "majorinterval", height: 8 }]
  }] });|**Property:** *axes.majorTicks.height*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    majorTicks: { height : 10 }
  }] });
gauge.appendTo('#container');| @@ -55,7 +55,7 @@ This article describes the API migration process of Accordion component from Ess ## Labels -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Angle| **Property:** *scales.labels.angle*

$("#container").ejLinearGauge({
  scales:[{
    labels: [{ angle: 15 }]
  }] });| Not Applicable| |Offset| **Property:** *scales.labels.distanceFromScale*

$("#container").ejLinearGauge({
  scales:[{
    labels: [{ distanceFromScale: { x: -5, y: 10 } }]
  }] });|**Property:** *axes.labelStyle.offset*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    labelStyle: { offset : 3 }
  }] });
gauge.appendTo('#container');| @@ -71,7 +71,7 @@ This article describes the API migration process of Accordion component from Ess ## Axis -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Minimum Value| **Property:** *scales.minimum*

$("#container").ejLinearGauge({
  scales: [{ minimum: 20 }]
});| **Property:** *axes.minimum*

let gauge: LinearGauge = new LinearGauge({
  axes: [{ minimum: 20 }]
});
gauge.appendTo('#container');| |Maximum Value| **Property:** *scales.maximum*

$("#container").ejLinearGauge({
  scales: [{ maximum: 120 }]
});| **Property:** *axes.maximum*

let gauge: LinearGauge = new LinearGauge({
  axes: [{ maximum: 120 }]
});
gauge.appendTo('#container');| @@ -80,7 +80,7 @@ This article describes the API migration process of Accordion component from Ess ## Ranges -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Start Value| **Property:** *scales.ranges.startValue*

$("#container").ejLinearGauge({
  scales:[{
    ranges: [{ startValue: 20 }]
  }] });| **Property:** *axes.ranges.start*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ start: 20 }]
  }] });
gauge.appendTo('#container');| |End Value| **Property:** *scales.ranges.endValue*

$("#container").ejLinearGauge({
  scales:[{
    ranges: [{ endValue: 20 }]
  }] });| **Property:** *axes.ranges.end*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    ranges: [{ end: 20 }]
  }] });
gauge.appendTo('#container');| @@ -94,7 +94,7 @@ This article describes the API migration process of Accordion component from Ess ## Bar Pointer -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Bar Pointer| **Property:** *scales.barPointers.value*

$("#container").ejLinearGauge({
  scales:[{
    barPointers: [{ value: 20 }]
  }] });| **Property:** *axes.pointers.value*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: 'Bar', value: 20 }]
  }] });
gauge.appendTo('#container');| |Color of Bar Pointer| **Property:** *scales.barPointers.backgroundColor*

$("#container").ejLinearGauge({
  scales:[{
    barPointers: [{ value: 20, backgroundColor: "red" }]
  }] });| **Property:** *axes.pointers.color*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: 'Bar', value: 20, color: 'red' }]
  }] });
gauge.appendTo('#container');| @@ -108,7 +108,7 @@ This article describes the API migration process of Accordion component from Ess ## Marker Pointer -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Marker Pointer| **Property:** *scales.markerPointers.value*

$("#container").ejLinearGauge({
  scales:[{
    markerPointers: [{ value: 20 }]
  }] });| **Property:** *axes.pointers.value*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: 'Marker', value: 20 }]
  }] });
gauge.appendTo('#container');| |Color of Marker Pointer| **Property:** *scales.markerPointers.backgroundColor*

$("#container").ejLinearGauge({
  scales:[{
    markerPointers: [{ value: 20, backgroundColor: "blue" }]
  }] });| **Property:** *axes.pointers.color*

let gauge: LinearGauge = new LinearGauge({
  axes: [{
    pointers: [{ type: 'Marker', value: 20, color: 'red' }]
  }] });
gauge.appendTo('#container');| @@ -125,7 +125,7 @@ This article describes the API migration process of Accordion component from Ess ## Annotation -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Content| **Property:** *scales.customLabels.value*

$("#container").ejLinearGauge({
  scales:[{
    showCustomLabels: true,
    customLabels: [{
      value: "LinearGauge" }]
  }] });| **Property:** *annotations.content*

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: "Annotation" }] });
gauge.appendTo('#container');| |Horizontal Alignment| Not Applicable| **Property:** *annotations.horizontalAlignment*

let gauge: LinearGauge = new LinearGauge({
  annotation: [{
    content: "Annotation", horizontalAlignment: 'Center' }] });
gauge.appendTo('#container');| @@ -143,7 +143,7 @@ This article describes the API migration process of Accordion component from Ess ## Tooltip -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Tooltip for Pointer| Not Applicable| **Property:** *tooltip.enable*

let gauge: LinearGauge = new LinearGauge({
  tooltip: {
    enable: true }
 });
gauge.appendTo('#container');| |Tooltip for Label| **Property:** *tooltip.showLabelTooltip*

$("#container").ejLinearGauge({
  tooltip: {
    showLabelTooltip: true
  });| Not Applicable| @@ -156,7 +156,7 @@ This article describes the API migration process of Accordion component from Ess ## Appearence of Linear Gauge -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Background Color| **Property:** *backgroundColor*

$("#container").ejLinearGauge({ backgroundColor: "Red" });| **Property:** *background*

let gauge: LinearGauge = new LinearGauge({
  background: 'skyblue'
 });
gauge.appendTo('#container');| |Border Color| **Property:** *borderColor*

$("#container").ejLinearGauge({ borderColor: "Black" });| **Property:** *border.color*

let gauge: LinearGauge = new LinearGauge({
  border: { color: 'red' }
 });
gauge.appendTo('#container');| @@ -168,7 +168,7 @@ This article describes the API migration process of Accordion component from Ess ## Gauge Container type -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Container Type| **Property:** *scales.type*

$("#container").ejLinearGauge({
  scales: [{
    type: 'thermometer'
  }] });| **Property:** *container.type*

let gauge: LinearGauge = new LinearGauge({
  container: { type: 'Thermometer' }
 });
gauge.appendTo('#container');| |Container Height| Not Applicable| **Property:** *container.height*

let gauge: LinearGauge = new LinearGauge({
  container: { height: 20 }
 });
gauge.appendTo('#container');| @@ -177,7 +177,7 @@ This article describes the API migration process of Accordion component from Ess ## Events -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Animation Complete Event| Not Applicable| **Event:** *animationComplete*

let gauge: LinearGauge = new LinearGauge({
  animationComplete: function(e: IAnimationCompleteEventArgs): void { }
});
gauge.appendTo('#container');| |Annotation Render Event| **Event:** *drawCustomLabel*

$("#container").ejLinearGauge({
  drawCustomLabel: function (args) {}
});| **Event:** *annotationRender*

let gauge: LinearGauge = new LinearGauge({
  annotationRender: function(e: IAnnotationRenderEventArgs): void { }
})
gauge.appendTo('#container');| diff --git a/ej2-javascript/linear-gauge/js/es5-getting-started.md b/ej2-javascript/linear-gauge/js/es5-getting-started.md index ce6f2e9c2..8412c5278 100644 --- a/ej2-javascript/linear-gauge/js/es5-getting-started.md +++ b/ej2-javascript/linear-gauge/js/es5-getting-started.md @@ -15,7 +15,7 @@ This section explains you the steps to create a simple Linear Gauge and demonstr ## Control Initialization -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script references in a HTML page. * Using CDN link for script reference. @@ -24,7 +24,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the **Step 1:** Create an app folder **quickstart** for getting started. -**Step 2:** You can get the global scripts from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` @@ -36,7 +36,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the > > Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\20.1.0.58\Web (Essential JS 2)\JavaScript\ej2-lineargauge\dist\global\ej2-lineargauge.min.js` -The below located script file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` @@ -44,7 +44,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder **~/quickstart/resources** and copy/paste the global scripts from the above installed location to **~/quickstart/resources/package** corresponding package location. -**Step 4:** Create a HTML page (index.html) in **~/quickstart/index.html** and add the Essentials JS 2 script references. +**Step 4:** Create a HTML page (index.html) in **~/quickstart/index.html** and add the Essential® JS 2 script references. ```html @@ -62,7 +62,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 5:** Initiate the **Syncfusion JavaScript (ES5) LinearGauge** component in the **~/quickstart/index.html** by using the following code. +**Step 5:** Initiate the **Syncfusion® JavaScript (ES5) LinearGauge** component in the **~/quickstart/index.html** by using the following code. ```html @@ -88,13 +88,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Run the **index.html** in web browser, it will render the **Syncfusion JavaScript Lineargauge** control. +**Step 6:** Run the **index.html** in web browser, it will render the **Syncfusion® JavaScript Lineargauge** control. ### Using CDN link for script reference **Step 1:** Create an app folder **quickstart** for getting started. -**Step 2:** The Essential JS 2 controls' global scripts are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 controls' global scripts are already hosted in the below CDN link formats. **Common Control Script:** > Syntax: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js` @@ -120,7 +120,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin > > [`https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdf-export/dist/global/ej2-pdf-export.min.js`](https://cdn.syncfusion.com/ej2/23.1.36/ej2-pdf-export/dist/global/ej2-pdf-export.min.js) -Create a HTML page *(**index.html**) in **~/quickstart** location and add the CDN link references. Now, initiate the **Syncfusion JavaScript (ES5) Linear Gauge** control in the **index.html** by using following code. +Create a HTML page *(**index.html**) in **~/quickstart** location and add the CDN link references. Now, initiate the **Syncfusion® JavaScript (ES5) Linear Gauge** control in the **index.html** by using following code. ```html @@ -147,7 +147,7 @@ Create a HTML page *(**index.html**) in **~/quickstart** location and add the CD > Please replace {RELEASE_VERSION} with the latest version number in the script file referred to in the sample. -**Step 3:** Now, run the **index.html** in web browser, it will render the **Syncfusion JavaScript Linear Gauge** control. +**Step 3:** Now, run the **index.html** in web browser, it will render the **Syncfusion® JavaScript Linear Gauge** control. The below example shows a basic Linear Gauge control. diff --git a/ej2-javascript/linear-gauge/ts/getting-started.md b/ej2-javascript/linear-gauge/ts/getting-started.md index c19f2b748..f6b56a9f6 100644 --- a/ej2-javascript/linear-gauge/ts/getting-started.md +++ b/ej2-javascript/linear-gauge/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Linear gauge control -This section briefly explains how to create **Linear Gauge** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create **Linear Gauge** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -28,7 +28,7 @@ Following is the list of minimum dependencies required to use the Linear Gauge. ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -48,9 +48,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -64,7 +64,7 @@ npm install ## Adding Linear Gauge component to the Project -The Essential JS2 Linear Gauge component can be added to the application. To get started, add the Linear Gauge component to the **app.ts** and **index.html** files using the following code. +The Essential® JS2 Linear Gauge component can be added to the application. To get started, add the Linear Gauge component to the **app.ts** and **index.html** files using the following code. Add an HTML div element to act as the Linear Gauge element in the **index.html** file using the following code. diff --git a/ej2-javascript/listview/accessibility.md b/ej2-javascript/listview/accessibility.md index 4ec44ba2c..9b69fe0b8 100644 --- a/ej2-javascript/listview/accessibility.md +++ b/ej2-javascript/listview/accessibility.md @@ -76,4 +76,4 @@ The accessibility compliance of the ListView control is shown in the following s ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) diff --git a/ej2-javascript/listview/customizing-templates.md b/ej2-javascript/listview/customizing-templates.md index dd4861021..7255d977b 100644 --- a/ej2-javascript/listview/customizing-templates.md +++ b/ej2-javascript/listview/customizing-templates.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Customizing templates in ##Platform_Name## ListView control -The ListView control is designed to customize list items, group titles, and header titles. It utilizes the Essential JS2 [Template Engine](../common/template-engine/) to render the elements. +The ListView control is designed to customize list items, group titles, and header titles. It utilizes the Essential® JS2 [Template Engine](../common/template-engine/) to render the elements. ## Header template diff --git a/ej2-javascript/listview/how-to/dynamic-templates-in-listview-based-on-device.md b/ej2-javascript/listview/how-to/dynamic-templates-in-listview-based-on-device.md index d580e1750..3648cb7ed 100644 --- a/ej2-javascript/listview/how-to/dynamic-templates-in-listview-based-on-device.md +++ b/ej2-javascript/listview/how-to/dynamic-templates-in-listview-based-on-device.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Dynamic templates in listview based on device in ##Platform_Name## Listview control -The Syncfusion Essential JS 2 controls are both desktop and mobile-friendly, allowing the use of Syncfusion controls in various environments. The control templates are flexible and can differ depending on the device being used. +The Syncfusion® Essential® JS 2 controls are both desktop and mobile-friendly, allowing the use of Syncfusion® controls in various environments. The control templates are flexible and can differ depending on the device being used. ## Integration diff --git a/ej2-javascript/listview/js/ej1-api-migration.md b/ej2-javascript/listview/js/ej1-api-migration.md index 834579dc1..280bf9e41 100644 --- a/ej2-javascript/listview/js/ej1-api-migration.md +++ b/ej2-javascript/listview/js/ej1-api-migration.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## ListView control -This article describes the API migration process of ListView component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of ListView component from Essential® JS 1 to Essential® JS 2. -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Virtualization | **Property:** *allowVirtualScrolling*
$("#list").ejListView ({
dataSource: dataSrc,
allowVirtualScrolling: true,
virtualScrollMode: "normal"
}); | **Property:** *enableVirtualization*
let list: ListView = new ej.lists.ListView({
dataSource: data,
enableVirtualization: true
});
list.appendTo('#test); | | Checkbox | **Property:** *enableCheckMark*
$("#list").ejListView ({
dataSource: dataSrc,
enableCheckMark: true
}); | **Property:** *showCheckBox*
let list: ListView = new ej.lists.ListView({
dataSource: data,
showCheckBox: true
});
list.appendTo('#test); | diff --git a/ej2-javascript/listview/js/es5-getting-started.md b/ej2-javascript/listview/js/es5-getting-started.md index 0fb30a5c8..ec2fb9f68 100644 --- a/ej2-javascript/listview/js/es5-getting-started.md +++ b/ej2-javascript/listview/js/es5-getting-started.md @@ -11,20 +11,20 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Listview control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## control Initialization -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script and style references in a HTML page. * Using CDN link for script and style reference. ### Using local script and style references in a HTML page -**Step 1:** Create an app folder `myapp` for Essential JS 2 JavaScript controls. +**Step 1:** Create an app folder `myapp` for Essential® JS 2 JavaScript controls. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -39,7 +39,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the **Step 3:** Create a folder `myapp/resources` and copy/paste the global scripts and styles from the above installed location to `myapp/resources` location. -**Step 4:** Create a HTML page (index.html) in `myapp` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `myapp` location and add the Essential® JS 2 script and style references. ```html @@ -57,7 +57,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the ``` -**Step 5:** Now, add the `ListView` element and initiate the `Essential JS 2 ListView` control in the `index.html` by using following code +**Step 5:** Now, add the `ListView` element and initiate the **Essential® JS 2 ListView** control in the `index.html` by using following code ```html @@ -88,13 +88,13 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential JS 2 ListView** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 ListView** control. ### Using CDN link for script and style reference -**Step 1:** Create an app folder `myapp` for the Essential JS 2 JavaScript controls. +**Step 1:** Create an app folder `myapp` for the Essential® JS 2 JavaScript controls. -**Step 2:** The Essential JS 2 control's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 control's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -106,7 +106,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the > > Styles: [`https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css`](https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `myapp` location and add the CDN link references. Now, add the `ListView` element and initiate the `Essential JS 2 List` control in the index.html by using following code. +**Step 3:** Create a HTML page (index.html) in `myapp` location and add the CDN link references. Now, add the `ListView` element and initiate the **Essential® JS 2 List** control in the index.html by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -116,7 +116,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the {% previewsample "page.domainurl/code-snippet/listview/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 ListView` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 ListView** control. > Need to refer dependency control styles and scripts as like above example. We can also use [CRG](https://crg.syncfusion.com/) to generate combined control styles. diff --git a/ej2-javascript/listview/js/getting-started.md b/ej2-javascript/listview/js/getting-started.md index 0e217c472..0c54845b8 100644 --- a/ej2-javascript/listview/js/getting-started.md +++ b/ej2-javascript/listview/js/getting-started.md @@ -11,20 +11,20 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## ListView control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## control Initialization -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script and style references in a HTML page. * Using CDN link for script and style reference. ### Using local script and style references in a HTML page -**Step 1:** Create an app folder `myapp` for Essential JS 2 JavaScript controls. +**Step 1:** Create an app folder `myapp` for Essential® JS 2 JavaScript controls. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js` @@ -37,7 +37,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the > > Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-lists\styles\material.css` -The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > @@ -45,7 +45,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) **Step 3:** Create a folder `myapp/resources` and copy/paste the global scripts and styles from the above installed location to `myapp/resources` location. -**Step 4:** Create a HTML page (index.html) in `myapp` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `myapp` location and add the Essential® JS 2 script and style references. ```html @@ -66,7 +66,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) ``` -**Step 5:** Now, add the `ListView` element and initiate the `Essential JS 2 ListView` control in the `index.html` by using following code +**Step 5:** Now, add the `ListView` element and initiate the **Essential® JS 2 ListView** control in the `index.html` by using following code ```html @@ -100,13 +100,13 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential JS 2 ListView** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 ListView** control. ### Using CDN link for script and style reference -**Step 1:** Create an app folder `myapp` for the Essential JS 2 JavaScript controls. +**Step 1:** Create an app folder `myapp` for the Essential® JS 2 JavaScript controls. -**Step 2:** The Essential JS 2 control's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 control's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -118,7 +118,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) > > Styles: [`https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css`](https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `myapp` location and add the CDN link references. Now, add the `ListView` element and initiate the `Essential JS 2 ListView` control in the index.html by using following code. +**Step 3:** Create a HTML page (index.html) in `myapp` location and add the CDN link references. Now, add the `ListView` element and initiate the **Essential® JS 2 ListView** control in the index.html by using following code. {% tabs %} {% highlight ts tabtitle="index.js" %} @@ -134,7 +134,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) {% previewsample "page.domainurl/code-snippet/listview/getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 ListView` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 ListView** control. > Need to refer dependency control styles and scripts as like above example. We can also use [CRG](https://crg.syncfusion.com/) to generate combined control styles. diff --git a/ej2-javascript/listview/ts/ej1-api-migration.md b/ej2-javascript/listview/ts/ej1-api-migration.md index 8dda02041..82b4e4985 100644 --- a/ej2-javascript/listview/ts/ej1-api-migration.md +++ b/ej2-javascript/listview/ts/ej1-api-migration.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## ListView control -This article describes the API migration process of ListView component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of ListView component from Essential® JS 1 to Essential® JS 2. -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Virtualization | **Property:** *allowVirtualScrolling*
var listObj = new ej.ListView($("#list"),{
dataSource: dataSrc,
allowVirtualScrolling: true,
virtualScrollMode: "normal"
}); | **Property:** *enableVirtualization*
let list: ListView = new ListView({
dataSource: data,
enableVirtualization: true
});
list.appendTo('#test'); | | Checkbox | **Property:** *enableCheckMark*
var listObj = new ej.ListView($("#list"),{
dataSource: dataSrc,
enableCheckMark: true
}); | **Property:** *showCheckBox*
let list: ListView = new ListView({
dataSource: data,
showCheckBox: true
});
list.appendTo('#test'); | diff --git a/ej2-javascript/listview/ts/getting-started.md b/ej2-javascript/listview/ts/getting-started.md index 802cc274f..ee7385b8f 100644 --- a/ej2-javascript/listview/ts/getting-started.md +++ b/ej2-javascript/listview/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## ListView control -This section briefly explains how to create **ListView** control and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create **ListView** control and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -27,7 +27,7 @@ Install the below required dependent packages to render the ListView control. ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -47,9 +47,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -61,7 +61,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render the ListView control, need to import lists and its dependent control’s styles as given below in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/maps/accessibility.md b/ej2-javascript/maps/accessibility.md index 42213fdab..8bbf92af0 100644 --- a/ej2-javascript/maps/accessibility.md +++ b/ej2-javascript/maps/accessibility.md @@ -94,4 +94,4 @@ The accessibility compliance of the Maps control is shown in the following sampl ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) diff --git a/ej2-javascript/maps/ej1-api-migration.md b/ej2-javascript/maps/ej1-api-migration.md index 3a1229136..ec076ad0a 100644 --- a/ej2-javascript/maps/ej1-api-migration.md +++ b/ej2-javascript/maps/ej1-api-migration.md @@ -11,18 +11,18 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Maps control -This article describes the API migration process of Maps component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Maps component from Essential® JS 1 to Essential® JS 2. ## Size Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Height| Not Applicable |**Property:** *height*

let maps: Maps = new Maps({
  height : '300px'
});
maps.appendTo('#container');| |Width| Not Applicable |**Property:** *width*

let maps: Maps = new Maps({
  width : '600px'
});
maps.appendTo('#container');| ## Title and Subtitle Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Title text| Not Applicable |**Property:** *titleSettings.text*

let maps: Maps = new Maps({
  titleSettings:{ text : 'Members of the UN Security Council' }
});
maps.appendTo('#container')| |Subtitle text| Not Applicable |**Property:** *titleSettings.subtitleSettings.text*

let maps: Maps = new Maps({
  titleSettings:{ subtitleSettings:{ text : 'In 2017' } }
});
maps.appendTo('#container');| @@ -33,7 +33,7 @@ This article describes the API migration process of Maps component from Essentia ## Layer Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Type | Not Applicable | **Property:** *layers.type*

let maps: Maps = new Maps({
  layers:[{ type:'Layer' }]
});
maps.appendTo('#container')| | Layer type | **Property:** *layers.layerType*

$("#container").ejMap({
  layers:[{ layerType:'geometry' }]
}); | To render shape maps, there is no need to mention the layer type. You can use the `shapeData` property alone.
**Property:** *layers.shapeData*

let maps: Maps = new Maps({
  layers:[{ shapeData:'WorldMap' }]
});
maps.appendTo('#container')

To render online maps, there is no need to mention the layer type. You can use the `urlTemplate` property alone.
**Property:** *layers.urlTemplate*

let maps: Maps = new Maps({
  layers:[{ urlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png'
  }]
});
maps.appendTo('#container')| @@ -50,7 +50,7 @@ This article describes the API migration process of Maps component from Essentia ## Shape Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Shape fill | **Property:** *layers.shapeSettings.fill*

$("#container").ejMap({
  layers:[{ shapeSettings:{ fill:'#626171' } }]
}); | **Property:** *layers.shapeSettings.fill*

let maps: Maps = new Maps({
  layers:[{ shapeSettings:{ fill: '#626171' } }]
});
maps.appendTo('#container')| | Shape palette | **Property:** *layers.shapeSettings.colorPalette*

$("#container").ejMap({
  layers:[{ shapeSettings:{ colorPalette:'customPalette' } }]
}); | **Property:** *layers.shapeSettings.palette*

let maps: Maps = new Maps({
  layers:[{ shapeSettings:{ palette: ['red','green'] } }]
});
maps.appendTo('#container')| @@ -64,7 +64,7 @@ This article describes the API migration process of Maps component from Essentia ## Marker Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Marker data source | **Property:** *layers.markers*

$("#container").ejMap({
  layers:[{ markers:[{ "Name": "USA", "latitude": 38.8833, "longitude": -77.0167 }] }]
}) | **Property:** *layers.markerSettings.dataSource*

let maps: Maps = new Maps({
  layers:[{
   markerSettings:[{
      dataSource: [{ "Name": "USA", "latitude": 38.8833, "longitude": -77.0167 }]
    }]
  }]
});
maps.appendTo('#container')| | Marker template | **Property:** *layers.markerTemplate*

$("#container").ejMap({
  layers:[{ markerTemplate:"Template" }]
}) | **Property:** *layers.markerSettings.template*

let maps: Maps = new Maps({
  layers:[{ markerSettings:[{ template:'#Template' }] }]
});
maps.appendTo('#container')| @@ -86,7 +86,7 @@ This article describes the API migration process of Maps component from Essentia ## Bubble Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.bubbleSettings.visible*

$("#container").ejMap({
  layers:[{ bubbleSettings: { showBubble:true } }]
}) | **Property:** *layers.bubbleSettings.visible*

let maps: Maps = new Maps({
  layers:[{ bubbleSettings:[{ visible:true }] }]
});
maps.appendTo('#container')| | Value path | **Property:** *layers.bubbleSettings.valuePath*

$("#container").ejMap({
  layers:[{ bubbleSettings: { valuePath:'Population' } }]
}) | **Property:** *layers.bubbleSettings.valuePath*

let maps: Maps = new Maps({
  layers:[{ bubbleSettings:[{ valuePath:'Population'}] }]
});
maps.appendTo('#container')| @@ -105,7 +105,7 @@ This article describes the API migration process of Maps component from Essentia ## DataLabel Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.labelSettings.showLabels*

$("#container").ejMap({
  layers:[{ labelSettings: { showLabels:true } }]
}) | **Property:** *layers.dataLabelSettings.visible*

let maps: Maps = new Maps({
  layers:[{ dataLabelSettings:{ visible:true } }]
});
maps.appendTo('#container')| | Label path | **Property:** *layers.labelSettings.labelPath*

$("#container").ejMap({
  layers:[{ labelSettings: { labelPath:'Continent' } }]
}) | **Property:** *layers.dataLabelSettings.labelPath*

let maps: Maps = new Maps({
  layers:[{ dataLabelSettings:{ labelPath:'Continent'} }]
});
maps.appendTo('#container')| @@ -119,7 +119,7 @@ This article describes the API migration process of Maps component from Essentia ## Legend Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.legendSettings.showLegend*

$("#container").ejMap({
  layers:[{ legendSettings: { showLegend:true } }]
}) | **Property:** *legendSettings.visible*

let maps: Maps = new Maps({
  legendSettings: { visible:true }
});
maps.appendTo('#container')| | Toggle visibility | **Property:** *layers.legendSettings.toggleVisibility*

$("#container").ejMap({
  layers:[{ legendSettings: { toggleVisibility:true } }]
}) | **Property:** *legendSettings.toggleVisibility*

let maps: Maps = new Maps({
  legendSettings: { toggleVisibility:true,
  toggleLegendSettings: { visible : true } }
});
maps.appendTo('#container')| @@ -154,7 +154,7 @@ This article describes the API migration process of Maps component from Essentia ## Zooming Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Enable| Not Applicable | **Property:** *zoomSettings.enableZoom*

let maps: Maps = new Maps({
  zoomSettings:{ enable:true }
});
maps.appendTo('#container')| |Minimum zoom| **Property:** *zoomSettings.minValue*

$("#container").ejMap({
  zoomSettings:{ minValue:2 }
}); | **Property:** *zoomSettings.minZoom*

let maps: Maps = new Maps({
  zoomSettings:{ minZoom:2 }
});
maps.appendTo('#container')| @@ -174,7 +174,7 @@ This article describes the API migration process of Maps component from Essentia ## Highlight And Selection Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Highlight fill | **Property:** *layers.shapeSettings.highlightColor*

$("#container").ejMap({
  layers:{ shapeSettings:{ highlightColor:'green' } }
}); | **Property:** *layers.highlightSettings.fill*

let maps: Maps = new Maps({
  layers:[{ highlightSettings:{ fill:'green' }}]
});
maps.appendTo('#container')| | Enable highlight | **Property:** *layers.enableMouseHover*

$("#container").ejMap({
  layers:{ enableMouseHover:true }
}); | **Property:** *layers.highlightSettings.enable*

let maps: Maps = new Maps({
  layers:[{ highlightSettings:{ enable:true }}]
});
maps.appendTo('#container')| @@ -189,7 +189,7 @@ This article describes the API migration process of Maps component from Essentia ## Navigation Line Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | Not Applicable | **Property:** *layers.navigationLineSettings.visible*

let maps: Maps = new Maps({
 layers:[{ navigationLineSettings:[{ visible:true }] }]
});
maps.appendTo('#container') | | Width | Not Applicable | **Property:** *layers.navigationLineSettings.width*

let maps: Maps = new Maps({
 layers:[{ navigationLineSettings:[{ width:2 }] }]
});
maps.appendTo('#container') | @@ -206,7 +206,7 @@ This article describes the API migration process of Maps component from Essentia ## Tooltip Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Tooltip enable | **Property:** *layers.showTooltip*

$("#container").ejMap({
  layers:{ layers:[{ showTooltip: true }]
}); | **Property:** *layers.tooltipSettings.visible*

let maps: Maps = new Maps({
 layers:[{ tooltipSettings:{ visible: true } }]
});
maps.appendTo('#container')| | Tooltip template | **Property:** *layers.tooltipTemplate*

$("#container").ejMap({
  layers:{ layers:[{ tooltipTemplate: "#Template" }]
}); | **Property:** *layers.tooltipSettings.template*

let maps: Maps = new Maps({
 layers:[{ tooltipSettings:{ template: '#tooltipTemplate' } }]
});
maps.appendTo('#container')| @@ -218,7 +218,7 @@ This article describes the API migration process of Maps component from Essentia ## Annotation Cutomization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Content | Not Applicable | **Property:** *legendSettings.annotations.content*

let maps: Maps = new Maps({
  annotations: [{ content:'
USA Population 2018
'
  }]
});
maps.appendTo('#container') | | Location X | Not Applicable | **Property:** *legendSettings.annotations.x*

let maps: Maps = new Maps({
  annotations: [{ x:'250px' }]
});
maps.appendTo('#container') | @@ -229,7 +229,7 @@ This article describes the API migration process of Maps component from Essentia ## Maps Other Properties Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Projection type | Not Applicable | **Property:** *projectionType*

let maps: Maps = new Maps({
  projectionType: 'Mercator'
});
maps.appendTo('#container') | | Background | **Property:** *background*

$("#container").ejMap({
  background:'red'
}); | **Property:** *background*

let maps: Maps = new Maps({
  background: 'red'
});
maps.appendTo('#container') | @@ -250,7 +250,7 @@ This article describes the API migration process of Maps component from Essentia ## Events -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Shape selected | **Property:** *shapeSelected*

$("#container").ejMap({
  shapeSelected:'MapShapeSelected'
}); | **Property:** *shapeSelected*

let maps: Maps = new Maps({
  shapeSelected: (args: IShapeSelectedEventArgs): void => { }
});
maps.appendTo('#container') | | Marker selected | **Property:** *markerSelected*

$("#container").ejMap({
  markerSelected:'MapMarkerSelected'
}); | **Property:** *markerClick*

let maps: Maps = new Maps({
  markerClick: (args: IMarkerClickEventArgs): void => { }
});
maps.appendTo('#container') | diff --git a/ej2-javascript/maps/how-to/creating-routes-between-the-markers.md b/ej2-javascript/maps/how-to/creating-routes-between-the-markers.md index 4eaa89674..a97153a5c 100644 --- a/ej2-javascript/maps/how-to/creating-routes-between-the-markers.md +++ b/ej2-javascript/maps/how-to/creating-routes-between-the-markers.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Creating Routes Between Markers in the ##Platform_Name## Maps Control -The Syncfusion Maps control supports plotting routes between two locations (source and destination) using the navigation line feature. Markers can be placed at these locations to visually indicate the source and destination, making it easier to view the path between them on the map. +The Syncfusion® Maps control supports plotting routes between two locations (source and destination) using the navigation line feature. Markers can be placed at these locations to visually indicate the source and destination, making it easier to view the path between them on the map. The data for navigation routes must be retrieved from an external source, such as the Google Maps Directions API. Below are the outlined steps to create a route using the coordinates obtained from the Google Maps Directions API. @@ -254,7 +254,7 @@ To generate and visualize the route, use the geographic coordinates obtained fro {% endif %} -You can find a demonstration of integrating the Google Maps Directions API with the Syncfusion Maps control to render navigation routes below. +You can find a demonstration of integrating the Google Maps Directions API with the Syncfusion® Maps control to render navigation routes below. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/maps/js/ej1-api-migration.md b/ej2-javascript/maps/js/ej1-api-migration.md index c00d30bce..843bb22c7 100644 --- a/ej2-javascript/maps/js/ej1-api-migration.md +++ b/ej2-javascript/maps/js/ej1-api-migration.md @@ -11,18 +11,18 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Maps control -This article describes the API migration process of Maps component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Maps component from Essential® JS 1 to Essential® JS 2. ## Size Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Height| Not Applicable |**Property:** *height*

var maps = new ej.maps.Maps({
  height : '300px'
});
maps.appendTo('#container');| |Width| Not Applicable |**Property:** *width*

var maps = new ej.maps.Maps({
  width : '600px'
});
maps.appendTo('#container');| ## Title and Subtitle Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Title Text| Not Applicable |**Property:** *title.text*

var maps = new ej.maps.Maps({
  titleSettings:{ text : 'Members of the UN Security Council' }
});
maps.appendTo('#container')| |Subtitle Text| Not Applicable |**Property:** *title.subtitle.text*

var maps = new ej.maps.Maps({
  titleSettings:{ subtitleSettings:{ text : 'In 2017' }
} });
maps.appendTo('#container');| @@ -33,7 +33,7 @@ This article describes the API migration process of Maps component from Essentia ## Layer Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Type | Not Applicable | **Property:** *layers.type*

var maps = new ej.maps.Maps({
  layers:[{ type:'Layer' }]
});
maps.appendTo('#container')| | Layer Type | **Property:** *layers.layerType*

$("#container").ejMap({
  layers:[{ layerType:'geometry' }]
}); | To render shape maps, there is no need to mention the layer type. You can use the `shapeData` property alone.
**Property:** *layers.shapeData*

var maps = new ej.maps.Maps({
  layers:[{ shapeData:'WorldMap' }]
});
maps.appendTo('#container')

To render online maps, there is no need to mention the layer type. You can use the `urlTemplate` property alone.
**Property:** *layers.urlTemplate*

var maps = new ej.maps.Maps({
  layers:[{ urlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }]
});
maps.appendTo('#container')| @@ -50,7 +50,7 @@ This article describes the API migration process of Maps component from Essentia ## Shape Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Shape Fill | **Property:** *layers.shapeSettings.fill*

$("#container").ejMap({
  layers:[{ shapeSettings:{ fill:'#626171' } }]
}); | **Property:** *layers.shapeSettings.fill*

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ fill: '#626171' } }]
});
maps.appendTo('#container')| | Shape Palette | **Property:** *layers.shapeSettings.colorPalette*

$("#container").ejMap({
  layers:[{ shapeSettings:{ colorPalette:'customPalette' } }]
}); | **Property:** *layers.shapeSettings.palette*

var maps = new ej.maps.Maps({
  layers:[{ shapeSettings:{ palette: ['red','green'] } }]
});
maps.appendTo('#container')| @@ -64,7 +64,7 @@ This article describes the API migration process of Maps component from Essentia ## Marker Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Marker Data Source | **Property:** *layers.markers*

$("#container").ejMap({
  layers:[{ markers:[{ "Name": "USA", "latitude": 38.8833, "longitude": -77.0167 }] }]
}) | **Property:** *layers.markerSettings.dataSource*

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ dataSource: [{ "Name": "USA", "latitude": 38.8833, "longitude": -77.0167 }] } }]
});
maps.appendTo('#container')| | Marker Template | **Property:** *layers.markerTemplate*

$("#container").ejMap({
  layers:[{ markerTemplate:"Template" }]
}) | **Property:** *layers.markerSettings.template*

var maps = new ej.maps.Maps({
  layers:[{ markerSettings:{ template:'Template' } }]
});
maps.appendTo('#container')| @@ -86,7 +86,7 @@ This article describes the API migration process of Maps component from Essentia ## Bubble Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.bubbleSettings.visible*

$("#container").ejMap({
  layers:[{ bubbleSettings: { showBubble:true } }]
}) | **Property:** *layers.bubbleSettings.visible*

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ visible:true }]
});
maps.appendTo('#container')| | ValuePath | **Property:** *layers.bubbleSettings.valuePath*

$("#container").ejMap({
  layers:[{ bubbleSettings: { valuePath:'Population' } }]
}) | **Property:** *layers.bubbleSettings.valuePath*

var maps = new ej.maps.Maps({
  layers:[{ bubbleSettings:{ valuePath:'Population' }]
});
maps.appendTo('#container')| @@ -105,7 +105,7 @@ This article describes the API migration process of Maps component from Essentia ## DataLabel Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.labelSettings.showLabels*

$("#container").ejMap({
  layers:[{ labelSettings: { showLabels:true } }]
}) | **Property:** *layers.dataLabelSettings.visible*

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ visible:true }]
});
maps.appendTo('#container')| | Label Path | **Property:** *layers.labelSettings.labelPath*

$("#container").ejMap({
  layers:[{ labelSettings: { labelPath:'Continent' } }]
}) | **Property:** *layers.dataLabelSettings.labelPath*

var maps = new ej.maps.Maps({
  layers:[{ dataLabelSettings:{ labelPath:'Continent' }]
});
maps.appendTo('#container')| @@ -119,7 +119,7 @@ This article describes the API migration process of Maps component from Essentia ## Legend Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.legendSettings.showLegend*

$("#container").ejMap({
  layers:[{ legendSettings: { showLegend:true } }]
}) | **Property:** *legendSettings.visible*

var maps = new ej.maps.Maps({
  legendSettings: { visible:true }}
});
maps.appendTo('#container')| | Toggle Visibility | **Property:** *layers.legendSettings.toggleVisibility*

$("#container").ejMap({
  layers:[{ legendSettings: { toggleVisibility:true } }]
}) | **Property:** *legendSettings.toggleVisibility*

var maps = new ej.maps.Maps({
  legendSettings: { toggleVisibility:true }}
});
maps.appendTo('#container')| @@ -155,7 +155,7 @@ This article describes the API migration process of Maps component from Essentia ## Zooming Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Enable| Not Applicable | **Property:** *zoomSettings.enableZoom*

var maps = new ej.maps.Maps({
  zoomSettings:{ enable:true }
});
maps.appendTo('#container')| |Minimum Zoom| **Property:** *zoomSettings.minValue*

$("#container").ejMap({
  zoomSettings:{ minValue:2 }
}); | **Property:** *zoomSettings.minZoom*

var maps = new ej.maps.Maps({
  zoomSettings:{ minZoom:2 }
});
maps.appendTo('#container')| @@ -175,7 +175,7 @@ This article describes the API migration process of Maps component from Essentia ## Highlight And Selection Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Highlight Fill | **Property:** *layers.shapeSettings.highlightColor*

$("#container").ejMap({
  layers:{ shapeSettings:{ highlightColor:'green' } }
}); | **Property:** *fill*

var maps = new ej.maps.Maps({
  layers:[{ highlightSettings:{ fill:'green' }}]
});
maps.appendTo('#container')| | Enable Highlight | **Property:** *layers.enableMouseHover*

$("#container").ejMap({
  layers:{ enableMouseHover:true }
}); | **Property:** *enable*

var maps = new ej.maps.Maps({
  layers:[{ highlightSettings:{ enable:true }}]
});
maps.appendTo('#container')| @@ -190,7 +190,7 @@ This article describes the API migration process of Maps component from Essentia ## Navigation Line Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | Not Applicable | **Property:** *layers.navigationLineSettings.visible*

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ visible:true } }]
});
maps.appendTo('#container') | | Width | Not Applicable | **Property:** *layers.navigationLineSettings.width*

var maps = new ej.maps.Maps({
 layers:[{ navigationLineSettings:{ width:2 } }]
});
maps.appendTo('#container') | @@ -207,7 +207,7 @@ This article describes the API migration process of Maps component from Essentia ## Tooltip Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Tooltip Enable | **Property:** *layers.showTooltip*

$("#container").ejMap({
  layers:{ layers:[{ showTooltip: true }]
}); | **Property:** *layers.tooltipSettings.visible*

var maps = new ej.maps.Maps({
 layers:[{ tooltipSettings:{ visible: true }]
});
maps.appendTo('#container')| | Tooltip Template | **Property:** *layers.tooltipTemplate*

$("#container").ejMap({
  layers:{ layers:[{ tooltipTemplate: "Template" }]
}); | **Property:** *layers.tooltipSettings.visible*

var maps = new ej.maps.Maps({
 layers:[{ tooltipSettings:{ visible: true }]
});
maps.appendTo('#container')| @@ -219,7 +219,7 @@ This article describes the API migration process of Maps component from Essentia ## Annotation Cutomization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Content | Not Applicable | **Property:** *legendSettings.annotations.content*

var maps = new ej.maps.Maps({
  annotations: { content:'
USA Population 2018
' }}
});
maps.appendTo('#container') | | Location X | Not Applicable | **Property:** *legendSettings.annotations.x*

var maps = new ej.maps.Maps({
  annotations: { x:'250px' }}
});
maps.appendTo('#container') | @@ -230,7 +230,7 @@ This article describes the API migration process of Maps component from Essentia ## Maps Other Properties Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Projection Type | Not Applicable | **Property:** *projectionType*

var maps = new ej.maps.Maps({
  projectionType: 'Mercator'
});
maps.appendTo('#container') | | Background | **Property:** *background*

$("#container").ejMap({
  background:'red'
}); | **Property:** *background*

var maps = new ej.maps.Maps({
  background: 'red'
});
maps.appendTo('#container') | @@ -251,7 +251,7 @@ This article describes the API migration process of Maps component from Essentia ## Events -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Shape Selected | **Property:** *shapeSelected*

$("#container").ejMap({
  shapeSelected:'MapShapeSelected'
}); | **Property:** *shapeSelected*

var maps = new ej.maps.Maps({
  shapeSelected:'MapShapeSelected'
});
maps.appendTo('#container') | | Marker Selected | **Property:** *markerSelected*

$("#container").ejMap({
  markerSelected:'MapMarkerSelected'
}); | **Property:** *markerClick*

var maps = new ej.maps.Maps({
  markerClick:'MapMarkerSelected'
});
maps.appendTo('#container') | diff --git a/ej2-javascript/maps/js/es5-getting-started.md b/ej2-javascript/maps/js/es5-getting-started.md index 8c32ca43a..1c01734ef 100644 --- a/ej2-javascript/maps/js/es5-getting-started.md +++ b/ej2-javascript/maps/js/es5-getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Maps control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. You can explore some useful features in the Maps component using the following video. @@ -23,7 +23,7 @@ You can explore some useful features in the Maps component using the following v -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script and style references in a HTML page. * Using CDN link for script and style reference. @@ -32,7 +32,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the **Step 1:** Create a folder `quickstart` for getting started application. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` @@ -50,7 +50,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the > > Control Script: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\20.1.0.58\Web (Essential JS 2)\JavaScript\ej2-maps\dist\global\ej2-maps.min.js` -The below located script file contains all Syncfusion JavaScript (ES5) UI control resources. +The below located script file contains all Syncfusion® JavaScript (ES5) UI control resources. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` @@ -58,7 +58,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder `~/quickstart/resources` and copy/paste the global scripts and styles from the above installed location to `~/quickstart/resources/scripts` for script files and `~/quickstart/resources/styles` for styles. -**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` and add the Essential® JS 2 script and style references. ```html @@ -77,7 +77,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 5:** Now, add a div element to initiate the `Syncfusion JavaScript (ES5) Maps` control in the `~/quickstart/index.html` by using following code +**Step 5:** Now, add a div element to initiate the **Syncfusion® JavaScript (ES5) Maps** control in the `~/quickstart/index.html` by using following code ```html @@ -140,13 +140,13 @@ map.appendTo('#element'); >Note: Refer the data values for [`world_map`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1557035892) here. These data must be referred as script file in the HTML code. -**Step 8:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript maps** control. +**Step 8:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript maps** control. ### Using CDN link for script and style reference **Step 1:** Create a folder `quickstart` for getting started application. -**Step 2:** The Essential JS 2 controls' global scripts are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 controls' global scripts are already hosted in the below CDN link formats. **Common Control Script:** > Syntax: `https://cdn.syncfusion.com/ej2/{RELEASE_VERSION}/dist/ej2.min.js` @@ -184,7 +184,7 @@ map.appendTo('#element'); ``` -**Step 4:** Now, add the div element for initiating the `Syncfusion JavaScript (ES5) Maps` control in the **index.html** by using following code. +**Step 4:** Now, add the div element for initiating the **Syncfusion® JavaScript (ES5) Maps** control in the **index.html** by using following code. ```html @@ -245,7 +245,7 @@ map.appendTo('#element'); > Note: Refer the data values for [`world_map`](https://www.syncfusion.com/downloads/support/directtrac/general/ze/world_map1557035892) here. These data must be referred as script file in the HTML code. -**Step 7:** Now, run the **index.html** in web browser, it will render the **Syncfusion JavaScript maps** control. +**Step 7:** Now, run the **index.html** in web browser, it will render the **Syncfusion® JavaScript maps** control. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/ej2-javascript/maps/js/providers/other-maps.md b/ej2-javascript/maps/js/providers/other-maps.md index 81003fc6b..615a502d9 100644 --- a/ej2-javascript/maps/js/providers/other-maps.md +++ b/ej2-javascript/maps/js/providers/other-maps.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Other maps in ##Platform_Name## Maps control -Apart from OpenStreetMap and Bing Maps, you can also render Maps from other online map service providers by specifying the URL provided by those providers in the [urlTemplate](../../api/maps/layerSettingsModel/#urltemplate) property. The URL template concept has been implemented in such a way that any online map service providers using the following template can benefit from previewing their Map in the Syncfusion EJ2 Maps control. +Apart from OpenStreetMap and Bing Maps, you can also render Maps from other online map service providers by specifying the URL provided by those providers in the [urlTemplate](../../api/maps/layerSettingsModel/#urltemplate) property. The URL template concept has been implemented in such a way that any online map service providers using the following template can benefit from previewing their Map in the Syncfusion® EJ2 Maps control. diff --git a/ej2-javascript/maps/ts/ej1-api-migration.md b/ej2-javascript/maps/ts/ej1-api-migration.md index 01ece4c78..29f975f35 100644 --- a/ej2-javascript/maps/ts/ej1-api-migration.md +++ b/ej2-javascript/maps/ts/ej1-api-migration.md @@ -11,18 +11,18 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Maps control -This article describes the API migration process of Maps component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Maps component from Essential® JS 1 to Essential® JS 2. ## Size Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Height| Not Applicable |**Property:** *height*

let maps: Maps = new Maps({
  height : '300px'
});
maps.appendTo('#container');| |Width| Not Applicable |**Property:** *width*

let maps: Maps = new Maps({
  width : '600px'
});
maps.appendTo('#container');| ## Title and Subtitle Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Title text| Not Applicable |**Property:** *titleSettings.text*

let maps: Maps = new Maps({
  titleSettings:{ text : 'Members of the UN Security Council' }
});
maps.appendTo('#container')| |Subtitle text| Not Applicable |**Property:** *titleSettings.subtitleSettings.text*

let maps: Maps = new Maps({
  titleSettings:{ subtitleSettings:{ text : 'In 2017' } }
});
maps.appendTo('#container');| @@ -33,7 +33,7 @@ This article describes the API migration process of Maps component from Essentia ## Layer Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Type | Not Applicable | **Property:** *layers.type*

let maps: Maps = new Maps({
  layers:[{ type:'Layer' }]
});
maps.appendTo('#container')| | Layer type | **Property:** *layers.layerType*

$("#container").ejMap({
  layers:[{ layerType:'geometry' }]
}); | To render shape maps, there is no need to mention the layer type. You can use the `shapeData` property alone.
**Property:** *layers.shapeData*

let maps: Maps = new Maps({
  layers:[{ shapeData:'WorldMap' }]
});
maps.appendTo('#container')

To render online maps, there is no need to mention the layer type. You can use the `urlTemplate` property alone.
**Property:** *layers.urlTemplate*

let maps: Maps = new Maps({
  layers:[{ urlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png'
  }]
});
maps.appendTo('#container')| @@ -50,7 +50,7 @@ This article describes the API migration process of Maps component from Essentia ## Shape Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Shape fill | **Property:** *layers.shapeSettings.fill*

$("#container").ejMap({
  layers:[{ shapeSettings:{ fill:'#626171' } }]
}); | **Property:** *layers.shapeSettings.fill*

let maps: Maps = new Maps({
  layers:[{ shapeSettings:{ fill: '#626171' } }]
});
maps.appendTo('#container')| | Shape palette | **Property:** *layers.shapeSettings.colorPalette*

$("#container").ejMap({
  layers:[{ shapeSettings:{ colorPalette:'customPalette' } }]
}); | **Property:** *layers.shapeSettings.palette*

let maps: Maps = new Maps({
  layers:[{ shapeSettings:{ palette: ['red','green'] } }]
});
maps.appendTo('#container')| @@ -64,7 +64,7 @@ This article describes the API migration process of Maps component from Essentia ## Marker Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Marker data source | **Property:** *layers.markers*

$("#container").ejMap({
  layers:[{ markers:[{ "Name": "USA", "latitude": 38.8833, "longitude": -77.0167 }] }]
}) | **Property:** *layers.markerSettings.dataSource*

let maps: Maps = new Maps({
  layers:[{
   markerSettings:[{
      dataSource: [{ "Name": "USA", "latitude": 38.8833, "longitude": -77.0167 }]
    }]
  }]
});
maps.appendTo('#container')| | Marker template | **Property:** *layers.markerTemplate*

$("#container").ejMap({
  layers:[{ markerTemplate:"Template" }]
}) | **Property:** *layers.markerSettings.template*

let maps: Maps = new Maps({
  layers:[{ markerSettings:[{ template:'#Template' }] }]
});
maps.appendTo('#container')| @@ -86,7 +86,7 @@ This article describes the API migration process of Maps component from Essentia ## Bubble Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.bubbleSettings.visible*

$("#container").ejMap({
  layers:[{ bubbleSettings: { showBubble:true } }]
}) | **Property:** *layers.bubbleSettings.visible*

let maps: Maps = new Maps({
  layers:[{ bubbleSettings:[{ visible:true }] }]
});
maps.appendTo('#container')| | Value path | **Property:** *layers.bubbleSettings.valuePath*

$("#container").ejMap({
  layers:[{ bubbleSettings: { valuePath:'Population' } }]
}) | **Property:** *layers.bubbleSettings.valuePath*

let maps: Maps = new Maps({
  layers:[{ bubbleSettings:[{ valuePath:'Population'}] }]
});
maps.appendTo('#container')| @@ -105,7 +105,7 @@ This article describes the API migration process of Maps component from Essentia ## DataLabel Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.labelSettings.showLabels*

$("#container").ejMap({
  layers:[{ labelSettings: { showLabels:true } }]
}) | **Property:** *layers.dataLabelSettings.visible*

let maps: Maps = new Maps({
  layers:[{ dataLabelSettings:{ visible:true } }]
});
maps.appendTo('#container')| | Label path | **Property:** *layers.labelSettings.labelPath*

$("#container").ejMap({
  layers:[{ labelSettings: { labelPath:'Continent' } }]
}) | **Property:** *layers.dataLabelSettings.labelPath*

let maps: Maps = new Maps({
  layers:[{ dataLabelSettings:{ labelPath:'Continent'} }]
});
maps.appendTo('#container')| @@ -119,7 +119,7 @@ This article describes the API migration process of Maps component from Essentia ## Legend Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | **Property:** *layers.legendSettings.showLegend*

$("#container").ejMap({
  layers:[{ legendSettings: { showLegend:true } }]
}) | **Property:** *legendSettings.visible*

let maps: Maps = new Maps({
  legendSettings: { visible:true }
});
maps.appendTo('#container')| | Toggle visibility | **Property:** *layers.legendSettings.toggleVisibility*

$("#container").ejMap({
  layers:[{ legendSettings: { toggleVisibility:true } }]
}) | **Property:** *legendSettings.toggleVisibility*

let maps: Maps = new Maps({
  legendSettings: { toggleVisibility:true,
  toggleLegendSettings: { visible : true } }
});
maps.appendTo('#container')| @@ -154,7 +154,7 @@ This article describes the API migration process of Maps component from Essentia ## Zooming Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Enable| Not Applicable | **Property:** *zoomSettings.enableZoom*

let maps: Maps = new Maps({
  zoomSettings:{ enable:true }
});
maps.appendTo('#container')| |Minimum zoom| **Property:** *zoomSettings.minValue*

$("#container").ejMap({
  zoomSettings:{ minValue:2 }
}); | **Property:** *zoomSettings.minZoom*

let maps: Maps = new Maps({
  zoomSettings:{ minZoom:2 }
});
maps.appendTo('#container')| @@ -174,7 +174,7 @@ This article describes the API migration process of Maps component from Essentia ## Highlight And Selection Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Highlight fill | **Property:** *layers.shapeSettings.highlightColor*

$("#container").ejMap({
  layers:{ shapeSettings:{ highlightColor:'green' } }
}); | **Property:** *layers.highlightSettings.fill*

let maps: Maps = new Maps({
  layers:[{ highlightSettings:{ fill:'green' }}]
});
maps.appendTo('#container')| | Enable highlight | **Property:** *layers.enableMouseHover*

$("#container").ejMap({
  layers:{ enableMouseHover:true }
}); | **Property:** *layers.highlightSettings.enable*

let maps: Maps = new Maps({
  layers:[{ highlightSettings:{ enable:true }}]
});
maps.appendTo('#container')| @@ -189,7 +189,7 @@ This article describes the API migration process of Maps component from Essentia ## Navigation Line Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Visible | Not Applicable | **Property:** *layers.navigationLineSettings.visible*

let maps: Maps = new Maps({
 layers:[{ navigationLineSettings:[{ visible:true }] }]
});
maps.appendTo('#container') | | Width | Not Applicable | **Property:** *layers.navigationLineSettings.width*

let maps: Maps = new Maps({
 layers:[{ navigationLineSettings:[{ width:2 }] }]
});
maps.appendTo('#container') | @@ -206,7 +206,7 @@ This article describes the API migration process of Maps component from Essentia ## Tooltip Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Tooltip enable | **Property:** *layers.showTooltip*

$("#container").ejMap({
  layers:{ layers:[{ showTooltip: true }]
}); | **Property:** *layers.tooltipSettings.visible*

let maps: Maps = new Maps({
 layers:[{ tooltipSettings:{ visible: true } }]
});
maps.appendTo('#container')| | Tooltip template | **Property:** *layers.tooltipTemplate*

$("#container").ejMap({
  layers:{ layers:[{ tooltipTemplate: "#Template" }]
}); | **Property:** *layers.tooltipSettings.template*

let maps: Maps = new Maps({
 layers:[{ tooltipSettings:{ template: '#tooltipTemplate' } }]
});
maps.appendTo('#container')| @@ -218,7 +218,7 @@ This article describes the API migration process of Maps component from Essentia ## Annotation Cutomization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Content | Not Applicable | **Property:** *legendSettings.annotations.content*

let maps: Maps = new Maps({
  annotations: [{ content:'
USA Population 2018
'
  }]
});
maps.appendTo('#container') | | Location X | Not Applicable | **Property:** *legendSettings.annotations.x*

let maps: Maps = new Maps({
  annotations: [{ x:'250px' }]
});
maps.appendTo('#container') | @@ -229,7 +229,7 @@ This article describes the API migration process of Maps component from Essentia ## Maps Other Properties Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Projection type | Not Applicable | **Property:** *projectionType*

let maps: Maps = new Maps({
  projectionType: 'Mercator'
});
maps.appendTo('#container') | | Background | **Property:** *background*

$("#container").ejMap({
  background:'red'
}); | **Property:** *background*

let maps: Maps = new Maps({
  background: 'red'
});
maps.appendTo('#container') | @@ -250,7 +250,7 @@ This article describes the API migration process of Maps component from Essentia ## Events -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Shape selected | **Property:** *shapeSelected*

$("#container").ejMap({
  shapeSelected:'MapShapeSelected'
}); | **Property:** *shapeSelected*

let maps: Maps = new Maps({
  shapeSelected: (args: IShapeSelectedEventArgs): void => { }
});
maps.appendTo('#container') | | Marker selected | **Property:** *markerSelected*

$("#container").ejMap({
  markerSelected:'MapMarkerSelected'
}); | **Property:** *markerClick*

let maps: Maps = new Maps({
  markerClick: (args: IMarkerClickEventArgs): void => { }
});
maps.appendTo('#container') | diff --git a/ej2-javascript/maps/ts/getting-started.md b/ej2-javascript/maps/ts/getting-started.md index 7f797c5c1..80658dfa4 100644 --- a/ej2-javascript/maps/ts/getting-started.md +++ b/ej2-javascript/maps/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Maps control -This section briefly explains how to create **Maps** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create **Maps** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -33,7 +33,7 @@ Below is the list of minimum dependencies required to use the Maps. ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -53,9 +53,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -69,7 +69,7 @@ npm install ## Add Map control to the Project -The Essential JS2 Maps control can be added to the application. To get started, add the Maps control to the **app.ts** and **index.html** files using the following code. +The Essential® JS2 Maps control can be added to the application. To get started, add the Maps control to the **app.ts** and **index.html** files using the following code. Add an HTML div element to act as the Maps element in the **index.html** file using the following code. diff --git a/ej2-javascript/maps/ts/providers/other-maps.md b/ej2-javascript/maps/ts/providers/other-maps.md index d6038adb9..2ad31aa08 100644 --- a/ej2-javascript/maps/ts/providers/other-maps.md +++ b/ej2-javascript/maps/ts/providers/other-maps.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Other maps in ##Platform_Name## Maps control -Apart from OpenStreetMap and Bing Maps, you can also render Maps from other online map service providers by specifying the URL provided by those providers in the [urlTemplate](../../api/maps/layerSettingsModel/#urltemplate) property. The URL template concept has been implemented in such a way that any online map service providers using the following template can benefit from previewing their Map in the Syncfusion EJ2 Maps control. +Apart from OpenStreetMap and Bing Maps, you can also render Maps from other online map service providers by specifying the URL provided by those providers in the [urlTemplate](../../api/maps/layerSettingsModel/#urltemplate) property. The URL template concept has been implemented in such a way that any online map service providers using the following template can benefit from previewing their Map in the Syncfusion® EJ2 Maps control. diff --git a/ej2-javascript/maskedtextbox/accessibility.md b/ej2-javascript/maskedtextbox/accessibility.md index 6560150e9..f7e7d91dd 100644 --- a/ej2-javascript/maskedtextbox/accessibility.md +++ b/ej2-javascript/maskedtextbox/accessibility.md @@ -64,4 +64,4 @@ The accessibility compliance of the MaskedTextBox component is shown in the foll ## See also -* [Accessibility in Syncfusion components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/maskedtextbox/js/ej1-api-migration.md b/ej2-javascript/maskedtextbox/js/ej1-api-migration.md index a019527c1..007365cb9 100644 --- a/ej2-javascript/maskedtextbox/js/ej1-api-migration.md +++ b/ej2-javascript/maskedtextbox/js/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Maskedtextbox control -This article describes the API migration process of MaskEdit component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of MaskEdit component from Essential® JS 1 to Essential® JS 2. ## Common -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Adding custom class | **Property:** *cssClass*

$("#mask").ejMaskEdit({
maskFormat: "9999",
cssClass: "custom"
}); | **Property:** *cssClass*

var mask = new ej.inputs.MaskedTextBox({
mask: "9999",
cssClass: "custom"
});
mask.appendTo("#mask"); | | Destroy editor | Not Applicable | **Property:** *destroy*

var mask = new ej.inputs.MaskedTextBox({
mask: "00-000"
});
mask.appendTo("#mask");
mask.destroy(); | @@ -40,7 +40,7 @@ This article describes the API migration process of MaskEdit component from Esse ## Mask Configuration -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Triggers on value change | **Event** *change*

$("#mask").ejMaskEdit({
maskFormat: "00-00",
change: function() {}
}); | **Event:** *change*

var mask = new ej.inputs.MaskedTextBox({
mask: "00-00",
change: function() {}
});
mask.appendTo("#mask"); | | Clears maskedit text/value | **Method:** *clear*

$("#mask").ejMaskEdit({
maskFormat: "0000",
value: “1234”
});
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear(); | **Can be achieved using**
var mask = new ej.inputs.MaskedTextBox({
mask: "99,999"
});
mask.appendTo("#mask");
var maskObj = document.getElementById("mask").ej2\_instances[0];
maskObj.value =""; | @@ -61,7 +61,7 @@ This article describes the API migration process of MaskEdit component from Esse ## Validation -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Displays error until correct value is entered | **Property:** *showError*

$("#mask").ejMaskEdit({
maskFormat: "99-999",
showError: true
}); | **MaskedTextBox by default shows error until correct value is entered.**
var mask = new ej.inputs.MaskedTextBox({
mask: "9999",
placeholder: "Enter value"
});
mask.appendTo("#mask"); | | Validation message | **Property:** *validationMessage*

$("#mask").ejMaskEdit({
maskFormat: "0000",
validationRules: {required: true},
validationMessage: {required: "Required value"}
}); | **Validation in MaskedTextBox can be achieved through form validation**
var options = {
rules: {
'maskValue': { required: [ true, 'Enter valid mobile number'] },
},
}
var formObject = new ej.inputs.FormValidator('#form-element', options);
formObject.customPlacement = function(element, error) {
document.querySelector(".form-group").appendChild(error);
};
var mask = new ej.inputs.MaskedTextBox({
mask: '000-000-0000',
});
mask.appendTo("#mask");
**HTML**
<form id="form-element" class="form-horizontal">
<div class = "form-group">
<input id="mask" type="text" name="maskValue" class="form-control" />
<div id="error"></div>
</div
</form> | diff --git a/ej2-javascript/maskedtextbox/js/es5-getting-started.md b/ej2-javascript/maskedtextbox/js/es5-getting-started.md index 6b82934c6..130c766c6 100644 --- a/ej2-javascript/maskedtextbox/js/es5-getting-started.md +++ b/ej2-javascript/maskedtextbox/js/es5-getting-started.md @@ -24,7 +24,7 @@ The following list of dependencies are required to use the MaskedTextBox compone ## Set up your development environment -To get started with MaskedTextBox component, you can clone the [Essential JS 2 QuickStart](https://github.com/syncfusion/ej2-quickstart.git) project, and install the packages by using the following commands. +To get started with MaskedTextBox component, you can clone the [Essential® JS 2 QuickStart](https://github.com/syncfusion/ej2-quickstart.git) project, and install the packages by using the following commands. ``` git clone https://github.com/syncfusion/ej2-quickstart.git quickstart @@ -32,7 +32,7 @@ cd quickstart npm install ``` -> The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with the common settings (`src/styles/styles.css`, `system.config.js` ) to start with all the Essential JS 2 components. +> The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with the common settings (`src/styles/styles.css`, `system.config.js` ) to start with all the Essential® JS 2 components. ## Add MaskedTextBox to the project diff --git a/ej2-javascript/maskedtextbox/ts/ej1-api-migration.md b/ej2-javascript/maskedtextbox/ts/ej1-api-migration.md index 19b90f574..8bdfd44fd 100644 --- a/ej2-javascript/maskedtextbox/ts/ej1-api-migration.md +++ b/ej2-javascript/maskedtextbox/ts/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Maskedtextbox control -This article describes the API migration process of MaskEdit component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of MaskEdit component from Essential® JS 1 to Essential® JS 2. ## Common -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Adding custom class | **Property:** *cssClass*

$("#mask").ejMaskEdit({
maskFormat: "9999",
cssClass: "custom"
}); | **Property:** *cssClass*

let mask: MaskedTextBox = new MaskedTextBox({
mask: "9999",
cssClass: "custom"
});
mask.appendTo("#mask"); | | Destroy editor | Not Applicable | **Property:** *destroy*

let mask: MaskedTextBox = new MaskedTextBox({
mask: "00-000"
});
mask.appendTo("#mask");
mask.destroy(); | @@ -40,7 +40,7 @@ This article describes the API migration process of MaskEdit component from Esse ## Mask Configuration -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Triggers on value change | **Event** *change*

$("#mask").ejMaskEdit({
maskFormat: "00-00",
change: function() {}
}); | **Event:** *change*

let mask: MaskedTextBox = new MaskedTextBox({
mask: "00-00",
change: function() {}
});
mask.appendTo("#mask"); | | Clears maskedit text/value | **Method:** *clear*

$("#mask").ejMaskEdit({
maskFormat: "0000",
value: “1234”
});
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear(); | **Can be achieved using**
let mask: MaskedTextBox = new MaskedTextBox({
mask: "00-00",
value: "12345",
});
mask.appendTo("#mask");
var maskObj = document.getElementById("mask").ej2\_instances[0];
maskObj.value =""; | @@ -61,7 +61,7 @@ This article describes the API migration process of MaskEdit component from Esse ## Validation -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Displays error until correct value is entered | **Property:** *showError*

$("#mask").ejMaskEdit({
maskFormat: "99-999",
showError: true
}); | **MaskedTextBox by default shows error until correct value is entered.**
let mask: MaskedTextBox = new MaskedTextBox({
mask: "LLLL",
});
mask.appendTo("#mask"); | | Validation message | **Property:** *validationMessage*

$("#mask").ejMaskEdit({
maskFormat: "0000",
validationRules: {required: true},
validationMessage: {required: "Required value"}
}); | **Validation in MaskedTextBox can be achieved through form validation**
let options: FormValidatorModel = {
rules: {
'maskValue': { required: [true, "Number is required"]},
}
let formObject: FormValidator = new FormValidator('#form-element', options);
formObject.customPlacement= (inputElement, error) => {
document.getElementById('error').appendChild(error);
}
let mask: MaskedTextBox = new MaskedTextBox({
mask: "0000",
value: "1234"
});
mask.appendTo("#mask");
**HTML**
<form id="form-element" class="form-horizontal">
<input id="mask" type="text" name="maskValue" class="form-control" />
<div id="error"></div>
</form> | diff --git a/ej2-javascript/maskedtextbox/ts/getting-started.md b/ej2-javascript/maskedtextbox/ts/getting-started.md index 88ddbdd15..b29fad6f6 100644 --- a/ej2-javascript/maskedtextbox/ts/getting-started.md +++ b/ej2-javascript/maskedtextbox/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Maskedtextbox control -This section explains how to create a simple MaskedTextBox component and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple MaskedTextBox component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -27,7 +27,7 @@ The following list of dependencies are required to use the MaskedTextBox compone ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -47,9 +47,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -61,7 +61,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render MaskedTextBox component, need to import inputs and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/message/accessibility.md b/ej2-javascript/message/accessibility.md index a8ec98586..b45a1b8db 100644 --- a/ej2-javascript/message/accessibility.md +++ b/ej2-javascript/message/accessibility.md @@ -67,4 +67,4 @@ The accessibility compliance of the Message control is shown in the following sa ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) diff --git a/ej2-javascript/message/customization.md b/ej2-javascript/message/customization.md index 383a85fd2..4a8f327e5 100644 --- a/ej2-javascript/message/customization.md +++ b/ej2-javascript/message/customization.md @@ -81,7 +81,7 @@ The following example shows the rounded and squared appearance of the message, w ## CSS Message -The Essential JS 2 Message has predefined CSS classes that can be defined in the HTML elements, which renders the message without any script reference. This can display a simple message with content and make the code lighter. +The Essential® JS 2 Message has predefined CSS classes that can be defined in the HTML elements, which renders the message without any script reference. This can display a simple message with content and make the code lighter. The following DOM structure is required to display the simple message with the content. diff --git a/ej2-javascript/message/js/es5-getting-started.md b/ej2-javascript/message/js/es5-getting-started.md index d8fc00362..2a7fa9a36 100644 --- a/ej2-javascript/message/js/es5-getting-started.md +++ b/ej2-javascript/message/js/es5-getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Message control -This section explains the steps required to create a simple JavaScript (ES5) Message control and configure its available functionalities in the TypeScript using the Essential JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart) seed repository. This seed repository is pre-configured with all the Essential JS 2 packages. +This section explains the steps required to create a simple JavaScript (ES5) Message control and configure its available functionalities in the TypeScript using the Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart) seed repository. This seed repository is pre-configured with all the Essential® JS 2 packages. ## Dependencies @@ -26,7 +26,7 @@ The following list of dependencies are required to use the Message control in th ## Setup for local development -To get started with the Message control, clone the Essential JS 2 [`quickstart`](https://github.com/syncfusion/ej2-quickstart) project, and install the necessary npm packages by using the following command line scripts. +To get started with the Message control, clone the Essential® JS 2 [`quickstart`](https://github.com/syncfusion/ej2-quickstart) project, and install the necessary npm packages by using the following command line scripts. ``` git clone https://github.com/syncfusion/ej2-quickstart.git quickstart @@ -36,7 +36,7 @@ npm install ## Adding CSS reference -The combined CSS files are available in the Essential JS 2 package root folder. This can be referenced in the `[src/styles/styles.css]` file using the following code. +The combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in the `[src/styles/styles.css]` file using the following code. ```bash @import '../../node_modules/@syncfusion/ej2-base/styles/material.css'; @@ -44,11 +44,11 @@ The combined CSS files are available in the Essential JS 2 package root folder. ``` -> To add the individual control CSS, refer to the [individual control theme](../appearance/theme/#referring-individual-control-theme) section. To use the combined control styles, make use of Syncfusion [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in the application. +> To add the individual control CSS, refer to the [individual control theme](../appearance/theme/#referring-individual-control-theme) section. To use the combined control styles, make use of Syncfusion® [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in the application. ## Add Message control -Now, start adding the Essential JS 2 Message control to the application. To get started, add the HTML `
` element to the `index.html` file. +Now, start adding the Essential® JS 2 Message control to the application. To get started, add the HTML `
` element to the `index.html` file. ```html diff --git a/ej2-javascript/message/ts/getting-started.md b/ej2-javascript/message/ts/getting-started.md index 368468da0..57c88d81a 100644 --- a/ej2-javascript/message/ts/getting-started.md +++ b/ej2-javascript/message/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Message control -This section explains the steps required to create a simple [JavaScript Message](https://www.syncfusion.com/javascript-ui-controls/js-message) control and configure its available functionalities in the TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with all the Essential JS 2 packages. +This section explains the steps required to create a simple [JavaScript Message](https://www.syncfusion.com/javascript-ui-controls/js-message) control and configure its available functionalities in the TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with all the Essential® JS 2 packages. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -28,7 +28,7 @@ The following list of dependencies are required to use the Message control in th ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -48,9 +48,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -62,9 +62,9 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles -The combined CSS files are available in the Essential JS 2 package root folder. This can be referenced in the `~/src/styles/styles.css` file of your application using the following code. +The combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in the `~/src/styles/styles.css` file of your application using the following code. {% tabs %} {% highlight css tabtitle="style.css" %} @@ -76,11 +76,11 @@ The combined CSS files are available in the Essential JS 2 package root folder. {% endtabs %} > You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme) section to know more about built-in themes and CSS reference for individual controls. -> To use the combined control styles, make use of Syncfusion [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in the application. +> To use the combined control styles, make use of Syncfusion® [`CRG`](https://crg.syncfusion.com/) (Custom Resource Generator) in the application. ## Add Message control -Now, start adding the Essential JS 2 Message control to the application. To get started, add the HTML `
` element to the `index.html` file. +Now, start adding the Essential® JS 2 Message control to the application. To get started, add the HTML `
` element to the `index.html` file. {% tabs %} {% highlight html tabtitle="index.html" %} diff --git a/ej2-javascript/numerictextbox/accessibility.md b/ej2-javascript/numerictextbox/accessibility.md index 1deb835d6..c1532df48 100644 --- a/ej2-javascript/numerictextbox/accessibility.md +++ b/ej2-javascript/numerictextbox/accessibility.md @@ -59,7 +59,7 @@ The NumericTextBox uses the `spinbutton` role and following ARIA properties to i ## Keyboard interaction Keyboard interaction of the NumericTextBox component has been designed based on -[WAI-ARIA Practices](https://www.w3.org/TR/wai-aria/roles/#spinbutton) described for the NumericTextBox and +[WAI-ARIA Practices](https://www.w3.org/TR/wai-aria/#spinbutton) described for the NumericTextBox and it is an alternative to mouse actions to interact with the NumericTextBox. The below table shows shortcut keys and its corresponding usage. @@ -112,4 +112,4 @@ The accessibility compliance of the NumericTextBox component is shown in the fol ## See also -* [Accessibility in Syncfusion components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/numerictextbox/globalization.md b/ej2-javascript/numerictextbox/globalization.md index 8a6231f91..f841a63b8 100644 --- a/ej2-javascript/numerictextbox/globalization.md +++ b/ej2-javascript/numerictextbox/globalization.md @@ -64,7 +64,7 @@ The below example demonstrates the NumericTextBox in `German` culture with the s Internationalization library provides support for formatting and parsing the number by using the official [Unicode CLDR](http://cldr.unicode.org/) JSON data and also provides the `loadCldr` method to load the culture specific CLDR JSON data. The NumericTextBox comes with built-in internationalization support to adapt based on culture. For more information about internationalization, refer to this [link](../common/internationalization/). -By default, all the Essential JS 2 component are specific to English culture ('en-US'). If you want to go with the different culture other than `English`, follow the below steps. +By default, all the Essential® JS 2 component are specific to English culture ('en-US'). If you want to go with the different culture other than `English`, follow the below steps. * Install the `CLDR-Data` package by using the below command (it installs the CLDR JSON data). For more information about CLDR-Data, refer to this [link](https://cldr.unicode.org/index/cldr-spec/cldr-json-bindings). diff --git a/ej2-javascript/numerictextbox/js/ej1-api-migration.md b/ej2-javascript/numerictextbox/js/ej1-api-migration.md index 2d51a4edb..d96fcdca0 100644 --- a/ej2-javascript/numerictextbox/js/ej1-api-migration.md +++ b/ej2-javascript/numerictextbox/js/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Numerictextbox control -This article describes the API migration process of NumericTextBox component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of NumericTextBox component from Essential® JS 1 to Essential® JS 2. ## Common -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Triggers on creation | **Event:** *create*

$("#numeric").ejNumericTextBox({
value: 120,
create: function(){}
}); | **Event:** *created*

var numeric = new ej.inputs.NumericTextBox({
value: 120,
created: function(){}
});
numeric.appendTo("#numeric"); | | Adding custom classes | **property:** *cssClass*

$("#numeric").ejNumericTextBox({
value: 100,
cssClass: “custom”
}); | **Property:** *cssClass*

var numeric = new ej.inputs.NumericTextBox({
value: 100,
cssClass: “custom”
});
numeric.appendTo("#numeric"); | @@ -37,20 +37,20 @@ This article describes the API migration process of NumericTextBox component fro ## Globalization -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Localization culture | **property:** *locale*

$("#numeric").ejNumericTextBox({
value: 80,
locale: “de-DE”
}); | **Property:** *locale*

var numeric = new ej.inputs.NumericTextBox({
value: 80,
locale: “de-DE”
});
numeric.appendTo("#numeric"); | ## Group -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Group digits in editor | **property:** *groupSize*

$("#numeric").ejNumericTextBox({
value: 100,
groupSize: "2"
}); | Not Applicable | | Group Separator | **property:** *groupSeparator*

$("#numeric").ejNumericTextBox({
value: 100,
groupSeparator: "-"
}); | Not Applicable | ## Numeric configuration -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Triggers on value change | **Event:** *change*

$("#numeric").ejNumericTextBox({
value: 120,
change: function(){}
}); | **Event:** *change*

var numeric = new ej.inputs.NumericTextBox({
value: 120,
change: function(){}
});
numeric.appendTo("#numeric"); | | Sets digits allowed after decimal point | **property:** *decimalPlaces*

$("#numeric").ejNumericTextBox({
value: 100,
decimalPlaces: 2
}); | **Property:** *decimals*

var numeric = new ej.inputs.NumericTextBox({
value: 100,
format: “n2”,
decimals: 2
});
numeric.appendTo("#numeric"); | @@ -70,14 +70,14 @@ This article describes the API migration process of NumericTextBox component fro ## Number Formats -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Set Currency symbol | **property:** *currencySymbol*

$("#currency").ejCurrencyTextBox({
value: 100,
currencySymbol: “EUR”
}); | **Property:** *currency*

var currency = new ej.inputs.NumericTextBox({
value: 100,
format: “c2”,
currency: “EUR”
});
currency.appendTo("#currency"); | | Number Format | Not Applicable | **Property:** *format*

var numeric = new ej.inputs.NumericTextBox({
value: 200
format: "n2"
});
numeric.appendTo("#numeric"); | ## Validation -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Strict Mode | **property:** *enableStrictMode*

$("#numeric").ejNumericTextBox({
value: 80,
enableStrictMode: true
}); | **Property:** *strictMode*

var numeric = new ej.inputs.NumericTextBox({
value: 80,
strictMode: true
});
numeric.appendTo("#numeric"); | | Validation on typing | **property:** *validateOnType*

$("#numeric").ejNumericTextBox({
value: 100,
validateOnType: true
}); | **Property:** *validateDecimalOnType*

var numeric = new ej.inputs.NumericTextBox({
value: 100,
validateDecimalOnType: true
});
numeric.appendTo("#numeric"); | diff --git a/ej2-javascript/numerictextbox/js/es5-getting-started.md b/ej2-javascript/numerictextbox/js/es5-getting-started.md index 330fabe3c..f1b34681f 100644 --- a/ej2-javascript/numerictextbox/js/es5-getting-started.md +++ b/ej2-javascript/numerictextbox/js/es5-getting-started.md @@ -24,7 +24,7 @@ The following list of dependencies are required to use the NumericTextBox compon ## Set up your development environment -To get you started with the NumericTextBox component, you can clone the [Essential JS 2 QuickStart](https://github.com/syncfusion/ej2-quickstart.git) project and install the packages by using the following commands. +To get you started with the NumericTextBox component, you can clone the [Essential® JS 2 QuickStart](https://github.com/syncfusion/ej2-quickstart.git) project and install the packages by using the following commands. ``` git clone https://github.com/syncfusion/ej2-quickstart.git quickstart @@ -32,7 +32,7 @@ cd quickstart npm install ``` -> The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with common settings (`src/styles/styles.css`, `system.config.js` ) to start with all Essential JS 2 components. +> The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with common settings (`src/styles/styles.css`, `system.config.js` ) to start with all Essential® JS 2 components. ## Add NumericTextBox to the project diff --git a/ej2-javascript/numerictextbox/ts/ej1-api-migration.md b/ej2-javascript/numerictextbox/ts/ej1-api-migration.md index 45761621a..143bf371d 100644 --- a/ej2-javascript/numerictextbox/ts/ej1-api-migration.md +++ b/ej2-javascript/numerictextbox/ts/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Numerictextbox control -This article describes the API migration process of NumericTextBox component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of NumericTextBox component from Essential® JS 1 to Essential® JS 2. ## Common -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Triggers on creation | **Event:** *create*

$("#numeric").ejNumericTextBox({
value: 120,
create: function(){}
}); | **Event:** *created*

let numeric: NumericTextBox = new NumericTextBox({
value: 120,
created: function(){}
});
numeric.appendTo("#numeric"); | | Adding custom classes | **Property:** *cssClass*

$("#numeric").ejNumericTextBox({
value: 100,
cssClass: “custom”
}); | **Property:** *cssClass*

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
cssClass: “custom”
});
numeric.appendTo("#numeric"); | @@ -37,20 +37,20 @@ This article describes the API migration process of NumericTextBox component fro ## Globalization -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Localization culture | **Property:** *locale*

$("#numeric").ejNumericTextBox({
value: 80,
locale: “de-DE”
}); | **Property:** *locale*

let numeric: NumericTextBox = new NumericTextBox({
value: 80,
locale: “de-DE”
});
numeric.appendTo("#numeric"); | ## Group -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Group digits in editor | **Property:** *groupSize*

$("#numeric").ejNumericTextBox({
value: 100,
groupSize: "2"
}); | Not Applicable | | Group Separator | **Property:** *groupSeparator*

$("#numeric").ejNumericTextBox({
value: 100,
groupSeparator: "-"
}); | Not Applicable | ## Numeric configuration -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | ---- | | Triggers on value change | **Event:** *change*

$("#numeric").ejNumericTextBox({
value: 120,
change: function(){}}) | **Event:** *change*

let numeric: NumericTextBox = new NumericTextBox({
value: 120,
change: function(){}
});
numeric.appendTo("#numeric"); | | Sets digits allowed after decimal point | **Property:** *decimalPlaces*

$("#numeric").ejNumericTextBox({
value: 100,
decimalPlaces: 2
}); | **Property:** *decimals*

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
format: “n2”,
decimals: 2
});
numeric.appendTo("#numeric"); | @@ -70,14 +70,14 @@ This article describes the API migration process of NumericTextBox component fro ## Number Formats -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Set Currency symbol | **Property:** *currencySymbol*

$("#currency").ejCurrencyTextBox({
value: 100,
currencySymbol: “EUR”
}); | **Property:** *currency*

let currency: NumericTextBox = new NumericTextBox({
value: 100,
format: “c2”,
currency: “EUR”
});
currency.appendTo("#currency"); | | Number Format | Not Applicable | **Property:** *format*

let numeric: NumericTextBox = new NumericTextBox({
value: 200
format: "n2"
});
numeric.appendTo("#numeric"); | ## Validation -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Strict Mode | **Property:** *enableStrictMode*

$("#numeric").ejNumericTextBox({
value: 80,
enableStrictMode: true
}); | **Property:** *strictMode*

let numeric: NumericTextBox = new NumericTextBox({
value: 80,
strictMode: true
});
numeric.appendTo("#numeric"); | | Validation on typing | **Property:** *validateOnType*

$("#numeric").ejNumericTextBox({
value: 100,
validateOnType: true
}); | **Property:** *validateDecimalOnType*

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
validateDecimalOnType: true
});
numeric.appendTo("#numeric"); | diff --git a/ej2-javascript/numerictextbox/ts/getting-started.md b/ej2-javascript/numerictextbox/ts/getting-started.md index a9b3b47c1..57f971c89 100644 --- a/ej2-javascript/numerictextbox/ts/getting-started.md +++ b/ej2-javascript/numerictextbox/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Numerictextbox control -This section explains how to create a simple NumerictTextBox component and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple NumerictTextBox component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -27,7 +27,7 @@ The following list of dependencies are required to use the NumericTextBox compon ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -47,9 +47,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -61,7 +61,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render NumericTextBox component, need to import inputs and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/otp-input/accessibility.md b/ej2-javascript/otp-input/accessibility.md index 6f737c890..eca9b1b79 100644 --- a/ej2-javascript/otp-input/accessibility.md +++ b/ej2-javascript/otp-input/accessibility.md @@ -65,7 +65,7 @@ The OTP Input control's accessibility levels are ensured through an [accessibili ## See also -* [Accessibility in Syncfusion JavaScript controls](../common/accessibility) +* [Accessibility in Syncfusion® JavaScript controls](../common/accessibility) ## HtmlAttributes diff --git a/ej2-javascript/otp-input/js/es5-getting-started.md b/ej2-javascript/otp-input/js/es5-getting-started.md index 14fe5e445..7bb8193b8 100644 --- a/ej2-javascript/otp-input/js/es5-getting-started.md +++ b/ej2-javascript/otp-input/js/es5-getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## OTP Input control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Dependencies @@ -33,7 +33,7 @@ The JavaScript (ES5) OTP Input control can be initialized by using either of the **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` @@ -54,7 +54,7 @@ The JavaScript (ES5) OTP Input control can be initialized by using either of the > > Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\styles\material.css` -The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > @@ -64,7 +64,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder `~/quickstart/resources` and copy/paste the global scripts and styles from the above installed location to `~/quickstart/resources/package` corresponding package location. -**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essential® JS 2 script and style references. ```html @@ -125,7 +125,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript (ES5) OTP Input** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript (ES5) OTP Input** control. ## Using CDN link for script and style reference @@ -160,4 +160,4 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/otp-input/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript OTP Input` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript OTP Input** control. diff --git a/ej2-javascript/otp-input/ts/getting-started.md b/ej2-javascript/otp-input/ts/getting-started.md index d2d108f28..ddf4ad316 100644 --- a/ej2-javascript/otp-input/ts/getting-started.md +++ b/ej2-javascript/otp-input/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## OTP Input control -This section explains how to create a simple OTP Input control and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple OTP Input control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -26,7 +26,7 @@ The list of dependencies required to use the OTP Input control in your applicati ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -46,9 +46,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -60,7 +60,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render OTP Input control, need to import inputs and its dependent controls styles as given below in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/pager/js/getting-started.md b/ej2-javascript/pager/js/getting-started.md index 484d518b0..186d8e66f 100644 --- a/ej2-javascript/pager/js/getting-started.md +++ b/ej2-javascript/pager/js/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Pager control -This section explains you the steps required to create a simple Essential JS 2 Pager and demonstrate the basic usage of the Pager control in a JavaScript application. +This section explains you the steps required to create a simple Essential® JS 2 Pager and demonstrate the basic usage of the Pager control in a JavaScript application. ## Dependencies @@ -30,20 +30,20 @@ Refer the following steps for setup your local environment. **Step 2:** Create `myapp/resources` folder to store local scripts and styles files. -**Step 3:** Create `myapp/index.js` and `myapp/index.html` files for initializing Essential JS 2 Pager control. +**Step 3:** Create `myapp/index.js` and `myapp/index.html` files for initializing Essential® JS 2 Pager control. -## Adding Syncfusion resources +## Adding Syncfusion® resources -The Essential JS 2 Pager control can be initialized by using either of the following ways. +The Essential® JS 2 Pager control can be initialized by using either of the following ways. * Using local script and style. * Using CDN link for script and style. ### Using local script and style -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/account/manage-trials/downloads) build installed location. -After installing the Essential JS 2 product build, you can copy the pager and its dependencies scripts and style file into the `resources/scripts` and `resources/styles` folder. +After installing the Essential® JS 2 product build, you can copy the pager and its dependencies scripts and style file into the `resources/scripts` and `resources/styles` folder. Refer the below code to find location pager's script and style file. @@ -174,7 +174,7 @@ pager.appendTo('#Pager'); ## Page sizes -The [pageSizes](https://ej2.syncfusion.com/javascript/documentation/api/pager#pagesizes) property in the Syncfusion Pager control allows you to control the number of records displayed per page through a `DropDownList` integrated into the pager. This feature enhances the experience by providing flexibility in data viewing. +The [pageSizes](https://ej2.syncfusion.com/javascript/documentation/api/pager#pagesizes) property in the Syncfusion® Pager control allows you to control the number of records displayed per page through a `DropDownList` integrated into the pager. This feature enhances the experience by providing flexibility in data viewing. **Enabling Page Sizes** @@ -214,7 +214,7 @@ The following example demonstrates how to include the `pageSizes` property in th ## Run the application -Now, run the `index.html` in web browser, it will render the Essential JS 2 Pager control. +Now, run the `index.html` in web browser, it will render the Essential® JS 2 Pager control. Output will be appears as follows. diff --git a/ej2-javascript/pager/ts/getting-started.md b/ej2-javascript/pager/ts/getting-started.md index 8dfbc2fb5..c2b88c138 100644 --- a/ej2-javascript/pager/ts/getting-started.md +++ b/ej2-javascript/pager/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Pager control -This section briefly explains how to create **Pager** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create **Pager** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -25,7 +25,7 @@ Below is the list of minimum dependencies required to use the Pager. ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -45,9 +45,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -59,9 +59,9 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles -Syncfusion JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: @@ -77,7 +77,7 @@ The quickstart application is preconfigured to use the `Material` theme in the ` ## Adding Pager component -Now, you can start adding Essential JS 2 Pager component in the application. For getting started, add the Pager component in `app.ts` and `index.html` file using following code. +Now, you can start adding Essential® JS 2 Pager component in the application. For getting started, add the Pager component in `app.ts` and `index.html` file using following code. Now place the below Pager code in the `app.ts`. Here the Pager is rendered with `totalRecordsCount` which is used to render numeric container. @@ -138,13 +138,13 @@ Now, add a HTML Div element to act as Pager element in `index.html` using follow ## Page Sizes -The [pageSizes](https://ej2.syncfusion.com/documentation/api/pager#pagesizes) property in the Syncfusion Pager control allows you to control the number of records displayed per page through a `DropDownList` integrated into the pager. This feature enhances the experience by providing flexibility in data viewing. +The [pageSizes](https://ej2.syncfusion.com/documentation/api/pager#pagesizes) property in the Syncfusion® Pager control allows you to control the number of records displayed per page through a `DropDownList` integrated into the pager. This feature enhances the experience by providing flexibility in data viewing. **Enabling Page Sizes** To enable the `pageSizes` property, follow these steps: -1. Import the `PagerDropDown` and `Pager` modules from the Syncfusion Grid package. +1. Import the `PagerDropDown` and `Pager` modules from the Syncfusion® Grid package. 2. Inject the `PagerDropDown` into the `Pager` module to enable the `DropDownList` in the pager. diff --git a/ej2-javascript/pdfviewer/how-to/add-header-value.md b/ej2-javascript/pdfviewer/how-to/add-header-value.md index e02bbd605..1b7c8ea35 100644 --- a/ej2-javascript/pdfviewer/how-to/add-header-value.md +++ b/ej2-javascript/pdfviewer/how-to/add-header-value.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Add header value in ##Platform_Name## Pdfviewer control -To add header values to an AJAX request made by a Syncfusion PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request. +To add header values to an AJAX request made by a Syncfusion® PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request. Here is an example of how you can use the **ajaxRequestSettings** property to add a custom header to an AJAX request made by the PDF Viewer: diff --git a/ej2-javascript/pdfviewer/how-to/add-header-values.md b/ej2-javascript/pdfviewer/how-to/add-header-values.md index b3eb2b048..4452fd4ac 100644 --- a/ej2-javascript/pdfviewer/how-to/add-header-values.md +++ b/ej2-javascript/pdfviewer/how-to/add-header-values.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Add header values in ##Platform_Name## Pdfviewer control -To add header values to an AJAX request made by a Syncfusion PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request. +To add header values to an AJAX request made by a Syncfusion® PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request. Here is an example of how you can use the **ajaxRequestSettings** property to add a custom header to an AJAX request made by the PDF Viewer: diff --git a/ej2-javascript/pdfviewer/how-to/add-save-button-js.md b/ej2-javascript/pdfviewer/how-to/add-save-button-js.md index 29d2e7942..f232fb506 100644 --- a/ej2-javascript/pdfviewer/how-to/add-save-button-js.md +++ b/ej2-javascript/pdfviewer/how-to/add-save-button-js.md @@ -106,7 +106,7 @@ The prefix property is used to set the CSS class or icon that should be added as The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. -These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of Syncfusion® PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item. N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference. diff --git a/ej2-javascript/pdfviewer/how-to/add-save-button-ts.md b/ej2-javascript/pdfviewer/how-to/add-save-button-ts.md index 046247497..4d972b971 100644 --- a/ej2-javascript/pdfviewer/how-to/add-save-button-ts.md +++ b/ej2-javascript/pdfviewer/how-to/add-save-button-ts.md @@ -101,7 +101,7 @@ The prefix property is used to set the CSS class or icon that should be added as The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. -These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of Syncfusion® PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item. N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference. diff --git a/ej2-javascript/pdfviewer/how-to/annotation-selector.md b/ej2-javascript/pdfviewer/how-to/annotation-selector.md index 7ede498c1..2a41a3331 100644 --- a/ej2-javascript/pdfviewer/how-to/annotation-selector.md +++ b/ej2-javascript/pdfviewer/how-to/annotation-selector.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Annotation selector in ##Platform_Name## Pdfviewer control -To customize the annotation selector in Syncfusion PDF Viewer, you can use the [**annotationSelectorSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control. +To customize the annotation selector in Syncfusion® PDF Viewer, you can use the [**annotationSelectorSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control. Here is an example of how you can customize the selector of the shape annotation: diff --git a/ej2-javascript/pdfviewer/how-to/annotation-selectors.md b/ej2-javascript/pdfviewer/how-to/annotation-selectors.md index ef01093fe..d2fc153fd 100644 --- a/ej2-javascript/pdfviewer/how-to/annotation-selectors.md +++ b/ej2-javascript/pdfviewer/how-to/annotation-selectors.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Annotation selectors in ##Platform_Name## Pdfviewer control -To customize the annotation selector in Syncfusion PDF Viewer, you can use the [**annotationSelectorSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control. +To customize the annotation selector in Syncfusion® PDF Viewer, you can use the [**annotationSelectorSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control. Here is an example of how you can customize the selector of the shape annotation: diff --git a/ej2-javascript/pdfviewer/how-to/change-author-name-using-annotation-settings.md b/ej2-javascript/pdfviewer/how-to/change-author-name-using-annotation-settings.md index 0da9e0a94..34ffa59a1 100644 --- a/ej2-javascript/pdfviewer/how-to/change-author-name-using-annotation-settings.md +++ b/ej2-javascript/pdfviewer/how-to/change-author-name-using-annotation-settings.md @@ -1,6 +1,6 @@ --- layout: post -title: Change author name using annotation settings in ##Platform_Name## Pdfviewer control | Syncfusion +title: Change Author name in ##Platform_Name## Pdfviewer control | Syncfusion description: Learn here all about Change author name using annotation settings in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more. platform: ej2-javascript control: Change author name using annotation settings @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Change author name using annotation settings in ##Platform_Name## Pdfviewer control -The Essential JavaScript PDF Viewer supports to customize a single property of the annotation settings by exposing an API for the properties common to all the annotations. +The Essential® JavaScript PDF Viewer supports to customize a single property of the annotation settings by exposing an API for the properties common to all the annotations. **API Name** : annotationSettings diff --git a/ej2-javascript/pdfviewer/how-to/change-rectangle-annotations-border-color.md b/ej2-javascript/pdfviewer/how-to/change-rectangle-annotations-border-color.md index 9ab064aeb..f9992158f 100644 --- a/ej2-javascript/pdfviewer/how-to/change-rectangle-annotations-border-color.md +++ b/ej2-javascript/pdfviewer/how-to/change-rectangle-annotations-border-color.md @@ -1,6 +1,6 @@ --- layout: post -title: Change rectangle annotations border color in ##Platform_Name## Pdfviewer control | Syncfusion +title: Rectangle annotation in ##Platform_Name## Pdfviewer control|Syncfusion description: Learn here all about Change rectangle annotations border color in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more. platform: ej2-javascript control: Change rectangle annotations border color @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Change rectangle annotations border color in ##Platform_Name## Pdfviewer control -The Essential JavaScript PDF Viewer supports customizing the rectangle annotation's property by using the [rectangleSettings](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#rectanglesettings) API. +The Essential® JavaScript PDF Viewer supports customizing the rectangle annotation's property by using the [rectangleSettings](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#rectanglesettings) API. **Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample. diff --git a/ej2-javascript/pdfviewer/how-to/clear-annotation.md b/ej2-javascript/pdfviewer/how-to/clear-annotation.md index b0acdc1d3..f0c33eb8c 100644 --- a/ej2-javascript/pdfviewer/how-to/clear-annotation.md +++ b/ej2-javascript/pdfviewer/how-to/clear-annotation.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Clear annotation in ##Platform_Name## Pdfviewer control -To clear all the annotations in a PDF document using the Syncfusion PDF Viewer, you can use the [**deleteAnnotations**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method. This method is used to clear all the annotations present in the currently loaded document. +To clear all the annotations in a PDF document using the Syncfusion® PDF Viewer, you can use the [**deleteAnnotations**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method. This method is used to clear all the annotations present in the currently loaded document. Here is an example of how you can clear all the annotations present in the currently loaded document: diff --git a/ej2-javascript/pdfviewer/how-to/clear-annotations.md b/ej2-javascript/pdfviewer/how-to/clear-annotations.md index 48c0d5351..7401028e0 100644 --- a/ej2-javascript/pdfviewer/how-to/clear-annotations.md +++ b/ej2-javascript/pdfviewer/how-to/clear-annotations.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Clear annotations in ##Platform_Name## Pdfviewer control -To clear all the annotations in a PDF document using the Syncfusion PDF Viewer, you can use the [**deleteAnnotations**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method. This method is used to clear all the annotations present in the currently loaded document. +To clear all the annotations in a PDF document using the Syncfusion® PDF Viewer, you can use the [**deleteAnnotations**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method. This method is used to clear all the annotations present in the currently loaded document. Here is an example of how you can clear all the annotations present in the currently loaded document: diff --git a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-js.md b/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-js.md index 64b412562..28a9d247c 100644 --- a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-js.md +++ b/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-js.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### Overview -This guide demonstrates how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer in JavaScript. This process allows the annotations to be visible only in specific viewers, such as the Syncfusion PDF Viewer. +This guide demonstrates how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion® PDF Viewer in JavaScript. This process allows the annotations to be visible only in specific viewers, such as the Syncfusion® PDF Viewer. ### How to control Annotation Visibility @@ -118,6 +118,6 @@ Implement a function that changes the annotation visibility settings for the doc } ``` -By following these steps, the annotations in a PDF document can be set to be visible in the Syncfusion PDF Viewer, providing control over annotation visibility based on different platforms. +By following these steps, the annotations in a PDF document can be set to be visible in the Syncfusion® PDF Viewer, providing control over annotation visibility based on different platforms. [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-ts.md b/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-ts.md index c73c78655..108f034bf 100644 --- a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-ts.md +++ b/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-ts.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### Overview -This guide demonstrates how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer in TypeScript. This process allows the annotations to be visible only in the Syncfusion PDF Viewer. +This guide demonstrates how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion® PDF Viewer in TypeScript. This process allows the annotations to be visible only in the Syncfusion® PDF Viewer. ### How to Control Annotation Visibility @@ -117,6 +117,6 @@ function save() { ``` -By following these steps, the annotations in a PDF document can be set to be visible in the Syncfusion PDF Viewer, providing control over annotation visibility based on different platforms. +By following these steps, the annotations in a PDF document can be set to be visible in the Syncfusion® PDF Viewer, providing control over annotation visibility based on different platforms. [View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js.md b/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js.md index 67f55c1ef..b4c7fd710 100644 --- a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js.md +++ b/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### Overview -When exporting annotations from the PDF Library, you may need to convert the bounds values into the PDF Viewer format. This guide will help you achieve that using the Syncfusion PDF Viewer component. +When exporting annotations from the PDF Library, you may need to convert the bounds values into the PDF Viewer format. This guide will help you achieve that using the Syncfusion® PDF Viewer component. ### How to Convert Bounds Values diff --git a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md b/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md index 240ca2031..773cbe295 100644 --- a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md +++ b/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### Overview -When exporting annotations from the PDF Library, you may need to convert the bounds values into the PDF Viewer format. This guide will help you achieve that using the Syncfusion PDF Viewer component. +When exporting annotations from the PDF Library, you may need to convert the bounds values into the PDF Viewer format. This guide will help you achieve that using the Syncfusion® PDF Viewer component. ### How to Convert Bounds Values diff --git a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service-core.md b/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service-core.md index aeb2648eb..10bbf7a5f 100644 --- a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service-core.md +++ b/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service-core.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## --- # Create pdfviewer service in ##Platform_Name## Pdfviewer control -The Essential JavaScript PDF Viewer have server side dependency to get the details from PDF Documents for rendering. This section explains how to create the service for PDF Viewer to perform server-side preprocessing of the PDF document to be rendered in client side. +The Essential® JavaScript PDF Viewer have server side dependency to get the details from PDF Documents for rendering. This section explains how to create the service for PDF Viewer to perform server-side preprocessing of the PDF document to be rendered in client side. ## Prerequisites diff --git a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service.md b/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service.md index 901df2680..2bd96819f 100644 --- a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service.md +++ b/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## --- # Create pdfviewer service in ##Platform_Name## Pdfviewer control -The Essential JavaScript PDF Viewer have server side dependency to get the details from PDF Documents for rendering. This section explains how to create the service for PDF Viewer to perform server-side preprocessing of the PDF document to be rendered in client side. +The Essential® JavaScript PDF Viewer have server side dependency to get the details from PDF Documents for rendering. This section explains how to create the service for PDF Viewer to perform server-side preprocessing of the PDF document to be rendered in client side. ## Prerequisites diff --git a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-js.md b/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-js.md index 8ae1fe0f3..672833e5d 100644 --- a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-js.md +++ b/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-js.md @@ -9,11 +9,11 @@ domainurl: ##DomainURL## --- # To Change the Font Family -Change the Font Family in Type Signature of the Syncfusion PDF Viewer by adding a custom css stylesheet to the document , and then apply the desired font family to the type signature element. Include the Google font link in the HTML head section to apply the Google Font. +Change the Font Family in Type Signature of the Syncfusion® PDF Viewer by adding a custom css stylesheet to the document , and then apply the desired font family to the type signature element. Include the Google font link in the HTML head section to apply the Google Font. ### Signature Field property -The Syncfusion PDF Viewer provides the ability to change the font family for Signature and Initial Field using `typeSignatureFont` and `typeInitialFonts` property. +The Syncfusion® PDF Viewer provides the ability to change the font family for Signature and Initial Field using `typeSignatureFont` and `typeInitialFonts` property. **Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample. diff --git a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-ts.md b/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-ts.md index 8e732639d..07407d7af 100644 --- a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-ts.md +++ b/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-ts.md @@ -9,10 +9,10 @@ domainurl: ##DomainURL## --- # To Change the Font Family -Change the Font Family in Type Signature of the Syncfusion PDF Viewer by adding a custom css stylesheet to the document , and then apply the desired font family to the type signature element. Include the Google font link in the HTML head section to apply the Google Font. +Change the Font Family in Type Signature of the Syncfusion® PDF Viewer by adding a custom css stylesheet to the document , and then apply the desired font family to the type signature element. Include the Google font link in the HTML head section to apply the Google Font. ### Signature Field property -The Syncfusion PDF Viewer provides the ability to change the font family for Signature and Initial Field using `typeSignatureFonts` and `typeInitialFonts` property. +The Syncfusion® PDF Viewer provides the ability to change the font family for Signature and Initial Field using `typeSignatureFonts` and `typeInitialFonts` property. **Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample. diff --git a/ej2-javascript/pdfviewer/how-to/custom-fonts-ts.md b/ej2-javascript/pdfviewer/how-to/custom-fonts-ts.md index e406c23c8..9ebee963a 100644 --- a/ej2-javascript/pdfviewer/how-to/custom-fonts-ts.md +++ b/ej2-javascript/pdfviewer/how-to/custom-fonts-ts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # How to add custom fonts to the PDF viewer used in the PDF document -To use custom fonts in the Syncfusion PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the +To use custom fonts in the Syncfusion® PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the **customFonts** property, which accepts an array of font names. The following steps are used to customize the selection border. diff --git a/ej2-javascript/pdfviewer/how-to/custom-fonts.md b/ej2-javascript/pdfviewer/how-to/custom-fonts.md index ab2df424f..5c74d36ff 100644 --- a/ej2-javascript/pdfviewer/how-to/custom-fonts.md +++ b/ej2-javascript/pdfviewer/how-to/custom-fonts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # How to add custom fonts to the PDF viewer used in the PDF document -To use custom fonts in the Syncfusion PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the +To use custom fonts in the Syncfusion® PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the **customFonts** property, which accepts an array of font names. The following steps are used to customize the selection border. diff --git a/ej2-javascript/pdfviewer/how-to/customize-text-search-color.md b/ej2-javascript/pdfviewer/how-to/customize-text-search-color.md index c03117cab..463eda53e 100644 --- a/ej2-javascript/pdfviewer/how-to/customize-text-search-color.md +++ b/ej2-javascript/pdfviewer/how-to/customize-text-search-color.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Customize text search color in ##Platform_Name## Pdfviewer control -To change the text search color in the Syncfusion PDF viewer, you can use the **searchColor** property of the searchModule object. This property accepts a string value that represents the color in hexadecimal format. +To change the text search color in the Syncfusion® PDF viewer, you can use the **searchColor** property of the searchModule object. This property accepts a string value that represents the color in hexadecimal format. ```ts diff --git a/ej2-javascript/pdfviewer/how-to/customize-text-search-colors.md b/ej2-javascript/pdfviewer/how-to/customize-text-search-colors.md index 4546433d7..19e51edc7 100644 --- a/ej2-javascript/pdfviewer/how-to/customize-text-search-colors.md +++ b/ej2-javascript/pdfviewer/how-to/customize-text-search-colors.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Customize text search colors in ##Platform_Name## Pdfviewer control -To change the text search color in the Syncfusion PDF viewer, you can use the **searchColor** property of the searchModule object. This property accepts a string value that represents the color in hexadecimal format. +To change the text search color in the Syncfusion® PDF viewer, you can use the **searchColor** property of the searchModule object. This property accepts a string value that represents the color in hexadecimal format. ```javascript diff --git a/ej2-javascript/pdfviewer/how-to/disable-context-menu-option.md b/ej2-javascript/pdfviewer/how-to/disable-context-menu-option.md index a33cbc6d7..4b8877ec5 100644 --- a/ej2-javascript/pdfviewer/how-to/disable-context-menu-option.md +++ b/ej2-javascript/pdfviewer/how-to/disable-context-menu-option.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Disable context menu option in ##Platform_Name## Pdfviewer control -To disable the context menu in the Syncfusion PDF viewer control, you can use the [**ContextMenuOption**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#contextmenuoption) property as `'None'` to hide all context menu options. Default value of the **ContextMenuOption** is `'RightClick'`. +To disable the context menu in the Syncfusion® PDF viewer control, you can use the [**ContextMenuOption**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#contextmenuoption) property as `'None'` to hide all context menu options. Default value of the **ContextMenuOption** is `'RightClick'`. Here is an example of how you can use the **ContextMenuOption** to disable context menu in the PDF Viewer: diff --git a/ej2-javascript/pdfviewer/how-to/disable-context-menu.md b/ej2-javascript/pdfviewer/how-to/disable-context-menu.md index 6f9e97b5c..7aba2a647 100644 --- a/ej2-javascript/pdfviewer/how-to/disable-context-menu.md +++ b/ej2-javascript/pdfviewer/how-to/disable-context-menu.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Disable context menu in ##Platform_Name## Pdfviewer control -To disable the context menu in the Syncfusion PDF viewer control, you can use the [**ContextMenuOption**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#contextmenuoption) property as `'None'` to hide all context menu options. Default value of the **ContextMenuOption** is `'RightClick'`. +To disable the context menu in the Syncfusion® PDF viewer control, you can use the [**ContextMenuOption**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#contextmenuoption) property as `'None'` to hide all context menu options. Default value of the **ContextMenuOption** is `'RightClick'`. Here is an example of how you can use the **ContextMenuOption** to disable context menu in the PDF Viewer: diff --git a/ej2-javascript/pdfviewer/how-to/disable-tile-rendering.md b/ej2-javascript/pdfviewer/how-to/disable-tile-rendering.md index d01f8675f..e246ee4ff 100644 --- a/ej2-javascript/pdfviewer/how-to/disable-tile-rendering.md +++ b/ej2-javascript/pdfviewer/how-to/disable-tile-rendering.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Disable tile rendering in ##Platform_Name## Pdfviewer control -To disable the tile rendering feature in the Syncfusion PDF viewer control, you can use the **enableTileRendering** property. This property allows you to enable or disable the tile rendering feature, which is used to improve the performance of the PDF viewer when displaying large documents. +To disable the tile rendering feature in the Syncfusion® PDF viewer control, you can use the **enableTileRendering** property. This property allows you to enable or disable the tile rendering feature, which is used to improve the performance of the PDF viewer when displaying large documents. To disable the tile rendering feature, you can set the **enableTileRendering** property to `false`. diff --git a/ej2-javascript/pdfviewer/how-to/disable-tile-renderings.md b/ej2-javascript/pdfviewer/how-to/disable-tile-renderings.md index 196567008..47eb7e744 100644 --- a/ej2-javascript/pdfviewer/how-to/disable-tile-renderings.md +++ b/ej2-javascript/pdfviewer/how-to/disable-tile-renderings.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Disable tile renderings in ##Platform_Name## Pdfviewer control -To disable the tile rendering feature in the Syncfusion PDF viewer control, you can use the **enableTileRendering** property. This property allows you to enable or disable the tile rendering feature, which is used to improve the performance of the PDF viewer when displaying large documents. +To disable the tile rendering feature in the Syncfusion® PDF viewer control, you can use the **enableTileRendering** property. This property allows you to enable or disable the tile rendering feature, which is used to improve the performance of the PDF viewer when displaying large documents. To disable the tile rendering feature, you can set the **enableTileRendering** property to `false`. diff --git a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotation.md b/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotation.md index 5ce092fe5..a9888f3ba 100644 --- a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotation.md +++ b/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: Display custom tool tip for annotation in ##Platform_Name## Pdfviewer control | Syncfusion +title: Custom tooltip in ##Platform_Name## Pdfviewer control | Syncfusion description: Learn here all about Display custom tool tip for annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more. platform: ej2-javascript control: Display custom tool tip for annotation @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Display custom tool tip for annotation in ##Platform_Name## Pdfviewer control -To display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer, you can use the [**annotationMouseover**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and **annotationMouseLeave** events . +To display a custom tooltip for annotations using the mouseover event in the Syncfusion® PDF Viewer, you can use the [**annotationMouseover**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and **annotationMouseLeave** events . -Here is an example that demonstrates how to display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer: +Here is an example that demonstrates how to display a custom tooltip for annotations using the mouseover event in the Syncfusion® PDF Viewer: ```ts diff --git a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotations.md b/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotations.md index 02d193445..b92a68d01 100644 --- a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotations.md +++ b/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotations.md @@ -1,6 +1,6 @@ --- layout: post -title: Display custom tool tip for annotations in ##Platform_Name## Pdfviewer control | Syncfusion +title: Custom tooltip in ##Platform_Name## Pdfviewer control | Syncfusion description: Learn here all about Display custom tool tip for annotations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more. platform: ej2-javascript control: Display custom tool tip for annotations @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Display custom tool tip for annotations in ##Platform_Name## Pdfviewer control -To display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer, you can use the [**annotationMouseOver**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and **annotationMouseLeave** events . +To display a custom tooltip for annotations using the mouseover event in the Syncfusion® PDF Viewer, you can use the [**annotationMouseOver**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and **annotationMouseLeave** events . -Here is an example that demonstrates how to display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer: +Here is an example that demonstrates how to display a custom tooltip for annotations using the mouseover event in the Syncfusion® PDF Viewer: ```javascript diff --git a/ej2-javascript/pdfviewer/how-to/download-start-event-js.md b/ej2-javascript/pdfviewer/how-to/download-start-event-js.md index 54c3d985e..e673bba9a 100644 --- a/ej2-javascript/pdfviewer/how-to/download-start-event-js.md +++ b/ej2-javascript/pdfviewer/how-to/download-start-event-js.md @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Controlling File Downloads in Syncfusion PDF Viewer +# Controlling File Downloads in Syncfusion® PDF Viewer -In the Syncfusion PDF Viewer, we've introduced a new feature that enables you to manage file downloads more effectively. This feature allows you to intercept and potentially skip the download process of a PDF document, providing enhanced control over user interactions within your application. +In the Syncfusion® PDF Viewer, we've introduced a new feature that enables you to manage file downloads more effectively. This feature allows you to intercept and potentially skip the download process of a PDF document, providing enhanced control over user interactions within your application. ### Using the downloadStart Event diff --git a/ej2-javascript/pdfviewer/how-to/download-start-event-ts.md b/ej2-javascript/pdfviewer/how-to/download-start-event-ts.md index f6eaeb874..02714895f 100644 --- a/ej2-javascript/pdfviewer/how-to/download-start-event-ts.md +++ b/ej2-javascript/pdfviewer/how-to/download-start-event-ts.md @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Controlling File Downloads in Syncfusion PDF Viewer +# Controlling File Downloads in Syncfusion® PDF Viewer -In the Syncfusion PDF Viewer, we've introduced a new feature that enables you to manage file downloads more effectively. This feature allows you to intercept and potentially skip the download process of a PDF document, providing enhanced control over user interactions within your application. +In the Syncfusion® PDF Viewer, we've introduced a new feature that enables you to manage file downloads more effectively. This feature allows you to intercept and potentially skip the download process of a PDF document, providing enhanced control over user interactions within your application. ### Using the downloadStart Event diff --git a/ej2-javascript/pdfviewer/how-to/enable-local-storage-js.md b/ej2-javascript/pdfviewer/how-to/enable-local-storage-js.md index 130bad95d..146795843 100644 --- a/ej2-javascript/pdfviewer/how-to/enable-local-storage-js.md +++ b/ej2-javascript/pdfviewer/how-to/enable-local-storage-js.md @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Managing Local Storage in Syncfusion PDF Viewer +# Managing Local Storage in Syncfusion® PDF Viewer -The Syncfusion PDF Viewer provides the `enableLocalStorage` property, which allows you to control how session-specific data is stored. You can choose to store this data in an internal collection or rely on the default session storage. +The Syncfusion® PDF Viewer provides the `enableLocalStorage` property, which allows you to control how session-specific data is stored. You can choose to store this data in an internal collection or rely on the default session storage. ### Using the enableLocalStorage Property diff --git a/ej2-javascript/pdfviewer/how-to/enable-local-storage-ts.md b/ej2-javascript/pdfviewer/how-to/enable-local-storage-ts.md index 9c36b9197..c596412da 100644 --- a/ej2-javascript/pdfviewer/how-to/enable-local-storage-ts.md +++ b/ej2-javascript/pdfviewer/how-to/enable-local-storage-ts.md @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Managing Local Storage in Syncfusion PDF Viewer +# Managing Local Storage in Syncfusion® PDF Viewer -The Syncfusion PDF Viewer provides the `enableLocalStorage` property, which allows you to control how session-specific data is stored. You can choose to store this data in an internal collection or rely on the default session storage. +The Syncfusion® PDF Viewer provides the `enableLocalStorage` property, which allows you to control how session-specific data is stored. You can choose to store this data in an internal collection or rely on the default session storage. ### Using the enableLocalStorage Property diff --git a/ej2-javascript/pdfviewer/how-to/enable-resize-text.md b/ej2-javascript/pdfviewer/how-to/enable-resize-text.md index aad497a5a..303f529c8 100644 --- a/ej2-javascript/pdfviewer/how-to/enable-resize-text.md +++ b/ej2-javascript/pdfviewer/how-to/enable-resize-text.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Enable resize text in ##Platform_Name## Pdfviewer control -To enable the resizer for the text markup annotation in Syncfusion PDF viewer, you can use the [**enableTextMarkupResizer**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer) property. Default value of the property is false. +To enable the resizer for the text markup annotation in Syncfusion® PDF viewer, you can use the [**enableTextMarkupResizer**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer) property. Default value of the property is false. Here is an example of how you can enable the resizer for the text markup annotation: diff --git a/ej2-javascript/pdfviewer/how-to/enable-resize.md b/ej2-javascript/pdfviewer/how-to/enable-resize.md index dccbc17b6..ec1e623f2 100644 --- a/ej2-javascript/pdfviewer/how-to/enable-resize.md +++ b/ej2-javascript/pdfviewer/how-to/enable-resize.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Enable resize in ##Platform_Name## Pdfviewer control -To enable the resizer for the text markup annotation in Syncfusion PDF viewer, you can use the [**enableTextMarkupResizer**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer) property. Default value of the property is false. +To enable the resizer for the text markup annotation in Syncfusion® PDF viewer, you can use the [**enableTextMarkupResizer**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer) property. Default value of the property is false. Here is an example of how you can enable the resizer for the text markup annotation: diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-completed-js.md b/ej2-javascript/pdfviewer/how-to/extract-text-completed-js.md index 7ade17cd8..feadaf399 100644 --- a/ej2-javascript/pdfviewer/how-to/extract-text-completed-js.md +++ b/ej2-javascript/pdfviewer/how-to/extract-text-completed-js.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Extract text in ##Platform_Name## Pdfviewer control using extractTextCompleted event -To extract text in Syncfusion PDF viewer, you can use the [**isExtractText**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property and [**extractTextCompleted**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event.This allows you to extract the text from a page along with the bounds. +To extract text in Syncfusion® PDF viewer, you can use the [**isExtractText**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property and [**extractTextCompleted**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event.This allows you to extract the text from a page along with the bounds. Here is an example of how you can use the **isExtractText** property and **extractTextCompleted** event: diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-completed-ts.md b/ej2-javascript/pdfviewer/how-to/extract-text-completed-ts.md index 6bc192b0b..5b127e47a 100644 --- a/ej2-javascript/pdfviewer/how-to/extract-text-completed-ts.md +++ b/ej2-javascript/pdfviewer/how-to/extract-text-completed-ts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Extract text in ##Platform_Name## Pdfviewer control using extractTextCompleted event -To extract text in Syncfusion PDF viewer, you can use the [**isExtractText**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property and [**extractTextCompleted**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event.This allows you to extract the text from a page along with the bounds. +To extract text in Syncfusion® PDF viewer, you can use the [**isExtractText**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property and [**extractTextCompleted**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event.This allows you to extract the text from a page along with the bounds. Here is an example of how you can use the **isExtractText** property and **extractTextCompleted** event: diff --git a/ej2-javascript/pdfviewer/how-to/get-base64-js.md b/ej2-javascript/pdfviewer/how-to/get-base64-js.md index 3466d87fd..2df5c48be 100644 --- a/ej2-javascript/pdfviewer/how-to/get-base64-js.md +++ b/ej2-javascript/pdfviewer/how-to/get-base64-js.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### Overview -This guide demonstrates how to fetch the base64-encoded value of a PDF document loaded in the Syncfusion PDF Viewer using JavaScript. This is useful for sending the PDF as a base64 string or processing it in the front end. +This guide demonstrates how to fetch the base64-encoded value of a PDF document loaded in the Syncfusion® PDF Viewer using JavaScript. This is useful for sending the PDF as a base64 string or processing it in the front end. ### How to Retrieve Base64 Value @@ -58,6 +58,6 @@ function base64ofloadedDocument() { ``` ### Conclusion -By implementing these steps, you can convert a PDF document loaded in the Syncfusion PDF Viewer to a base64 string on button click, facilitating the manipulation or transfer of PDF data as needed. +By implementing these steps, you can convert a PDF document loaded in the Syncfusion® PDF Viewer to a base64 string on button click, facilitating the manipulation or transfer of PDF data as needed. [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/get-base64-ts.md b/ej2-javascript/pdfviewer/how-to/get-base64-ts.md index 900a075aa..ed77214ea 100644 --- a/ej2-javascript/pdfviewer/how-to/get-base64-ts.md +++ b/ej2-javascript/pdfviewer/how-to/get-base64-ts.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### Overview -This guide demonstrates how to fetch the base64-encoded value of a PDF document loaded in the Syncfusion PDF Viewer using Typescript. This is useful for sending the PDF as a base64 string or processing it in the front end. +This guide demonstrates how to fetch the base64-encoded value of a PDF document loaded in the Syncfusion® PDF Viewer using Typescript. This is useful for sending the PDF as a base64 string or processing it in the front end. ### How to Retrieve Base64 Value @@ -57,6 +57,6 @@ function base64ofloadedDocument() { ``` ### Conclusion -By implementing these steps, you can convert a PDF document loaded in the Syncfusion PDF Viewer to a base64 string on button click, facilitating the manipulation or transfer of PDF data as needed. +By implementing these steps, you can convert a PDF document loaded in the Syncfusion® PDF Viewer to a base64 string on button click, facilitating the manipulation or transfer of PDF data as needed. [View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/get-page-info-js.md b/ej2-javascript/pdfviewer/how-to/get-page-info-js.md index e71444ee1..b141b3976 100644 --- a/ej2-javascript/pdfviewer/how-to/get-page-info-js.md +++ b/ej2-javascript/pdfviewer/how-to/get-page-info-js.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Get Page Info ##Platform_Name## Pdfviewer control -The PDF Viewer library allows you to retrieves the information of a specified page in the viewer using the **getPageInfo()** method.This provides essential information such as the height, width and rotation. +The PDF Viewer library allows you to retrieves the information of a specified page in the viewer using the **getPageInfo()** method.This provides Essential® information such as the height, width and rotation. The following steps are used to getPageInfo. diff --git a/ej2-javascript/pdfviewer/how-to/get-page-info-ts.md b/ej2-javascript/pdfviewer/how-to/get-page-info-ts.md index f52bdf322..f9b9513cd 100644 --- a/ej2-javascript/pdfviewer/how-to/get-page-info-ts.md +++ b/ej2-javascript/pdfviewer/how-to/get-page-info-ts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Get Page Info ##Platform_Name## Pdfviewer control -The PDF Viewer library allows you to retrieves the information of a specified page in the viewer using the **getPageInfo()** method.This provides essential information such as the height, width and rotation. +The PDF Viewer library allows you to retrieves the information of a specified page in the viewer using the **getPageInfo()** method.This provides Essential® information such as the height, width and rotation. The following steps are used to getPageInfo. diff --git a/ej2-javascript/pdfviewer/how-to/images/pdfviewer-dependency.png b/ej2-javascript/pdfviewer/how-to/images/pdfviewer-dependency.png index 8de1ed0df..d06d76327 100644 Binary files a/ej2-javascript/pdfviewer/how-to/images/pdfviewer-dependency.png and b/ej2-javascript/pdfviewer/how-to/images/pdfviewer-dependency.png differ diff --git a/ej2-javascript/pdfviewer/how-to/import-annotation.md b/ej2-javascript/pdfviewer/how-to/import-annotation.md index dde45c4da..2b2f84e02 100644 --- a/ej2-javascript/pdfviewer/how-to/import-annotation.md +++ b/ej2-javascript/pdfviewer/how-to/import-annotation.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Import annotation in ##Platform_Name## Pdfviewer control -To import annotations into a Syncfusion PDF Viewer when loading a PDF document, you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method of the PDF Viewer. This method allows you to import annotations from a file or a string in the PDF Viewer. +To import annotations into a Syncfusion® PDF Viewer when loading a PDF document, you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method of the PDF Viewer. This method allows you to import annotations from a file or a string in the PDF Viewer. Here is an example of how you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method to import annotations when loading a PDF document: diff --git a/ej2-javascript/pdfviewer/how-to/import-annotations.md b/ej2-javascript/pdfviewer/how-to/import-annotations.md index 4ff5f082f..dd25e6d4b 100644 --- a/ej2-javascript/pdfviewer/how-to/import-annotations.md +++ b/ej2-javascript/pdfviewer/how-to/import-annotations.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Import annotations in ##Platform_Name## Pdfviewer control -To import annotations into a Syncfusion PDF Viewer when loading a PDF document, you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method of the PDF Viewer. This method allows you to import annotations from a file or a string in the PDF Viewer. +To import annotations into a Syncfusion® PDF Viewer when loading a PDF document, you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method of the PDF Viewer. This method allows you to import annotations from a file or a string in the PDF Viewer. Here is an example of how you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method to import annotations when loading a PDF document: diff --git a/ej2-javascript/pdfviewer/how-to/min-max-zoom-js.md b/ej2-javascript/pdfviewer/how-to/min-max-zoom-js.md index a9ed2be73..0843fe56a 100644 --- a/ej2-javascript/pdfviewer/how-to/min-max-zoom-js.md +++ b/ej2-javascript/pdfviewer/how-to/min-max-zoom-js.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Minimum and Maximum Zoom Properties -The Syncfusion PDF Viewer provides the ability to control zoom levels for viewing PDF documents. The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties enable developers to set the minimum and maximum zoom levels, ensuring a consistent and controlled viewing experience. +The Syncfusion® PDF Viewer provides the ability to control zoom levels for viewing PDF documents. The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties enable developers to set the minimum and maximum zoom levels, ensuring a consistent and controlled viewing experience. ### minZoom diff --git a/ej2-javascript/pdfviewer/how-to/min-max-zoom-ts.md b/ej2-javascript/pdfviewer/how-to/min-max-zoom-ts.md index 8d4e74c38..9c05a4644 100644 --- a/ej2-javascript/pdfviewer/how-to/min-max-zoom-ts.md +++ b/ej2-javascript/pdfviewer/how-to/min-max-zoom-ts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Minimum and Maximum Zoom Properties -The Syncfusion PDF Viewer provides the ability to control zoom levels for viewing PDF documents. The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties enable developers to set the minimum and maximum zoom levels, ensuring a consistent and controlled viewing experience. +The Syncfusion® PDF Viewer provides the ability to control zoom levels for viewing PDF documents. The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties enable developers to set the minimum and maximum zoom levels, ensuring a consistent and controlled viewing experience. ### minZoom diff --git a/ej2-javascript/pdfviewer/how-to/overlapped-annotation.md b/ej2-javascript/pdfviewer/how-to/overlapped-annotation.md index e94dd3537..c85815c3d 100644 --- a/ej2-javascript/pdfviewer/how-to/overlapped-annotation.md +++ b/ej2-javascript/pdfviewer/how-to/overlapped-annotation.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Overlapped annotation in ##Platform_Name## Pdfviewer control -To get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer, you can use the [**annotationCollection**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationcollection) property of [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.This event is triggered when the user clicks on an annotation in the PDF document. +To get the overlapped annotations on a mouse click in a Syncfusion® PDF Viewer, you can use the [**annotationCollection**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationcollection) property of [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.This event is triggered when the user clicks on an annotation in the PDF document. -Here is an example of how you can use the **annotationSelect** event to get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer: +Here is an example of how you can use the **annotationSelect** event to get the overlapped annotations on a mouse click in a Syncfusion® PDF Viewer: ```ts diff --git a/ej2-javascript/pdfviewer/how-to/overlapped-annotations.md b/ej2-javascript/pdfviewer/how-to/overlapped-annotations.md index 30f2d87bd..a41bc0918 100644 --- a/ej2-javascript/pdfviewer/how-to/overlapped-annotations.md +++ b/ej2-javascript/pdfviewer/how-to/overlapped-annotations.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Overlapped annotations in ##Platform_Name## Pdfviewer control -To get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer, you can use the [**annotationCollection**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationcollection) property of [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.This event is triggered when the user clicks on an annotation in the PDF document. +To get the overlapped annotations on a mouse click in a Syncfusion® PDF Viewer, you can use the [**annotationCollection**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationcollection) property of [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.This event is triggered when the user clicks on an annotation in the PDF document. -Here is an example of how you can use the [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event to get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer: +Here is an example of how you can use the [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event to get the overlapped annotations on a mouse click in a Syncfusion® PDF Viewer: ```javascript diff --git a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-js.md b/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-js.md index f767e0498..8ba3e1a17 100644 --- a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-js.md +++ b/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-js.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # PageRenderInitiate and PageRenderComplete event -In Syncfusion PDF Viewer, [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) actions are events that occur during the rendering process of PDF documents. +In Syncfusion® PDF Viewer, [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) actions are events that occur during the rendering process of PDF documents. **pageRenderInitiate** @@ -35,6 +35,6 @@ pdfviewer.pageRenderComplete = args => { }; ``` -The provided code demonstrates how to subscribe to the [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) events in the Syncfusion PDF Viewer component. +The provided code demonstrates how to subscribe to the [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) events in the Syncfusion® PDF Viewer component. [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/PageRenderStarted%20and%20PageRenderCompleted%20event) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-ts.md b/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-ts.md index 96c577690..af5d1c647 100644 --- a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-ts.md +++ b/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-ts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # PageRenderInitiate and pageRenderComplete event -In Syncfusion PDF Viewer, [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) actions are events that occur during the rendering process of PDF documents. +In Syncfusion® PDF Viewer, [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) actions are events that occur during the rendering process of PDF documents. **PageRenderInitiate** @@ -38,4 +38,4 @@ pdfviewer.pageRenderComplete = (args: any) => { ``` -The provided code demonstrates how to subscribe to the [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) events in the Syncfusion PDF Viewer component. \ No newline at end of file +The provided code demonstrates how to subscribe to the [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) events in the Syncfusion® PDF Viewer component. \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/resolve-unable-to-find-an-entry-point-error.md b/ej2-javascript/pdfviewer/how-to/resolve-unable-to-find-an-entry-point-error.md index 660e4b787..34d522da6 100644 --- a/ej2-javascript/pdfviewer/how-to/resolve-unable-to-find-an-entry-point-error.md +++ b/ej2-javascript/pdfviewer/how-to/resolve-unable-to-find-an-entry-point-error.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Resolve unable to find an entry point error in ##Platform_Name## Pdfviewer control -From the release of version **21.1.0.35 (2023 Volume 1)** of Essential Studio, the Pdfium package has been upgraded to improve various functionalities like text search, text selection, rendering, and even performance. If you are updating your project to this version of the Syncfusion PDF Viewer, you may encounter the **"Web-Service is not listening"** error. The Network tab can help you identify the root cause of the issue, which is typically caused by an old version of pdfium assembly being referenced in the local web service project. Below are the assemblies to be referred to in the respective operating systems. +From the release of version **21.1.0.35 (2023 Volume 1)** of Essential Studio®, the Pdfium package has been upgraded to improve various functionalities like text search, text selection, rendering, and even performance. If you are updating your project to this version of the Syncfusion® PDF Viewer, you may encounter the **"Web-Service is not listening"** error. The Network tab can help you identify the root cause of the issue, which is typically caused by an old version of pdfium assembly being referenced in the local web service project. Below are the assemblies to be referred to in the respective operating systems. * Windows – pdfium.dll * Linux – libpdfium.so diff --git a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md index 5cd2b40b8..7ed9e0f0f 100644 --- a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md +++ b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # How to Restrict Zoom Percentage on Mobile Devices -In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. +In Syncfusion® PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. {% tabs %} {% highlight js tabtitle="Standalone" %} diff --git a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md index 4bf63617b..52956f1ae 100644 --- a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md +++ b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # How to Restrict Zoom Percentage on Mobile Devices -In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. +In Syncfusion® PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices. {% tabs %} {% highlight ts tabtitle="Standalone" %} diff --git a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotation.md b/ej2-javascript/pdfviewer/how-to/select-multi-page-annotation.md index d45764b02..ac38e9a76 100644 --- a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotation.md +++ b/ej2-javascript/pdfviewer/how-to/select-multi-page-annotation.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Select multi page annotation in ##Platform_Name## Pdfviewer control -To select a multi-page TextMarkup annotation as a single annotation in a Syncfusion PDF viewer, you can use by enabling the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property. By default it is `false`. +To select a multi-page TextMarkup annotation as a single annotation in a Syncfusion® PDF viewer, you can use by enabling the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property. By default it is `false`. Here is an example of how you can use the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property to select the multi page TextMarkup annotation as a single annotation, export and import multi page annotation: diff --git a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotations.md b/ej2-javascript/pdfviewer/how-to/select-multi-page-annotations.md index 99bb5b954..7cb5efd84 100644 --- a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotations.md +++ b/ej2-javascript/pdfviewer/how-to/select-multi-page-annotations.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Select multi page annotations in ##Platform_Name## Pdfviewer control -To select a multi-page TextMarkup annotation as a single annotation in a Syncfusion PDF viewer, you can use by enabling the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property. By default it is `false`. +To select a multi-page TextMarkup annotation as a single annotation in a Syncfusion® PDF viewer, you can use by enabling the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property. By default it is `false`. Here is an example of how you can use the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property to select the multi page TextMarkup annotation as a single annotation, export and import multi page annotation: diff --git a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js.md b/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js.md index 841f379da..4b11e712f 100644 --- a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js.md +++ b/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # SignatureSelect and SignatureUnselect event -The Syncfusion PDF Viewer provides event-handling capabilities for various actions, including selecting and unselecting handwritten signatures. The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events enable developers to programmatically manage the selection state of signatures within the PDF Viewer component. +The Syncfusion® PDF Viewer provides event-handling capabilities for various actions, including selecting and unselecting handwritten signatures. The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events enable developers to programmatically manage the selection state of signatures within the PDF Viewer component. **signatureSelect** @@ -21,7 +21,7 @@ The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer The [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) event triggers when a handwritten signature annotation is unselected. This event enables developers to manage the unselection programmatically, which can be useful for tasks like cleanup operations or updating the application's state to reflect that a signature is no longer selected. -The code snippet demonstrates how to subscribe to the [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events in the Syncfusion PDF Viewer component. +The code snippet demonstrates how to subscribe to the [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events in the Syncfusion® PDF Viewer component. ```js pdfviewer.signatureSelect = (args: any) => { @@ -33,6 +33,6 @@ pdfviewer.signatureUnselect = (args: any) => { }; ``` -The `signatureSelect` and `signatureUnselect` events in Syncfusion PDF Viewer offer robust options for managing the state of handwritten signatures within your application. By handling these events, developers can create a more interactive and dynamic user experience, responding programmatically to signature selection and unselection. +The `signatureSelect` and `signatureUnselect` events in Syncfusion® PDF Viewer offer robust options for managing the state of handwritten signatures within your application. By handling these events, developers can create a more interactive and dynamic user experience, responding programmatically to signature selection and unselection. [View sample in GitHub]() \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-ts.md b/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-ts.md index 9d1722ecb..2f79662b9 100644 --- a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-ts.md +++ b/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-ts.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # SignatureSelect and SignatureUnselect event -The Syncfusion PDF Viewer provides event-handling capabilities for various actions, including selecting and unselecting handwritten signatures. The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events enable developers to programmatically manage the selection state of signatures within the PDF Viewer component. +The Syncfusion® PDF Viewer provides event-handling capabilities for various actions, including selecting and unselecting handwritten signatures. The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events enable developers to programmatically manage the selection state of signatures within the PDF Viewer component. **signatureSelect** @@ -21,7 +21,7 @@ The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer The [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) event triggers when a handwritten signature annotation is unselected. This event enables developers to manage the unselection programmatically, which can be useful for tasks like cleanup operations or updating the application's state to reflect that a signature is no longer selected. -The code snippet demonstrates how to subscribe to the [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events in the Syncfusion PDF Viewer component. +The code snippet demonstrates how to subscribe to the [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events in the Syncfusion® PDF Viewer component. ```ts @@ -35,6 +35,6 @@ pdfviewer.signatureUnselect = (args: any) => { ``` -The `signatureSelect` and `signatureUnselect` events in Syncfusion PDF Viewer offer robust options for managing the state of handwritten signatures within your application. By handling these events, developers can create a more interactive and dynamic user experience, responding programmatically to signature selection and unselection. +The `signatureSelect` and `signatureUnselect` events in Syncfusion® PDF Viewer offer robust options for managing the state of handwritten signatures within your application. By handling these events, developers can create a more interactive and dynamic user experience, responding programmatically to signature selection and unselection. [View sample in GitHub]() \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/how-to/use-local-script-and-style-references.md b/ej2-javascript/pdfviewer/how-to/use-local-script-and-style-references.md index 8a5bc398c..07d241206 100644 --- a/ej2-javascript/pdfviewer/how-to/use-local-script-and-style-references.md +++ b/ej2-javascript/pdfviewer/how-to/use-local-script-and-style-references.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Use local script and style references in ##Platform_Name## Pdfviewer control -**Step 1:** Create an app folder `myapp` for Essential JS 2 JavaScript components. +**Step 1:** Create an app folder `myapp` for Essential® JS 2 JavaScript components. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2/) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2/) build installed location. **Syntax:** > Script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/{PACKAGE_NAME}.min.js` @@ -25,7 +25,7 @@ domainurl: ##DomainURL## > > Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/19.3.53/Web(Essential JS 2)/JavaScript/ej2-js-es5/styles/material.css` -You can also clone the [`Essential JS 2 quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project and install necessary packages by using the following commands. +You can also clone the [Essential® JS 2 quickstart](https://github.com/syncfusion/ej2-quickstart.git) project and install necessary packages by using the following commands. ``` git clone https://github.com/syncfusion/ej2-quickstart.git quickstart @@ -35,7 +35,7 @@ npm install **Step 3:** Create a folder `myapp/resources` and copy/paste the scripts and styles of ej2 package from the above installed location to `myapp/resources` location. -**Step 4:** Add the `Div` element and initiate the `Essential JS 2 PDF Viewer` component with script and style references in the `index.html` by using following code +**Step 4:** Add the `Div` element and initiate the **Essential® JS 2 PDF Viewer** component with script and style references in the `index.html` by using following code ```html @@ -67,6 +67,6 @@ npm install ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential JS 2 PDF Viewer** component as below. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 PDF Viewer** component as below. ![JavaScript Output](../../pdfviewer/images/javascript_output.png) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/js/accessibility.md b/ej2-javascript/pdfviewer/js/accessibility.md index 15556ce5b..c1b84d7b0 100644 --- a/ej2-javascript/pdfviewer/js/accessibility.md +++ b/ej2-javascript/pdfviewer/js/accessibility.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Accessibility in Syncfusion PDF Viewer components +# Accessibility in Syncfusion® PDF Viewer components The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. @@ -289,4 +289,4 @@ The accessibility compliance of the PDF Viewer component is shown in the followi ## See also -* [Accessibility in Syncfusion EJ2 JavaScript components](../common/accessibility) +* [Accessibility in Syncfusion® EJ2 JavaScript components](../common/accessibility) diff --git a/ej2-javascript/pdfviewer/js/annotations/free-text-annotation.md b/ej2-javascript/pdfviewer/js/annotations/free-text-annotation.md index fc60ac13d..31867c78f 100644 --- a/ej2-javascript/pdfviewer/js/annotations/free-text-annotation.md +++ b/ej2-javascript/pdfviewer/js/annotations/free-text-annotation.md @@ -145,7 +145,7 @@ if (addFreeTextAnnotation) { ## Change the content of an existing Free text annotation programmatically -To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To change the content of an existing free text annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation: diff --git a/ej2-javascript/pdfviewer/js/annotations/ink-annotation.md b/ej2-javascript/pdfviewer/js/annotations/ink-annotation.md index eafee4580..fe00d1369 100644 --- a/ej2-javascript/pdfviewer/js/annotations/ink-annotation.md +++ b/ej2-javascript/pdfviewer/js/annotations/ink-annotation.md @@ -141,7 +141,7 @@ if (addInkAnnotation) { ## Edit the existing Ink annotation programmatically -To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing Ink annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/js/annotations/measurement-annotation.md b/ej2-javascript/pdfviewer/js/annotations/measurement-annotation.md index 8c7e1cb7b..29f39b4b7 100644 --- a/ej2-javascript/pdfviewer/js/annotations/measurement-annotation.md +++ b/ej2-javascript/pdfviewer/js/annotations/measurement-annotation.md @@ -254,7 +254,7 @@ if (addVolumeAnnotation) { ## Edit the existing measurement annotation programmatically -To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing measurement annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/js/annotations/shape-annotation.md b/ej2-javascript/pdfviewer/js/annotations/shape-annotation.md index 4898eaa8b..b46ab2aa1 100644 --- a/ej2-javascript/pdfviewer/js/annotations/shape-annotation.md +++ b/ej2-javascript/pdfviewer/js/annotations/shape-annotation.md @@ -257,7 +257,7 @@ if (addPolygonAnnotation) { ## Edit the existing shape annotation programmatically -To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing shape annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/js/annotations/stamp-annotation.md b/ej2-javascript/pdfviewer/js/annotations/stamp-annotation.md index eac9c3d34..ebd07763a 100644 --- a/ej2-javascript/pdfviewer/js/annotations/stamp-annotation.md +++ b/ej2-javascript/pdfviewer/js/annotations/stamp-annotation.md @@ -285,7 +285,7 @@ if (customStamp) { ## Edit the existing sticky note annotation programmatically -To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing sticky note annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/js/annotations/sticky-notes-annotation.md b/ej2-javascript/pdfviewer/js/annotations/sticky-notes-annotation.md index 13a78a281..99853ecb9 100644 --- a/ej2-javascript/pdfviewer/js/annotations/sticky-notes-annotation.md +++ b/ej2-javascript/pdfviewer/js/annotations/sticky-notes-annotation.md @@ -97,7 +97,7 @@ if (stickyNote) { ## Edit the existing sticky note annotation programmatically -To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing sticky note annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/js/ej1-api-migration.md b/ej2-javascript/pdfviewer/js/ej1-api-migration.md index 9089193be..bf16e0234 100644 --- a/ej2-javascript/pdfviewer/js/ej1-api-migration.md +++ b/ej2-javascript/pdfviewer/js/ej1-api-migration.md @@ -11,13 +11,13 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Pdfviewer control -This article describes API migration process of PDF Viewer component from Essential JS 1 to Essential JS 2. +This article describes API migration process of PDF Viewer component from Essential® JS 1 to Essential® JS 2. ## Properties -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | |---|---|---| | Localization | **Property**: *locale*
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', locale:"es-ES" });` | **Property**: *locale*
`var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print); pdfviewer.appendTo('#PdfViewer');`| |To set the PDF document path for initial loading | **Property**: *documentPath*
`$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentPath: "HTTP Succinctly.pdf" });` | **Property**: *documentPath*
`var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "PDF_Succinctly.pdf", serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| @@ -41,7 +41,7 @@ This article describes API migration process of PDF Viewer component from Essent -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Downloads the PDF document being loaded in the ejPdfViewer control | **Property**: *download()*
`var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.download();` | **Property**: *download()*
`var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.download();`| | Scales the page to fit the page in the container in the control | **Property**: *fitToPage()*
`var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.fitToPage();` | **Property**: *fitToPage()*
`var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.magnification.fitToPage();`| @@ -68,7 +68,7 @@ This article describes API migration process of PDF Viewer component from Essent -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | |Triggers when the PDF document gets loaded and is ready to view in the Control| **Property**: *documentLoad*
`$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentLoad:"documentLoaded" });});function documentLoaded(args) {alert("The document" +args.fileName + "is ready to view");}` | **Property**: *documentLoad*
`var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',documentLoad: function () {alert("The PDF document is Loaded")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| |Triggers when hyperlink in the PDF document is clicked| **Property**: *hyperlinkClick*
`$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', hyperlinkClick:"onHyperlinkClicked" });});function onHyperlinkClicked(args) {alert(""The hyperlink is " + args.hyperlink");}` | **Property**: *hyperlinkClick*
`var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',hyperlinkClick: function () {alert("The hyperlink is clicked")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`| diff --git a/ej2-javascript/pdfviewer/js/form-designer/create-programmatically.md b/ej2-javascript/pdfviewer/js/form-designer/create-programmatically.md index 0a117ca75..93f3376b6 100644 --- a/ej2-javascript/pdfviewer/js/form-designer/create-programmatically.md +++ b/ej2-javascript/pdfviewer/js/form-designer/create-programmatically.md @@ -173,7 +173,7 @@ document.getElementById('print').addEventListener('click', function () { ## setFormFieldMode programmatically -The **setFormFieldMode** method is a function in the Syncfusion PDF Viewer library that allows you to add a form field dynamically by passing the type of the form field. You can pass the form fields as a parameter like below. +The **setFormFieldMode** method is a function in the Syncfusion® PDF Viewer library that allows you to add a form field dynamically by passing the type of the form field. You can pass the form fields as a parameter like below. ``` @@ -385,7 +385,7 @@ document.getElementById('importData').addEventListener('click', ()=> { ``` ## Form field properties -Form field properties in Syncfusion PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion PDF Viewer and explains how to use them effectively. +Form field properties in Syncfusion® PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion® PDF Viewer and explains how to use them effectively. * Textbox * Password diff --git a/ej2-javascript/pdfviewer/js/getting-started-with-server-backed.md b/ej2-javascript/pdfviewer/js/getting-started-with-server-backed.md index 0374caf7a..e9f40665c 100644 --- a/ej2-javascript/pdfviewer/js/getting-started-with-server-backed.md +++ b/ej2-javascript/pdfviewer/js/getting-started-with-server-backed.md @@ -11,13 +11,13 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## PDF Viewer control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Component Initialization with CDN link for script and style reference -**Step 1:** Create an app folder `my_app` for the Essential JS 2 JavaScript components. +**Step 1:** Create an app folder `my_app` for the Essential® JS 2 JavaScript components. -**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 component's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js` @@ -29,7 +29,7 @@ The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaS > > Styles: [`https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `my_app` location and add the CDN link references. Now, add the `Div` element and initiate the `Essential JS 2 PDF Viewer` component in the index.html by using following code. +**Step 3:** Create a HTML page (index.html) in `my_app` location and add the CDN link references. Now, add the `Div` element and initiate the **Essential® JS 2 PDF Viewer** component in the index.html by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -49,7 +49,7 @@ N> The Web API hosted link https://services.syncfusion.com/js/production/api/pdf {% previewsample "page.domainurl/code-snippet/pdfviewer/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 PDF Viewer` component. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 PDF Viewer** component. > For PDF Viewer serviceUrl creation, follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service/) @@ -78,7 +78,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ }); ``` -N> When configuring the server-backed PDF viewer, it's essential to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context. +N> When configuring the server-backed PDF viewer, it's Essential® to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context. N> For hosting the web service on the Linux platform, ensure to include the [SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/2.88.6). Additionally, for AWS environments, utilize the following packages: diff --git a/ej2-javascript/pdfviewer/js/getting-started.md b/ej2-javascript/pdfviewer/js/getting-started.md index 789a4d892..80cb72918 100644 --- a/ej2-javascript/pdfviewer/js/getting-started.md +++ b/ej2-javascript/pdfviewer/js/getting-started.md @@ -11,13 +11,13 @@ domainurl: ##DomainURL## # Getting started in Standalone PDF Viewer control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Component Initialization with CDN link for script and style reference -**Step 1:** Create an app folder `my-app` for the Essential JS 2 JavaScript components. +**Step 1:** Create an app folder `my-app` for the Essential® JS 2 JavaScript components. -**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 component's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js` @@ -30,7 +30,7 @@ The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaS > Styles: [`https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `my-app` location and add the CDN link references. Now, add the `Div` element and initiate the `Essential JS 2 PDF Viewer` component in the index.html by using following code. +**Step 3:** Create a HTML page (index.html) in `my-app` location and add the CDN link references. Now, add the `Div` element and initiate the **Essential® JS 2 PDF Viewer** component in the index.html by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -40,7 +40,6 @@ The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaS {% previewsample "page.domainurl/code-snippet/pdfviewer/es5-getting-started-cs2" %} - ### Steps to Load PDF Viewer with Local Resources To use local resources with your PDF Viewer, follow these steps: @@ -68,4 +67,4 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({ View the sample in GitHub to [load PDF Viewer with local resources](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally) -**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 PDF Viewer` component. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 PDF Viewer** component. diff --git a/ej2-javascript/pdfviewer/js/mobile-toolbar.md b/ej2-javascript/pdfviewer/js/mobile-toolbar.md index 4ac911a83..ded248f49 100644 --- a/ej2-javascript/pdfviewer/js/mobile-toolbar.md +++ b/ej2-javascript/pdfviewer/js/mobile-toolbar.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## --- # Mobile Toolbar Interface in ##Platform_Name## Pdfviewer control -The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions. +The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes Essential® tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions. ## Mobile Mode Toolbar Configuration In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode: diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-amazon-s3.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-amazon-s3.md index 68b99aaad..1b5a6b44b 100644 --- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-amazon-s3.md +++ b/ej2-javascript/pdfviewer/js/open-pdf-file/from-amazon-s3.md @@ -41,7 +41,7 @@ AWS.config.update({ }); ``` -3. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method. +3. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer then load Base64 string generated into the viewer.load method. N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-active-directory.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-active-directory.md index 3b1610c4b..6d2112168 100644 --- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-active-directory.md +++ b/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-active-directory.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### **Overview** -The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. +The Syncfusion® PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. ### **Steps to Open the PDF File from Azure Active Directory** @@ -95,7 +95,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az ### **Step 6: Client-Side Configuration** 1. **Run the JS Sample**: - - Start the JS sample that includes the Syncfusion PDF Viewer. + - Start the JS sample that includes the Syncfusion® PDF Viewer. 2. **Load PDF from AAD**: - When the user clicks the **Load from AAD** button, the JS client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-active-directory.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-active-directory.md index 7320f2b8c..7adcf0811 100644 --- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-active-directory.md +++ b/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-active-directory.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### **Overview** -The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. +The Syncfusion® PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. ### **Steps to Open the PDF File from Azure Active Directory** @@ -95,7 +95,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az ### **Step 6: Client-Side Configuration** 1. **Run the JS Sample**: - - Start the JS sample that includes the Syncfusion PDF Viewer. + - Start the JS sample that includes the Syncfusion® PDF Viewer. 2. **Load PDF from AAD**: - When the user clicks the **Load from AAD** button, the JS client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. diff --git a/ej2-javascript/pdfviewer/js/toolbar.md b/ej2-javascript/pdfviewer/js/toolbar.md index 44a3f783c..89e909676 100644 --- a/ej2-javascript/pdfviewer/js/toolbar.md +++ b/ej2-javascript/pdfviewer/js/toolbar.md @@ -256,7 +256,7 @@ The prefix property is used to set the CSS class or icon that should be added as The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. -These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of Syncfusion® PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item. N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. diff --git a/ej2-javascript/pdfviewer/js/troubleshooting/content-security-policy.md b/ej2-javascript/pdfviewer/js/troubleshooting/content-security-policy.md index 6df2767b0..a734f3d60 100644 --- a/ej2-javascript/pdfviewer/js/troubleshooting/content-security-policy.md +++ b/ej2-javascript/pdfviewer/js/troubleshooting/content-security-policy.md @@ -12,9 +12,9 @@ documentation: ug Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page. -To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag. +To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion® PDF Viewer control with strict CSP mode, it is Essential® to include following directives in the CSP meta tag. -* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'unsafe-inline';`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows. +* Syncfusion® PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'unsafe-inline';`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows. {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -26,9 +26,9 @@ To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs {% endhighlight %} {% endtabs %} -* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto’s external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag. +* Syncfusion® **material** and **tailwind** built-in themes contain a reference to the [`Roboto’s external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag. -The resultant meta tag is included within the `` tag and resolves the CSP violation on the application's side when utilizing Syncfusion PDF Viewer control with material and tailwind themes. +The resultant meta tag is included within the `` tag and resolves the CSP violation on the application's side when utilizing Syncfusion® PDF Viewer control with material and tailwind themes. {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -43,7 +43,7 @@ The resultant meta tag is included within the `` tag and resolves the CSP {% endhighlight %} {% endtabs %} -* Syncfusion PDF Viewer control when images are added as **blob** and **base64**, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the img-src data: directive in the meta tag. To allow them, add the [`style-src 'self' 'unsafe-inline';`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`img-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directives as follows. +* Syncfusion® PDF Viewer control when images are added as **blob** and **base64**, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the img-src data: directive in the meta tag. To allow them, add the [`style-src 'self' 'unsafe-inline';`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`img-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directives as follows. {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -57,6 +57,6 @@ The resultant meta tag is included within the `` tag and resolves the CSP {% endhighlight %} {% endtabs %} -N> From the release 2023 Vol2 - 22.1 version, the Content Security Policy for Syncfusion PDF Viewer control has been enhanced by implementing a [function template](../template#function-template) approach for template properties to eliminate the usage of the `unsafe-eval` directive in the CSP meta tag. +N> From the release 2023 Vol2 - 22.1 version, the Content Security Policy for Syncfusion® PDF Viewer control has been enhanced by implementing a [function template](../template#function-template) approach for template properties to eliminate the usage of the `unsafe-eval` directive in the CSP meta tag. [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Troubleshooting/Content%20Security%20Policy) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/js/troubleshooting/document-loading-issues.md b/ej2-javascript/pdfviewer/js/troubleshooting/document-loading-issues.md index 5e2f616c8..c7fdd8ef3 100644 --- a/ej2-javascript/pdfviewer/js/troubleshooting/document-loading-issues.md +++ b/ej2-javascript/pdfviewer/js/troubleshooting/document-loading-issues.md @@ -12,7 +12,7 @@ documentation: ug If you're experiencing problems with your document not rendering in the viewer, especially when using version 23.1 or a newer version, follow these troubleshooting steps to resolve the issue: -1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is essential for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load. +1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is Essential® for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load. ```javascript var viewer = new ej.pdfviewer.PdfViewer ({ diff --git a/ej2-javascript/pdfviewer/server-deployment/pdfviewer-server-docker-image-overview.md b/ej2-javascript/pdfviewer/server-deployment/pdfviewer-server-docker-image-overview.md index 21e0edeca..d535182d8 100644 --- a/ej2-javascript/pdfviewer/server-deployment/pdfviewer-server-docker-image-overview.md +++ b/ej2-javascript/pdfviewer/server-deployment/pdfviewer-server-docker-image-overview.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## --- # Pdfviewer server docker image overview in ##Platform_Name## Pdfviewer control -The Syncfusion PDF Viewer control allows you to view, print, form-fill, and annotate PDF files in your web applications. This PDF Viewer control requires a server-side backend Web API service to render PDF contents. +The Syncfusion® PDF Viewer control allows you to view, print, form-fill, and annotate PDF files in your web applications. This PDF Viewer control requires a server-side backend Web API service to render PDF contents. This Docker image is the predefined Docker container of Syncfusion’s PDF Viewer backend. You can deploy it quickly to your infrastructure. diff --git a/ej2-javascript/pdfviewer/ts/accessibility.md b/ej2-javascript/pdfviewer/ts/accessibility.md index 09a092f70..ee2ae88d5 100644 --- a/ej2-javascript/pdfviewer/ts/accessibility.md +++ b/ej2-javascript/pdfviewer/ts/accessibility.md @@ -9,7 +9,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Accessibility in Syncfusion PDF Viewer components +# Accessibility in Syncfusion® PDF Viewer components The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. @@ -282,4 +282,4 @@ The accessibility compliance of the PDF Viewer component is shown in the followi ## See also -* [Accessibility in Syncfusion EJ2 JavaScript components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® EJ2 JavaScript components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/pdfviewer/ts/annotations/free-text-annotation.md b/ej2-javascript/pdfviewer/ts/annotations/free-text-annotation.md index 1a3974620..f2e30458f 100644 --- a/ej2-javascript/pdfviewer/ts/annotations/free-text-annotation.md +++ b/ej2-javascript/pdfviewer/ts/annotations/free-text-annotation.md @@ -153,7 +153,7 @@ if (addFreeTextAnnotation) { ## Change the content of an existing Free text annotation programmatically -To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To change the content of an existing free text annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation: diff --git a/ej2-javascript/pdfviewer/ts/annotations/ink-annotation.md b/ej2-javascript/pdfviewer/ts/annotations/ink-annotation.md index 46085699b..10385e319 100644 --- a/ej2-javascript/pdfviewer/ts/annotations/ink-annotation.md +++ b/ej2-javascript/pdfviewer/ts/annotations/ink-annotation.md @@ -140,7 +140,7 @@ if (addInkAnnotation) { ## Edit the existing Ink annotation programmatically -To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing Ink annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/ts/annotations/measurement-annotation.md b/ej2-javascript/pdfviewer/ts/annotations/measurement-annotation.md index b27b61081..07044110d 100644 --- a/ej2-javascript/pdfviewer/ts/annotations/measurement-annotation.md +++ b/ej2-javascript/pdfviewer/ts/annotations/measurement-annotation.md @@ -266,7 +266,7 @@ if (addVolumeAnnotation) { ## Edit the existing measurement annotation programmatically -To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing measurement annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/ts/annotations/shape-annotation.md b/ej2-javascript/pdfviewer/ts/annotations/shape-annotation.md index 4ce118aa9..617b563a3 100644 --- a/ej2-javascript/pdfviewer/ts/annotations/shape-annotation.md +++ b/ej2-javascript/pdfviewer/ts/annotations/shape-annotation.md @@ -270,7 +270,7 @@ if (addPolygonAnnotation) { ## Edit the existing shape annotation programmatically -To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing shape annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/ts/annotations/stamp-annotation.md b/ej2-javascript/pdfviewer/ts/annotations/stamp-annotation.md index b35828009..3b2c63d59 100644 --- a/ej2-javascript/pdfviewer/ts/annotations/stamp-annotation.md +++ b/ej2-javascript/pdfviewer/ts/annotations/stamp-annotation.md @@ -314,7 +314,7 @@ if (customStamp) { ## Edit the existing sticky note annotation programmatically -To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing sticky note annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/ts/annotations/sticky-notes-annotation.md b/ej2-javascript/pdfviewer/ts/annotations/sticky-notes-annotation.md index d634bf4b6..4e0e707b6 100644 --- a/ej2-javascript/pdfviewer/ts/annotations/sticky-notes-annotation.md +++ b/ej2-javascript/pdfviewer/ts/annotations/sticky-notes-annotation.md @@ -99,7 +99,7 @@ if (stickyNote) { ## Edit the existing sticky note annotation programmatically -To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method. +To modify existing sticky note annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method. Here is an example of how you can use the **editAnnotation()** method: diff --git a/ej2-javascript/pdfviewer/ts/form-designer/create-programmatically.md b/ej2-javascript/pdfviewer/ts/form-designer/create-programmatically.md index 14d81565c..d96a8752c 100644 --- a/ej2-javascript/pdfviewer/ts/form-designer/create-programmatically.md +++ b/ej2-javascript/pdfviewer/ts/form-designer/create-programmatically.md @@ -360,7 +360,7 @@ pdfviewer.print.print(); ## setFormFieldMode programmatically -The **setFormFieldMode** method is a function in the Syncfusion PDF Viewer library that allows you to add a form field dynamically by passing the type of the form field. You can pass the form fields as a parameter like below. +The **setFormFieldMode** method is a function in the Syncfusion® PDF Viewer library that allows you to add a form field dynamically by passing the type of the form field. You can pass the form fields as a parameter like below. ``` @@ -587,7 +587,7 @@ document.getElementById('importData').addEventListener('click', ()=> { ``` ## Form field properties -Form field properties in Syncfusion PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion PDF Viewer and explains how to use them effectively. +Form field properties in Syncfusion® PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion® PDF Viewer and explains how to use them effectively. * Textbox * Password diff --git a/ej2-javascript/pdfviewer/ts/getting-started-with-server-backed.md b/ej2-javascript/pdfviewer/ts/getting-started-with-server-backed.md index 61c97495b..f5504a479 100644 --- a/ej2-javascript/pdfviewer/ts/getting-started-with-server-backed.md +++ b/ej2-javascript/pdfviewer/ts/getting-started-with-server-backed.md @@ -11,13 +11,13 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## PDF Viewer control -This section briefly explains how to create **PDF Viewer** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create **PDF Viewer** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -37,9 +37,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -51,7 +51,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles Add the components CSS in the `~/src/styles/styles.css` file, as shown below: @@ -207,7 +207,7 @@ pdfviewer.load('PDF_Succinctly.pdf', null); {% endhighlight %} {% endtabs %} -N> When configuring the server-backed PDF viewer, it's essential to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context. +N> When configuring the server-backed PDF viewer, it's Essential® to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context. > You can refer to our [JavaScript PDF Viewer](https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript PDF Viewer example](https://ej2.syncfusion.com/demos/#/material/pdfviewer/default.html) to understand how to explains core features of PDF Viewer. diff --git a/ej2-javascript/pdfviewer/ts/getting-started.md b/ej2-javascript/pdfviewer/ts/getting-started.md index d85fe7b37..ce834d180 100644 --- a/ej2-javascript/pdfviewer/ts/getting-started.md +++ b/ej2-javascript/pdfviewer/ts/getting-started.md @@ -11,13 +11,13 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## PDF Viewer control -This section briefly explains how to create **PDF Viewer** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section briefly explains how to create **PDF Viewer** component and configure its available functionalities in TypeScript using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -37,9 +37,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -51,7 +51,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles Add the components CSS in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/pdfviewer/ts/mobile-toolbar.md b/ej2-javascript/pdfviewer/ts/mobile-toolbar.md index 3ef70c97e..65fc48a46 100644 --- a/ej2-javascript/pdfviewer/ts/mobile-toolbar.md +++ b/ej2-javascript/pdfviewer/ts/mobile-toolbar.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## --- # Mobile Toolbar Interface in ##Platform_Name## Pdfviewer control -The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions. +The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes Essential® tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions. ## Mobile Mode Toolbar Configuration In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode: diff --git a/ej2-javascript/pdfviewer/ts/open-pdf-file/from-amazon-s3.md b/ej2-javascript/pdfviewer/ts/open-pdf-file/from-amazon-s3.md index 400a24bed..a0bbe611f 100644 --- a/ej2-javascript/pdfviewer/ts/open-pdf-file/from-amazon-s3.md +++ b/ej2-javascript/pdfviewer/ts/open-pdf-file/from-amazon-s3.md @@ -41,7 +41,7 @@ AWS.config.update({ }); ``` -3. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method. +3. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer then load Base64 string generated into the viewer.load method. N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. diff --git a/ej2-javascript/pdfviewer/ts/open-pdf-file/from-azure-active-directory.md b/ej2-javascript/pdfviewer/ts/open-pdf-file/from-azure-active-directory.md index 1be036745..e20a2ff92 100644 --- a/ej2-javascript/pdfviewer/ts/open-pdf-file/from-azure-active-directory.md +++ b/ej2-javascript/pdfviewer/ts/open-pdf-file/from-azure-active-directory.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### **Overview** -The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. +The Syncfusion® PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. ### **Steps to Open the PDF File from Azure Active Directory** @@ -95,7 +95,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az ### **Step 6: Client-Side Configuration** 1. **Run the TS Sample**: - - Start the TS sample that includes the Syncfusion PDF Viewer. + - Start the TS sample that includes the Syncfusion® PDF Viewer. 2. **Load PDF from AAD**: - When the user clicks the **Load from AAD** button, the JS client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. diff --git a/ej2-javascript/pdfviewer/ts/save-pdf-file/to-azure-active-directory.md b/ej2-javascript/pdfviewer/ts/save-pdf-file/to-azure-active-directory.md index 48cbf4113..2fe31e081 100644 --- a/ej2-javascript/pdfviewer/ts/save-pdf-file/to-azure-active-directory.md +++ b/ej2-javascript/pdfviewer/ts/save-pdf-file/to-azure-active-directory.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ### **Overview** -The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. +The Syncfusion® PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. ### **Steps to Open the PDF File from Azure Active Directory** @@ -95,7 +95,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az ### **Step 6: Client-Side Configuration** 1. **Run the TS Sample**: - - Start the TS sample that includes the Syncfusion PDF Viewer. + - Start the TS sample that includes the Syncfusion® PDF Viewer. 2. **Load PDF from AAD**: - When the user clicks the **Load from AAD** button, the JS client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. diff --git a/ej2-javascript/pdfviewer/ts/toolbar.md b/ej2-javascript/pdfviewer/ts/toolbar.md index fc090cb60..9f2b3000b 100644 --- a/ej2-javascript/pdfviewer/ts/toolbar.md +++ b/ej2-javascript/pdfviewer/ts/toolbar.md @@ -452,7 +452,7 @@ The prefix property is used to set the CSS class or icon that should be added as The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. -These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of Syncfusion® PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item. N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. diff --git a/ej2-javascript/pdfviewer/ts/troubleshooting/document-loading-issues.md b/ej2-javascript/pdfviewer/ts/troubleshooting/document-loading-issues.md index f9d11cfb5..0a92ea748 100644 --- a/ej2-javascript/pdfviewer/ts/troubleshooting/document-loading-issues.md +++ b/ej2-javascript/pdfviewer/ts/troubleshooting/document-loading-issues.md @@ -12,7 +12,7 @@ documentation: ug If you're experiencing problems with your document not rendering in the viewer, especially when using version 23.1 or a newer version, follow these troubleshooting steps to resolve the issue: -1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is essential for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load. +1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is Essential® for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load. ```ts import { PdfViewer, Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, diff --git a/ej2-javascript/pivotview/globalization-and-localization.md b/ej2-javascript/pivotview/globalization-and-localization.md index d578a9a86..e39cfdf9c 100644 --- a/ej2-javascript/pivotview/globalization-and-localization.md +++ b/ej2-javascript/pivotview/globalization-and-localization.md @@ -17,7 +17,7 @@ Globalization is the combination of Internationalization and localization. You c Internationalization library provides support for formatting and parsing the number, date, and time by using the official [`Unicode CLDR`](http://cldr.unicode.org/) JSON data and also provides the `loadCldr` method to load the culture specific CLDR JSON data. -By default, all the Essential JS 2 component are specific to English culture ('en-US'). If you want to go with the different culture other than English, follow the below steps. +By default, all the Essential® JS 2 component are specific to English culture ('en-US'). If you want to go with the different culture other than English, follow the below steps. * Install the `CLDR-Data` package by using the below command (it installs the CLDR JSON data). For more information about CLDR-Data, refer to this [link](https://cldr.unicode.org/index/cldr-spec/cldr-json-bindings). diff --git a/ej2-javascript/pivotview/how-to/switching-older-themes-style.md b/ej2-javascript/pivotview/how-to/switching-older-themes-style.md index 959d8a3fd..f0df0bbd0 100644 --- a/ej2-javascript/pivotview/how-to/switching-older-themes-style.md +++ b/ej2-javascript/pivotview/how-to/switching-older-themes-style.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## # Switching older themes style in ##Platform_Name## Pivotview control -From Volume 1, 2020 onwards Syncfusion has revised the theming and layout of the Pivot Table. So, to inherit the older theme style and layout please do the necessary changes in CSS and pivot table height. +From Volume 1, 2020 onwards Syncfusion® has revised the theming and layout of the Pivot Table. So, to inherit the older theme style and layout please do the necessary changes in CSS and pivot table height. ## CSS Selectors diff --git a/ej2-javascript/pivotview/js/accessibility.md b/ej2-javascript/pivotview/js/accessibility.md index 7b7f2544c..1cfc7be73 100644 --- a/ej2-javascript/pivotview/js/accessibility.md +++ b/ej2-javascript/pivotview/js/accessibility.md @@ -246,4 +246,4 @@ The accessibility compliance of the pivot table component is shown in the follow ## See also -* [Accessibility in Syncfusion EJ2 JavaScript components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® EJ2 JavaScript components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/pivotview/js/classic-layout.md b/ej2-javascript/pivotview/js/classic-layout.md index d92e9cac0..02f1e51cc 100644 --- a/ej2-javascript/pivotview/js/classic-layout.md +++ b/ej2-javascript/pivotview/js/classic-layout.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## N> The classic layout supports only relational data sources and operates exclusively with client-side engine. -The classic layout in the Syncfusion Pivot Table offers a structured, tabular presentation of data, improving both readability and usability. In this layout, fields in the row axis are displayed side by side in separate columns, making data interpretation and analysis easier. By default, grand totals appear at the end of all rows, while subtotals are placed in a separate row beneath each group. All other features of the pivot table, such as filtering, sorting, drag-and-drop, expand/collapse functionality, and more, remain the same as in the compact layout, which serves as the default hierarchical format of the pivot table. +The classic layout in the Syncfusion® Pivot Table offers a structured, tabular presentation of data, improving both readability and usability. In this layout, fields in the row axis are displayed side by side in separate columns, making data interpretation and analysis easier. By default, grand totals appear at the end of all rows, while subtotals are placed in a separate row beneath each group. All other features of the pivot table, such as filtering, sorting, drag-and-drop, expand/collapse functionality, and more, remain the same as in the compact layout, which serves as the default hierarchical format of the pivot table. To enable the classic layout, set the [layout](https://ej2.syncfusion.com/documentation/api/pivotview/gridSettings/#layout) property in the [gridSettings](https://ej2.syncfusion.com/documentation/api/pivotview/gridSettings/) of the Pivot Table to **Tabular**. diff --git a/ej2-javascript/pivotview/js/ej1-api-migration.md b/ej2-javascript/pivotview/js/ej1-api-migration.md index 8e11f0a9b..bcfdf086f 100644 --- a/ej2-javascript/pivotview/js/ej1-api-migration.md +++ b/ej2-javascript/pivotview/js/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Pivotview control -This article describes the API migration process of pivot table component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of pivot table component from Essential® JS 1 to Essential® JS 2. ## Data Binding -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Data source | **property:** dataSource

$("#PivotGrid").ejPivotGrid({
dataSource: {
data: []
}); | **property:** dataSourceSettings

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
dataSource: []
}});
pivotGridObj.appendTo('#PivotGrid');| | Rows |**property:** rows

$("#PivotGrid").ejPivotGrid({
dataSource: {
rows: [{fieldName: "Country",fieldCaption: "Country"}] }
}); | **property:** rows

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
rows: [{ name: 'company', caption: 'Industry' }]}
});
pivotGridObj.appendTo('#PivotGrid');| @@ -26,19 +26,19 @@ This article describes the API migration process of pivot table component from E ## Aggregation -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Summary Type|**property:** summaryType

$("#PivotGrid").ejPivotGrid({
dataSource: {
values: [ {
fieldName: "balance",
fieldCaption: "Balance($)",
summaryType: ej.PivotAnalysis.SummaryType.Count
} ] }
});|**property:** type

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
values: [{ name: 'balance', caption: 'Balance($)', type: 'Count' }]}
});
pivotGridObj.appendTo('#PivotGrid');| ## Number Format -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Format settings|**property:** format

$("#PivotGrid").ejPivotGrid({
dataSource: {
values: [ { fieldName: "balance", fieldCaption: "Balance($)", format: "currency" } ] }
}); |**property:** formatSettings

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
formatSettings: [{ name: 'balance', format: 'C' },
{ name: 'date', format: 'dd/MM/yyyy-hh:mm', type: 'date' }]}
});
pivotGridObj.appendTo('#PivotGrid');| ## Summary Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide grand totals|**property:** enableGrandTotal

$("#PivotGrid").ejPivotGrid({
enableGrandTotal: false
});|**property:** showGrandTotals

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
showGrandTotals: false
}
});
pivotGridObj.appendTo('#PivotGrid');| |Show/hide row grand totals|**property:** enableRowGrandTotal

$("#PivotGrid").ejPivotGrid({
enableRowGrandTotal: false
});|**property:** showRowGrandTotals

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
showRowGrandTotals: false
}
});
pivotGridObj.appendTo('#PivotGrid');| @@ -50,14 +50,14 @@ This article describes the API migration process of pivot table component from E ## Drill operation -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Expand All|**property:** enableCollapseByDefault

$("#PivotGrid").ejPivotGrid({
enableCollapseByDefault:true
});|**property:** expandAll

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
expandAll: false
}
});
pivotGridObj.appendTo('#PivotGrid');| |Drill Up/Down|**property:** collapsedMembers

$("#PivotGrid").ejPivotGrid({
collapsedMembers: { Country: ["Canada", "France"] }
});|**property:** drilledMembers

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
drilledMembers: [{ name: 'Country', items: ['France'] }]
}
});
pivotGridObj.appendTo('#PivotGrid');| ## Field List -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide field list pop-up button on pivot table|Not Applicable|**property:** showFieldList

var pivotGridObj = new ej.pivotview.PivotView({
showFieldList: true
});
pivotGridObj.appendTo('#PivotGrid');| |Defer update|**property:** enableDeferUpdate

$("#PivotGrid").ejPivotGrid({
enableDeferUpdate: true
});|Not Applicable| @@ -68,7 +68,7 @@ This article describes the API migration process of pivot table component from E ## Grouping Bar -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide Grouping bar|**property:** enableGroupingBar

$("#PivotGrid").ejPivotGrid({
enableGroupingBar: true
});|**property:** showGroupingBar

var pivotGridObj = new ej.pivotview.PivotView({
showGroupingBar: true
});
pivotGridObj.appendTo('#PivotGrid');| |Grouping Bar Settings|Not Applicable|**property:** groupingBarSettings

var pivotGridObj = new ej.pivotview.PivotView({
groupingBarSettings: {
showFilterIcon: false,
showSortIcon: true,
showRemoveIcon: false}
});
pivotGridObj.appendTo('#PivotGrid');| @@ -76,74 +76,74 @@ This article describes the API migration process of pivot table component from E ## Filtering -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Filter settings|**property:** filterItems

$("#PivotGrid").ejPivotGrid({
dataSource: {
rows: [ {fieldName: "country",
filterItems : {
filterType: ej.PivotAnalysis.FilterType.Exclude,
values: ["Canada", "France"] }
} ] }
});|**property:** filterSettings

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
filterSettings: [{
name: 'eyeColor',
type: 'Exclude', items: ['blue'] }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Maximum node limit in member editor -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Max node limit in member editor|**property:** maxNodeLimitInMemberEditor

$("#PivotGrid").ejPivotGrid({
maxNodeLimitInMemberEditor: 100
});|**property:** maxNodeLimitInMemberEditor

var pivotGridObj = new ej.pivotview.PivotView({
maxNodeLimitInMemberEditor: 100
});
pivotGridObj.appendTo('#PivotGrid');| ## No Data Items -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide "no data" items|Not Applicable|**property:** showNoDataItems

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
rows: [{
name: 'eyeColor', showNoDataItems: true }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Excel-like filtering -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Label filtering|**property:** enableAdvancedFilter

$("#PivotGrid").ejPivotGrid({
enableAdvancedFilter: true,
dataSource: {
rows: [ { fieldName: "country",
advancedFilter : [{
labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith,
values: ["es"] }]
} ] }
});|**property:** allowLabelFilter

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
allowLabelFilter: true,
filterSettings: [{
name: 'product',
type: 'Label',
condition: 'Between',
value1: 'e',
value2: 'v' }]
}});
pivotGridObj.appendTo('#PivotGrid');| |Value filtering|**property:** enableAdvancedFilter

$("#PivotGrid").ejPivotGrid({
enableAdvancedFilter: true,
dataSource: {
rows: [{ fieldName: "country",
advancedFilter : [{
measure: "balance",
valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan,
values: ["200"] }]
} ]}
});|**property:** allowValueFilter

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
allowValueFilter: true,
filterSettings: [{
name: 'product',
measure: 'quantity',
type: 'Value',
condition: 'Between',
value1: '3250',
value2: '5000' }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Sorting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Enable/disable sorting|Not Applicable|**property:** enableSorting

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
enableSorting: false
}});
pivotGridObj.appendTo('#PivotGrid');| |Sort settings|**property:** sortOrder

$("#PivotGrid").ejPivotGrid({
dataSource: {
rows: [{
fieldName: "Country",
sortOrder : ej.PivotAnalysis.SortOrder.Descending }]
} });
|**property:** sortSettings

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
sortSettings: [{
name: 'company',
order: 'Descending' }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Value Sorting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Enable/disable value sorting|Not Applicable|**property:** enableValueSorting

var pivotGridObj = new ej.pivotview.PivotView({
enableValueSorting: true
});
pivotGridObj.appendTo('#PivotGrid');| |Value sort settings|**property:** valueSortSettings

$("#PivotGrid").ejPivotGrid({
valueSortSettings: {
headerText: "Bike##Quantity",
headerDelimiters: "##",
sortOrder: ej.PivotAnalysis.SortOrder.Descending }
});|**property:** valueSortSettings

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
valueSortSettings: {
headerText: 'FY 2015##Sold Amount',
headerDelimiter: '##',
sortOrder: 'Descending' }
}});
pivotGridObj.appendTo('#PivotGrid');| ## Calculated Field -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide calculated field|Not Applicable|**property:** allowCalculatedField

var pivotGridObj = new ej.pivotview.PivotView({
allowCalculatedField: true
});
pivotGridObj.appendTo('#PivotGrid');| |Calculated field settings|**property:** values

$("#PivotGrid").ejPivotGrid({
dataSource: {
values: [ {
fieldName: "Amount", fieldCaption: "Amount"
}, {
fieldName: "Price",
fieldCaption: "Price",
isCalculatedField: true,
formula: "Amount*15" }] }
});|**property:** calculatedFieldSettings

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
values: [{
name: 'Total', type: 'CalculatedField' }],
calculatedFieldSettings: [{
name: 'Total',
formula: '"Sum(Amount)"+"Sum(Sold)"' }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Paging -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Paging|**property:** enablePaging

$("#PivotGrid").ejPivotGrid({
enablePaging : true
});|Not Applicable| |Virtual scrolling|**property:** enableVirtualScrolling

$("#PivotGrid").ejPivotGrid({
enableVirtualScrolling : true
});|**property:** enableVirtualization

var pivotGridObj = new ej.pivotview.PivotView({
enableVirtualization: true});
pivotGridObj.appendTo('#PivotGrid');| ## Conditional Formatting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide conditional formatting|**property:** enableConditionalFormatting

$("#PivotGrid").ejPivotGrid({
enableConditionalFormatting: true
});|**property:** allowConditionalFormatting

var pivotGridObj = new ej.pivotview.PivotView({
allowConditionalFormatting: true
});
pivotGridObj.appendTo('#PivotGrid');| |Conditional formatting settings|**property:** conditionalFormatSettings

$("#PivotGrid").ejPivotGrid({
conditionalFormatSettings: [{
name: "Format2",
style: {
"color": "#000000",
"backgroundcolor": "#0000FF",
"bordercolor": "#000000",
"borderstyle": "Dashed",
"borderwidth": "5",
"fontsize": "12",
"fontstyle": "Algerian" },
condition: ej.PivotGrid.ConditionalOptions.LessThan,
value: "200",
measures: "Amount,Quantity" }]
});|**property:** conditionalFormatSettings

var pivotGridObj = new ej.pivotview.PivotView({
dataSourceSettings: {
conditionalFormatSettings: [{
measure: 'In Stock',
value1: 5000,
conditions: 'LessThan',
style: {
backgroundColor: '#80cbc4',
color: 'black',
fontFamily: 'Tahoma',
fontSize: '12px' }
}]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Exporting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Excel Export|Not Applicable|**property:** allowExcelExport

var pivotGridObj = new ej.pivotview.PivotView({
allowExcelExport: true
});
pivotGridObj.appendTo('#PivotGrid');| |Pdf Export|Not Applicable|**property:** allowPdfExport

var pivotGridObj = new ej.pivotview.PivotView({
allowPdfExport: true
});
pivotGridObj.appendTo('#PivotGrid');| ## Grid Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Set width for pivot table|Not Applicable|**property:** width

var pivotGridObj = new ej.pivotview.PivotView({
width: '800'
});
pivotGridObj.appendTo('#PivotGrid');| |Set height for pivot table|Not Applicable|**property:** height

var pivotGridObj = new ej.pivotview.PivotView({
height: '400'
});
pivotGridObj.appendTo('#PivotGrid');| @@ -161,21 +161,21 @@ This article describes the API migration process of pivot table component from E ## Drill Through -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide drill though feature|**property:** enableDrillThrough

$("#PivotGrid").ejPivotGrid({
enableDrillThrough: true
});|**property:** allowDrillThrough

var pivotGridObj = new ej.pivotview.PivotView({
allowDrillThrough: true
});
pivotGridObj.appendTo('#PivotGrid');| |Event Triggers when cell clicked in pivot table widget|**event:** drillThrough

$("#PivotGrid").ejPivotGrid({
drillThrough: function() {}
});|**event:** drillThrough

var pivotGridObj = new ej.pivotview.PivotView({
drillThrough: function() {}
});
pivotGridObj.appendTo('#PivotGrid');| ## Cell Editing -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Edit settings|Not Applicable|**property:** editSettings

var pivotGridObj = new ej.pivotview.PivotView({
editSettings: { }
});
pivotGridObj.appendTo('#PivotGrid');| |Show/hide cell editing feature|**property:** enableCellEditing

$("#PivotGrid").ejPivotGrid({
enableCellEditing: true
});|**property:** allowEditing

var pivotGridObj = new ej.pivotview.PivotView({
editSettings: {
allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal'
}
});
pivotGridObj.appendTo('#PivotGrid');| ## Hyperlink -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Hyperlink settings|**property:** hyperlinkSettings

$("#PivotGrid").ejPivotGrid({
hyperlinkSettings: { }
});|**property:** hyperlinkSettings

var pivotGridObj = new ej.pivotview.PivotView({
hyperlinkSettings: { }
});
pivotGridObj.appendTo('#PivotGrid');| |Show/hide hyperlink to all cells|Not Applicable|**property:** showHyperlink

var pivotGridObj = new ej.pivotview.PivotView({
hyperlinkSettings: {
showHyperlink: true }
});
pivotGridObj.appendTo('#PivotGrid');| @@ -192,20 +192,20 @@ This article describes the API migration process of pivot table component from E ## Defer Layout Update -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide defer layout update|**property:** enableDeferUpdate

$("#PivotGrid").ejPivotGrid({
enableDeferUpdate: true
});|**property:** allowDeferLayoutUpdate

var pivotGridObj = new ej.pivotview.PivotView({
allowDeferLayoutUpdate: true
});
pivotGridObj.appendTo('#PivotGrid');| ## Accessibility -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Localization|**property:** locale

$("#PivotGrid").ejPivotGrid({
locale: 'es-ES'
});|**property:** locale

var pivotGridObj = new ej.pivotview.PivotView({
locale: 'es-ES'
});
pivotGridObj.appendTo('#PivotGrid');| |Right to left|**property:** enableRTL

$("#PivotGrid").ejPivotGrid({
enableRTL: true
});|**property:** enableRtl

var pivotGridObj = new ej.pivotview.PivotView({
enableRtl: true
});
pivotGridObj.appendTo('#PivotGrid');| ## Common -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Adding custom class to wrapper element|**property:** cssClass

$("#PivotGrid").ejPivotGrid({
cssClass: 'custom-class'
});|**property:** cssClass

var pivotGridObj = new ej.pivotview.PivotView({
cssClass: 'custom-class'
});
pivotGridObj.appendTo('#PivotGrid');| |Keeping the model values in cookies|Not Applicable|**property:** enablePersistence

var pivotGridObj = new ej.pivotview.PivotView({
enablePersistence: true});
pivotGridObj.appendTo('#PivotGrid');| diff --git a/ej2-javascript/pivotview/js/getting-started.md b/ej2-javascript/pivotview/js/getting-started.md index 7d7c777e2..6075ea734 100644 --- a/ej2-javascript/pivotview/js/getting-started.md +++ b/ej2-javascript/pivotview/js/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Pivotview control -This section explains the steps to create a simple Essential JS 2 **Pivot Table** and demonstrates the basic usage of the [pivot table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table) control in a JavaScript application. +This section explains the steps to create a simple Essential® JS 2 **Pivot Table** and demonstrates the basic usage of the [pivot table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table) control in a JavaScript application. ## Dependencies @@ -47,20 +47,20 @@ Refer the following steps for setup your local environment. **Step 2:** Create `my-app/resources` folder to store local scripts and styles files. -**Step 3:** Open Visual Studio Code and create `my-app/index.js` and `my-app/index.html` files for initializing Essential JS 2 pivot table control. +**Step 3:** Open Visual Studio Code and create `my-app/index.js` and `my-app/index.html` files for initializing Essential® JS 2 pivot table control. -## Adding Syncfusion resources +## Adding Syncfusion® resources -The Essential JS 2 pivot table control can be initialized by using either of the following ways. +The Essential® JS 2 pivot table control can be initialized by using either of the following ways. * Using local script and style. * Using CDN link for script and style. ### Using local script and style -**1. Download Essential Studio JavaScript (Essential JS 2):** Obtain the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**1. Download Essential Studio® JavaScript (Essential® JS 2):** Obtain the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. -**2. Copy Files to Resources Folder:** After installing the Essential JS 2 product build, you can copy the pivot table scripts and style file into the designated folders: +**2. Copy Files to Resources Folder:** After installing the Essential® JS 2 product build, you can copy the pivot table scripts and style file into the designated folders: Scripts: Copy the scripts to the `resources/scripts` folder. @@ -435,7 +435,7 @@ Place the following pivot table code in the `index.js`. ## Run the application -Now, run the `index.html` in web browser, it will render the `Essential JS 2 pivot table` control. +Now, run the `index.html` in web browser, it will render the **Essential® JS 2 pivot table** control. Output will be displayed as follows. @@ -455,7 +455,7 @@ Output will be displayed as follows. ## Deploy the Application -The Essential JS 2 pivot table control features are segregated into individual feature-wise modules. The [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build and `CDN` scripts contains code for all features used in pivot table and hence we suggest to not to use them in production. We strongly recommend you to generate script files to use in production using our **Custom Resource Generator**[`(CRG)`](https://crg.syncfusion.com/) for Essential JS 2. CRG will allow you to generate the bundled script for the currently enabled features in pivot table. +The Essential® JS 2 pivot table control features are segregated into individual feature-wise modules. The [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build and `CDN` scripts contains code for all features used in pivot table and hence we suggest to not to use them in production. We strongly recommend you to generate script files to use in production using our **Custom Resource Generator**[`(CRG)`](https://crg.syncfusion.com/) for Essential® JS 2. CRG will allow you to generate the bundled script for the currently enabled features in pivot table. For more information and to access the quick start project, visit: [GitHub Repository](https://github.com/SyncfusionExamples/getting-started-with-the-javascript-pivot-table-component) diff --git a/ej2-javascript/pivotview/js/olap.md b/ej2-javascript/pivotview/js/olap.md index 236b35bd5..8bd6e791a 100644 --- a/ej2-javascript/pivotview/js/olap.md +++ b/ej2-javascript/pivotview/js/olap.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ## Getting Started -This section explain steps to create a simple Essential JS 2 **Pivot Table** with OLAP data source in a JavaScript application. +This section explain steps to create a simple Essential® JS 2 **Pivot Table** with OLAP data source in a JavaScript application. ### Dependencies @@ -49,20 +49,20 @@ Refer the following steps for setup your local environment. **Step 2:** Create **myapp/resources** folder to store local scripts and styles files. -**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential JS 2 pivot table control. +**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential® JS 2 pivot table control. -### Adding Syncfusion resources +### Adding Syncfusion® resources -The Essential JS 2 pivot table control can be initialized by using either of the following ways. +The Essential® JS 2 pivot table control can be initialized by using either of the following ways. * Using local script and style. * Using CDN link for script and style. ### Using local script and style -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. -After installing the Essential JS 2 product build, you can copy the pivot table and its [dependency](#dependencies) scripts and styles file into the **resources/scripts** and **resources/styles** folder respectively. +After installing the Essential® JS 2 product build, you can copy the pivot table and its [dependency](#dependencies) scripts and styles file into the **resources/scripts** and **resources/styles** folder respectively. Refer the below location to find pivot table's script and style file. @@ -400,37 +400,37 @@ Users can add a calculated field at runtime through the built-in dialog by using **Step 1:** Click the "CALCULATED FIELD" button in the field list dialog positioned at the top right corner. The calculated field dialog will be opened now. Enter the name of the calculated field to be created.

-![output](images/olap_calc_button.png "Enabling calculated field in field list UI") +![output](images/olap_calc_button.png)

-![output](images/calculatedfield-name.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-name.png)

**Step 2:** Frame the expression by dragging and dropping the fields from the tree view on the left side of the dialog using simple arithmetic operators. **Example:** "IIF([Measures].[Internet Sales Amount]^0.5 > 100, [Measures].[Internet Sales Amount]*100, [Measures].[Internet Sales Amount]/100)". Please refer here to learn more about the supported [`operators`](https://docs.microsoft.com/en-us/sql/mdx/operators-mdx-syntax?view=sql-server-ver15) and [`functions`](https://docs.microsoft.com/en-us/sql/mdx/functions-mdx-syntax?view=sql-server-ver15) to frame the expression.

-![output](images/calculatedfield-drag.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-drag.png)

**Step 3:** Confirm the type of the field to be created - calculated measure or calculated dimension.

-![output](images/calculatedfield-type.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-type.png)

**Step 4:** Choose the parent hierarchy of the calculated field. NOTE: It is only applicable to the calculated dimension.

-![output](images/calculatedfield-hierarchy.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-hierarchy.png)

**Step 5:** Then select the format string from the drop-down list and finally click "OK".

-![output](images/calculatedfield-format-string.png "Creating new calculated field through dialog") +![output](images/calculatedfield-format-string.png)

-![output](images/olap_calc_grid.png "New calculated field 'Order on Discount' added in pivot table") +![output](images/olap_calc_grid.png)

@@ -445,53 +445,53 @@ Allows you to specify the required format string while creating new calculated f By default, **Standard** will be selected from the drop down list. -![output](images/calculatedfield-fomat.png "Calculated field format string") +![output](images/calculatedfield-fomat.png) #### Renaming the existing calculated field Existing calculated field can be renamed only through the UI at runtime. To do so, open the calculated field dialog, click the target field. User can now see the existing name getting displayed in the text box at the top of the dialog. Now, change the name based on user requirement and click "OK". -![output](images/before-edit-olap.png "Editing the calculated field") +![output](images/before-edit-olap.png)

-![output](images/after-edit-olap.png "Renaming the calculated field") +![output](images/after-edit-olap.png) #### Editing the existing calculated field formula Existing calculated field formula can be edited only through the UI at runtime. To do so, open the calculated field dialog, click the target field. User can now see the existing expression getting displayed in a "Expression" section. Now, change the expression based on user requirement and click "OK". -![output](images/before-edit-olap.png "Editing the calculated field") +![output](images/before-edit-olap.png)

-![output](images/after-change-olap.png "Editing the calculated field formula") +![output](images/after-change-olap.png) #### Reusing the existing formula in a new calculate field While creating a new calculated field, if user wants to the add the formula of an existing calculated field, it can be done easily. To do so, simply drag-and-drop the existing calculated field to the "Expression" section. -![output](images/before-edit-olap.png "Dragging the existing calculated field") +![output](images/before-edit-olap.png)

-![output](images/while-drag-olap.png "Drag field to formula") +![output](images/while-drag-olap.png)

-![output](images/after-drag-olap.png "Reusing the existing calculated field formula") +![output](images/after-drag-olap.png) #### Modifying the existing format string Existing calculated field's format string can be modified only through the UI at runtime. To do so, open the calculated field dialog and click the target calculated field. User can now see the format string for the existing calculated field getting displayed in a drop-down list. Change the format string based on the requirement and finally click "OK". -![output](images/before-edit-olap.png "Editing the calculated field") +![output](images/before-edit-olap.png)

-![output](images/after-modify-olap.png "Editing the calculated field formula") +![output](images/after-modify-olap.png) #### Clearing the changes while editing the calculated field Previous changes can be cleared by using the "Clear" option while performing operations such as creating and editing the calculated field. To do so, click the "Clear" button in the bottom left corner of the dialog. -![output](images/clear-edit-olap.png "Editing the calculated field") +![output](images/clear-edit-olap.png) ### Virtual Scrolling @@ -540,7 +540,7 @@ Output will be displayed as follows. ### Deploy the Application -The Essential JS 2 pivot table control features are segregated into individual feature-wise modules. The [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build and `CDN` scripts contains code for all features used in pivot table and hence we suggest to not to use them in production. We strongly recommend you to generate script files to use in production using our **Custom Resource Generator**[`(CRG)`](https://crg.syncfusion.com/) for Essential JS 2. CRG will allow you to generate the bundled script for the currently enabled features in pivot table. +The Essential® JS 2 pivot table control features are segregated into individual feature-wise modules. The [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build and `CDN` scripts contains code for all features used in pivot table and hence we suggest to not to use them in production. We strongly recommend you to generate script files to use in production using our **Custom Resource Generator**[`(CRG)`](https://crg.syncfusion.com/) for Essential® JS 2. CRG will allow you to generate the bundled script for the currently enabled features in pivot table. ## Data Binding diff --git a/ej2-javascript/pivotview/js/performance-best-practices.md b/ej2-javascript/pivotview/js/performance-best-practices.md index a22837b74..3709601d2 100644 --- a/ej2-javascript/pivotview/js/performance-best-practices.md +++ b/ej2-javascript/pivotview/js/performance-best-practices.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Best practices to improve the performance of the Pivot Table -Performance optimization is crucial when working with large datasets in the [Syncfusion JavaScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table). This documentation provides some best practices to empower your data analysis and enhance the user experience. +Performance optimization is crucial when working with large datasets in the [Syncfusion® JavaScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table). This documentation provides some best practices to empower your data analysis and enhance the user experience. ## How do I improve the loading performance of the Pivot Table? diff --git a/ej2-javascript/pivotview/js/server-side-pivot-engine.md b/ej2-javascript/pivotview/js/server-side-pivot-engine.md index 90ab10540..13883574e 100644 --- a/ej2-javascript/pivotview/js/server-side-pivot-engine.md +++ b/ej2-javascript/pivotview/js/server-side-pivot-engine.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## # Server side pivot engine in ##Platform_Name## Pivotview control -This section briefs the Syncfusion assembly [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features. +This section briefs the Syncfusion® assembly [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features. ## Quick steps to render the Pivot Table by using the server-side Pivot Engine @@ -27,7 +27,7 @@ This section briefs the Syncfusion assembly [`Syncfusion.Pivot.Engine`](https:// * **DataSource.cs** file under **DataSource** folder – This file has model classes to define the structure of the data sources. * The sample data source files **sales.csv** and **sales-analysis.json** under **DataSource** folder. -**3.** Open the **PivotController** application in Visual Studio where the Syncfusion library [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/) will be downloaded automatically from the nuget.org site. +**3.** Open the **PivotController** application in Visual Studio where the Syncfusion® library [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/) will be downloaded automatically from the nuget.org site. ![Solution Explorer](./images/solution-explorer.png) @@ -269,7 +269,7 @@ var pivotObj = new ej.pivotview.PivotView({ JSON data from any remote server, like a local JSON file, can also be supported. It accepts both directly downloadable files (*.json) and web service URLs. To bind this, the URL of the *.json file of a remote server has to be mapped under the **GetData** method. The rest of the configurations are the same as described above. -In the server-side application, the CDN link is used to connect the same **sales-analysis.json** file which is already hosted in the Syncfusion server. +In the server-side application, the CDN link is used to connect the same **sales-analysis.json** file which is already hosted in the Syncfusion® server. ```c# public async Task GetData(FetchData param) @@ -388,7 +388,7 @@ var pivotObj = new ej.pivotview.PivotView({ CSV data from any remote server, like a local CSV file, can also be supported. It accepts both directly downloadable files (*.csv) and web service URLs. To bind this, the URL of the *.csv file of a remote server has to be mapped under **GetData** method. The rest of the configurations are the same as described above. -In the server application, the CDN link is used to connect the same **sales.csv** file which is already hosted in the Syncfusion server. +In the server application, the CDN link is used to connect the same **sales.csv** file which is already hosted in the Syncfusion® server. ```c# public async Task GetData(FetchData param) diff --git a/ej2-javascript/pivotview/js/switching-older-themes-style.md b/ej2-javascript/pivotview/js/switching-older-themes-style.md index 72e1df33e..a0e53d8f9 100644 --- a/ej2-javascript/pivotview/js/switching-older-themes-style.md +++ b/ej2-javascript/pivotview/js/switching-older-themes-style.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## # Switching older themes style in ##Platform_Name## Pivotview control -From Volume 1, 2020 onwards Syncfusion has revised the theming and layout of the Pivot Table. So, to inherit the older theme style and layout please do the necessary changes in CSS and pivot table height. +From Volume 1, 2020 onwards Syncfusion® has revised the theming and layout of the Pivot Table. So, to inherit the older theme style and layout please do the necessary changes in CSS and pivot table height. ## CSS Selectors diff --git a/ej2-javascript/pivotview/js/virtual-scrolling.md b/ej2-javascript/pivotview/js/virtual-scrolling.md index cef9f14a9..6d487b5f3 100644 --- a/ej2-javascript/pivotview/js/virtual-scrolling.md +++ b/ej2-javascript/pivotview/js/virtual-scrolling.md @@ -84,5 +84,5 @@ Virtual scrolling automatically works with "Popup" field list on setting the [en ## See also -* [Paging in Syncfusion EJ2 Typescript components](./paging) -* [Data Compression in Syncfusion EJ2 Typescript components](./data-compression) \ No newline at end of file +* [Paging in Syncfusion® EJ2 Typescript components](./paging) +* [Data Compression in Syncfusion® EJ2 Typescript components](./data-compression) \ No newline at end of file diff --git a/ej2-javascript/pivotview/ts/accessibility.md b/ej2-javascript/pivotview/ts/accessibility.md index cbbfc7600..43672650e 100644 --- a/ej2-javascript/pivotview/ts/accessibility.md +++ b/ej2-javascript/pivotview/ts/accessibility.md @@ -3,7 +3,7 @@ layout: post title: Accessibility in Typescript Pivotview component | Syncfusion description: Learn here all about Accessibility in Syncfusion Typescript Pivotview component of Syncfusion Essential JS 2 and more. control: Accessibility -platform: ej2-Typescript +platform: ej2-typescript documentation: ug domainurl: ##DomainURL## --- @@ -246,4 +246,4 @@ The accessibility compliance of the pivot table component is shown in the follow ## See also -* [Accessibility in Syncfusion EJ2 Typescript components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® EJ2 Typescript components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/pivotview/ts/classic-layout.md b/ej2-javascript/pivotview/ts/classic-layout.md index e9eec1c2c..a44c6c366 100644 --- a/ej2-javascript/pivotview/ts/classic-layout.md +++ b/ej2-javascript/pivotview/ts/classic-layout.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## N> The classic layout supports only relational data sources and operates exclusively with client-side engine. -The classic layout in the Syncfusion Pivot Table offers a structured, tabular presentation of data, improving both readability and usability. In this layout, fields in the row axis are displayed side by side in separate columns, making data interpretation and analysis easier. By default, grand totals appear at the end of all rows, while subtotals are placed in a separate row beneath each group. All other features of the pivot table, such as filtering, sorting, drag-and-drop, expand/collapse functionality, and more, remain the same as in the compact layout, which serves as the default hierarchical format of the pivot table. +The classic layout in the Syncfusion® Pivot Table offers a structured, tabular presentation of data, improving both readability and usability. In this layout, fields in the row axis are displayed side by side in separate columns, making data interpretation and analysis easier. By default, grand totals appear at the end of all rows, while subtotals are placed in a separate row beneath each group. All other features of the pivot table, such as filtering, sorting, drag-and-drop, expand/collapse functionality, and more, remain the same as in the compact layout, which serves as the default hierarchical format of the pivot table. To enable the classic layout, set the [layout](https://ej2.syncfusion.com/documentation/api/pivotview/gridSettings/#layout) property in the [gridSettings](https://ej2.syncfusion.com/documentation/api/pivotview/gridSettings/) of the Pivot Table to **Tabular**. diff --git a/ej2-javascript/pivotview/ts/ej1-api-migration.md b/ej2-javascript/pivotview/ts/ej1-api-migration.md index 28dcc775c..c1800bfd3 100644 --- a/ej2-javascript/pivotview/ts/ej1-api-migration.md +++ b/ej2-javascript/pivotview/ts/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Pivotview control -This article describes the API migration process of pivot table component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of pivot table component from Essential® JS 1 to Essential® JS 2. ## Data Binding -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | | Data source | **property:** dataSource

new ej.PivotGrid($("#PivotGrid"), {
dataSource: {
data: []
}); | **property:** dataSourceSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: []
}});
pivotGridObj.appendTo('#PivotGrid');| | Rows |**property:** rows

new ej.PivotGrid($("#PivotGrid"),{
dataSource: {
rows: [{fieldName: "Country",fieldCaption: "Country"}] }
}); | **property:** rows

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
rows: [{ name: 'company', caption: 'Industry' }]}
});
pivotGridObj.appendTo('#PivotGrid');| @@ -26,19 +26,19 @@ This article describes the API migration process of pivot table component from E ## Aggregation -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Summary Type|**property:** summaryType

new ej.PivotGrid($("#PivotGrid"), {
dataSource: {
values: [ {
fieldName: "balance",
fieldCaption: "Balance($)",
summaryType: ej.PivotAnalysis.SummaryType.Count
} ] }
});|**property:** type

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
values: [{ name: 'balance', caption: 'Balance($)', type: 'Count' }]}
});
pivotGridObj.appendTo('#PivotGrid');| ## Number Format -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Format settings|**property:** format

$new ej.PivotGrid($("#PivotGrid"), {
dataSource: {
values: [ { fieldName: "balance", fieldCaption: "Balance($)", format: "currency" } ] }
}); |**property:** formatSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
formatSettings: [{ name: 'balance', format: 'C' },
{ name: 'date', format: 'dd/MM/yyyy-hh:mm', type: 'date' }]}
});
pivotGridObj.appendTo('#PivotGrid');| ## Summary Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide grand totals|**property:** enableGrandTotal

new ej.PivotGrid($("#PivotGrid"), {
enableGrandTotal: false
});|**property:** showGrandTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showGrandTotals: false
}
});
pivotGridObj.appendTo('#PivotGrid');| |Show/hide row grand totals|**property:** enableRowGrandTotal

new ej.PivotGrid($("#PivotGrid"), {
enableRowGrandTotal: false
});|**property:** showRowGrandTotals

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
showRowGrandTotals: false
}
});
pivotGridObj.appendTo('#PivotGrid');| @@ -50,14 +50,14 @@ This article describes the API migration process of pivot table component from E ## Drill operation -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Expand All|**property:** enableCollapseByDefault

new ej.PivotGrid($("#PivotGrid"), {
enableCollapseByDefault:true
});|**property:** expandAll

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
expandAll: false
}
});
pivotGridObj.appendTo('#PivotGrid');| |Drill Up/Down|**property:** collapsedMembers

new ej.PivotGrid($("#PivotGrid"), {
collapsedMembers: { Country: ["Canada", "France"] }
});|**property:** drilledMembers

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
drilledMembers: [{ name: 'Country', items: ['France'] }]
}
});
pivotGridObj.appendTo('#PivotGrid');| ## Field List -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide field list pop-up button on pivot table|Not Applicable|**property:** showFieldList

let pivotGridObj: PivotView = new PivotView({
showFieldList: true
});
pivotGridObj.appendTo('#PivotGrid');| |Defer update|**property:** enableDeferUpdate

new ej.PivotGrid($("#PivotGrid"), {
enableDeferUpdate: true
});|Not Applicable| @@ -68,7 +68,7 @@ This article describes the API migration process of pivot table component from E ## Grouping Bar -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide Grouping bar|**property:** enableGroupingBar

new ej.PivotGrid($("#PivotGrid"), {
enableGroupingBar: true
});|**property:** showGroupingBar

let pivotGridObj: PivotView = new PivotView({
showGroupingBar: true
});
pivotGridObj.appendTo('#PivotGrid');| |Grouping Bar Settings|Not Applicable|**property:** groupingBarSettings

let pivotGridObj: PivotView = new PivotView({
groupingBarSettings: {
showFilterIcon: false,
showSortIcon: true,
showRemoveIcon: false}
});
pivotGridObj.appendTo('#PivotGrid');| @@ -76,74 +76,74 @@ This article describes the API migration process of pivot table component from E ## Filtering -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Filter settings|**property:** filterItems

new ej.PivotGrid($("#PivotGrid"), {
dataSource: {
rows: [ {fieldName: "country",
filterItems : {
filterType: ej.PivotAnalysis.FilterType.Exclude,
values: ["Canada", "France"] }
} ] }
});|**property:** filterSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
filterSettings: [{
name: 'eyeColor',
type: 'Exclude', items: ['blue'] }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Maximum node limit in member editor -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Max node limit in member editor|**property:** maxNodeLimitInMemberEditor

new ej.PivotGrid($("#PivotGrid"), {
maxNodeLimitInMemberEditor: 100
});|**property:** maxNodeLimitInMemberEditor

let pivotGridObj: PivotView = new PivotView({
maxNodeLimitInMemberEditor: 100
});
pivotGridObj.appendTo('#PivotGrid');| ## No Data Items -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide "no data" items|Not Applicable|**property:** showNoDataItems

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
rows: [{
name: 'eyeColor', showNoDataItems: true }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Excel-like filtering -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Label filtering|**property:** enableAdvancedFilter

new ej.PivotGrid($("#PivotGrid"), {
enableAdvancedFilter: true,
dataSource: {
rows: [ { fieldName: "country",
advancedFilter : [{
labelFilterOperator: ej.olap.LabelFilterOptions.EndsWith,
values: ["es"] }]
} ] }
});|**property:** allowLabelFilter

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
allowLabelFilter: true,
filterSettings: [{
name: 'product',
type: 'Label',
condition: 'Between',
value1: 'e',
value2: 'v' }]
}});
pivotGridObj.appendTo('#PivotGrid');| |Value filtering|**property:** enableAdvancedFilter

new ej.PivotGrid($("#PivotGrid"), {
enableAdvancedFilter: true,
dataSource: {
rows: [{ {
rows: [{ fieldName: "country",
advancedFilter : [{
measure: "balance",
valueFilterOperator: ej.olap.ValueFilterOptions.GreaterThan,
values: ["200"] }]
} ]}
});|**property:** allowValueFilter

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
allowValueFilter: true,
filterSettings: [{
name: 'product',
measure: 'quantity',
type: 'Value',
condition: 'Between',
value1: '3250',
value2: '5000' }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Sorting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Enable/disable sorting|Not Applicable|**property:** enableSorting

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
enableSorting: false
}});
pivotGridObj.appendTo('#PivotGrid');| |Sort settings|**property:** sortOrder

new ej.PivotGrid($("#PivotGrid"), {
dataSource: {
rows: [{
fieldName: "Country",
sortOrder : ej.PivotAnalysis.SortOrder.Descending }]
} });
|**property:** sortSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
sortSettings: [{
name: 'company',
order: 'Descending' }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Value Sorting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Enable/disable value sorting|Not Applicable|**property:** enableValueSorting

let pivotGridObj: PivotView = new PivotView({
enableValueSorting: true
});
pivotGridObj.appendTo('#PivotGrid');| |Value sort settings|**property:** valueSortSettings

new ej.PivotGrid($("#PivotGrid"), {
valueSortSettings: {
headerText: "Bike##Quantity",
headerDelimiters: "##",
sortOrder: ej.PivotAnalysis.SortOrder.Descending }
});|**property:** valueSortSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
valueSortSettings: {
headerText: 'FY 2015##Sold Amount',
headerDelimiter: '##',
sortOrder: 'Descending' }
}});
pivotGridObj.appendTo('#PivotGrid');| ## Calculated Field -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide calculated field|Not Applicable|**property:** allowCalculatedField

let pivotGridObj: PivotView = new PivotView({
allowCalculatedField: true
});
pivotGridObj.appendTo('#PivotGrid');| |Calculated field settings|**property:** values

new ej.PivotGrid($("#PivotGrid"), {
dataSource: {
values: [ {
fieldName: "Amount", fieldCaption: "Amount"
}, {
fieldName: "Price",
fieldCaption: "Price",
isCalculatedField: true,
formula: "Amount*15" }] }
});|**property:** calculatedFieldSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
values: [{
name: 'Total', type: 'CalculatedField' }],
calculatedFieldSettings: [{
name: 'Total',
formula: '"Sum(Amount)"+"Sum(Sold)"' }]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Paging -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Paging|**property:** enablePaging

new ej.PivotGrid($("#PivotGrid"), {
enablePaging : true
});|Not Applicable| |Virtual scrolling|**property:** enableVirtualScrolling

new ej.PivotGrid($("#PivotGrid"), {
enableVirtualScrolling : true
});|**property:** enableVirtualization

let pivotGridObj: PivotView = new PivotView({
enableVirtualization: true});
pivotGridObj.appendTo('#PivotGrid');| ## Conditional Formatting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide conditional formatting|**property:** enableConditionalFormatting

new ej.PivotGrid($("#PivotGrid"), {
enableConditionalFormatting: true
});|**property:** allowConditionalFormatting

let pivotGridObj: PivotView = new PivotView({
allowConditionalFormatting: true
});
pivotGridObj.appendTo('#PivotGrid');| |Conditional formatting settings|**property:** conditionalFormatSettings

new ej.PivotGrid($("#PivotGrid"), {
conditionalFormatSettings: [{
name: "Format2",
style: {
"color": "#000000",
"backgroundcolor": "#0000FF",
"bordercolor": "#000000",
"borderstyle": "Dashed",
"borderwidth": "5",
"fontsize": "12",
"fontstyle": "Algerian" },
condition: ej.PivotGrid.ConditionalOptions.LessThan,
value: "200",
measures: "Amount,Quantity" }]
});|**property:** conditionalFormatSettings

let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
conditionalFormatSettings: [{
measure: 'In Stock',
value1: 5000,
conditions: 'LessThan',
style: {
backgroundColor: '#80cbc4',
color: 'black',
fontFamily: 'Tahoma',
fontSize: '12px' }
}]
}});
pivotGridObj.appendTo('#PivotGrid');| ## Exporting -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Excel Export|Not Applicable|**property:** allowExcelExport

let pivotGridObj: PivotView = new PivotView({
allowExcelExport: true
});
pivotGridObj.appendTo('#PivotGrid');| |Pdf Export|Not Applicable|**property:** allowPdfExport

let pivotGridObj: PivotView = new PivotView({
allowPdfExport: true
});
pivotGridObj.appendTo('#PivotGrid');| ## Grid Customization -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Set width for pivot table|Not Applicable|**property:** width

let pivotGridObj: PivotView = new PivotView({
width: '800'
});
pivotGridObj.appendTo('#PivotGrid');| |Set height for pivot table|Not Applicable|**property:** height

let pivotGridObj: PivotView = new PivotView({
height: '400'
});
pivotGridObj.appendTo('#PivotGrid');| @@ -161,21 +161,21 @@ This article describes the API migration process of pivot table component from E ## Drill Through -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide drill though feature|**property:** enableDrillThrough

new ej.PivotGrid($("#PivotGrid"), {
enableDrillThrough: true
});|**property:** allowDrillThrough

let pivotGridObj: PivotView = new PivotView({
allowDrillThrough: true
});
pivotGridObj.appendTo('#PivotGrid');| |Event Triggers when cell clicked in pivot table widget|**event:** drillThrough

new ej.PivotGrid($("#PivotGrid"), {
drillThrough: function() {}
});|**event:** drillThrough

let pivotGridObj: PivotView = new PivotView({
drillThrough: function() {}
});
pivotGridObj.appendTo('#PivotGrid');| ## Cell Editing -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Edit settings|Not Applicable|**property:** editSettings

let pivotGridObj: PivotView = new PivotView({
editSettings: { }
});
pivotGridObj.appendTo('#PivotGrid');| |Show/hide cell editing feature|**property:** enableCellEditing

new ej.PivotGrid($("#PivotGrid"), {
enableCellEditing: true
});|**property:** allowEditing

let pivotGridObj: PivotView = new PivotView({
editSettings: {
allowAdding: true, allowDeleting: true, allowEditing: true, mode: 'Normal'
}
});
pivotGridObj.appendTo('#PivotGrid');| ## Hyperlink -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Hyperlink settings|**property:** hyperlinkSettings

new ej.PivotGrid($("#PivotGrid"), {
hyperlinkSettings: { }
});|**property:** hyperlinkSettings

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: { }
});
pivotGridObj.appendTo('#PivotGrid');| |Show/hide hyperlink to all cells|Not Applicable|**property:** showHyperlink

let pivotGridObj: PivotView = new PivotView({
hyperlinkSettings: {
showHyperlink: true }
});
pivotGridObj.appendTo('#PivotGrid');| @@ -192,20 +192,20 @@ This article describes the API migration process of pivot table component from E ## Defer Layout Update -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Show/hide defer layout update|**property:** enableDeferUpdate

new ej.PivotGrid($("#PivotGrid"), {
enableDeferUpdate: true
});|**property:** allowDeferLayoutUpdate

let pivotGridObj: PivotView = new PivotView({
allowDeferLayoutUpdate: true
});
pivotGridObj.appendTo('#PivotGrid');| ## Accessibility -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Localization|**property:** locale

new ej.PivotGrid($("#PivotGrid"), {
locale: 'es-ES'
});|**property:** locale

let pivotGridObj: PivotView = new PivotView({
locale: 'es-ES'
});
pivotGridObj.appendTo('#PivotGrid');| |Right to left|**property:** enableRTL

new ej.PivotGrid($("#PivotGrid"), {
enableRTL: true
});|**property:** enableRtl

let pivotGridObj: PivotView = new PivotView({
enableRtl: true
});
pivotGridObj.appendTo('#PivotGrid');| ## Common -| **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | +| **Behavior** | **API in Essential® JS 1** | **API in Essential® JS 2** | | --- | --- | --- | |Adding custom class to wrapper element|**property:** cssClass

new ej.PivotGrid($("#PivotGrid"), {
cssClass: 'custom-class'
});|**property:** cssClass

let pivotGridObj: PivotView = new PivotView({
cssClass: 'custom-class'
});
pivotGridObj.appendTo('#PivotGrid');| |Keeping the model values in cookies|Not Applicable|**property:**enablePersistence

let pivotGridObj: PivotView = new PivotView({
enablePersistence: true});
pivotGridObj.appendTo('#PivotGrid');| diff --git a/ej2-javascript/pivotview/ts/getting-started.md b/ej2-javascript/pivotview/ts/getting-started.md index 6879bfe55..91b2275a5 100644 --- a/ej2-javascript/pivotview/ts/getting-started.md +++ b/ej2-javascript/pivotview/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Pivotview control -This section explains the steps to create a simple **Pivot Table** and demonstrates the basic usage of the pivot table component using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential JS 2 package. +This section explains the steps to create a simple **Pivot Table** and demonstrates the basic usage of the pivot table component using the Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -40,7 +40,7 @@ The following list of dependencies are required to use the pivot table component ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -60,9 +60,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -74,9 +74,9 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles -Syncfusion JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion JavaScript controls to match the style of your application by referring to one of the built-in themes. +Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes. The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/pivotview/ts/olap.md b/ej2-javascript/pivotview/ts/olap.md index 666e30a7e..7ea3d105e 100644 --- a/ej2-javascript/pivotview/ts/olap.md +++ b/ej2-javascript/pivotview/ts/olap.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## ## Getting Started -This section explain steps to create a simple **Pivot Table** with OLAP data source using the Essential JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. This seed repository is pre-configured with the Essential JS 2 package. +This section explain steps to create a simple **Pivot Table** with OLAP data source using the Essential® JS 2 [quickstart](https://github.com/syncfusion/ej2-quickstart.git) seed repository. This seed repository is pre-configured with the Essential® JS 2 package. > This quickstart seed application is integrated with **System.js** configuration. Refer [here](https://github.com/systemjs/systemjs) to know more details about **System.js** and its functionalities. @@ -45,7 +45,7 @@ The following list of dependencies are required to use the pivot table component ### Setup for local development -Open the command prompt from the required file directory, and run the following command to clone Syncfusion JavaScript (Essential JS 2) quick start project from [GitHub](https://github.com/syncfusion/ej2-quickstart.git). +Open the command prompt from the required file directory, and run the following command to clone Syncfusion® JavaScript (Essential® JS 2) quick start project from [GitHub](https://github.com/syncfusion/ej2-quickstart.git). ``` git clone https://github.com/syncfusion/ej2-quickstart.git quickstart @@ -59,11 +59,11 @@ cd quickstart npm install ``` -> The quickstart seed application has been preconfigured with **@syncfusion/ej2 package** in the **~/package.json** file. On running the command **npm install**, it will automatically install all required Syncfusion JavaScript packages in the application. +> The quickstart seed application has been preconfigured with **@syncfusion/ej2 package** in the **~/package.json** file. On running the command **npm install**, it will automatically install all required Syncfusion® JavaScript packages in the application. ### Configuring System JS -Next we need to map [Syncfusion PivotView packages](#dependencies) in the **system.config.js** configuration file as follows. +Next we need to map [Syncfusion® PivotView packages](#dependencies) in the **system.config.js** configuration file as follows. ```ts System.config({ @@ -103,7 +103,7 @@ System.import('app'); ### Adding CSS reference -Combined CSS files are available in the Essential JS 2 package root folder. In this illustration, we have referred **material** theme. This theme needs to be referred in your demo application under **src/styles/styles.css** file using the following code. +Combined CSS files are available in the Essential® JS 2 package root folder. In this illustration, we have referred **material** theme. This theme needs to be referred in your demo application under **src/styles/styles.css** file using the following code. ``` @import '../../node_modules/@syncfusion/ej2/material.css'; @@ -113,7 +113,7 @@ Combined CSS files are available in the Essential JS 2 package root folder. In t ### Adding pivot table control -You can initialize Essential JS 2 pivot table component in the application using following steps. +You can initialize Essential® JS 2 pivot table component in the application using following steps. * Import the **PivotView** (aka, PivotTable) component from the **@syncfusion/ej2-pivotview** package in **app.ts** file. * Then you can initialize pivot table component using **new PivotView()** instance. @@ -305,37 +305,37 @@ Users can add a calculated field at runtime through the built-in dialog by using **Step 1:** Click the "CALCULATED FIELD" button in the field list dialog positioned at the top right corner. The calculated field dialog will be opened now. Enter the name of the calculated field to be created.

-![output](images/olap_calc_button.png "Enabling calculated field in field list UI") +![output](images/olap_calc_button.png)

-![output](images/calculatedfield-name.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-name.png)

**Step 2:** Frame the expression by dragging and dropping the fields from the tree view on the left side of the dialog using simple arithmetic operators. **Example:** "IIF([Measures].[Internet Sales Amount]^0.5 > 100, [Measures].[Internet Sales Amount]*100, [Measures].[Internet Sales Amount]/100)". Please refer here to learn more about the supported [`operators`](https://docs.microsoft.com/en-us/sql/mdx/operators-mdx-syntax?view=sql-server-ver15) and [`functions`](https://docs.microsoft.com/en-us/sql/mdx/functions-mdx-syntax?view=sql-server-ver15) to frame the expression.

-![output](images/calculatedfield-drag.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-drag.png)

**Step 3:** Confirm the type of the field to be created - calculated measure or calculated dimension.

-![output](images/calculatedfield-type.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-type.png)

**Step 4:** Choose the parent hierarchy of the calculated field. NOTE: It is only applicable to the calculated dimension.

-![output](images/calculatedfield-hierarchy.png "Enabling calculated field in field list UI") +![output](images/calculatedfield-hierarchy.png)

**Step 5:** Then select the format string from the drop-down list and finally click "OK".

-![output](images/calculatedfield-format-string.png "Creating new calculated field through dialog") +![output](images/calculatedfield-format-string.png)

-![output](images/olap_calc_grid.png "New calculated field 'Order on Discount' added in pivot table") +![output](images/olap_calc_grid.png)

@@ -350,53 +350,53 @@ Allows you to specify the required format string while creating new calculated f By default, **Standard** will be selected from the drop down list. -![output](images/calculatedfield-fomat.png "Calculated field format string") +![output](images/calculatedfield-fomat.png) #### Renaming the existing calculated field Existing calculated field can be renamed only through the UI at runtime. To do so, open the calculated field dialog, click the target field. User can now see the existing name getting displayed in the text box at the top of the dialog. Now, change the name based on user requirement and click "OK". -![output](images/before-edit-olap.png "Editing the calculated field") +![output](images/before-edit-olap.png)

-![output](images/after-edit-olap.png "Renaming the calculated field") +![output](images/after-edit-olap.png) #### Editing the existing calculated field formula Existing calculated field formula can be edited only through the UI at runtime. To do so, open the calculated field dialog, click the target field. User can now see the existing expression getting displayed in a "Expression" section. Now, change the expression based on user requirement and click "OK". -![output](images/before-edit-olap.png "Editing the calculated field") +![output](images/before-edit-olap.png)

-![output](images/after-change-olap.png "Editing the calculated field formula") +![output](images/after-change-olap.png) #### Reusing the existing formula in a new calculate field While creating a new calculated field, if user wants to the add the formula of an existing calculated field, it can be done easily. To do so, simply drag-and-drop the existing calculated field to the "Expression" section. -![output](images/before-edit-olap.png "Dragging the existing calculated field") +![output](images/before-edit-olap.png)

-![output](images/while-drag-olap.png "Drag field to formula") +![output](images/while-drag-olap.png)

-![output](images/after-drag-olap.png "Reusing the existing calculated field formula") +![output](images/after-drag-olap.png) #### Modifying the existing format string Existing calculated field's format string can be modified only through the UI at runtime. To do so, open the calculated field dialog and click the target calculated field. User can now see the format string for the existing calculated field getting displayed in a drop-down list. Change the format string based on the requirement and finally click "OK". -![output](images/before-edit-olap.png "Editing the calculated field") +![output](images/before-edit-olap.png)

-![output](images/after-modify-olap.png "Editing the calculated field formula") +![output](images/after-modify-olap.png) #### Clearing the changes while editing the calculated field Previous changes can be cleared by using the "Clear" option while performing operations such as creating and editing the calculated field. To do so, click the "Clear" button in the bottom left corner of the dialog. -![output](images/clear-edit-olap.png "Editing the calculated field") +![output](images/clear-edit-olap.png) ### Virtual Scrolling diff --git a/ej2-javascript/pivotview/ts/performance-best-practices.md b/ej2-javascript/pivotview/ts/performance-best-practices.md index 520525fc0..bab86826c 100644 --- a/ej2-javascript/pivotview/ts/performance-best-practices.md +++ b/ej2-javascript/pivotview/ts/performance-best-practices.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Best practices to improve the performance of the Pivot Table -Performance optimization is crucial when working with large datasets in the [Syncfusion TypeScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table). This documentation provides some best practices to empower your data analysis and enhance the user experience. +Performance optimization is crucial when working with large datasets in the [Syncfusion® TypeScript Pivot Table](https://www.syncfusion.com/javascript-ui-controls/js-pivot-table). This documentation provides some best practices to empower your data analysis and enhance the user experience. ## How do I improve the loading performance of the Pivot Table? diff --git a/ej2-javascript/pivotview/ts/server-side-pivot-engine.md b/ej2-javascript/pivotview/ts/server-side-pivot-engine.md index a256efaab..9745a1bed 100644 --- a/ej2-javascript/pivotview/ts/server-side-pivot-engine.md +++ b/ej2-javascript/pivotview/ts/server-side-pivot-engine.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## # Server side pivot engine in ##Platform_Name## Pivotview control -This section briefs the Syncfusion assembly [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features. +This section briefs the Syncfusion® assembly [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/), which is used in a server-side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the Pivot Table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the Pivot Table's existing features. ## Quick steps to render the Pivot Table by using the server-side Pivot Engine @@ -27,7 +27,7 @@ This section briefs the Syncfusion assembly [`Syncfusion.Pivot.Engine`](https:// * **DataSource.cs** file under **DataSource** folder – This file has model classes to define the structure of the data sources. * The sample data source files **sales.csv** and **sales-analysis.json** under **DataSource** folder. -**3.** Open the **PivotController** application in Visual Studio where the Syncfusion library [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/) will be downloaded automatically from the nuget.org site. +**3.** Open the **PivotController** application in Visual Studio where the Syncfusion® library [`Syncfusion.Pivot.Engine`](https://www.nuget.org/packages/Syncfusion.Pivot.Engine/) will be downloaded automatically from the nuget.org site. ![Solution Explorer](./images/solution-explorer.png) @@ -273,7 +273,7 @@ let pivotObj: PivotView = new PivotView({ JSON data from any remote server, like a local JSON file, can also be supported. It accepts both directly downloadable files (*.json) and web service URLs. To bind this, the URL of the *.json file of a remote server has to be mapped under the **GetData** method. The rest of the configurations are the same as described above. -In the server-side application, the CDN link is used to connect the same **sales-analysis.json** file which is already hosted in the Syncfusion server. +In the server-side application, the CDN link is used to connect the same **sales-analysis.json** file which is already hosted in the Syncfusion® server. ```c# public async Task GetData(FetchData param) @@ -392,7 +392,7 @@ let pivotObj: PivotView = new PivotView({ CSV data from any remote server, like a local CSV file, can also be supported. It accepts both directly downloadable files (*.csv) and web service URLs. To bind this, the URL of the *.csv file of a remote server has to be mapped under **GetData** method. The rest of the configurations are the same as described above. -In the server application, the CDN link is used to connect the same **sales.csv** file which is already hosted in the Syncfusion server. +In the server application, the CDN link is used to connect the same **sales.csv** file which is already hosted in the Syncfusion® server. ```c# public async Task GetData(FetchData param) diff --git a/ej2-javascript/pivotview/ts/switching-older-themes-style.md b/ej2-javascript/pivotview/ts/switching-older-themes-style.md index 3a07f48ca..28ecb3f4c 100644 --- a/ej2-javascript/pivotview/ts/switching-older-themes-style.md +++ b/ej2-javascript/pivotview/ts/switching-older-themes-style.md @@ -13,7 +13,7 @@ domainurl: ##DomainURL## # Switching older themes style in ##Platform_Name## Pivotview control -From Volume 1, 2020 onwards Syncfusion has revised the theming and layout of the Pivot Table. So, to inherit the older theme style and layout please do the necessary changes in CSS and pivot table height. +From Volume 1, 2020 onwards Syncfusion® has revised the theming and layout of the Pivot Table. So, to inherit the older theme style and layout please do the necessary changes in CSS and pivot table height. ## CSS Selectors diff --git a/ej2-javascript/pivotview/ts/virtual-scrolling.md b/ej2-javascript/pivotview/ts/virtual-scrolling.md index 9b2167df3..80b3f9e0c 100644 --- a/ej2-javascript/pivotview/ts/virtual-scrolling.md +++ b/ej2-javascript/pivotview/ts/virtual-scrolling.md @@ -84,5 +84,5 @@ Virtual scrolling automatically works with "Popup" field list on setting the [en ## See also -* [Paging in Syncfusion EJ2 Typescript components](./paging) -* [Data Compression in Syncfusion EJ2 Typescript components](./data-compression) \ No newline at end of file +* [Paging in Syncfusion® EJ2 Typescript components](./paging) +* [Data Compression in Syncfusion® EJ2 Typescript components](./data-compression) \ No newline at end of file diff --git a/ej2-javascript/progress-button/accessibility.md b/ej2-javascript/progress-button/accessibility.md index ab82402d2..c11cf2739 100644 --- a/ej2-javascript/progress-button/accessibility.md +++ b/ej2-javascript/progress-button/accessibility.md @@ -66,4 +66,4 @@ The accessibility compliance of the Progress button component is shown in the fo ## See also -* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility) +* [Accessibility in Syncfusion® ##Platform_Name## components](../common/accessibility) diff --git a/ej2-javascript/progress-button/js/es5-getting-started.md b/ej2-javascript/progress-button/js/es5-getting-started.md index a49851246..6791f7ff4 100644 --- a/ej2-javascript/progress-button/js/es5-getting-started.md +++ b/ej2-javascript/progress-button/js/es5-getting-started.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Progress button control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Control Initialization -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script and style references in a HTML page. * Using CDN link for script and style reference. @@ -24,7 +24,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` @@ -45,7 +45,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the > > Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-splitbuttons\styles\material.css` -The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > @@ -55,7 +55,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder `~/quickstart/resources` and copy/paste the global scripts and styles from the above installed location to `~/quickstart/resources/package` corresponding package location. -**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essential® JS 2 script and style references. ```html @@ -83,7 +83,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 5:** Now, add the `ProgressButton` element and initiate the `Syncfusion JavaScript ProgressButton` control in the `index.html` by using following code. +**Step 5:** Now, add the `ProgressButton` element and initiate the **Syncfusion® JavaScript ProgressButton** control in the `index.html` by using following code. ```html @@ -120,13 +120,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript ProgressButton** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript ProgressButton** control. ### Using CDN link for script and style reference **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** The Essential JS 2 control's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 control's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Dependency Script: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -142,7 +142,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin > > Styles: [`https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css`](https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `ProgressButton` element and initiate the `Syncfusion JavaScript ProgressButton` control in the index.html by using following code. +**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `ProgressButton` element and initiate the **Syncfusion® JavaScript ProgressButton** control in the index.html by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -152,7 +152,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/progress-button/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript ProgressButton` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript ProgressButton** control. ## Enabling Progress in Button diff --git a/ej2-javascript/progress-button/ts/getting-started.md b/ej2-javascript/progress-button/ts/getting-started.md index d5fe33319..39668e9eb 100644 --- a/ej2-javascript/progress-button/ts/getting-started.md +++ b/ej2-javascript/progress-button/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Progress button control -This section explains how to create a simple ProgressButton, and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple ProgressButton, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -28,7 +28,7 @@ The list of dependencies required to use the ProgressButton component in your ap ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -48,9 +48,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -62,7 +62,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render ProgressButton component, need to import Button and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/progressbar/accessibility.md b/ej2-javascript/progressbar/accessibility.md index 56b8185c7..5473ea14f 100644 --- a/ej2-javascript/progressbar/accessibility.md +++ b/ej2-javascript/progressbar/accessibility.md @@ -69,4 +69,4 @@ The accessibility compliance of the Progress bar control is shown in the followi ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/progressbar/index.md b/ej2-javascript/progressbar/index.md index 59a2b88a4..c7532e8bf 100644 --- a/ej2-javascript/progressbar/index.md +++ b/ej2-javascript/progressbar/index.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Index in ##Platform_Name## Progressbar control -The Essential EJ2 ProgressBar is a control that indicates the progress of a task with customizable visuals. It includes features to visualize progress in rectangular and circular shapes, determinate and indeterminate states, segments, and customized ranges in different colors. It also supports animation. +The Essential® EJ2 ProgressBar is a control that indicates the progress of a task with customizable visuals. It includes features to visualize progress in rectangular and circular shapes, determinate and indeterminate states, segments, and customized ranges in different colors. It also supports animation. ## Key features diff --git a/ej2-javascript/progressbar/js/es5-getting-started.md b/ej2-javascript/progressbar/js/es5-getting-started.md index 14b627dd7..b30fcd67f 100644 --- a/ej2-javascript/progressbar/js/es5-getting-started.md +++ b/ej2-javascript/progressbar/js/es5-getting-started.md @@ -32,20 +32,20 @@ Refer the following steps for setup your local environment. **Step 2:** Create **myapp/resources** folder to store local scripts and styles files. -**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential JS 2 ProgressBar control. +**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential® JS 2 ProgressBar control. -## Adding Syncfusion resources +## Adding Syncfusion® resources -The Essential JS 2 Progress Bar control can be initialized by using either of the following ways. +The Essential® JS 2 Progress Bar control can be initialized by using either of the following ways. * Using local script. * Using CDN link for script. ### Using local script -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. -After installing the Essential JS 2 product build, you can copy the ProgressBar and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. +After installing the Essential® JS 2 product build, you can copy the ProgressBar and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. Refer the below code to find location ProgressBar script and style file. @@ -121,7 +121,7 @@ The below html code example shows the minimal dependency of ProgressBar. Now, you can start adding Progress Bar control in the application. For getting started, add a **div** element for Progress Bar control in **index.html**. Then refer the **index.js** file into the **index.html** file. -In this document context we are going to use **ej2.min.js** which includes all the Essential JS 2 components and its dependent scripts. +In this document context we are going to use **ej2.min.js** which includes all the Essential® JS 2 components and its dependent scripts. ```html diff --git a/ej2-javascript/progressbar/ts/getting-started.md b/ej2-javascript/progressbar/ts/getting-started.md index c21cce901..62f4e9cab 100644 --- a/ej2-javascript/progressbar/ts/getting-started.md +++ b/ej2-javascript/progressbar/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Progressbar control -This section explains the steps required to create the ProgressBar control using TypeScript and configure its properties using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains the steps required to create the ProgressBar control using TypeScript and configure its properties using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -28,7 +28,7 @@ The following list of dependencies are required to use the ProgressBar control i ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -48,9 +48,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. diff --git a/ej2-javascript/query-builder/accessibility.md b/ej2-javascript/query-builder/accessibility.md index 0be9123f5..291bc3e7a 100644 --- a/ej2-javascript/query-builder/accessibility.md +++ b/ej2-javascript/query-builder/accessibility.md @@ -67,4 +67,4 @@ The accessibility compliance of the Query Builder component is shown in the foll ## See also -* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® ##Platform_Name## components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/query-builder/js/es5-getting-started.md b/ej2-javascript/query-builder/js/es5-getting-started.md index e72895cb2..69c077310 100644 --- a/ej2-javascript/query-builder/js/es5-getting-started.md +++ b/ej2-javascript/query-builder/js/es5-getting-started.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Query builder control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Control Initialization -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script and style references in a HTML page. * Using CDN link for script and style reference. @@ -24,7 +24,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Script: `**(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -40,7 +40,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder `~/quickstart/resources` and copy/paste the global scripts and styles from the above installed location to `~/quickstart/resources/package` corresponding package location. -**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` and add the Essential® JS 2 script and style references. ```html @@ -74,7 +74,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 5:** Now, add the `Query Builder` and initiate the `Syncfusion JavaScript (ES5) Query Builder` control in the `~/quickstart/index.html` by using following code +**Step 5:** Now, add the `Query Builder` and initiate the **Syncfusion® JavaScript (ES5) Query Builder** control in the `~/quickstart/index.html` by using following code ```html @@ -126,13 +126,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript Query Builder** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Query Builder** control. ### Using CDN link for script and style reference **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** The Essential JS 2 controls's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 controls's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Dependency Script: `http://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -148,7 +148,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin > > Styles: [`http://cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css`](http://cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Query Builder` and initiate the `Syncfusion JavaScript (ES5) Query Builder` control in the index.html by using following code. +**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `Query Builder` and initiate the **Syncfusion® JavaScript (ES5) Query Builder** control in the index.html by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -158,11 +158,11 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/query-builder/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript Query Builder` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Query Builder** control. ### Rendering with rule -Now, add the `Query Builder` and initiate the `Syncfusion JavaScript (ES5) Query Builder` control with rule in the `~/quickstart/index.html` by using following code +Now, add the `Query Builder` and initiate the **Syncfusion® JavaScript (ES5) Query Builder** control with rule in the `~/quickstart/index.html` by using following code ```html @@ -263,7 +263,7 @@ Now, add the `Query Builder` and initiate the `Syncfusion JavaScript (ES5) Query ``` -Now, add the `Query Builder` and initiate the `Syncfusion JavaScript (ES5) Query Builder` control with rule in the index.html by using following code. +Now, add the `Query Builder` and initiate the **Syncfusion® JavaScript (ES5) Query Builder** control with rule in the index.html by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} diff --git a/ej2-javascript/query-builder/ts/getting-started.md b/ej2-javascript/query-builder/ts/getting-started.md index 5a438e575..c868ceca5 100644 --- a/ej2-javascript/query-builder/ts/getting-started.md +++ b/ej2-javascript/query-builder/ts/getting-started.md @@ -30,7 +30,7 @@ The list of dependencies required to use the Query Builder component in your app ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -50,9 +50,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -64,7 +64,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render Query Builder component, need to import Button and its dependent components styles as given below in in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/radio-button/accessibility.md b/ej2-javascript/radio-button/accessibility.md index 0e27a74c4..73460d6af 100644 --- a/ej2-javascript/radio-button/accessibility.md +++ b/ej2-javascript/radio-button/accessibility.md @@ -60,10 +60,10 @@ The Radio button component followed the [keyboard interaction](https://www.w3.or The Radio button component component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. -The accessibility compliance of the Radio button component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/Radio button.html) in a new window to evaluate the accessibility of the Radio button component with accessibility tools. +The accessibility compliance of the Radio button component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/radiobutton.html) in a new window to evaluate the accessibility of the Radio button component with accessibility tools. {% previewsample "page.domainurl/code-snippet/radio-button/accessibility-cs1" %} ## See also -* [Accessibility in Syncfusion ##Platform_Name## components](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® ##Platform_Name## components](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/radio-button/js/ej1-api-migration.md b/ej2-javascript/radio-button/js/ej1-api-migration.md index 6bd17ab67..cfcbc275c 100644 --- a/ej2-javascript/radio-button/js/ej1-api-migration.md +++ b/ej2-javascript/radio-button/js/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Radio button control -This article describes the API migration process of RadioButton component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of RadioButton component from Essential® JS 1 to Essential® JS 2. ## Properties -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | RadioButton Label | **Property:** *text*

$("#radiobutton").ejRadioButton({
text: "RadioButton"
}); | **Property:** *label*

var radioButton = new ej.buttons.RadioButton({
label: "RadioButton"
});
radioButton.appendTo("#radiobutton"); | | Checked state | **Property:** *checked*

$("#radiobutton").ejRadioButton({
checked: true
}); | **Property:** *checked*

var radioButton = new ej.buttons.RadioButton({
checked: true
});
radioButton.appendTo("#radiobutton"); | @@ -34,7 +34,7 @@ This article describes the API migration process of RadioButton component from E ## Methods -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Destroy | **Method:** *destroy*

$("#radiobutton").ejRadioButton({
text: "RadioButton"
});
var radioButton = $("#radiobutton").data("ejRadioButton");
radioButton.destroy() | **Method:** *destroy*

var radioButton = new ej.buttons.RadioButton({
label: "RadioButton"
});
radioButton.appendTo("#radiobutton");
radioButton.destroy(); | | Disable the RadioButton | **Method:** *disable*

$("#radiobutton").ejRadioButton({
text: "RadioButton"
});
var radioButton = $("#radiobutton").data("ejRadioButton");
radiobutton.disable() | Not applicable | @@ -42,7 +42,7 @@ This article describes the API migration process of RadioButton component from E ## Events -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | BeforeChange Event | **Events:** *beforeChange*

$("#radiobutton").ejRadioButton({
beforeChange: function(args) { /** code block */ }
}); | Not applicable | | Change Event | **Events:** *change*

$("#radiobutton").ejRadioButton({
change: function(args) { /** code block */ }
}); | **Events:** *change*

var radioButton = new ej.buttons.RadioButton({
change: function(args) { /** code block */ }
});
radioButton.appendTo("#radiobutton"); | diff --git a/ej2-javascript/radio-button/js/es5-getting-started.md b/ej2-javascript/radio-button/js/es5-getting-started.md index e4ecb74e0..1fdd22558 100644 --- a/ej2-javascript/radio-button/js/es5-getting-started.md +++ b/ej2-javascript/radio-button/js/es5-getting-started.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Radio button control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Control Initialization -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script and style references in a HTML page. * Using CDN link for script and style reference. @@ -24,7 +24,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` @@ -44,7 +44,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the > > Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-buttons\styles\material.css` -The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > @@ -54,7 +54,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder `~/quickstart/resources` and copy/paste the global scripts and styles from the above installed location to `~/quickstart/resources/package` corresponding package location. -**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essential® JS 2 script and style references. ```html @@ -76,7 +76,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 5:** Now, add the `RadioButton` element and initiate the `Syncfusion Javascript RadioButton` control in the `~/quickstart/index.html` by using following code +**Step 5:** Now, add the `RadioButton` element and initiate the **Syncfusion® Javascript RadioButton** control in the `~/quickstart/index.html` by using following code ```html @@ -107,13 +107,13 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript RadioButton** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript RadioButton** control. ### Using CDN link for script and style reference **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** The Essential JS 2 control's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 control's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Dependency Script: `https://cdn.syncfusion.com/ej2/{DEPENDENCY_PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -129,7 +129,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin > > Styles: [`https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css`](https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `RadioButton` element and initiate the `Syncfusion Javascript RadioButton` control in the index.html by using following code. +**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `RadioButton` element and initiate the **Syncfusion® Javascript RadioButton** control in the index.html by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -142,11 +142,11 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/radio-button/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript RadioButton` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript RadioButton** control. ## Change the RadioButton state -The Essential JS 2 RadioButton contains 2 states visually, they are as follows: +The Essential® JS 2 RadioButton contains 2 states visually, they are as follows: * Checked * Unchecked diff --git a/ej2-javascript/radio-button/ts/ej1-api-migration.md b/ej2-javascript/radio-button/ts/ej1-api-migration.md index 7b464242c..ca20f2990 100644 --- a/ej2-javascript/radio-button/ts/ej1-api-migration.md +++ b/ej2-javascript/radio-button/ts/ej1-api-migration.md @@ -11,11 +11,11 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Radio button control -This article describes the API migration process of RadioButton component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of RadioButton component from Essential® JS 1 to Essential® JS 2. ## Properties -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | RadioButton Label | **Property:** *text*

new ej.RadioButton($("#radiobutton"), {
text: "RadioButton"
}); | **Property:** *label*

let radioButton: RadioButton= new RadioButton({
label: "RadioButton"
});
radioButton.appendTo("#radiobutton"); | | Checked state | **Property:** *checked*

new ej.RadioButton($("#radiobutton"), {
checked: true
}); | **Property:** *checked*

let radioButton: RadioButton= new RadioButton({
checked: true
});
radioButton.appendTo("#radiobutton"); | @@ -34,7 +34,7 @@ This article describes the API migration process of RadioButton component from E ## Methods -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Destroy | **Method:** *destroy*

var radioButton = new ej.RadioButton($("#radiobutton"), {
text: "RadioButton"
});
radioButton.destroy() | **Method:** *destroy*

let radioButton: RadioButton= new RadioButton({
label: "RadioButton"
});
radioButton.appendTo("#radiobutton");
radioButton.destroy(); | | Disable the RadioButton | **Method:** *disable*

var radioButton = new ej.RadioButton($("#radiobutton"), {
text: "RadioButton"
});
radiobutton.disable() | Not applicable | @@ -42,7 +42,7 @@ This article describes the API migration process of RadioButton component from E ## Events -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | BeforeChange Event | **Events:** *beforeChange*

var radioButton = new ej.RadioButton($("#radiobutton"), {
beforeChange: function (args) { /** code block */ }
}); | Not applicable | | Change Event | **Events:** *change*

var radioButton = new ej.RadioButton($("#radiobutton"), {
change: function (args) { /** code block */ }
}); | **Events:** *change*

let radioButton: RadioButton= new RadioButton({
change: (args) => { /** code block */ }
});
radioButton.appendTo("#radiobutton"); | diff --git a/ej2-javascript/radio-button/ts/getting-started.md b/ej2-javascript/radio-button/ts/getting-started.md index 0f0abc4cb..26dd9d9de 100644 --- a/ej2-javascript/radio-button/ts/getting-started.md +++ b/ej2-javascript/radio-button/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Radio button control -This section explains how to create a simple Radio button, and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Radio button, and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -26,7 +26,7 @@ The following list of dependencies are required to use the RadioButton component ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -46,9 +46,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -60,7 +60,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render RadioButton component, need to import Button and its dependent components styles as given below in the `~/src/styles/styles.css` file, as shown below: @@ -156,7 +156,7 @@ The following example shows a basic RadioButton component. ## Change the RadioButton state -The Essential JS 2 RadioButton contains 2 states visually, they are as follows: +The Essential® JS 2 RadioButton contains 2 states visually, they are as follows: * Checked * Unchecked diff --git a/ej2-javascript/range-navigator/accessibility.md b/ej2-javascript/range-navigator/accessibility.md index bfd60110f..d91e3cd67 100644 --- a/ej2-javascript/range-navigator/accessibility.md +++ b/ej2-javascript/range-navigator/accessibility.md @@ -66,4 +66,4 @@ The accessibility compliance of the Range navigator control is shown in the foll ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) diff --git a/ej2-javascript/range-navigator/ej1-api-migration.md b/ej2-javascript/range-navigator/ej1-api-migration.md index 8601a0438..9039acfe0 100644 --- a/ej2-javascript/range-navigator/ej1-api-migration.md +++ b/ej2-javascript/range-navigator/ej1-api-migration.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Range navigator control -This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2. +This article describes the API migration process of Chart component from Essential® JS 1 to Essential® JS 2. ## RangeNavigator @@ -19,8 +19,8 @@ This article describes the API migration process of Chart component from Essenti
- - + + @@ -740,8 +740,8 @@ Not Applicable
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -973,8 +973,8 @@ range.appendTo('#element');
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -1272,8 +1272,8 @@ Not Applicable
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -1454,8 +1454,8 @@ range.appendTo('#element');
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -1487,8 +1487,8 @@ range.appendTo('#element');
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + @@ -1534,8 +1534,8 @@ range.export('JPEG', 'chart');
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2
- - + + diff --git a/ej2-javascript/range-navigator/getting-started.md b/ej2-javascript/range-navigator/getting-started.md index 284c5201e..be92398b8 100644 --- a/ej2-javascript/range-navigator/getting-started.md +++ b/ej2-javascript/range-navigator/getting-started.md @@ -30,7 +30,7 @@ This section explains you the steps required to create a simple range navigator ## Setup for Local Development -Clone the Essential JS 2 quickstart application project from [GitHub](https://github.com/syncfusion/ej2-quickstart), and install the necessary npm packages using the following command line scripts. +Clone the Essential® JS 2 quickstart application project from [GitHub](https://github.com/syncfusion/ej2-quickstart), and install the necessary npm packages using the following command line scripts. ```javascript git clone https://github.com/angular/quickstart.git quickstart @@ -40,7 +40,7 @@ npm install ## Configuring System JS -Syncfusion Chart packages have to be mapped in the `system.config.js` configuration file to render range navigator. +Syncfusion® Chart packages have to be mapped in the `system.config.js` configuration file to render range navigator. ```javascript System.config({ @@ -201,7 +201,7 @@ Since the JSON contains Datetime data, set the `valueType` as `DateTime`. By def {% previewsample "page.domainurl/code-snippet/rangenavigator/getting-started-cs7" %} {% endif %} ->Note: Get data from [here](https://gitlab.syncfusion.com/essential-studio/ej2-samples/blob/master/src/rangenavigator/default_data.json). +>Note: Get data from [here](https://github.com/essential-studio/ej2-samples/blob/master/src/range-navigator/default-data.json). The sample should look like our [default](http://npmci.syncfusion.com/production/demos/#/material/rangenavigator/default.html), don’t worry about the gradient color, let it takes the default color. diff --git a/ej2-javascript/range-navigator/js/es5-getting-started.md b/ej2-javascript/range-navigator/js/es5-getting-started.md index 261ecbe41..5622a5563 100644 --- a/ej2-javascript/range-navigator/js/es5-getting-started.md +++ b/ej2-javascript/range-navigator/js/es5-getting-started.md @@ -37,20 +37,20 @@ Refer the following steps for setup your local environment. **Step 2:** Create **myapp/resources** folder to store local scripts and styles files. -**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential JS 2 Range Selector control. +**Step 3:** Create **myapp/index.js** and **myapp/index.html** files for initializing Essential® JS 2 Range Selector control. -## Adding Syncfusion resources +## Adding Syncfusion® resources -The Essential JS 2 range selector control can be initialized by using either of the following ways. +The Essential® JS 2 range selector control can be initialized by using either of the following ways. * Using local script. * Using CDN link for script. ### Using local script -You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. -After installing the Essential JS 2 product build, you can copy the chart and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. +After installing the Essential® JS 2 product build, you can copy the chart and its dependencies scripts and style file into the **resources/scripts** and **resources/styles** folder. Refer the below code to find location range selector's script and style file. @@ -126,7 +126,7 @@ The below html code example shows the minimal dependency of chart. Now, you can start adding range selector control in the application. For getting started, add a **div** element for Chart control in **index.html**. Then refer the **index.js** file into the **index.html** file. -In this document context we are going to use **ej2.min.js** which includes all the Essential JS 2 components and its dependent scripts. +In this document context we are going to use **ej2.min.js** which includes all the Essential® JS 2 components and its dependent scripts. ```html diff --git a/ej2-javascript/range-navigator/ts/getting-started.md b/ej2-javascript/range-navigator/ts/getting-started.md index 738949f19..9b7cd316b 100644 --- a/ej2-javascript/range-navigator/ts/getting-started.md +++ b/ej2-javascript/range-navigator/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Range navigator control -This section explains how to create a simple Range navigator and configure its available functionalities in TypeScript using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Range navigator and configure its available functionalities in TypeScript using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -32,7 +32,7 @@ This section explains how to create a simple Range navigator and configure its a ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -52,9 +52,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -68,7 +68,7 @@ npm install ## Add Range Navigator to the Project -Open the application in Visual Studio Code and add the Syncfusion JavaScript UI controls. +Open the application in Visual Studio Code and add the Syncfusion® JavaScript UI controls. Add the HTML div tag with its `id` attribute as `element` in your `~/src/index.html` file to initialize the Range Navigator. diff --git a/ej2-javascript/range-slider/accessibility.md b/ej2-javascript/range-slider/accessibility.md index 7951e5e68..6c36af198 100644 --- a/ej2-javascript/range-slider/accessibility.md +++ b/ej2-javascript/range-slider/accessibility.md @@ -76,4 +76,4 @@ The accessibility compliance of the Range Slider control is shown in the followi ## See also -* [Accessibility in Syncfusion ##Platform_Name## controls](../common/accessibility) +* [Accessibility in Syncfusion® ##Platform_Name## controls](../common/accessibility) diff --git a/ej2-javascript/range-slider/getting-started.md b/ej2-javascript/range-slider/getting-started.md index 19fda582a..23e1c360a 100644 --- a/ej2-javascript/range-slider/getting-started.md +++ b/ej2-javascript/range-slider/getting-started.md @@ -28,7 +28,7 @@ The following list of dependencies are required to use the Slider control in you ## Set up your development environment -To get started with Slider control, you can clone the [Essential JS 2 quickstart](https://github.com/syncfusion/ej2-quickstart.git) project, and +To get started with Slider control, you can clone the [Essential® JS 2 quickstart](https://github.com/syncfusion/ej2-quickstart.git) project, and install the packages by using the following commands. ``` @@ -37,7 +37,7 @@ cd quickstart npm install ``` -> The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with the common settings (`src/styles/index.css`, `system.config.js`) to start with all Essential JS 2 controls. +> The [project](https://github.com/syncfusion/ej2-quickstart.git) is preconfigured with the common settings (`src/styles/index.css`, `system.config.js`) to start with all Essential® JS 2 controls. ## Adding Slider to the project @@ -105,7 +105,7 @@ slider.appendTo('#slider'); ## Run the application -The `Essential JS 2 quickstart` application project is configured to compile and run the application in browser. Use the following command to run the application. +The **Essential® JS 2 quickstart** application project is configured to compile and run the application in browser. Use the following command to run the application. ``` npm start diff --git a/ej2-javascript/range-slider/js/ej1-api-migration.md b/ej2-javascript/range-slider/js/ej1-api-migration.md index 0f450be8e..0e99d7457 100644 --- a/ej2-javascript/range-slider/js/ej1-api-migration.md +++ b/ej2-javascript/range-slider/js/ej1-api-migration.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Range Slider control -This article describes the API migration process of Range Slider control from Essential JS 1 to Essential JS 2 +This article describes the API migration process of Range Slider control from Essential® JS 1 to Essential® JS 2 -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Max value | **Property:** *maxValue*
$("#slider").ejSlider({
maxValue: 60
}); | **Property:** *max*
let slider: Slider = new ej.inputs.Slider({
max : 100
});
slider.appendTo('#test'); | | Min value | **Property:** *minValue*
$("#slider").ejSlider({
minValue: 60
}); | **Property:** *min*
let slider: Slider = new ej.inputs.Slider({
min : 10
});
slider.appendTo('#test'); | diff --git a/ej2-javascript/range-slider/js/getting-started.md b/ej2-javascript/range-slider/js/getting-started.md index 75ef4ea65..f2f9d6eb3 100644 --- a/ej2-javascript/range-slider/js/getting-started.md +++ b/ej2-javascript/range-slider/js/getting-started.md @@ -11,20 +11,20 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Range Slider control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## control Initialization -The Essential JS 2 JavaScript controls can be initialized by using either of the following ways. +The Essential® JS 2 JavaScript controls can be initialized by using either of the following ways. * Using local script and style references in a HTML page. * Using CDN link for script and style reference. ### Using local script and style references in a HTML page -**Step 1:** Create an app folder `myapp` for Essential JS 2 JavaScript controls. +**Step 1:** Create an app folder `myapp` for Essential® JS 2 JavaScript controls. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js` @@ -37,7 +37,7 @@ The Essential JS 2 JavaScript controls can be initialized by using either of the > > Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\styles\material.css` -The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > @@ -45,7 +45,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) **Step 3:** Create a folder `myapp/resources` and copy/paste the global scripts and styles from the above installed location to `myapp/resources` location. -**Step 4:** Create a HTML page (index.html) in `myapp` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `myapp` location and add the Essential® JS 2 script and style references. ```html @@ -64,7 +64,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) ``` -**Step 5:** Now, add the `Slider` element and initiate the `Essential JS 2 Range Slider` control in the `index.html` by using following code +**Step 5:** Now, add the `Slider` element and initiate the **Essential® JS 2 Range Slider** control in the `index.html` by using following code ```html @@ -91,13 +91,13 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential JS 2 Range Slider** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 Range Slider** control. ### Using CDN link for script and style reference -**Step 1:** Create an app folder `myapp` for the Essential JS 2 JavaScript controls. +**Step 1:** Create an app folder `myapp` for the Essential® JS 2 JavaScript controls. -**Step 2:** The Essential JS 2 control's global scripts and styles are already hosted in the below CDN link formats. +**Step 2:** The Essential® JS 2 control's global scripts and styles are already hosted in the below CDN link formats. **Syntax:** > Script: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js` @@ -109,7 +109,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) > > Styles: [`https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css`](https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css) -**Step 3:** Create a HTML page (index.html) in `myapp` location and add the CDN link references. Now, add the `Slider` element and initiate the `Essential JS 2 Range Slider` control in the `index.html` by using following code. +**Step 3:** Create a HTML page (index.html) in `myapp` location and add the CDN link references. Now, add the `Slider` element and initiate the **Essential® JS 2 Range Slider** control in the `index.html` by using following code. {% tabs %} {% highlight html tabtitle="index.html" %} @@ -122,7 +122,7 @@ The below located script and style file contains all Syncfusion JavaScript (ES5) {% previewsample "page.domainurl/code-snippet/slider/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 Range Slider` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 Range Slider** control. > Need to refer dependency control styles and scripts as like above example. We can also use [CRG](https://crg.syncfusion.com/) to generate combined control styles. diff --git a/ej2-javascript/range-slider/ts/ej1-api-migration.md b/ej2-javascript/range-slider/ts/ej1-api-migration.md index 9e48312c6..882c8a431 100644 --- a/ej2-javascript/range-slider/ts/ej1-api-migration.md +++ b/ej2-javascript/range-slider/ts/ej1-api-migration.md @@ -11,9 +11,9 @@ domainurl: ##DomainURL## # Ej1 api migration in ##Platform_Name## Range Slider control -This article describes the API migration process of Range Slider control from Essential JS 1 to Essential JS 2 +This article describes the API migration process of Range Slider control from Essential® JS 1 to Essential® JS 2 -| Behavior | API in Essential JS 1 | API in Essential JS 2 | +| Behavior | API in Essential® JS 1 | API in Essential® JS 2 | | --- | --- | --- | | Max value | **Property:** *maxValue*
var sliderObj = new ej.Slider($("#slider"),{
maxValue: 60
}); | **Property:** *max*
let slider: Slider = new Slider({
max : 100
});
slider.appendTo('#test'); | | Min value | **Property:** *minValue*
var sliderObj = new ej.Slider($("#slider"),{
minValue: 60
}); | **Property:** *min*
let slider: Slider = new Slider({
min : 10
});
slider.appendTo('#test'); | diff --git a/ej2-javascript/range-slider/ts/getting-started.md b/ej2-javascript/range-slider/ts/getting-started.md index f39cb4da9..fea0d0fbf 100644 --- a/ej2-javascript/range-slider/ts/getting-started.md +++ b/ej2-javascript/range-slider/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Range Slider control -This section explains how to create a simple Range Slider control and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Range Slider control and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -31,7 +31,7 @@ The following list of dependencies are required to use the Range Slider control ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -51,9 +51,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -65,9 +65,9 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles -Combined CSS files are available in the Essential JS 2 package root folder. This can be referenced in the `~/src/styles/styles.css` file, as shown below: +Combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in the `~/src/styles/styles.css` file, as shown below: {% tabs %} {% highlight css tabtitle="style.css" %} @@ -142,7 +142,7 @@ slider.appendTo('#slider'); ## Run the application -The `Essential JS 2 quickstart` application project is configured to compile and run the application in browser. Use the following command to run the application. +The **Essential® JS 2 quickstart** application project is configured to compile and run the application in browser. Use the following command to run the application. {% tabs %} {% highlight bash tabtitle="NPM" %} diff --git a/ej2-javascript/rating/js/accessibility.md b/ej2-javascript/rating/js/accessibility.md index 2fd1ff1ac..111e957d8 100644 --- a/ej2-javascript/rating/js/accessibility.md +++ b/ej2-javascript/rating/js/accessibility.md @@ -75,4 +75,4 @@ The accessibility compliance of the Rating control is shown in the following sam ## See also -* [Accessibility in Syncfusion JavaScript controls](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® JavaScript controls](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/rating/js/es5-getting-started.md b/ej2-javascript/rating/js/es5-getting-started.md index 50e228ed8..64368532f 100644 --- a/ej2-javascript/rating/js/es5-getting-started.md +++ b/ej2-javascript/rating/js/es5-getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Es5 getting started in ##Platform_Name## Rating control -The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. +The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers. ## Dependencies @@ -34,7 +34,7 @@ The JavaScript (ES5) Rating control can be initialized by using either of the fo **Step 1:** Create an app folder `quickstart` for getting started. -**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. +**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2) build installed location. **Syntax:** > Dependency Script: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{DEPENDENCY_PACKAGE_NAME}\dist\global\{DEPENDENCY_PACKAGE_NAME}.min.js` @@ -55,7 +55,7 @@ The JavaScript (ES5) Rating control can be initialized by using either of the fo > > Control Styles: `C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\styles\material.css` -The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file. +The below located script and style file contains all Syncfusion® JavaScript (ES5) UI control resources in a single file. > Scripts: `**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js` > @@ -65,7 +65,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin **Step 3:** Create a folder `~/quickstart/resources` and copy/paste the global scripts and styles from the above installed location to `~/quickstart/resources/package` corresponding package location. -**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essentials JS 2 script and style references. +**Step 4:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the Essential® JS 2 script and style references. ```html @@ -127,7 +127,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin ``` -**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion JavaScript (ES5) Rating** control. +**Step 6:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript (ES5) Rating** control. ## Using CDN link for script and style reference @@ -162,7 +162,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin {% previewsample "page.domainurl/code-snippet/rating/es5-getting-started-cs1" %} -**Step 4:** Now, run the `index.html` in web browser, it will render the `Syncfusion JavaScript Rating` control. +**Step 4:** Now, run the `index.html` in web browser, it will render the **Syncfusion® JavaScript Rating** control. ## Value diff --git a/ej2-javascript/rating/ts/accessibility.md b/ej2-javascript/rating/ts/accessibility.md index f734e067d..beec3e989 100644 --- a/ej2-javascript/rating/ts/accessibility.md +++ b/ej2-javascript/rating/ts/accessibility.md @@ -75,4 +75,4 @@ The accessibility compliance of the Rating control is shown in the following sam ## See also -* [Accessibility in Syncfusion TypeScript controls](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® TypeScript controls](../common/accessibility) \ No newline at end of file diff --git a/ej2-javascript/rating/ts/getting-started.md b/ej2-javascript/rating/ts/getting-started.md index 8e89b4223..eb2860a24 100644 --- a/ej2-javascript/rating/ts/getting-started.md +++ b/ej2-javascript/rating/ts/getting-started.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Getting started in ##Platform_Name## Rating control -This section explains how to create a simple Rating component and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. +This section explains how to create a simple Rating component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository. > This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/). @@ -28,7 +28,7 @@ The list of dependencies required to use the Rating control in your application ## Set up development environment -Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). +Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-). {% tabs %} {% highlight bash tabtitle="CMD" %} @@ -48,9 +48,9 @@ cd ej2-quickstart {% endhighlight %} {% endtabs %} -## Add Syncfusion JavaScript packages +## Add Syncfusion® JavaScript packages -Syncfusion JavaScript (Essential JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. +Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control. The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt. @@ -62,7 +62,7 @@ npm install {% endhighlight %} {% endtabs %} -## Import the Syncfusion CSS styles +## Import the Syncfusion® CSS styles To render Rating control, need to import inputs and its dependent controls styles as given below in the `~/src/styles/styles.css` file, as shown below: diff --git a/ej2-javascript/right-to-left.md b/ej2-javascript/right-to-left.md index 29b1a82f6..8caf92eaa 100644 --- a/ej2-javascript/right-to-left.md +++ b/ej2-javascript/right-to-left.md @@ -9,10 +9,10 @@ documentation: ug domainurl: ##DomainURL## --- -# Right-To-Left support in Syncfusion JavaScript Controls +# Right-To-Left support in Syncfusion® JavaScript Controls -Right To Left (RTL) can be enabled for Syncfusion JavaScript UI controls by calling [`enableRtl`](./api/base/staticFunctions#enablertl) with -`true`. This will render all the Syncfusion JavaScript controls in right to left direction. Find the code snippet +Right To Left (RTL) can be enabled for Syncfusion® JavaScript UI controls by calling [`enableRtl`](./api/base/staticFunctions#enablertl) with +`true`. This will render all the Syncfusion® JavaScript controls in right to left direction. Find the code snippet for this below. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/schedule/accessibility.md b/ej2-javascript/schedule/accessibility.md index 6b20061a0..bdc7cedef 100644 --- a/ej2-javascript/schedule/accessibility.md +++ b/ej2-javascript/schedule/accessibility.md @@ -94,4 +94,4 @@ The accessibility compliance of the Scheduler control is shown in the following ## See also -- [Accessibility in Syncfusion components](../common/accessibility) +- [Accessibility in Syncfusion® components](../common/accessibility) diff --git a/ej2-javascript/schedule/clipboard.md b/ej2-javascript/schedule/clipboard.md index 897621032..94c257256 100644 --- a/ej2-javascript/schedule/clipboard.md +++ b/ej2-javascript/schedule/clipboard.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Clipboard in ##Platform_Name## Scheduler control -The Clipboard functionality in the Syncfusion Scheduler control enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially beneficial for those managing multiple appointments, as it eliminates the need for repetitive data entry and allows users to quickly adjust their schedules without hassle. +The Clipboard functionality in the Syncfusion® Scheduler control enhances scheduling efficiency by enabling users to cut, copy, and paste appointments with ease. This feature is especially beneficial for those managing multiple appointments, as it eliminates the need for repetitive data entry and allows users to quickly adjust their schedules without hassle. To activate the clipboard feature in the scheduler, simply set the [`allowClipboard`](https://ej2.syncfusion.com/documentation/api/schedule/#allowclipboard) property to **true**. @@ -19,7 +19,7 @@ To activate the clipboard feature in the scheduler, simply set the [`allowClipbo ## Cut, copy and paste using keyboard -The Syncfusion Scheduler control supports keyboard shortcuts to streamline the process of managing appointments. +The Syncfusion® Scheduler control supports keyboard shortcuts to streamline the process of managing appointments. These keyboard shortcuts enable users to efficiently manage their schedules: @@ -70,7 +70,7 @@ To use these shortcuts, simply click on the appointment and press **Ctrl+C** to You can programmatically manage appointments by using the public methods **cut**, **copy**, and **paste**. These methods allow you to perform the same actions as the context menu or external buttons. -Utilize these public methods to manage appointments programmatically in Syncfusion Schedule control: +Utilize these public methods to manage appointments programmatically in Syncfusion® Schedule control: | Method | Parameters | Description | |--------|--------------------------------|-------------------------------------------------------------------------------------------------| diff --git a/ej2-javascript/schedule/editor-template.md b/ej2-javascript/schedule/editor-template.md index 125df8098..3ba291a1c 100644 --- a/ej2-javascript/schedule/editor-template.md +++ b/ej2-javascript/schedule/editor-template.md @@ -336,7 +336,7 @@ Each field defined within template should contain the **e-field** class, to allo >Note: **e-field** class only applicable for **DropDownList**, **DateTimePicker**, **MultiSelect**, **DatePicker**, **CheckBox** and **TextBox** components. Since we have processed the field values internally for the above mentioned components. -As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as **DropDownList** and **DateTimePicker** within the [`popupOpen`](../api/schedule#popupopen) event. This particular step can be skipped, if the user needs to simply use the usual form elements. +As we are using our Syncfusion® sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion® components such as **DropDownList** and **DateTimePicker** within the [`popupOpen`](../api/schedule#popupopen) event. This particular step can be skipped, if the user needs to simply use the usual form elements. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/schedule/header-bar.md b/ej2-javascript/schedule/header-bar.md index 7fb8884ee..25f23622a 100644 --- a/ej2-javascript/schedule/header-bar.md +++ b/ej2-javascript/schedule/header-bar.md @@ -52,7 +52,7 @@ By default, the header bar holds the date and view navigation options, through w ## Customizing header bar using template -Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the [`toolbarItems`](https://ej2.syncfusion.com/documentation/api/schedule/#toolbaritems) property. To display the default items, it's essential to assign a [`name`](https://ej2.syncfusion.com/documentation/api/schedule/toolbarItem/#name) field to each item. The names of the default items are `Previous`, `Next`, `Today`, `DateRangeText`, `NewEvent`, and `Views`. For custom items you can give the name as `Custom` to the [`name`](https://ej2.syncfusion.com/documentation/api/schedule/toolbarItem/#name) field. Here, the default items such as previous, next, date range text, and today have been used along with external dropdown list as custom items. +Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the [`toolbarItems`](https://ej2.syncfusion.com/documentation/api/schedule/#toolbaritems) property. To display the default items, it's Essential® to assign a [`name`](https://ej2.syncfusion.com/documentation/api/schedule/toolbarItem/#name) field to each item. The names of the default items are `Previous`, `Next`, `Today`, `DateRangeText`, `NewEvent`, and `Views`. For custom items you can give the name as `Custom` to the [`name`](https://ej2.syncfusion.com/documentation/api/schedule/toolbarItem/#name) field. Here, the default items such as previous, next, date range text, and today have been used along with external dropdown list as custom items. {% if page.publishingplatform == "typescript" %} diff --git a/ej2-javascript/schedule/how-to/salesforce-integration.md b/ej2-javascript/schedule/how-to/salesforce-integration.md index 8414a6aab..87d7df1b4 100644 --- a/ej2-javascript/schedule/how-to/salesforce-integration.md +++ b/ej2-javascript/schedule/how-to/salesforce-integration.md @@ -23,7 +23,7 @@ Before getting started, make sure you have the following prerequisites need to b To begin the integration process, you need to configure Salesforce by following these steps. -[Sign up](https://developer.salesforce.com/signup) with salesforce developer account, if you don’t have salesforce account, sign up for one to access the necessary tools and resources for integration. +[Sign up](https://www.salesforce.com/form/developer-signup/) with salesforce developer account, if you don’t have salesforce account, sign up for one to access the necessary tools and resources for integration. [Log in](https://login.salesforce.com/) with salesforce account. @@ -83,7 +83,7 @@ sfdx org:create:scratch -f config/project-scratch-def.json ## Adding static resources -To integrate the Syncfusion scripts and styles as static resource files within Salesforce, follow these steps. +To integrate the Syncfusion® scripts and styles as static resource files within Salesforce, follow these steps. Use the following command to open the scratch project in the browser @@ -97,7 +97,7 @@ In the Salesforce setup menu, search for `Static Resources` and click on **New** ![Salesforce Setup menu](../images/Salesforce-setup-menu.png) -Load the Syncfusion scripts and styles as static files in a zip format, which you can obtain from the [CRG](https://crg.syncfusion.com/). +Load the Syncfusion® scripts and styles as static files in a zip format, which you can obtain from the [CRG](https://crg.syncfusion.com/). In the static resource tab, provide a name for the static resource files, upload the zip file, and change the cache control to `Public`. Click **Save** button to add the static resources to your Salesforce project. @@ -111,7 +111,7 @@ In the Salesforce setup menu, search for `CSP Trusted Sites` and click New Trust ![Salesforce CSP trusted sites](../images/Salesforce-CSP-trusted-sites.png) -Enter the trusted site name and URL. For example, if the Syncfusion static styles refer to https://fonts.googleapis.com, enter that URL as the trusted site URL. +Enter the trusted site name and URL. For example, if the Syncfusion® static styles refer to https://fonts.googleapis.com, enter that URL as the trusted site URL. Enable the following options to bypass the CSP issues and Click Save button to apply the changes. @@ -194,7 +194,7 @@ sfdx lightning:generate:component --type lwc -n scheduler -d force-app/main/defa ``` -3. Open the `scheduler.html` file located in `force-app/main/default/lwc/scheduler` and add an element with a class name to append the Syncfusion scheduler. Here's an example of the modified file. +3. Open the `scheduler.html` file located in `force-app/main/default/lwc/scheduler` and add an element with a class name to append the Syncfusion® scheduler. Here's an example of the modified file. ```html
BehaviourAPI in Essential JS 1API in Essential JS 2API in Essential® JS 1API in Essential® JS 2