Skip to content

Commit dd8ed95

Browse files
Merge branch 'hotfix/hotfix-v29.1.33' into 949122-postgresql-hf
2 parents ac6f109 + eafc22b commit dd8ed95

40 files changed

+878
-837
lines changed

ej2-asp-core-mvc/Release-notes/29.1.33.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ documentation: ug
77

88
# Essential Studio for ##Platform_Name## Release Notes
99

10-
{% include release-info.html date="March 20, 2025" version="v29.1.33" %}
10+
{% include release-info.html date="March 25, 2025" version="v29.1.33" %}
1111

1212
{% directory path: _includes/release-notes/v29.1.33 %}
1313

ej2-asp-core-mvc/chips/draganddrop.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
layout: post
3+
title: Drag and drop in ##Platform_Name## Chips Control | Syncfusion
4+
description: Learn here all about Drag and drop in Syncfusion ##Platform_Name## Chips control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Drag and drop
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Drag and drop in Chips control
12+
13+
The Chips control enables drag and drop functionality for any chip when [`allowDragAndDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_AllowDragAndDrop) is set to **true**. Chips can be dragged and dropped within the same or across external ChipList containers.
14+
15+
When dragging a chip, an indicator line appears between chips, showing the exact position where the chip will be dropped. This visual indicator helps users place chips precisely at the desired location.
16+
17+
* To prevent dragging action for a specific chip, use the [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_DragStart) event, which triggers when chip dragging begins. Similarly, to prevent dropping action for a specific chip, use the [`dragStop`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_DragStop) event, which triggers when dragging ends.
18+
19+
* The [`dragging`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_Dragging) event triggers while a chip is being dragged. You can customize the appearance of the cloned chip element during this event.
20+
21+
* You can set the drag area for the chips using the [`dragArea`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_DragArea) property which allows the dragging of cloned chip only within the specified element. It accepts an element Id or class as a string and defaults to `null`.
22+
23+
In the following sample, the [`allowDragAndDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.buttons.chiplist.html#Syncfusion_EJ2_Buttons_ChipList_AllowDragAndDrop) property is enabled.
24+
25+
{% if page.publishingplatform == "aspnet-core" %}
26+
27+
{% tabs %}
28+
{% highlight cshtml tabtitle="CSHTML" %}
29+
{% include code-snippet/chips/draganddrop/tagHelper %}
30+
{% endhighlight %}
31+
{% endtabs %}
32+
33+
{% elsif page.publishingplatform == "aspnet-mvc" %}
34+
35+
{% tabs %}
36+
{% highlight razor tabtitle="CSHTML" %}
37+
{% include code-snippet/chips/draganddrop/razor %}
38+
{% endhighlight %}
39+
{% highlight c# tabtitle="Default.cs" %}
40+
{% include code-snippet/chips/draganddrop/default.cs %}
41+
{% endhighlight %}
42+
{% endtabs %}
43+
{% endif %}
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public IActionResult Index()
2+
{
3+
return View();
4+
}
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div id="chip-draganddrop-wrapper">
2+
<div class="chips-headers">Customize your order with add-ons</div>
3+
4+
<div class="sample-padding">
5+
@Html.EJS().ChipList("choice-container").Chips(chip =>
6+
{
7+
chip.Text("Report").CssClass("e-info").Add();
8+
chip.Text("Meeting").CssClass("e-warning").Add();
9+
chip.Text("Review").CssClass("e-warning").Add();
10+
chip.Text("Budget").CssClass("e-danger").Add();
11+
chip.Text("Design").CssClass("e-primary").Add();
12+
chip.Text("Presentation").CssClass("e-success").Add();
13+
chip.Text("Email").CssClass("e-success").Add();
14+
chip.Text("Research").CssClass("e-success").Add();
15+
}).AllowDragAndDrop(true).Render()
16+
@Html.EJS().ChipList("selection-container").AllowDragAndDrop(true).Render();
17+
</div>
18+
</div>
19+
20+
<style>
21+
#chip-draganddrop-wrapper .sample-padding {
22+
padding: 10px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
.chips-headers {
29+
font-size: 12px;
30+
text-align: center;
31+
padding-top: 10px;
32+
}
33+
34+
#choice-container {
35+
width: 400px;
36+
min-height: 100px;
37+
min-width: 150px;
38+
border: 2px solid #2C3E50;
39+
border-radius: 10px;
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
41+
margin-right: 30px;
42+
}
43+
44+
#selection-container {
45+
width: 400px;
46+
min-height: 100px;
47+
min-width: 150px;
48+
border: 2px solid #8E44AD;
49+
border-radius: 10px;
50+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
51+
}
52+
</style>
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div id="chip-draganddrop-wrapper">
2+
<div class="chips-headers">Customize your order with add-ons</div>
3+
<div class="sample-padding">
4+
<ejs-chiplist id="choice-container" allowDragAndDrop>
5+
<e-chips>
6+
<e-chip text="Report" cssClass="e-info"></e-chip>
7+
<e-chip text="Meeting" cssClass="e-warning"></e-chip>
8+
<e-chip text="Review" cssClass="e-warning"></e-chip>
9+
<e-chip text="Budget" cssClass="e-danger"></e-chip>
10+
<e-chip text="Design" cssClass="e-primary"></e-chip>
11+
<e-chip text="Presentation" cssClass="e-success"></e-chip>
12+
<e-chip text="Email" cssClass="e-success"></e-chip>
13+
<e-chip text="Research" cssClass="e-success"></e-chip>
14+
</e-chips>
15+
</ejs-chiplist>
16+
<ejs-chiplist id="selection-container" allowDragAndDrop></ejs-chiplist>
17+
</div>
18+
</div>
19+
20+
<style>
21+
#chip-draganddrop-wrapper .sample-padding {
22+
padding: 10px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
}
27+
28+
.chips-headers {
29+
font-size: 12px;
30+
text-align: center;
31+
padding-top: 10px;
32+
}
33+
34+
#choice-container {
35+
width: 400px;
36+
min-height: 100px;
37+
min-width: 150px;
38+
border: 2px solid #2C3E50;
39+
border-radius: 10px;
40+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
41+
margin-right: 30px;
42+
}
43+
44+
#selection-container {
45+
width: 400px;
46+
min-height: 100px;
47+
min-width: 150px;
48+
border: 2px solid #8E44AD;
49+
border-radius: 10px;
50+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
51+
}
52+
</style>

