Skip to content

Commit 2b90e1d

Browse files
SenthilarasuBaluSenthilarasuBalu
authored
Merge branch 'development' into EJ2-866027-createPopupDev
2 parents 0fc6695 + 14541ec commit 2b90e1d

File tree

65 files changed

+3330
-109
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+3330
-109
lines changed

‎ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/library-unpkg-theme-scss.png

26.1 KB
Loading

‎ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/themes-libman-compile.png

38.1 KB
Loading

‎ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/vs_extension.png

2.89 KB
Loading

‎ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/images/web_compiler.png

19.5 KB
Loading

‎ej2-asp-core-mvc/EJ2_ASP.NETCORE/appearance/theme.md

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -710,11 +710,11 @@ LibMan offers the following advantages,
710710

711711
![Select unpkg provider](images/client-library-unpkg.png)
712712

713-
3.you can refer the combined control styles by using `@syncfusion/ej2@{{ site.ej2version }}` in the library textbox.
713+
3.You can refer the combined control styles by using `@syncfusion/ej2@{{ site.ej2version }}` in the library textbox.
714714

715715
![Specify Syncfusion library](images/library-unpkg.png)
716716

717-
4.you can able to choose specific files or include all library files like below.
717+
4.You can able to choose specific files or include all library files like below.
718718

719719
For example, Choose specific files and the bootstrap5 theme is selected in the dialog.
720720

@@ -765,6 +765,87 @@ N> If you use individual control styles, you should install their dependent cont
765765

766766
8.Run the application and see the bootstrap5 themes downloaded from LibMan were applied.
767767

