This repository has been archived by the owner. It is now read-only.

File tree

4 files changed

+162
-3
lines changed

4 files changed

+162
-3
lines changed
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ calcObj.setValueRowCol = function (sheetID, value, row, col) {
309309
310310
### Evaluating formula
311311
312-
The given formula in the text box can be evaluated using `parseAndComputeFormula` by click on the `compute` button.
312+
The given formula in the text box can be evaluated using `parseAndComputeFormula` by clicking on the `compute` button.
313313
314314
{% highlight javascript %}
315315
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ N>'bower init'
9393

9494
You can install the Syncfusion Bower package from a local directory. To perform this follow the below steps.
9595

96-
1. Navigate the [Syncfusion JavaScript Bower repository](https://.com/syncfusion/JavaScript-Widgets/) location on and download the repository as zip by click the “Download ZIP” button and extract the contents in your computer’s any of the local directory.
96+
1. Navigate the [Syncfusion JavaScript Bower repository](https://.com/syncfusion/JavaScript-Widgets/) location on and download the repository as zip by clicking the “Download ZIP” button and extract the contents in your computer’s any of the local directory.
9797

9898
![](Installation-and-Deployment_images/Installation-and-Deployment_img8.jpeg)
9999

@@ -168,7 +168,7 @@ N> 'npm init'
168168

169169
Install the Syncfusion JavaScript npm package from a local directory.
170170

171-
1. Navigate the [Syncfusion JavaScript repository](https://.com/syncfusion/JavaScript-Widgets) location on and download the repository as zip by click the “Download ZIP” button and extract the contents in your computer’s any of the local directory.
171+
1. Navigate the [Syncfusion JavaScript repository](https://.com/syncfusion/JavaScript-Widgets) location on and download the repository as zip by clicking the “Download ZIP” button and extract the contents in your computer’s any of the local directory.
172172

173173
![](Installation-and-Deployment_images/npminstallationsteps_img4.jpeg)
174174

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Essential Studio for JavaScript Weekly Nuget Release Release Notes
3+
description: Essential Studio for JavaScript Weekly Nuget Release Release Notes
4+
platform: js
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for JavaScript Release Notes
9+
10+
{% include release-info.html date="March 23, 2021" version="v18.4.0.49" %}
11+
12+
13+
{% directory path: _includes/release-notes/v18.4.0.49 %}
14+
15+
{% include {{file.url}} %}
16+
17+
{% enddirectory %}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
layout: post
3+
title: Compatibility with Syncfusion Essential JS1 and JS2 widgets
4+
description: Learn how to show Compatibility with Syncfusion Essential JS1 and JS2 widgets with Javascript platform.
5+
platform: js
6+
control: Introduction
7+
documentation: ug
8+
---
9+
10+
# Compatibility with Essential JS 2 Components
11+
12+
The Essential JS 1 components can be compatible with the Essential JS 2 components in the same web page. For this we need to follow the below steps,
13+
14+
15+
## Script Compatibility
16+
17+
We should maintain the script reference order (refer Essential JS 1 before Essential JS 2) for this, and we should extend the Essential JS 1 namespace with Essential JS 2.
18+
Please find the below code for script references.
19+
20+
{% highlight html %}
21+
22+
<!-- Essential JS 1 script -->
23+
<script src="http://cdn.syncfusion.com/16.1.0.24/js/web/ej.web.all.min.js"></script>
24+
<!-- Essential JS 2 script -->
25+
<script src="http://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
26+
<script>
27+
//Extend ej namespace with Syncfusion
28+
$.extend(ej, Syncfusion)
29+
</script>
30+
31+
{% endhighlight %}
32+
33+
34+
## Theme Compatibility
35+
36+
We have provided compatibility css files for all the Essential JS 1 web components in all the themes, since we have used same classes for Essential JS 1 and Essential JS 2 components. So, the both classes were overrides with each other. We have provided this support for all the themes which are available in Essential JS 1.
37+
38+
You can find the compatibility theme files which are ends with the name compatibility in the below mentioned location.
39+
40+
widgets.core - **(installed location)** \Syncfusion\Essential Studio\{RELEASE_VERSION}\ JavaScript\assets\css\web\ej.widgets.core.compatibility.min.css
41+
theme - **(installed location)**\Syncfusion\Essential Studio\{RELEASE_VERSION}\ JavaScript\assets\css\web\default-theme\ej.theme.compatibility.min.css
42+
43+
N>We have illustrated flat azure theme in this document. However, all the themes in Essential JS 1 have compatibility support.
44+
45+
46+
## Compatibility Themes
47+
48+
1. Bootstrap
49+
2. Azure and its variants (Flat, Dark, Gradient)
50+
3. Saffron and its variants
51+
4. Lime and its variants
52+
5. High Contrast 01
53+
6. High Contrast 02
54+
7. Material
55+
8. Office 365
56+
57+
You can get the compatibility css in the following way.
58+
59+
* You can get the compatibility theme files from the below build installed location.
60+
61+
**(installed location) **\Syncfusion\Essential Studio\ {RELEASE_VERSION} \ JavaScript\assets\css\web
62+
63+
64+
## Creating Sample Application for Essential JS 1 Component
65+
66+
67+
### Create Essential JS 1 Button
68+
69+
You can refer the [`Getting Started`](https://help.syncfusion.com/js/button/getting-started#create-button-widget) to create the button component. Now you can modify the sample’s css references as below to refer the compatibility themes.
70+
71+
Please refer the below code snippet.
72+
73+
{% highlight html %}
74+
75+
<!-- Style sheet for default theme (flat Azure) -->
76+
<link href="http://cdn.syncfusion.com/16.1.0.24/js/web/flat-azure/ej.web.all.compatibility.min.css" rel="stylesheet" />
77+
78+
{% endhighlight %}
79+
80+
81+
### Add Essential JS 2 Button
82+
83+
You can refer the [`Getting Started`](http://npmci.syncfusion.com/production/documentation/getting-started/JavaScript-ES5.html?lang=es5) for button creation and made the Essential JS 2 related changes in the same html file.
84+
85+
Please find the below html code.
86+
87+
{% highlight html %}
88+
89+
<!DOCTYPE html>
90+
<html xmlns="http://www.w3.org/1999/xhtml">
91+
92+
<head>
93+
<title>Essential JS 2 - Essential JS 1</title>
94+
<!-- Essential JS 1 default theme -->
95+
<link href=" http://cdn.syncfusion.com/16.1.0.24/js/web/flat-azure/ej.web.all.compatibility.min.css " rel="stylesheet" type="text/css" />
96+
<!-- Essential JS 2 material theme -->
97+
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" rel="stylesheet" type="text/css" />
98+
<!-- Essential JS 1 scripts -->
99+
<script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
100+
<script src="https://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>
101+
<script src=" https://cdn.syncfusion.com/16.1.0.24/js/web/ej.web.all.min.js" type="text/javascript"></script>
102+
<!-- Essential JS 2 script -->
103+
<script src=" https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
104+
</head>
105+
106+
<body>
107+
<div style="margin: 50px;">
108+
<!-- Add HTML Button element for Essential JS 2 -->
109+
<button id="btn2">Essential JS 2</button>
110+
</div>
111+
<div style="margin: 50px;">
112+
<!-- Add HTML Button element for Essential JS 1 -->
113+
<button id="btn1">Essential JS 1</button>
114+
</div>
115+
</body>
116+
117+
</html>
118+
119+
{% endhighlight %}
120+
121+
Please find the below Javascript code.
122+
123+
{% highlight html %}
124+
125+
<script>
126+
// Extend ej namespace with Syncfusion
127+
$.extend(ej, Syncfusion);
128+
// Initialize Essential JS 1 JavaScript Button component
129+
$("#btn1").ejButton();
130+
// Initialize Essential JS 2 JavaScript Button component
131+
var button = new ej.buttons.Button({});
132+
button.appendTo('#btn2');
133+
</script>
134+
135+
{% endhighlight %}
136+
137+
138+
### Run the Sample
139+
140+
Now run the html page which contains Essential JS 1 Button and Essential JS 2 Button and the output look like below,
141+
142+
![Compatibility](compatibility_images/compatibility.png)

0 commit comments

Comments
 (0)