DOCINFRA-2341_merged_using_automation

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

@@ -0,0 +1,34 @@
+---
+layout: post
+title: Load webp format image in ##Platform_Name## Accordion Control | Syncfusion
+description: Learn here all about how to load webp format image in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Load images in webp format  
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+
+# Load webp format image in Carousel component
+
+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.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/carousel/how-to/carousel-webp/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/carousel/how-to/carousel-webp/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Wizard.cs" %}
+{% include code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}

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

@@ -0,0 +1,4 @@
+public ActionResult Index()
+{
+    return View();
+}

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

@@ -0,0 +1,55 @@
+@using Syncfusion.EJ2.Navigations;
+
+<div class="container">
+    <div class="control-container">
+        @(Html.EJS().Carousel("defaultCarousel").PartialVisible(true).Items(new List<CarouselItem> {
+            new CarouselItem { Template = "#itemTemplate1"  },
+            new CarouselItem { Template = "#itemTemplate2"  },
+            new CarouselItem { Template = "#itemTemplate3"  },
+            })
+            .Render()
+        )
+    </div>
+</div>
+<script id="itemTemplate1" type="text/x-template">
+    <figure class="img-container">
+        <img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Majestic Valley View</figcaption>
+    </figure>
+</script>
+
+<script id="itemTemplate1" type="text/x-template">
+    <figure class="img-container">
+        <img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
+    </figure>
+</script>
+
+<script id="itemTemplate1" type="text/x-template">
+    <figure class="img-container">
+        <img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Snowy Stroll</figcaption>
+    </figure>
+</script>
+<style>
+    .control-container {
+        background-color: #e5e5e5;
+        height: 360px;
+        margin: 0 auto;
+        width: 600px;
+    }
+
+    .img-container {
+        height: 100%;
+        margin: 0;
+    }
+
+    .img-caption {
+        color: #fff;
+        font-size: 1rem;
+        position: absolute;
+        bottom: 3rem;
+        width: 100%;
+        text-align: center;
+    }
+</style>

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

@@ -0,0 +1,54 @@
+<div class="container">
+    <div class="control-container">
+        <ejs-carousel id="defaultCarousel">
+            <e-carousel-items>
+                <e-carousel-item template="#templateItem1"></e-carousel-item>
+                <e-carousel-item template="#templateItem2"></e-carousel-item>
+                <e-carousel-item template="#templateItem3"></e-carousel-item>
+            </e-carousel-items>
+        </ejs-carousel>
+    </div>
+</div>
+<script id="templateItem1" type="text/x-template">
+    <figure class="img-container">
+        <img src="https://www.gstatic.com/webp/gallery/1.webp" alt="Majestic Valley View" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Majestic Valley View</figcaption>
+    </figure>
+</script>
+
+<script id="templateItem2" type="text/x-template">
+    <figure class="img-container">
+        <img src="https://www.gstatic.com/webp/gallery/2.webp" alt="Thrilling Rapids Adventure" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Thrilling Rapids Adventure</figcaption>
+    </figure>
+</script>
+
+<script id="templateItem3" type="text/x-template">
+    <figure class="img-container">
+        <img src="https://www.gstatic.com/webp/gallery/3.webp" alt="Snowy Stroll" style="height:100%;width:100%;" />
+        <figcaption class="img-caption">Snowy Stroll</figcaption>
+    </figure>
+</script>
+<style>
+    .control-container {
+        background-color: #e5e5e5;
+        height: 360px;
+        margin: 0 auto;
+        width: 600px;
+    }
+
+    .img-container {
+        height: 100%;
+        margin: 0;
+    }
+
+    .img-caption {
+        color: #fff;
+        font-size: 1rem;
+        position: absolute;
+        bottom: 3rem;
+        width: 100%;
+        text-align: center;
+    }
+
+</style>

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

@@ -18,6 +18,7 @@
                 "week": "Hét",
                 "workWeek": "Munkahét",
                 "month": "Hónap",
+                "year": "Év",
                 "agenda": "Napirend",
                 "weekAgenda": "Hét menetrend",
                 "workWeekAgenda": "Munkahét napirend",
@@ -44,6 +45,7 @@
                 "subject": "Tantárgy",
                 "addTitle": "Cím hozzáadása",
                 "moreDetails": "További részletek",
+                "moreEvents": "Több esemény",
                 "save": "Mentés",
                 "editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?",
                 "deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?",
@@ -66,12 +68,16 @@
                 "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.",
                 "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.",
                 "sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.",
+                "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.",
                 "editRecurrence": "Ismétlés szerkesztése",
                 "repeats": "ismétlődés",
                 "alert": "Éber",
                 "startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.",
                 "invalidDateError": "A megadott dátumérték érvénytelen.",
+                "blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.",
                 "ok": "Rendben",
+                "yes": "Igen",
+                "no": "Nem",
                 "occurrence": "Esemény",
                 "series": "Sorozat",
                 "previous": "Előző",