768+
You can also choose `SCSS` file and customize theme variables using the [Web Compiler 2022+](https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64) by following steps.
769+
770+
![Choose SCSS file](images/library-unpkg-theme-scss.png)
771+
772+
1.Now, use a specific target location and click the install button to get the `libman.json` with the following content.
773+
774+
{% tabs %}
775+
{% highlight cshtml tabtitle="libman.json" %}
776+
777+
{
778+
"version": "1.0",
779+
"defaultProvider": "unpkg",
780+
"libraries": [
781+
{
782+
"library": "@syncfusion/ej2@{{ site.ej2version }}",
783+
"destination": "wwwroot/lib/syncfusion/ej2/",
784+
"files": [
785+
"base/bootstrap5.scss"
786+
]
787+
}
788+
]
789+
}
790+
791+
{% endhighlight %}
792+
{% endtabs %}
793+
794+
2.Open Command Prompt from the application root directory and run the following command to install the Syncfusion `node_modules` in this application.
795+
796+
{% tabs %}
797+
{% highlight c# tabtitle="CMD" %}
798+
799+
npm install @syncfusion/ej2
800+
801+
{% endhighlight %}
802+
{% endtabs %}
803+
804+
3.Open Visual Studio 2022 and click the Extensions in the toolbar.
805+
806+
![VS Extension](images/vs_extension.png)
807+
808+
4.Search the `Web Compiler 2022+` in search box and download the extension.
809+
810+
![Web Compiler 2022+](images/web_compiler.png)
811+
812+
5.Right-click the `SCSS` file and click the Web Compiler to compile the file.
813+
814+
![Themes-libman-compile](images/themes-libman-compile.png)
815+
816+
6.The `compilerconfig.json` file is created by default. Then, provide the location of the compiled CSS file and include a path as shown in the following code snippet.
817+
818+
{% tabs %}
819+
{% highlight c# tabtitle="compilerconfig.json" %}
820+
821+
[
822+
{
823+
"inputFile": "wwwroot/lib/syncfusion/ej2/base/bootstrap5.scss",
824+
"outputFile": "wwwroot/lib/syncfusion/ej2/base/bootstrap5.css",
825+
"options": {
826+
"includePath": "node_modules/@syncfusion"
827+
}
828+
}
829+
]
830+
831+
{% endhighlight %}
832+
{% endtabs %}
833+
834+
7.You can refer to the theme sheet which was downloaded from the client-side library in the `<head>` element of the **~/Pages/Shared/_Layout.cshtml** file.
835+
836+
{% tabs %}
837+
{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
838+
839+
<head>
840+
...
841+
<link href="~/lib/syncfusion/ej2/base/bootstrap5.css" rel="stylesheet" />
842+
</head>
843+
844+
{% endhighlight %}
845+
{% endtabs %}
846+
847+
8.Run the application and see the bootstrap5 themes downloaded from LibMan were applied.
848+
768849
N> [View sample in GitHub](https://github.com/SyncfusionExamples/asp-net-core-libman)
769850

770851
## Change theme dynamically

‎ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/category-axis.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Category Axis in ##Platform_Name## Chart Component
3+
title: Category Axis in ##Platform_Name## Chart Component | Syncfusion
44
description: Learn here all about Category Axis in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Category Axis
@@ -9,12 +9,16 @@ documentation: ug
99
---
1010

1111

12-
# Category Axis
12+
# ASP.NET Core Category Axis
1313

1414
<!-- markdownlint-disable MD036 -->
1515

1616
Category axis are used to represent, the string values instead of numbers.
1717

18+
To quickly get started with Syncfusion ASP.NET Core Category Axis, you can check out this video:
19+
20+
{% youtube "https://www.youtube.com/watch?v=l3M5ZvM1Ozs" %}
21+
1822
{% if page.publishingplatform == "aspnet-core" %}
1923

2024
{% tabs %}

‎ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/logarithmic-axis.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: post
3-
title: Logarithmic Axis in ##Platform_Name## Chart Component
3+
title: Logarithmic Axis in ##Platform_Name## Chart Component | Syncfusion
44
description: Learn here all about Logarithmic Axis in Syncfusion ##Platform_Name## Chart component of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
66
control: Logarithmic Axis
@@ -9,12 +9,16 @@ documentation: ug
99
---
1010

1111

12-
# Logarithmic Axis
12+
# ASP.NET Core Logarithmic Axis
1313

1414
<!-- markdownlint-disable MD033 -->
1515

1616
Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numeric values in both lower order of magnitude (eg: 10<sup>-6</sup>) and higher order of magnitude (eg: 10<sup>6</sup>).
1717

18+
To quickly get started with Syncfusion ASP.NET Core Logarithmic Axis, you can check out this video:
19+
20+
{% youtube "https://www.youtube.com/watch?v=l3M5ZvM1Ozs" %}
21+
1822
{% if page.publishingplatform == "aspnet-core" %}
1923

2024
{% tabs %}

‎ej2-asp-core-mvc/code-snippet/chart/getting-started/multi-export/tagHelper

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@
1919
document.getElementById('button').onclick = () => {
2020
var chart = document.getElementById('container').ej2_instances[0];
2121
var chart1 = document.getElementById('container1').ej2_instances[0];
22-
chart.export('PNG', 'chart', 'Landscape', [chart,chart1]);
22+
chart.exportModule.export('PNG', 'chart', 'Landscape', [chart,chart1]);
2323
};
2424
</script>

‎ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
function ShapeChanging(args) {
1616
if (args.currentShapeSettings.type === 'FreehandDraw') {
1717
args.currentShapeSettings.strokeColor = 'red';
18+
args.currentShapeSettings.strokeWidth = 10;
1819
}
1920
}
2021

‎ej2-asp-core-mvc/code-snippet/image-editor/annotation/adjust-stroke-color/tagHelper

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
function shapeChanging(args) {
1616
if (args.currentShapeSettings.type === 'FreehandDraw') {
1717
args.currentShapeSettings.strokeColor = 'red';
18+
args.currentShapeSettings.strokeWidth = 10;
1819
}
1920
}
2021
</script>

‎ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/hideLayoutSwitcher.cs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult HideLayoutSwitcher()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/razor

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@{
2+
ViewBag.Title = "Home Page";
3+
}
4+
@using Syncfusion.EJ2
5+
@using Syncfusion.EJ2.Ribbon
6+
@using Syncfusion.EJ2.Navigations
7+
@using Syncfusion.EJ2.Buttons
8+
9+
@{
10+
List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
11+
}
12+
@Html.EJS().CheckBox("checked").Label("Show/Hide Layout Switcher").Checked(true).Change("OnChange").Render()
13+
@Html.EJS().Ribbon("ribbon").HideLayoutSwitcher(false).Tabs(tab =>
14+
{
15+
tab.Header("Home").Groups(group =>
16+
{
17+
group.Header("Clipboard").Collections(collection =>
18+
{
19+
collection.Items(items =>
20+
{
21+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
22+
{
23+
button.IconCss("e-icons e-paste").Content("Paste");
24+
}).Add();
25+
}).Add();
26+
collection.Items(items =>
27+
{
28+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
29+
{
30+
button.IconCss("e-icons e-cut").Content("Cut");
31+
}).Add();
32+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
33+
{
34+
button.IconCss("e-icons e-copy").Content("Copy");
35+
}).Add();
36+
}).Add();
37+
}).Add();
38+
}).Add();
39+
tab.Header("Insert").Groups(groups =>
40+
{
41+
groups.Header("Tables").Collections(collections =>
42+
{
43+
collections.Items(items =>
44+
{
45+
items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
46+
{
47+
dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions);
48+
}).Add();
49+
}).Add();
50+
}).Add();
51+
}).Add();
52+
}).Render()
53+
54+
<script>
55+
function OnChange(args) {
56+
var ribbonObj = document.getElementById('ribbon').ej2_instances[0];
57+
ribbonObj.hideLayoutSwitcher = !args.checked;
58+
}
59+
</script>
60+
61+
<style>
62+
#ribbon {
63+
margin-top: 30px;
64+
}
65+
</style>

