Skip to content

Commit bd0e9db

Browse files
Merge pull request #3231 from Syncfusion-Content/hotfix/hotfix-v26.2.4
DOCINFRA-2341_merged_using_automation
2 parents 4e5d519 + c1f487a commit bd0e9db

File tree

119 files changed

+2464
-1087
lines changed

Some content is hidden

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

119 files changed

+2464
-1087
lines changed
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
3+
description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
4+
platform: ej2-asp-core-mvc
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for ##Platform_Name## Release Notes
9+
10+
{% include release-info.html date="July 16, 2024" version="v26.1.42" %}
11+
12+
{% directory path: _includes/release-notes/v26.1.42 %}
13+
14+
{% include {{file.url}} %}
15+
16+
{% enddirectory %}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Essential Studio for ##Platform_Name## Weekly Release Release Notes
3+
description: Essential Studio for ##Platform_Name## Weekly Release Release Notes
4+
platform: ej2-asp-core-mvc
5+
documentation: ug
6+
---
7+
8+
# Essential Studio for ##Platform_Name## Release Notes
9+
10+
{% include release-info.html date="July 26, 2024" version="v26.2.5" %}
11+
12+
{% directory path: _includes/release-notes/v26.2.5 %}
13+
14+
{% include {{file.url}} %}
15+
16+
{% enddirectory %}
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 %}
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+
}
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>
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>
Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1-
@Html.EJS().Grid("AutoWrap").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowTextWrap().Columns(col =>
1+
<div style="display: flex">
2+
<label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
3+
<span style="height:fit-content">
4+
@Html.EJS().DropDownList("Wrap").Width("180px").DataSource(new List<object> { "Both", "Content" }).Change("change").Render()
5+
</span>
6+
</div>
7+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowTextWrap().Columns(col =>
28
{
9+
col.Field("Inventor").HeaderText("Inventor Name").Width("150").Add();
310

4-
col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
5-
col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
6-
col.Field("NumberofINPADOCpatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7-
col.Field("Mainfieldsofinvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
8-
col.Field("Active").HeaderText("Active").Width("150").Add();
11+
col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
12+
col.Field("Country").HeaderText("Country").Width("150").Add();
13+
col.Field("Active").HeaderText("Active").Width("150").Add();
914

10-
}).AllowPaging().TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content);}).Render()
15+
}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content); }).Render()
16+
17+
<script>
18+
function change(args) {
19+
var grid = document.getElementById("Grid").ej2_instances[0];
20+
grid.textWrapSettings.wrapMode = args.value;
21+
}
22+
</script>
Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" gridLines="Default" height="315" allowTextWrap="true">
2-
<e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
1+
<div style="display: flex">
2+
<label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
3+
<span style="height:fit-content">
4+
<ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
5+
</span>
6+
</div>
7+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowTextWrap=true>
8+
<e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
39
<e-grid-columns>
4-
<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" width="120"></e-grid-column>
5-
<e-grid-column field="Name" headerText="Name of the inventor" width="100"></e-grid-column>
6-
<e-grid-column field="patentfamilies" headerText="No of patentfamilies" width="130"></e-grid-column>
7-
<e-grid-column field="Country" headerText="Country" width="130"></e-grid-column>
8-
<e-grid-column field="mainfields" headerText="Main fields of Invention" width="150"></e-grid-column>
10+
<e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
11+
<e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="120"></e-grid-column>
12+
<e-grid-column field="Country" headerText="Country" width="150"></e-grid-column>
13+
<e-grid-column field="Active" headerText="Active" textAlign="Right" width="150"></e-grid-column>
914
</e-grid-columns>
10-
</ejs-grid>
15+
</ejs-grid>
16+
17+
<script type="text/javascript">
18+
function Change(args) {
19+
var grid = document.getElementById("Grid").ej2_instances[0];
20+
grid.textWrapSettings.wrapMode = args.value;
21+
}
22+
</script>
Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
public IActionResult Index()
22
{
3-
var Order = OrderDetails.GetAllRecords();
3+
var Order = InventorDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
5+
ViewBag.dropdownData = new string[] { "Clip", "Ellipsis", "EllipsisWithTooltip" };
56
return View();
6-
}
7+
}
Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
1-
@Html.EJS().Grid("ClipMode").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
2-
{
3-
col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("Inventor").HeaderText("Inventor").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Clip).Width("150").Add();
5-
col.Field("NumberofINPADOCpatents").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Ellipsis).HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6-
col.Field("Mainfieldsofinvention").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).HeaderText("Mainfieldsofinvention").Width("150").Add();
7-
col.Field("Active").HeaderText("Active").Width("150").Add();
8-
}).AllowPaging().Render()
1+
2+
<div style="display: flex">
3+
<label style="padding: 10px 10px 26px 0">Change the clip mode: </label>
4+
<span style="height:fit-content">
5+
@Html.EJS().DropDownList("ClipMode").Width("180px").DataSource(new List<object> { "Clip", "Ellipsis", "EllipsisWithTooltip" }).Change("change").Render()
6+
</span>
7+
8+
</div>
9+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
10+
{
11+
col.Field("NumberOfPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
12+
col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
13+
col.Field("NumberOfINPADOCPatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
14+
col.Field("MainFieldsOfInvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
15+
col.Field("Active").HeaderText("Active").Width("150").Add();
16+
}).Render()
17+
18+
<script>
19+
function change(args) {
20+
var grid = document.getElementById("Grid").ej2_instances[0];
21+
grid.getColumnByField('MainFieldsOfInvention').clipMode = args.value;
22+
grid.refresh();
23+
}
24+
</script>
Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1+
<div style="display: flex">
2+
<label style="padding: 10px 10px 26px 0">Change the clip mode: </label>
3+
<span style="height:fit-content">
4+
<ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
5+
</span>
6+
</div>
7+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
8+
<e-grid-columns>
9+
<e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="120"></e-grid-column>
110

11+
<e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
12+
<e-grid-column field="NumberOfINPADOCPatents" headerText="NumberOfINPADOCPatents" width="150"></e-grid-column>
13+
<e-grid-column field="MainFieldsOfInvention" headerText="Main Fields Of Invention" width="150"></e-grid-column>
14+
<e-grid-column field="Active" headerText="Active" textAlign="Right" width="150"></e-grid-column>
15+
</e-grid-columns>
16+
</ejs-grid>
217

3-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowPaging="true">
4-
<e-grid-columns>
5-
<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" width="100"></e-grid-column>
6-
<e-grid-column field="Name" headerText="Name of the inventor" clipMode="Clip" width="80"></e-grid-column>
7-
<e-grid-column field="patentfamilies" headerText="No of patentfamilies" clipMode="Ellipsis" width="100"></e-grid-column>
8-
<e-grid-column field="Country" headerText="Country" width="100"></e-grid-column>
9-
<e-grid-column field="mainfields" headerText="Main fields of Invention" clipMode="EllipsisWithTooltip" width="100"></e-grid-column>
10-
</e-grid-columns>
11-
</ejs-grid>
18+
19+
<script type="text/javascript">
20+
function Change(args) {
21+
var grid = document.getElementById("Grid").ej2_instances[0];
22+
grid.getColumnByField('MainFieldsOfInvention').clipMode = args.value;
23+
grid.refresh();
24+
}
25+
</script>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@Html.EJS().Tooltip("Tooltip").Target(".e-rowcell").ContentTemplate(@<div>
2+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
3+
{
4+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
5+
col.Field("CustomerID").HeaderText("Customer Name").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
7+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
8+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
9+
10+
}).Render()
11+
</div>).BeforeRender("beforeRender").Render()
12+
13+
<script>
14+
function beforeRender(args) {
15+
var tooltip = document.getElementById("Tooltip").ej2_instances[0]
16+
if (args.target.classList.contains('e-rowcell')) {
17+
// event triggered before render the tooltip on target element.
18+
tooltip.content = 'The value is "' + args.target.innerText + '" ';
19+
}
20+
}
21+
</script>
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<ejs-tooltip id="Tooltip" target=".e-rowcell" beforeRender="beforeRender">
2+
<!-- Target element -->
3+
<e-content-template>
4+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
5+
<e-grid-columns>
6+
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
7+
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
8+
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
9+
<e-grid-column field="OrderDate" headerText="Order Date" width="100" textAlign="Right" format="yMd"></e-grid-column>
10+
<e-grid-column field="Freight" headerText="Freight" width="100"></e-grid-column>
11+
<e-grid-column field="ShipCountry" headerText="Ship Country" textAlign="Right"
12+
width="100"></e-grid-column>
13+
</e-grid-columns>
14+
</ejs-grid>
15+
</e-content-template>
16+
</ejs-tooltip>
17+
18+
19+
<script>
20+
function beforeRender(args) {
21+
var tooltip = document.getElementById("Tooltip").ej2_instances[0];
22+
if (args.target.classList.contains('e-rowcell')) {
23+
// event triggered before render the tooltip on target element.
24+
tooltip.content = 'The value is "' + args.target.innerText + '" ';
25+
}
26+
}
27+
</script>

0 commit comments

Comments
 (0)