This is a migrated thread and some comments may be shown as answers.

[Solved] Upload control in modal JQuery dialog

5 Answers 139 Views

Upload

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Greg asked on 12 Apr 2011, 07:15 PM

Mvc-TelerikUpload.zip

I have a partial view (which contains a Telerik upload control) that gets added to the contents of a JQuery modal dialog window via javascript. The problem is that clicking the the Telerik upload button does not do anything.

I think I am correctly following the instructions for working with data returned from a partial view, but pressing the
Upload..." button does not show a file browser and I do not see what the issue is.

I've attached a VS2010 solution to see exactly what the code is.

This is what my Page looks like:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="Telerik.Web.Mvc.UI" %>

<!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" >

<head runat="server">

<title>Index</title>

<link type="text/css" rel="Stylesheet" href="<%=Url.Content("~/Content/jquery-ui-1.8.11.custom.css")%>" />

<%= Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.vista.css"))

%>

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.5.1.min.js")%>"></script>

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui-1.8.11.custom.min.js")%>"></script>

<script type="text/javascript">

$(document).ready(function () {

$("a").button();

$("#test a").click(function () {

$.ajax({

type: "GET",

url: '<%=Url.Action("GetDialogContents") %>',

success: function (htmlData) {

var dialog = $("#dialog");

dialog.html(htmlData);

dialog.dialog("open");

return false;

},

error: function (xhr, status, error) {

alert(xhr.statusText);

}

});

$('#dialog').dialog({

autoOpen: false,

height: 370,

width: 370,

modal: true,

buttons: {

Close: function () {

$(this).dialog("close");

}

});

</script>

</head>

<body>

<h1>Test Page</h1>

<div id="test">

<a href="#">Show Dialog</a>

</div>

<div id="dialog" title="Dialog Title">

</div>

<%= Html.Telerik().ScriptRegistrar()

.DefaultGroup(group => group

.Add("telerik.common.min.js")

.Add("telerik.upload.min.js")

).jQuery(false)

%>

</body>

</html>

The partial view looks like this:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%@ Import Namespace="Telerik.Web.Mvc.UI" %>

<%= Html.Telerik().Upload()

.Name("attachments")

.Async(async => async

.Save("SaveFile", "Home")

)

%>

5 Answers, 1 is accepted

Accepted

answered on 13 Apr 2011, 09:04 AM

Hello Greg,

Thank you for the sample project. The dialog plugin that you are using is causing a lot more problems than the described one - it seems that some massive event cancelling is going on and as a result, browser keyboard shortcuts do not work while the popup dialog is opened. Also, absolutely positioned elements (with z-index) cannot be focused - you can try including some ordinary textboxes inside the dialog, with a position:absolute and z-index style and will see for yourself.

In your case I recommend you to use our Window component instead of the jQuery dialog:

http://demos.telerik.com/aspnet-mvc/window?theme=vista

With the jQuery popup you can apply the following workaround to make the Upload clickable:

CSS

.ui-dialog .t-upload-button input

{

z-index:auto !important;

}

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items