‎ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/tagHelper

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@using Syncfusion.EJ2
2+
@using Syncfusion.EJ2.Ribbon
3+
@using Syncfusion.EJ2.Navigations
4+
@using Syncfusion.EJ2.Buttons
5+
6+
@{
7+
List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
8+
}
9+
10+
<ejs-checkbox id="default" label="Show/Hide Layout Switcher" checked="true" change="OnChange"></ejs-checkbox>
11+
<ejs-ribbon id="ribbon" hideLayoutSwitcher="false">
12+
<e-ribbon-tabs>
13+
<e-ribbon-tab header="Home">
14+
<e-ribbon-groups>
15+
<e-ribbon-group header="Clipboard">
16+
<e-ribbon-collections>
17+
<e-ribbon-collection>
18+
<e-ribbon-items>
19+
<e-ribbon-item type="Button">
20+
<e-ribbon-buttonsettings iconCss="e-icons e-paste" content="Paste"></e-ribbon-buttonsettings>
21+
</e-ribbon-item>
22+
</e-ribbon-items>
23+
</e-ribbon-collection>
24+
<e-ribbon-collection>
25+
<e-ribbon-items>
26+
<e-ribbon-item type=Button>
27+
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
28+
</e-ribbon-item>
29+
<e-ribbon-item type=Button>
30+
<e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
31+
</e-ribbon-item>
32+
</e-ribbon-items>
33+
</e-ribbon-collection>
34+
</e-ribbon-collections>
35+
</e-ribbon-group>
36+
</e-ribbon-groups>
37+
</e-ribbon-tab>
38+
<e-ribbon-tab header="Insert">
39+
<e-ribbon-groups>
40+
<e-ribbon-group header="Tables">
41+
<e-ribbon-collections>
42+
<e-ribbon-collection>
43+
<e-ribbon-items>
44+
<e-ribbon-item type=DropDown>
45+
<e-ribbon-dropdownsettings iconCss="e-icons e-table" content="Table" items="tableOptions"></e-ribbon-dropdownsettings>
46+
</e-ribbon-item>
47+
</e-ribbon-items>
48+
</e-ribbon-collection>
49+
</e-ribbon-collections>
50+
</e-ribbon-group>
51+
</e-ribbon-groups>
52+
</e-ribbon-tab>
53+
</e-ribbon-tabs>
54+
</ejs-ribbon>
55+
56+
<script>
57+
function OnChange(args) {
58+
var ribbonObj = document.getElementById('ribbon').ej2_instances[0];
59+
ribbonObj.hideLayoutSwitcher = !args.checked;
60+
}
61+
</script>
62+
63+
<style>
64+
#ribbon {
65+
margin-top: 30px;
66+
}
67+
</style>