ej2-asp-core-mvc/code-snippet/gantt/pdf-export/customtheme/razor

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,37 @@
11
@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowPdfExport(true).TaskFields(ts => ts.Id(
22
"TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() {
3-
"PdfExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).Render())
3+
"PdfExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).EventMarkers(em =>
4+
{
5+
em.Day("04/10/2019").Label("Project approval and kick-off").CssClass("e-custom-event-marker").Add();
6+
})
7+
.Holidays(hol=> {
8+
hol.From("04/11/2019").To("04/12/2019").Label("Public holidays").CssClass("e-custom-holiday").Add();
9+
hol.From("04/01/2019").To("04/01/2019").Label("Public holiday").CssClass("e-custom-holiday").Add();
10+
}).Render())
411

512
<script>
613
function toolbarClick(args) {
714
var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
815
if (args.item.id === "GanttContainer_pdfexport") {
16+
const stringFormat = new ej.pdfexport.PdfStringFormat();
17+
stringFormat.alignment = ej.pdfexport.PdfTextAlignment.Center;
18+
19+
const vertical = new ej.pdfexport.PdfStringFormat();
20+
vertical.alignment = ej.pdfexport.PdfTextAlignment.Center;
21+
22+
const penColor = new ej.pdfexport.PdfColor(105, 105, 105);
23+
const penWidth = 1;
24+
const pen = new ej.pdfexport.PdfPen(penColor, penWidth);
25+
pen.dashStyle = ej.pdfexport.PdfDashStyle.Dash;
26+
27+
const borderWidth = 1;
28+
const borderColor = new ej.pdfexport.PdfColor(192, 192, 192);
29+
let pdfpen = new ej.pdfexport.PdfPen(borderColor, borderWidth);
30+
let pdfborders = new ej.pdfexport.PdfBorders();
31+
pdfborders.all = pdfpen;
932
var exportProperties = {
10-
fontFamily: 1,
33+
ganttStyle: {
34+
fontFamily: 1,
1135
columnHeader: {
1236
backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255)
1337
},
@@ -32,6 +56,32 @@
3256
fontColor: new ej.pdfexport.PdfColor(0, 0, 0),
3357
borderColor: new ej.pdfexport.PdfColor(179, 219, 255),
3458
},
59+
eventMarker: {
60+
label: {
61+
backgroundColor: new ej.pdfexport.PdfColor(255, 239, 213),
62+
fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
63+
fontColor: new ej.pdfexport.PdfColor(139, 69, 19),
64+
fontSize: 9,
65+
format: stringFormat,
66+
fontStyle: ej.pdfexport.PdfFontStyle.Bold,
67+
borderColor: new ej.pdfexport.PdfColor(160, 82, 45),
68+
borders: pdfborders,
69+
},
70+
lineStyle: pen,
71+
},
72+
holiday: {
73+
fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
74+
fontSize: 10,
75+
fontStyle: ej.pdfexport.PdfFontStyle.Bold,
76+
borderColor: new ej.pdfexport.PdfColor(211, 211, 211),
77+
backgroundColor: new ej.pdfexport.PdfColor(255, 248, 220),
78+
fontColor: new ej.pdfexport.PdfColor(105, 105, 105),
79+
format: vertical,
80+
borders: pdfborders,
81+
},
82+
83+
}
84+
3585
};
3686
ganttObj.pdfExport(exportProperties);
3787
}

