Skip to content

Commit 3ab906e

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
Merge branch 'EJ2-896213-cell' of https://github.com/syncfusion-content/ej2-asp-core-mvc-docs into EJ2-896213-cell
2 parents 46b3bbf + 03af598 commit 3ab906e

File tree

17 files changed

+925
-184
lines changed

17 files changed

+925
-184
lines changed

‎ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
layout: post
3+
title: Load webp format image in ##Platform_Name## Accordion Control | Syncfusion
4+
description: Learn here all about how to load webp format image in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Load images in webp format
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
12+
# Load webp format image in Carousel component
13+
14+
You can load the carousel image in the webp format, which aims to create smaller, better-looking images. Choosing webp as your image format can significantly improve your website's performance without sacrificing visual quality. webp images are significantly smaller in file size compared to formats like JPEG and PNG. This results in faster load times and less data usage. To achieve this, you can convert your image format to webp and pass them to Carousel items. The following sample illustrates how to load a carousel image in the webp format component.
15+
16+
{% if page.publishingplatform == "aspnet-core" %}
17+
18+
{% tabs %}
19+
{% highlight cshtml tabtitle="CSHTML" %}
20+
{% include code-snippet/carousel/how-to/carousel-webp/tagHelper %}
21+
{% endhighlight %}
22+
{% endtabs %}
23+
24+
{% elsif page.publishingplatform == "aspnet-mvc" %}
25+
26+
{% tabs %}
27+
{% highlight razor tabtitle="CSHTML" %}
28+
{% include code-snippet/carousel/how-to/carousel-webp/razor %}
29+
{% endhighlight %}
30+
{% highlight c# tabtitle="Wizard.cs" %}
31+
{% include code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs %}
32+
{% endhighlight %}
33+
{% endtabs %}
34+
{% endif %}

‎ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs

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

‎ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@using Syncfusion.EJ2.Navigations;
2+
3+
<div class="container">
4+
<div class="control-container">
5+
@(Html.EJS().Carousel("defaultCarousel").PartialVisible(true).Items(new List<CarouselItem> {
6+
new CarouselItem { Template = "#itemTemplate1" },
7+
new CarouselItem { Template = "#itemTemplate2" },
8+
new CarouselItem { Template = "#itemTemplate3" },
9+
})
10+
.Render()
11+
)
12+
</div>
13+
</div>
14+
<script id="itemTemplate1" type="text/x-template">
15+
<figure class="img-container">
16+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
17+
<figcaption class="img-caption">Majestic Valley View</figcaption>
18+
</figure>
19+
</script>
20+
21+
<script id="itemTemplate1" type="text/x-template">
22+
<figure class="img-container">
23+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
24+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
25+
</figure>
26+
</script>
27+
28+
<script id="itemTemplate1" type="text/x-template">
29+
<figure class="img-container">
30+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
31+
<figcaption class="img-caption">Snowy Stroll</figcaption>
32+
</figure>
33+
</script>
34+
<style>
35+
.control-container {
36+
background-color: #e5e5e5;
37+
height: 360px;
38+
margin: 0 auto;
39+
width: 600px;
40+
}
41+
42+
.img-container {
43+
height: 100%;
44+
margin: 0;
45+
}
46+
47+
.img-caption {
48+
color: #fff;
49+
font-size: 1rem;
50+
position: absolute;
51+
bottom: 3rem;
52+
width: 100%;
53+
text-align: center;
54+
}
55+
</style>

‎ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<div class="container">
2+
<div class="control-container">
3+
<ejs-carousel id="defaultCarousel">
4+
<e-carousel-items>
5+
<e-carousel-item template="#templateItem1"></e-carousel-item>
6+
<e-carousel-item template="#templateItem2"></e-carousel-item>
7+
<e-carousel-item template="#templateItem3"></e-carousel-item>
8+
</e-carousel-items>
9+
</ejs-carousel>
10+
</div>
11+
</div>
12+
<script id="templateItem1" type="text/x-template">
13+
<figure class="img-container">
14+
<img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
15+
<figcaption class="img-caption">Majestic Valley View</figcaption>
16+
</figure>
17+
</script>
18+
19+
<script id="templateItem2" type="text/x-template">
20+
<figure class="img-container">
21+
<img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
22+
<figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
23+
</figure>
24+
</script>
25+
26+
<script id="templateItem3" type="text/x-template">
27+
<figure class="img-container">
28+
<img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
29+
<figcaption class="img-caption">Snowy Stroll</figcaption>
30+
</figure>
31+
</script>
32+
<style>
33+
.control-container {
34+
background-color: #e5e5e5;
35+
height: 360px;
36+
margin: 0 auto;
37+
width: 600px;
38+
}
39+
40+
.img-container {
41+
height: 100%;
42+
margin: 0;
43+
}
44+
45+
.img-caption {
46+
color: #fff;
47+
font-size: 1rem;
48+
position: absolute;
49+
bottom: 3rem;
50+
width: 100%;
51+
text-align: center;
52+
}
53+
54+
</style>

‎ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"week": "Hét",
1919
"workWeek": "Munkahét",
2020
"month": "Hónap",
21+
"year": "Év",
2122
"agenda": "Napirend",
2223
"weekAgenda": "Hét menetrend",
2324
"workWeekAgenda": "Munkahét napirend",
@@ -44,6 +45,7 @@
4445
"subject": "Tantárgy",
4546
"addTitle": "Cím hozzáadása",
4647
"moreDetails": "További részletek",
48+
"moreEvents": "Több esemény",
4749
"save": "Mentés",
4850
"editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?",
4951
"deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?",
@@ -66,12 +68,16 @@
6668
"createError": "Az esemény időtartamának rövidebbnek kell lennie, mint a gyakorisága. Rövidítse az időtartamot, vagy változtassa meg az ismétlődési esemény szerkesztőjének ismétlődési mintáját.",
6769
"recurrenceDateValidation": "Néhány hónap kevesebb, mint a kiválasztott dátum. Ezekben a hónapokban az esemény a hónap utolsó napjára esik.",
6870
"sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.",
71+
"occurenceAlert": "Nem lehet átütemezni az ismétlődő találkozó előfordulását, ha átugrik ugyanazon találkozó későbbi előfordulását.",
6972
"editRecurrence": "Ismétlés szerkesztése",
7073
"repeats": "ismétlődés",
7174
"alert": "Éber",
7275
"startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.",
7376
"invalidDateError": "A megadott dátumérték érvénytelen.",
77+
"blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.",
7478
"ok": "Rendben",
79+
"yes": "Igen",
80+
"no": "Nem",
7581
"occurrence": "Esemény",
7682
"series": "Sorozat",
7783
"previous": "Előző",
@@ -80,8 +86,16 @@
8086
"timelineWeek": "Idősor-hét",
8187
"timelineWorkWeek": "Idővonal munkahét",
8288
"timelineMonth": "Idővonal hónap",
89+
"timelineYear": "Idővonal év",
8390
"expandAllDaySection": "kiterjed",
84-
"collapseAllDaySection": "összeomlás"
91+
"collapseAllDaySection": "összeomlás",
92+
"editFollowingEvent": "Következő események",
93+
"deleteTitle": "Esemény törlése",
94+
"editTitle": "Esemény szerkesztése",
95+
"beginFrom": "Kezdje",
96+
"endAt": "Vége",
97+
"searchTimezone": "Időzóna keresése",
98+
"noRecords": "Nincs találat"
8599
},
86100
"recurrenceeditor": {
87101
"none": "Egyik sem",

‎ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"week": "Hét",
1414
"workWeek": "Munkahét",
1515
"month": "Hónap",
16+
"year": "Év",
1617
"agenda": "Napirend",
1718
"weekAgenda": "Hét menetrend",
1819
"workWeekAgenda": "Munkahét napirend",
@@ -39,6 +40,7 @@
3940
"subject": "Tantárgy",
4041
"addTitle": "Cím hozzáadása",
4142
"moreDetails": "További részletek",
43+
"moreEvents": "Több esemény",
4244
"save": "Mentés",
4345
"editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?",
4446
"deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?",
@@ -61,12 +63,16 @@
6163
"createError": "Az esemény időtartamának rövidebbnek kell lennie, mint a gyakorisága. Rövidítse az időtartamot, vagy változtassa meg az ismétlődési esemény szerkesztőjének ismétlődési mintáját.",
6264
"recurrenceDateValidation": "Néhány hónap kevesebb, mint a kiválasztott dátum. Ezekben a hónapokban az esemény a hónap utolsó napjára esik.",
6365
"sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.",
66+
"occurenceAlert": "Nem lehet átütemezni az ismétlődő találkozó előfordulását, ha átugrik ugyanazon találkozó későbbi előfordulását.",
6467
"editRecurrence": "Ismétlés szerkesztése",
6568
"repeats": "ismétlődés",
6669
"alert": "Éber",
6770
"startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.",
6871
"invalidDateError": "A megadott dátumérték érvénytelen.",
72+
"blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.",
6973
"ok": "Rendben",
74+
"yes": "Igen",
75+
"no": "Nem",
7076
"occurrence": "Esemény",
7177
"series": "Sorozat",
7278
"previous": "Előző",
@@ -75,8 +81,16 @@
7581
"timelineWeek": "Idősor-hét",
7682
"timelineWorkWeek": "Idővonal munkahét",
7783
"timelineMonth": "Idővonal hónap",
84+
"timelineYear": "Idővonal év",
7885
"expandAllDaySection": "kiterjed",
79-
"collapseAllDaySection": "összeomlás"
86+
"collapseAllDaySection": "összeomlás",
87+
"editFollowingEvent": "Következő események",
88+
"deleteTitle": "Esemény törlése",
89+
"editTitle": "Esemény szerkesztése",
90+
"beginFrom": "Kezdje",
91+
"endAt": "Vége",
92+
"searchTimezone": "Időzóna keresése",
93+
"noRecords": "Nincs találat"
8094
},
8195
"recurrenceeditor": {
8296
"none": "Egyik sem",

‎ej2-asp-core-mvc/common/EJ2_ASP.MVC/showcase-samples.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
layout: post
3+
title: Showcase samples in Syncfusion ##Platform_Name## control
4+
description: Learn here all about list of showcase samples in Syncfusion ##Platform_Name## Common control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Common
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Syncfusion ASP.NET MVC Components showcase samples
12+
13+
Syncfusion has a collection of sample applications that demonstrate the use of Syncfusion ASP.NET MVC UI components.
14+
15+
| Sample Application | Description | GitHub |
16+
| ------------- | ------------- | ------------- |
17+
| [Expense Tracker](https://ej2.syncfusion.com/showcase/aspnetmvc/expense-tracker/) | Track and visualize your daily expenses with a great UI. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetmvc-expensetracker) |
18+
| [Loan Calculator](https://ej2.syncfusion.com/showcase/aspnetmvc/loancalculator/) | Calculate loan payments, interest rates, and amortization schedules. When you are planning for a personal loan or analyzing business financing options, this provides accurate results and helps you make informed financial decisions. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetmvc-loan-calculator) |
19+
| [Web Mail](https://ej2.syncfusion.com/showcase/aspnetmvc/webmail/) | Outlook like user interface to manage your mailbox. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetmvc-outlook) |

‎ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/showcase-samples.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
layout: post
3+
title: Showcase samples in ##Platform_Name## control | Syncfusion
4+
description: Learn here all about list of showcase samples in Syncfusion ##Platform_Name## Common control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Common
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Syncfusion ASP.NET Core Components showcase samples
12+
13+
Syncfusion has a collection of sample applications that demonstrate the use of Syncfusion ASP.NET Core UI components.
14+
15+
| Sample Application | Description | GitHub |
16+
| ------------- | ------------- | ------------- |
17+
| [Diagram Builder](https://ej2.syncfusion.com/showcase/aspnetcore/diagrambuilder/) | Diagram Builder is a web application which is used to create the diagrams like Flow Chart, process diagrams and more. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-diagram-builder) |
18+
| [Expense Tracker](https://ej2.syncfusion.com/showcase/aspnetcore/expense-tracker/) | Track and visualize your daily expenses with a great UI. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-expensetracker) |
19+
| [Loan Calculator](https://ej2.syncfusion.com/showcase/aspnetcore/loan-calculator/) | Calculate loan payments, interest rates, and amortization schedules. When you are planning for a personal loan or analyzing business financing options, this provides accurate results and helps you make informed financial decisions. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-loan-calculator) |
20+
| [Web Mail](https://ej2.syncfusion.com/showcase/aspnetcore/webmail/) | Outlook like user interface to manage your mailbox. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-outlook) |

0 commit comments

Comments
 (0)