‎ej2-asp-core-mvc/code-snippet/spreadsheet/open-header/razor

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66

77
function beforeOpen(args) {
88
args.requestData["headers"] = {
9-
Authorization: "YOUR TEXT"
9+
...args.requestData,
10+
headers: { Authorization: "YOUR TEXT" }
1011
};
1112

1213
}

‎ej2-asp-core-mvc/code-snippet/spreadsheet/open-header/tagHelper

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<script>
66
function beforeOpen(args) {
77
args.requestData["headers"] = {
8-
Authorization: "YOUR TEXT"
8+
...args.requestData,
9+
headers: { Authorization: "YOUR TEXT" }
910
};
1011

1112
}

‎ej2-asp-core-mvc/code-snippet/spreadsheet/save-header/razor

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ function fileMenuItemSelect(args) {
2020
);
2121
formData.append("fileName", "Sample");
2222
formData.append("saveType", "Xlsx");
23+
formData.append("pdfLayoutSettings", JSON.stringify({ fitSheetOnOnePage: false, orientation: "Portrait" }));
2324
fetch(
2425
"https://services.syncfusion.com/aspnet/production/api/spreadsheet/save",
2526
{

‎ej2-asp-core-mvc/code-snippet/spreadsheet/save-header/tagHelper

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
);
2323
formData.append("fileName", "Sample");
2424
formData.append("saveType", "Xlsx");
25+
formData.append("pdfLayoutSettings", JSON.stringify({ fitSheetOnOnePage: false, orientation: "Portrait" }));
2526
fetch(
2627
"https://services.syncfusion.com/aspnet/production/api/spreadsheet/save",
2728
{

‎ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/razor

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,5 @@
88
.custom-connector .e-timeline-item.e-connector::after {
99
border-color: #f7c867;
1010
border-width: 1.4px;
11-
animation: progress 2s;
12-
}
13-
14-
@@keyframes progress {
15-
from { height: 0%; }
16-
to { height: 100%; }
1711
}
1812
</style>

‎ej2-asp-core-mvc/code-snippet/timeline/customization/connector-common/tagHelper

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,5 @@
1414
.custom-connector .e-timeline-item.e-connector::after {
1515
border-color: #f7c867;
1616
border-width: 1.4px;
17-
animation: progress 2s;
18-
}
19-
20-
@@keyframes progress {
21-
from { height: 0%; }
22-
to { height: 100%; }
2317
}
2418
</style>

‎ej2-asp-core-mvc/code-snippet/timeline/customization/connector-individual/razor

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,8 @@
77
<style>
88
.custom-connector .state-initial.e-connector::after {
99
border: 1.5px #f8c050 dashed;
10-
animation: progress 1.5s ease-in-out;
1110
}
1211
.custom-connector .state-intermediate.e-connector::after {
1312
border: 1.5px #4d85f5 dashed;
14-
animation: progress 1.5s ease-in-out;
15-
}
16-
17-
@@keyframes progress {
18-
from { height: 0%; }
19-
to { height: 100%; }
2013
}
2114
</style>

0 commit comments

Comments
 (0)