Skip to content

Commit 5183fb1

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 642306f commit 5183fb1

File tree

2 files changed

+140
-1
lines changed

2 files changed

+140
-1
lines changed

‎docs-aspnet/knowledge-base/upload-file-confirmation-dialog.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
title: Show Confirm Dialog before Uploading Files
3+
description: An example of how to add a confirmation dialog box before uploading files in the {{ site.product }} Upload component.
4+
page_title: Show Confirm Dialog before Uploading Files
5+
slug: upload-file-confirmation-dialog
6+
tags: upload, dialog, confirmation, file, telerik, core, mvc
7+
ticketid: 1660745
8+
res_type: kb
9+
component: upload
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>{{ site.product }} Upload</td>
18+
</tr>
19+
<tr>
20+
<td>Operating System</td>
21+
<td>All</td>
22+
</tr>
23+
<tr>
24+
<td>Browser</td>
25+
<td>All</td>
26+
</tr>
27+
<tr>
28+
<td>Browser Version</td>
29+
<td>All</td>
30+
</tr>
31+
</table>
32+
33+
## Description
34+
How can I implement a confirm dialog before the user uploads a file when the Upload is in asynchronous mode?
35+
36+
## Solution
37+
38+
Use the [Kendo UI Confirm Dialog](https://demos.telerik.com/kendo-ui/dialog/predefined-dialogs) and an [Asynchronous Upload Mode](https://docs.telerik.com/{{ site.platform }}/html-helpers/editors/upload/modes-of-operation#asynchronous-mode) with [AutoUpload](https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/async.autoupload) **turned off**.<br>
39+
> This is a customized solution that does not support other modes. Such as [Chunk Upload](https://docs.telerik.com/{{ site.platform }}/html-helpers/editors/upload/chunk-upload) or [Synchronous Mode](https://docs.telerik.com/{{ site.platform }}/html-helpers/editors/upload/modes-of-operation) of operation.
40+
41+
To achieve the desired outcome:
42+
43+
1. Subscribe to the [Select](https://docs.telerik.com/{{ site.platform }}/api/kendo.mvc.ui.fluent/uploadeventbuilder#selectsystemstring) event handler of the Upload.
44+
1. Within the handler, remove the default click handler from the upload button programmatically by using the [off](https://api.jquery.com/off/) jQuery method.
45+
1. Prevent the default upload workflow.
46+
1. Depending on the user's response from the dialog, either call the [upload](https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/methods/upload?_gl=1*102tlvl*_gcl_au*MTU0Nzc4NDk1LjE3MjAxODc4MjM.*_ga*Mzc1Nzg4OTUxLjE3MjAxODc4MjE.*_ga_9JSNBCSF54*MTcyNDEzODY3OS4xNi4xLjE3MjQxNjUyNzguNTQuMC4w#upload) method if confirmed or the [removeAllFiles](https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/methods/removeallfiles?_gl=1*102tlvl*_gcl_au*MTU0Nzc4NDk1LjE3MjAxODc4MjM.*_ga*Mzc1Nzg4OTUxLjE3MjAxODc4MjE.*_ga_9JSNBCSF54*MTcyNDEzODY3OS4xNi4xLjE3MjQxNjUyNzguNTQuMC4w#removeallfiles) method if cancelled.
47+
48+
The following example demonstrates how to implement these steps:
49+
50+
```HtmlHelper
51+
@(Html.Kendo().Upload()
52+
.Name("files")
53+
.Async(a => a
54+
.Save("OnPostUpload", "Home")
55+
.Remove("OnPostRemove", "Home")
56+
.AutoUpload(false)
57+
)
58+
.Events(ev => ev.Select("onSelect"))
59+
)
60+
```
61+
{% if site.core %}
62+
```TagHelper
63+
@addTagHelper *, Kendo.Mvc
64+
65+
<kendo-upload name="files" on-select="onSelect">
66+
<async auto-upload="false"
67+
save-url="@Url.Action("OnPostUpload", "Home")"
68+
remove-url="@Url.Action("OnPostRemove","Home")" />
69+
</kendo-upload>
70+
```
71+
{% endif %}
72+
73+
```Script.js
74+
<script>
75+
function onUpload(e){
76+
let upload = $("#files").getKendoUpload();
77+
78+
kendo.confirm("Confirm Uploading")
79+
.done(function () {
80+
/* The result can be observed in the DevTools(F12) console of the browser. */
81+
console.log("User accepted");
82+
upload.upload();
83+
})
84+
.fail(function() {
85+
/* The result can be observed in the DevTools(F12) console of the browser. */
86+
console.log("User rejected");
87+
upload.removeAllFiles();
88+
});
89+
}
90+
function onSelect(e) {
91+
setTimeout(function () {
92+
var uploadBtn = e.sender.wrapper.find(".k-upload-selected");
93+
$(e.sender.wrapper).off("click",".k-upload-selected");
94+
$(uploadBtn).bind("click", onUpload);
95+
}, 200)
96+
}
97+
</script>
98+
```
99+
100+
{% if site.core %}
101+
For a runnable example based on the code above, refer to the following REPL samples:
102+
103+
* [Confirmation Before Uploading Files HtmlHelper](https://netcorerepl.telerik.com/Qyksbplf39vN1b5R08)
104+
* [Confirmation Before Uploading Files TagHelper](https://netcorerepl.telerik.com/QIailJFp44CyWf0r29)
105+
106+
{% else %}
107+
For a runnable example based on the code above, refer to the [REPL example on Confirmation Before Uploading Files](https://netcorerepl.telerik.com/Qyksbplf39vN1b5R08).
108+
{% endif %}
109+
110+
## More {{ site.framework }} Upload Resources
111+
112+
* [{{ site.framework }} Upload Documentation]({%slug htmlhelpers_upload_aspnetcore%})
113+
114+
* [{{ site.framework }} Upload Demos](https://demos.telerik.com/{{ site.platform }}/upload)
115+
116+
{% if site.core %}
117+
* [{{ site.framework }} Upload Product Page](https://www.telerik.com/aspnet-core-ui/upload)
118+
119+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
120+
121+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
122+
123+
{% else %}
124+
* [{{ site.framework }} Upload Product Page](https://www.telerik.com/aspnet-mvc/upload)
125+
126+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
127+
128+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
129+
{% endif %}
130+
131+
## See Also
132+
133+
* [Client-Side API Reference of the Upload for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/upload)
134+
* [Server-Side API Reference of the Upload for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/upload)
135+
{% if site.core %}
136+
* [Server-Side TagHelper API Reference of the Upload for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/upload)
137+
{% endif %}
138+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2024%})
139+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs/api/javascript/ui/gantt.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4208,7 +4208,7 @@ If set to `true`, the Gantt Timeline will render both the planned and the actual
42084208
parentId: null,
42094209
title: "Task1",
42104210
plannedStart: new Date("2014/6/17 9:00"),
4211-
plannedEnd: new Date("2014/6/17 16:00")
4211+
plannedEnd: new Date("2014/6/17 16:00"),
42124212
start: new Date("2014/6/17 9:00"),
42134213
end: new Date("2014/6/17 18:00")
42144214
}],

0 commit comments

Comments
 (0)