It works fine in Chrome and Firefox. see attachment 1a with modal effect. In I.E 9 (see 1b) the second windows is not showing. I suspect a bug in I.E 9 did you come across this issue?
Here is the code we use in a user control
Control Language="C#" AutoEventWireup="true" CodeFile="Documents.ascx.cs" Inherits="Documents" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery-1.8.1.js" type="text/javascript"></script>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function WindowClose(oWnd, args) {
var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
var location = oExplorer.get_tree().get_selectedNode().get_attributes().getAttribute("Path");
oExplorer.loadFolder(location, false);
}
function OnClientLoad(oExplorer, args) {
windowManager = oExplorer.get_windowManager();
windowManager.add_show(uploadWindowShown);
}
function uploadWindowShown(oWindow, args) {
if (oWindow.get_name() == '<%= RadFileExplorer1.WindowManager.ClientID + "fileExplorerUpload" %>') {
popupWindow("#boxes");
}
}
function OnGridContextItemClicked(oGridMenu, args) {
var menuItemText = args.get_item().get_text();
var menuitemvalue = args.get_item().get_value();
var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
var oWnd = $find("<%=RadWindowManager1.ClientID%>");
var selectedItem = oExplorer.get_selectedItem();
if (selectedItem) {
var gridSelectedItem = oExplorer.get_grid().get_masterTableView().get_selectedItems()[0];
var ItemID = gridSelectedItem.get_dataItem().Attributes["ItemID"];
var currentItemName = selectedItem.get_name(); // get the path of the current item
var treeView = oExplorer.get_tree();
var parentId = treeView.get_selectedNode().get_attributes().getAttribute("Tag");
var itemPath = oExplorer.get_tree().get_selectedNode().get_attributes().getAttribute("Path");
}
else {
alert("Please, select an item");
return false;
}
if (menuitemvalue == "CustomProperties") {
if (oWnd) {
oWnd.setUrl("ChangeVersion.aspx?DOCID=" + ItemID + "&parentId=" + parentId + "&itemPath=" + itemPath + "&itemName=" + currentItemName, "itemPath", "");
// oWnd.setUrl("ChangeVersion.aspx?DOCID=" + ItemID + "&parentId=" + parentId + "&itemPath=" + itemPath, "itemPath", "");
oWnd.show();
oWnd.center();
return false;
}
}
else if (menuitemvalue == "CustomRestore") {
if (confirm("Are you sure? you want to restore this file.")) {
PageMethods.RestoreFromArchive(currentItemName, itemPath, parentId, OnSuccess, OnFailure)
}
}
else if (menuitemvalue == "CustomPreviousVersion") {
if (oWnd) {
oWnd.setUrl("PreviousVersions.aspx?DOCID=" + ItemID + "&itemName=" + currentItemName, "itemPath", "");
oWnd.show();
oWnd.center();
return false;
}
return false;
}
return false;
}
function OnSuccess(result) {
if (result) {
alert(result);
var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
var location = oExplorer.get_tree().get_selectedNode().get_attributes().getAttribute("Path");
oExplorer.loadFolder(location, false);
explorer.refresh();
}
}
function OnFailure(error) {
alert(error);
}
function Clientshow(sender, eventArgs) {
$(".rwTitlebarControls tr td:eq(1)").hide();
}
function popupWindow(id) {
var maskHeight = $(document).height(); var maskWidth = $(document).width(); $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow", 0.7); var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); $(id).fadeIn(2000);
}
$(document).ready(function () {
$("#BtnCancel,#BtnVersion").click(function () {
if ($(this).attr("id") == "BtnVersion") {
var txtVersinNo = $("#" + "<%= txtVersinNo.ClientID %>").val();
var txtManager = $("#" + "<%= txtManager.ClientID %>").val();
var txtPicker = $find("<%= txtPicker.ClientID %>").get_dateInput().get_selectedDate();
if (!txtPicker) {
alert("Please Fill Value");
return false;
}
else {
txtPicker = txtPicker.format("dd/MM/yyyy");
}
if (txtVersinNo == "" || txtManager == "" || txtPicker == "") {
alert("Please Fill Value");
return false;
}
else {
$("#mask,#boxes").hide();
return false;
}
}
else if ($(this).attr("id") == "BtnCancel") {
$("#" + "<%= txtVersinNo.ClientID %>").val("");
$("#" + "<%= txtManager.ClientID %>").val("");
$("#mask,#boxes,.RadWindow,.TelerikModalOverlay").hide();
}
return false;
});
});
</script>
</telerik:RadCodeBlock>
<div>
<%--<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true">
</asp:ScriptManager>--%>
<telerik:RadFileExplorer runat="server" EnableFilterTextBox="true" EnableCopy="true"
ID="RadFileExplorer1" Height="800px" Width="100%" Configuration-MaxUploadFileSize="20971520"
FilterTextBoxLabel="Search" BorderStyle="None" VisibleControls="Grid,TreeView,ContextMenus,Toolbar"
OnItemCommand="RadFileExplorer1_ItemCommand" OnClientLoad="OnClientLoad">
</telerik:RadFileExplorer>
<telerik:RadWindowManager VisibleStatusbar="false" Width="600" Height="500" EnableViewState="false"
ReloadOnShow="true" Behaviors="Close" OnClientClose="WindowClose" EnableShadow="true"
ID="RadWindowManager1" runat="server" ShowContentDuringLoad="false" OnClientShow="Clientshow">
</telerik:RadWindowManager>
</div>
<%--Don't delete it .--%>
<div id="mask">
</div>
<div id="boxes">
<table>
<tr>
<td><label>Enter File Version</label></td>
<td><asp:TextBox runat="server" ID="txtVersinNo"></asp:TextBox></td>
</tr>
<tr>
<td><label>File Manager</label></td>
<td><asp:TextBox runat="server" ID="txtManager"></asp:TextBox></td>
</tr>
<tr>
<td><label>Date(MM/DD/YYYY)</label></td>
<td><telerik:RadDatePicker runat="server" ID="txtPicker" ZIndex="99995">
<DateInput ID="DateInput1" DateFormat="MM/dd/yyyy" DisplayDateFormat="MM/dd/yyyy" runat="server"
ReadOnly="true">
</DateInput>
<Calendar ID="Calendar1" runat="server">
<SpecialDays>
<telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Gray" />
</SpecialDays>
</Calendar>
</telerik:RadDatePicker></td>
</tr>
<tr>
<td colspan="2">
<button id="BtnVersion" class="btn btn-primary btn-small pull-right">
Ok</button>
<button id="BtnCancel" class="btn btn-primary btn-small pull-right">
Cancel</button>
</td>
</tr>
</table>
</div>
</html>
Here is the code we use in a user control
Control Language="C#" AutoEventWireup="true" CodeFile="Documents.ascx.cs" Inherits="Documents" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="JS/jquery-1.8.1.js" type="text/javascript"></script>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function WindowClose(oWnd, args) {
var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
var location = oExplorer.get_tree().get_selectedNode().get_attributes().getAttribute("Path");
oExplorer.loadFolder(location, false);
}
function OnClientLoad(oExplorer, args) {
windowManager = oExplorer.get_windowManager();
windowManager.add_show(uploadWindowShown);
}
function uploadWindowShown(oWindow, args) {
if (oWindow.get_name() == '<%= RadFileExplorer1.WindowManager.ClientID + "fileExplorerUpload" %>') {
popupWindow("#boxes");
}
}
function OnGridContextItemClicked(oGridMenu, args) {
var menuItemText = args.get_item().get_text();
var menuitemvalue = args.get_item().get_value();
var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
var oWnd = $find("<%=RadWindowManager1.ClientID%>");
var selectedItem = oExplorer.get_selectedItem();
if (selectedItem) {
var gridSelectedItem = oExplorer.get_grid().get_masterTableView().get_selectedItems()[0];
var ItemID = gridSelectedItem.get_dataItem().Attributes["ItemID"];
var currentItemName = selectedItem.get_name(); // get the path of the current item
var treeView = oExplorer.get_tree();
var parentId = treeView.get_selectedNode().get_attributes().getAttribute("Tag");
var itemPath = oExplorer.get_tree().get_selectedNode().get_attributes().getAttribute("Path");
}
else {
alert("Please, select an item");
return false;
}
if (menuitemvalue == "CustomProperties") {
if (oWnd) {
oWnd.setUrl("ChangeVersion.aspx?DOCID=" + ItemID + "&parentId=" + parentId + "&itemPath=" + itemPath + "&itemName=" + currentItemName, "itemPath", "");
// oWnd.setUrl("ChangeVersion.aspx?DOCID=" + ItemID + "&parentId=" + parentId + "&itemPath=" + itemPath, "itemPath", "");
oWnd.show();
oWnd.center();
return false;
}
}
else if (menuitemvalue == "CustomRestore") {
if (confirm("Are you sure? you want to restore this file.")) {
PageMethods.RestoreFromArchive(currentItemName, itemPath, parentId, OnSuccess, OnFailure)
}
}
else if (menuitemvalue == "CustomPreviousVersion") {
if (oWnd) {
oWnd.setUrl("PreviousVersions.aspx?DOCID=" + ItemID + "&itemName=" + currentItemName, "itemPath", "");
oWnd.show();
oWnd.center();
return false;
}
return false;
}
return false;
}
function OnSuccess(result) {
if (result) {
alert(result);
var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
var location = oExplorer.get_tree().get_selectedNode().get_attributes().getAttribute("Path");
oExplorer.loadFolder(location, false);
explorer.refresh();
}
}
function OnFailure(error) {
alert(error);
}
function Clientshow(sender, eventArgs) {
$(".rwTitlebarControls tr td:eq(1)").hide();
}
function popupWindow(id) {
var maskHeight = $(document).height(); var maskWidth = $(document).width(); $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); $('#mask').fadeIn(1000); $('#mask').fadeTo("slow", 0.7); var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); $(id).fadeIn(2000);
}
$(document).ready(function () {
$("#BtnCancel,#BtnVersion").click(function () {
if ($(this).attr("id") == "BtnVersion") {
var txtVersinNo = $("#" + "<%= txtVersinNo.ClientID %>").val();
var txtManager = $("#" + "<%= txtManager.ClientID %>").val();
var txtPicker = $find("<%= txtPicker.ClientID %>").get_dateInput().get_selectedDate();
if (!txtPicker) {
alert("Please Fill Value");
return false;
}
else {
txtPicker = txtPicker.format("dd/MM/yyyy");
}
if (txtVersinNo == "" || txtManager == "" || txtPicker == "") {
alert("Please Fill Value");
return false;
}
else {
$("#mask,#boxes").hide();
return false;
}
}
else if ($(this).attr("id") == "BtnCancel") {
$("#" + "<%= txtVersinNo.ClientID %>").val("");
$("#" + "<%= txtManager.ClientID %>").val("");
$("#mask,#boxes,.RadWindow,.TelerikModalOverlay").hide();
}
return false;
});
});
</script>
</telerik:RadCodeBlock>
<div>
<%--<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true">
</asp:ScriptManager>--%>
<telerik:RadFileExplorer runat="server" EnableFilterTextBox="true" EnableCopy="true"
ID="RadFileExplorer1" Height="800px" Width="100%" Configuration-MaxUploadFileSize="20971520"
FilterTextBoxLabel="Search" BorderStyle="None" VisibleControls="Grid,TreeView,ContextMenus,Toolbar"
OnItemCommand="RadFileExplorer1_ItemCommand" OnClientLoad="OnClientLoad">
</telerik:RadFileExplorer>
<telerik:RadWindowManager VisibleStatusbar="false" Width="600" Height="500" EnableViewState="false"
ReloadOnShow="true" Behaviors="Close" OnClientClose="WindowClose" EnableShadow="true"
ID="RadWindowManager1" runat="server" ShowContentDuringLoad="false" OnClientShow="Clientshow">
</telerik:RadWindowManager>
</div>
<%--Don't delete it .--%>
<div id="mask">
</div>
<div id="boxes">
<table>
<tr>
<td><label>Enter File Version</label></td>
<td><asp:TextBox runat="server" ID="txtVersinNo"></asp:TextBox></td>
</tr>
<tr>
<td><label>File Manager</label></td>
<td><asp:TextBox runat="server" ID="txtManager"></asp:TextBox></td>
</tr>
<tr>
<td><label>Date(MM/DD/YYYY)</label></td>
<td><telerik:RadDatePicker runat="server" ID="txtPicker" ZIndex="99995">
<DateInput ID="DateInput1" DateFormat="MM/dd/yyyy" DisplayDateFormat="MM/dd/yyyy" runat="server"
ReadOnly="true">
</DateInput>
<Calendar ID="Calendar1" runat="server">
<SpecialDays>
<telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="Gray" />
</SpecialDays>
</Calendar>
</telerik:RadDatePicker></td>
</tr>
<tr>
<td colspan="2">
<button id="BtnVersion" class="btn btn-primary btn-small pull-right">
Ok</button>
<button id="BtnCancel" class="btn btn-primary btn-small pull-right">
Cancel</button>
</td>
</tr>
</table>
</div>
</html>
1 Answer, 1 is accepted
0
Hi Keith,
I have just answered your support ticket on the subject, for convenience I will paste my answer here as well:
I tried to reproduce the described behavior, but to no avail. From the provided images I can see that the FileExplorer on your page is using AsyncUpload, but the provided code does not have such configuration, so I assume there are missing configurations in the provided files.
Could you please prepare a sample fully runnable page in the way described in this blog post, so we will be able to reproduce the behavior at hand on our side? Does the pop-up window should pop just after the upload button is clicked or is there any additional actions that need to be taken? What are the exact steps to replicate the problem?
Regards,
Veselina Raykova
Telerik
I have just answered your support ticket on the subject, for convenience I will paste my answer here as well:
I tried to reproduce the described behavior, but to no avail. From the provided images I can see that the FileExplorer on your page is using AsyncUpload, but the provided code does not have such configuration, so I assume there are missing configurations in the provided files.
Could you please prepare a sample fully runnable page in the way described in this blog post, so we will be able to reproduce the behavior at hand on our side? Does the pop-up window should pop just after the upload button is clicked or is there any additional actions that need to be taken? What are the exact steps to replicate the problem?
Regards,
Veselina Raykova
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.