@@ -80,8 +86,16 @@
                 "timelineWeek": "Idősor-hét",
                 "timelineWorkWeek": "Idővonal munkahét",
                 "timelineMonth": "Idővonal hónap",
+                "timelineYear": "Idővonal év",
                 "expandAllDaySection": "kiterjed",
-                "collapseAllDaySection": "összeomlás"
+                "collapseAllDaySection": "összeomlás",
+                "editFollowingEvent": "Következő események",
+                "deleteTitle": "Esemény törlése",
+                "editTitle": "Esemény szerkesztése",
+                "beginFrom": "Kezdje",
+                "endAt": "Vége",
+                "searchTimezone": "Időzóna keresése",
+                "noRecords": "Nincs találat"
             },
             "recurrenceeditor": {
                 "none": "Egyik sem",

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

@@ -13,6 +13,7 @@
                 "week": "Hét",
                 "workWeek": "Munkahét",
                 "month": "Hónap",
+                "year": "Év",
                 "agenda": "Napirend",
                 "weekAgenda": "Hét menetrend",
                 "workWeekAgenda": "Munkahét napirend",
@@ -39,6 +40,7 @@
                 "subject": "Tantárgy",
                 "addTitle": "Cím hozzáadása",
                 "moreDetails": "További részletek",
+                "moreEvents": "Több esemény",
                 "save": "Mentés",
                 "editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?",
                 "deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?",
@@ -61,12 +63,16 @@
                 "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.",
                 "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.",
                 "sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.",
+                "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.",
                 "editRecurrence": "Ismétlés szerkesztése",
                 "repeats": "ismétlődés",
                 "alert": "Éber",
                 "startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.",
                 "invalidDateError": "A megadott dátumérték érvénytelen.",
+                "blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.",
                 "ok": "Rendben",
+                "yes": "Igen",
+                "no": "Nem",
                 "occurrence": "Esemény",
                 "series": "Sorozat",
                 "previous": "Előző",
@@ -75,8 +81,16 @@
                 "timelineWeek": "Idősor-hét",
                 "timelineWorkWeek": "Idővonal munkahét",
                 "timelineMonth": "Idővonal hónap",
+                "timelineYear": "Idővonal év",
                 "expandAllDaySection": "kiterjed",
-                "collapseAllDaySection": "összeomlás"
+                "collapseAllDaySection": "összeomlás",
+                "editFollowingEvent": "Következő események",
+                "deleteTitle": "Esemény törlése",
+                "editTitle": "Esemény szerkesztése",
+                "beginFrom": "Kezdje",
+                "endAt": "Vége",
+                "searchTimezone": "Időzóna keresése",
+                "noRecords": "Nincs találat"
             },
             "recurrenceeditor": {
                 "none": "Egyik sem",

ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: AWS S3 in ##Platform_Name## PDF Viewer Component
+title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component
 description: Learn here all about how to Open PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more.
 platform: ej2-asp-core-mvc
 control: PDF Viewer
@@ -10,6 +10,86 @@ documentation: ug
 
 # Open PDF file from AWS S3
 
+PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3.
+
+## Using Standalone PDF Viewer
+
+To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
+
+**Step 1:** Create AWS S3 account 
+
+Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials.
+
+**Step 2:** Create PDF Viewer Sample in ASP.NET MVC
+
+Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC.
+
+**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project 
+
+1. Add the required scripts using CDN inside the `<head>` of `~/Views/Shared/_Layout.cshtml` file as follows,
+
+{% tabs %}
+{% highlight c# tabtitle="~/_Layout.cshtml" %}
+
+<head>
+    ...
+    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1654.0.min.js"></script>
+</head>
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project 
+
+1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
+
+N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account.
+
+```csharp
+AWS.config.update({
+  region: '**Your Region**', // Update this your region
+  accessKeyId: '*Your Access Key*', // Update this with your access key id
+  secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
+});
+```
+
+2. 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.
+
+```csharp
+loadDocument() {
+    const s3 = new AWS.S3();
+    const getObjectParams = {
+        Bucket: '**Your Bucket Name**',
+        Key: '**Your Key**',
+    };
+    this.s3.getObject(getObjectParams, (err, data) => {
+        if (err) {
+        console.error('Error fetching document:', err);
+        } else {
+        if (data && data.Body) {
+            const bytes = new Uint8Array(data.Body as ArrayBuffer);
+            let binary = '';
+            bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
+            const base64String = window.btoa(binary);
+            console.log('Document data as Base64:', base64String);
+            var viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];  
+            setTimeout(() => {
+            viewer.load("data:application/pdf;base64,"+base64String);
+            }, 2000);
+        }
+        }
+    });
+}
+```
+
+N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
+
+## Using Server-Backed PDF Viewer
+
 To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
 
 **Step 1:** Create AWS S3 account 
@@ -98,4 +178,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name
 
 N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3)
+[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)