ej2-asp-core-mvc/code-snippet/gantt/pdf-export/customtheme/tagHelper

Lines changed: 77 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,89 @@
22
toolbarClick="toolbarClick" allowPdfExport="true">
33
<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" duration="Duration" progress="Progress" child="SubTasks">
44
</e-gantt-taskfields>
5+
<e-gantt-holidays>
6+
<e-gantt-holiday from="04/11/2019" to="04/12/2019" label="Public holidays" cssClass="e-custom-holiday"></e-gantt-holiday>
7+
<e-gantt-holiday from="04/01/2019" to="04/01/2019" label="Public holiday" cssClass="e-custom-holiday"></e-gantt-holiday>
8+
</e-gantt-holidays>
9+
<e-gantt-eventmarkers>
10+
<e-gantt-eventmarker day="04/10/2019" label="Project approval and kick-off" cssClass="e-custom-event-marker"></e-gantt-eventmarker>
11+
</e-gantt-eventmarkers>
512
</ejs-gantt>
613
<script>
714
function toolbarClick(args) {
815
var gantt = document.getElementById("GanttContainer").ej2_instances[0];
916
if (args.item.id === 'GanttContainer_pdfexport') {
17+
const stringFormat = new ej.pdfexport.PdfStringFormat();
18+
stringFormat.alignment = ej.pdfexport.PdfTextAlignment.Center;
19+
20+
const vertical = new ej.pdfexport.PdfStringFormat();
21+
vertical.alignment = ej.pdfexport.PdfTextAlignment.Center;
22+
23+
const penColor = new ej.pdfexport.PdfColor(105, 105, 105);
24+
const penWidth = 1;
25+
const pen = new ej.pdfexport.PdfPen(penColor, penWidth);
26+
pen.dashStyle = ej.pdfexport.PdfDashStyle.Dash;
27+
28+
const borderWidth = 1;
29+
const borderColor = new ej.pdfexport.PdfColor(192, 192, 192);
30+
let pdfpen = new ej.pdfexport.PdfPen(borderColor, borderWidth);
31+
let pdfborders = new ej.pdfexport.PdfBorders();
32+
pdfborders.all = pdfpen;
1033
var exportProperties = {
11-
fontFamily: 1,
12-
columnHeader: {
13-
backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255)
14-
},
15-
taskbar: {
16-
taskColor: new ej.pdfexport.PdfColor(240, 128, 128),
17-
taskBorderColor: new ej.pdfexport.PdfColor(240, 128, 128),
18-
progressColor: new ej.pdfexport.PdfColor(205, 92, 92),
19-
},
20-
connectorLineColor: new ej.pdfexport.PdfColor(128, 0, 0),
21-
footer: {
22-
backgroundColor: new ej.pdfexport.PdfColor(205, 92, 92)
23-
},
24-
timeline: {
25-
backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255),
26-
padding: new PdfPaddings(5, 2, 0, 0),
27-
},
28-
label: {
29-
fontColor: new ej.pdfexport.PdfColor(128, 0, 0),
30-
},
31-
cell: {
32-
backgroundColor: new ej.pdfexport.PdfColor(240, 248, 255),
33-
fontColor: new ej.pdfexport.PdfColor(0, 0, 0),
34-
borderColor: new ej.pdfexport.PdfColor(179, 219, 255),
35-
},
36-
};
37-
gantt.pdfExport(exportProperties);
34+
ganttStyle: {
35+
fontFamily: 1,
36+
columnHeader: {
37+
backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255)
38+
},
39+
taskbar: {
40+
taskColor: new ej.pdfexport.PdfColor(240, 128, 128),
41+
taskBorderColor: new ej.pdfexport.PdfColor(240, 128, 128),
42+
progressColor: new ej.pdfexport.PdfColor(205, 92, 92),
43+
},
44+
connectorLineColor: new ej.pdfexport.PdfColor(128, 0, 0),
45+
footer: {
46+
backgroundColor: new ej.pdfexport.PdfColor(205, 92, 92)
47+
},
48+
timeline: {
49+
backgroundColor: new ej.pdfexport.PdfColor(179, 219, 255),
50+
padding: new PdfPaddings(5, 2, 0, 0),
51+
},
52+
label: {
53+
fontColor: new ej.pdfexport.PdfColor(128, 0, 0),
54+
},
55+
cell: {
56+
backgroundColor: new ej.pdfexport.PdfColor(240, 248, 255),
57+
fontColor: new ej.pdfexport.PdfColor(0, 0, 0),
58+
borderColor: new ej.pdfexport.PdfColor(179, 219, 255),
59+
},
60+
eventMarker: {
61+
label: {
62+
backgroundColor: new ej.pdfexport.PdfColor(255, 239, 213),
63+
fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
64+
fontColor: new ej.pdfexport.PdfColor(139, 69, 19),
65+
fontSize: 9,
66+
format: stringFormat,
67+
fontStyle: ej.pdfexport.PdfFontStyle.Bold,
68+
borderColor: new ej.pdfexport.PdfColor(160, 82, 45),
69+
borders: pdfborders,
70+
},
71+
lineStyle: pen,
72+
},
73+
holiday: {
74+
fontFamily: ej.pdfexport.PdfFontFamily.TimesRoman,
75+
fontSize: 10,
76+
fontStyle: ej.pdfexport.PdfFontStyle.Bold,
77+
borderColor: new ej.pdfexport.PdfColor(211, 211, 211),
78+
backgroundColor: new ej.pdfexport.PdfColor(255, 248, 220),
79+
fontColor: new ej.pdfexport.PdfColor(105, 105, 105),
80+
format: vertical,
81+
borders: pdfborders,
82+
},
83+
84+
}
85+
86+
};
87+
gantt.pdfExport(exportProperties);
3888
}
3989
}
4090
</script>

0 commit comments

Comments
 (0)