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

RadUpload in a grid in UpdatePanel

3 Answers 156 Views

Grid

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

LevizBB asked on 04 May 2012, 03:52 PM

Hi,

We are trying to resolve a problem from two days now : We are unable to upload files in the RadGrid from a RadUpload.
We found some resolution sample on your forum but none of them could work on our solution because of the UpdatePanel.

Some explanation of the structure of our application :

UpdatePanel containing multiple WebControls => our RadGrid is in one of them.

We couldn't change now the structure of this application : We couldn't remove the UpdatePanel

I took out the code making us crazy, to put it in a project sample with to retrieve the error.

<asp:Content ID="__functionLeft" ContentPlaceHolderID="MainContent" runat="Server">

<asp:UpdatePanel ID="__upDatePanel" runat="server">

<ContentTemplate>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

// <![CDATA[

//On insert and update buttons click temporarily disables ajax to perform upload actions

function conditionalPostback(sender, eventArgs) {

var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");

if (eventArgs.get_eventTarget().match(theRegexp)) {

var upload = $find(window['UploadId']);

//AJAX is disabled only if file is selected for upload

if (upload.getFileInputs()[0].value != "") {

eventArgs.set_enableAjax(false);

}

function validateRadUpload(source, e) {

e.IsValid = false;

var upload = $find(source.parentNode.getElementsByTagName('div')[0].id);

var inputs = upload.getFileInputs();

for (var i = 0; i < inputs.length; i++) {

//check for empty string or invalid extension

if (inputs[i].value != "" && upload.isExtensionValid(inputs[i].value)) {

e.IsValid = true;

break;

}

// ]]>

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid ID="__linksRadGrid" runat="server"

AllowMultiRowEdit="false"

ShowStatusBar="true"

GridLines="None"

AllowPaging="False"

AllowAutomaticUpdates="false"

AllowAutomaticInserts="false"

OnPreRender="LinksGridView_PreRender"

OnItemCreated="LinksGridView_ItemCreated"

OnNeedDataSource="LinksRadGrid_NeedDataSource"

OnInsertCommand="LinksRadGrid_InsertCommand"

OnUpdateCommand="LinksRadGrid_UpdateCommand"

OnDeleteCommand="LinksRadGrid_DeleteCommand"

OnItemDataBound="LinksRadGrid_ItemDataBound"

OnItemCommand="LinksRadGrid_ItemCommand"

OnEditCommand="LinksRadGrid_EditCommand"

AllowSorting="true"

Skin="Transparent"

Width="450px" >

<MasterTableView AutoGenerateColumns="False"

DataKeyNames="IdAttachment"

CommandItemDisplay="Bottom" >

<PagerStyle Mode="NextPrevAndNumeric" />

<CommandItemTemplate>

<div style="padding: 5px 5px;">

<asp:ImageButton ID="imgInsert" runat="server"

CommandName="InitInsert"

AlternateText="Insert New Record"

ToolTip = "Insert New Record" />

<asp:ImageButton ID="imgRefresh" runat="server"

CommandName="RebindGrid"

AlternateText="Refresh the grid"

ToolTip = "Refresh the grid" />

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton"

UniqueName="EditAttachmentLinks"

ItemStyle-Width="30px"

ItemStyle-HorizontalAlign="Center"/>

<telerik:GridBoundColumn DataField="Title"

DataType="System.String"

HeaderText="Title"

SortExpression="Title"

UniqueName="Title">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Description"

DataType="System.String"

HeaderText="Description"

SortExpression="Description"

UniqueName="Description">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="AttachmentType"

DataType="System.String"

HeaderText="AttachmentType"

SortExpression="AttachmentType"

UniqueName="AttachmentType"

Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Url"

DataType="System.String"

HeaderText="Url"

SortExpression="Url"

UniqueName="URL"

Display="false">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn

HeaderText="Type"

UniqueName="Type"

HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center" >

<ItemTemplate>

<asp:ImageButton ID="__attachedTypeImageButton" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn CommandName="Delete" ButtonType="ImageButton"

UniqueName="DeleteAttachmentLinks"

ConfirmText="Delete this record?"

ConfirmDialogType="RadWindow"

ConfirmTitle="Delete"

ItemStyle-Width="30px"

ItemStyle-HorizontalAlign="Center"/>

</Columns>

<EditFormSettings EditFormType="Template">

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

<FormTemplate>

<table cellspacing="2" cellpadding="1" width="100%" border="0">

<tr>

<td>

<asp:Label ID="__titleLabel" runat="server"

Text="Title">

</asp:Label>

</td>

<td>

<asp:TextBox ID="__titleTextBox" runat="server"

Width="100px"

Text='<%# Bind("Title") %>' >

</asp:TextBox>

<span style="color:Red; font-weight:bold">*</span>

<br />

<asp:RequiredFieldValidator ID="__titleTextBoxRFValidator" runat="server"

ControlToValidate="__titleTextBox"

Display="Dynamic"

ErrorMessage="Please, enter a title!"

SetFocusOnError="true" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="__decriptionLabel" runat="server"

Text="Description">

</asp:Label>

</td>

<td>

<asp:TextBox ID="__decriptionTextBox" runat="server"

Width="100px"

TextMode="MultiLine"

Rows="4"

Text='<%# Bind("Description") %>'>

</asp:TextBox>

<span style="color:Red; font-weight:bold">*</span>

<br />

<asp:RequiredFieldValidator ID="__decriptionTextBoxRFValidator" runat="server"

ControlToValidate="__decriptionTextBox"

Display="Dynamic"

ErrorMessage="Please, enter a description!"

SetFocusOnError="true" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="__URLLabel" runat="server"

Text="URL">

</asp:Label>

</td>

<td>

<asp:TextBox ID="__urlTextBox" runat="server"

Width="255px"

Text='<%# Bind("URL") %>' >

</asp:TextBox>

</td>

</tr>

<tr>

<td colspan="2">

<asp:Label ID="__orLabel" runat="server"

Text="or">

</asp:Label>

</td>

</tr>

<tr>

<td>

<asp:Label ID="__fileUploadLabel" runat="server"

Text="File">

</asp:Label>

</td>

<td>

<div id="__fileUploadDiv" runat="server">

<telerik:RadUpload ID="__fileUpload" runat="server"

ControlObjectsVisibility="None"

MaxFileInputsCount="1"

/>

</div>

</td>

</tr>

<tr>

<td align="right" colspan="2">

<asp:Button ID="btnUpdate" runat="server"

Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'

CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'

CausesValidation="True" >

</asp:Button >

<asp:Button ID="btnCancel" runat="server"

Text="Cancel"

CausesValidation="False"

CommandName="Cancel">

</asp:Button >

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</asp:UpdatePanel>

<script type="text/javascript" >

function LinksFileUpload_OnChange(clientidTextBox) {

document.getElementById(clientidTextBox).value = "";

}

function LinksUrlTextBox_OnChange(clientIdDIVFileUpload) {

//We couldn't change the input file value, so we reset the DIV container

document.getElementById(clientIdDIVFileUpload).innerHTML = document.getElementById(clientIdDIVFileUpload).innerHTML;

}

</script>

</asp:Content>

The code behind code :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.ComponentModel;

using Telerik.Web.UI;

using System.Text;

using System.Web.UI.HtmlControls;

using System.IO;

public class ListHelper {

public static DataTable ToDataTable<T>(IList<T> data) {

PropertyDescriptorCollection props = TypeDescriptor.GetProperties(typeof(T));

DataTable table = new DataTable();

for (int i = 0; i < props.Count; i++) {

PropertyDescriptor prop = props[i];

table.Columns.Add(prop.Name, prop.PropertyType);

}

object[] values = new object[props.Count];

foreach (T item in data) {

for (int i = 0; i < values.Length; i++) {

values[i] = props[i].GetValue(item);

}

table.Rows.Add(values);

}

return table;

}

public class GWAttachment {

#region Accessor

private string _title;

public string Title {

get { return this._title; }

set { this._title = value; }

}

private string _description;

public string Description {

get { return this._title; }

set { this._title = value; }

}

private string _url;

public string Url {

get { return this._url; }

set { this._url = value; }

}

private string _fileName;

public string FileName {

get { return this._fileName; }

set { this._fileName = value; }

}

private int _idAttachment;

public int IdAttachment {

get { return this._idAttachment; }

set { this._idAttachment = value; }

}

private int _attachmentType;

public int AttachmentType {

get { return this._attachmentType; }

set { this._attachmentType = value; }

}

#endregion

}

public partial class Default2 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e) {

}

#region Links

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e) {

if (e.Item is GridEditableItem && e.Item.IsInEditMode) {

}

#region DataSource

protected void LinksObjectDataSource_Selecting(object sender, ObjectDataSourceSelectingEventArgs e) {

}

#endregion

#region Gridview

protected void LinksGridView_PreRender(object sender, EventArgs e) {

}

protected void LinksGridView_ItemCreated(object sender, GridItemEventArgs e) {

}

protected void DisableControls(ControlCollection controls) {

foreach (Control c in controls) {

if (c is WebControl) {

((WebControl)c).Enabled = false;

}

DisableControls(c.Controls);

}

protected void LinksRadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) {

GWAttachment att1 = new GWAttachment();

att1.IdAttachment = 1;

att1.Title = "Test 1";

att1.Description = "Decription 1";

att1.Url = "http://www.google.com";

att1.AttachmentType = 3;

GWAttachment att2 = new GWAttachment();

att2.IdAttachment = 2;

att2.Title = "Test 2";

att2.Description = "Decription 2";

att2.Url = "http://www.google.com/test";

att2.AttachmentType = 4;

List<GWAttachment> attachmentList = new List<GWAttachment>();

attachmentList.Add(att1);

attachmentList.Add(att2);

DataTable dt = ListHelper.ToDataTable<GWAttachment>(attachmentList);

this.__linksRadGrid.DataSource = dt;

}

protected void LinksRadGrid_ItemDataBound(object sender, GridItemEventArgs e) {

if (e.Item is GridDataItem) {

GridDataItem gridDataItem = (GridDataItem)e.Item;

int attachedType = int.Parse(gridDataItem["AttachmentType"].Text);

ImageButton image = (ImageButton)gridDataItem["Type"].FindControl("__attachedTypeImageButton");

if (attachedType == 3

&& !string.IsNullOrEmpty(gridDataItem["URL"].Text)) {

int idDocument = this.GetDocumentLinksId(gridDataItem["URL"].Text);

if (idDocument > 0) {

image.OnClientClick = this.BuildDocumentPopupScript(idDocument);

}

else {

this.ShowImageError(image, "Error : unable to parse the internal document id! Please correct the URL.");

}

else if (attachedType == 4

&& !string.IsNullOrEmpty(gridDataItem["URL"].Text)) {

image.OnClientClick = this.WindowsOpenPopup(gridDataItem["URL"].Text);

}

else if (attachedType == 5) {

int idAttachment = int.Parse(gridDataItem.GetDataKeyValue("IdAttachment").ToString());

image.OnClientClick = this.GetAttachmentLinksUrl(idAttachment);

}

else {

}

else if (e.Item is GridEditFormItem

&& e.Item.IsInEditMode) {

GridEditFormItem editItem = e.Item as GridEditFormItem;

TextBox urlTxtBox = (TextBox)editItem.FindControl("__urlTextBox");

RadUpload linksFileUpload = (RadUpload)editItem.FindControl("__fileUpload");

Control linksFileUploadDIV = (Control)editItem.FindControl("__fileUploadDiv");

if (urlTxtBox != null

&& linksFileUpload != null

&& linksFileUploadDIV != null) {

// It is forbidden to reset a FileUpload, so we reset the dive container!

string onChangeEventUrlTxtBox = "LinksUrlTextBox_OnChange('" + linksFileUploadDIV.ClientID + "')";

string onChangeEventLinksFileUpload = "LinksFileUpload_OnChange('" + urlTxtBox.ClientID + "')";

urlTxtBox.Attributes.Add("onchange", onChangeEventUrlTxtBox);

linksFileUpload.Attributes.Add("onchange", onChangeEventLinksFileUpload);

}

#region Attachment file

protected String GetAttachmentLinksUrl(int idAttachment) {

String page = "~/Attachment.aspx";

page = VirtualPathUtility.ToAbsolute(page);

StringBuilder url = new StringBuilder(page);

url.AppendFormat("?IdAttachment={0}&Type={1}", idAttachment, 3);

string javaScript = "javascript:window.open('{0}','popup{1}','width=650,height=750,scrollbars=yes');return false;";

return String.Format(javaScript, url.ToString(), idAttachment);

}

#endregion

protected void LinksRadGrid_ItemCommand(object source, GridCommandEventArgs e) {

if (e.CommandName == RadGrid.DownloadAttachmentCommandName) {

GridEditFormItem editFormItem = (GridEditFormItem)e.Item;

}

protected void LinksRadGrid_EditCommand(object source, GridCommandEventArgs e) {

if (e.CommandName == RadGrid.EditCommandName

&& e.Item is GridDataItem) {

GridDataItem gridDataItem = (GridDataItem)e.Item;

TextBox urlTxtBox = (TextBox)gridDataItem.FindControl("__urlTextBox");

RadUpload linksFileUpload = (RadUpload)gridDataItem.FindControl("__fileUpload");

if (urlTxtBox != null

&& linksFileUpload.UploadedFiles != null) {

urlTxtBox.Attributes.Add("onchange", "LinksUrlTextBox_OnChange(" + linksFileUpload.ClientID + ")");

linksFileUpload.Attributes.Add("onchange", "LinksFileUpload_OnChange(" + urlTxtBox.ClientID + ")");

}

protected void LinksRadGrid_InsertCommand(object sender, GridCommandEventArgs e) {

if (e.CommandName == RadGrid.PerformInsertCommandName) {

if (e.Item is GridEditFormItem) {

GridEditFormItem gridDataItem = (GridEditFormItem)e.Item;

this.SaveAttachment(gridDataItem, false);

this.__linksRadGrid.Rebind();

}

protected void LinksRadGrid_UpdateCommand(object sender, GridCommandEventArgs e) {

if (e.CommandName == RadGrid.UpdateCommandName) {

if (e.Item is GridEditFormItem) {

GridEditFormItem gridDataItem = (GridEditFormItem)e.Item;

this.SaveAttachment(gridDataItem, true);

this.__linksRadGrid.Rebind();

}

protected void LinksRadGrid_DeleteCommand(object sender, GridCommandEventArgs e) {

GridEditableItem editedItem = e.Item as GridEditableItem;

}

#region Save the Attachment of the document

private void SaveAttachment(GridEditFormItem gridDataItem, bool isAttachmentUpdate) {

int idAttachment = 0;

if (isAttachmentUpdate) {

idAttachment = Convert.ToInt32(gridDataItem.GetDataKeyValue("IdAttachment"));

}

TextBox titleTxtBox = (TextBox)gridDataItem.FindControl("__titleTextBox");

TextBox descriptionTxtBox = (TextBox)gridDataItem.FindControl("__decriptionTextBox");

TextBox urlTxtBox = (TextBox)gridDataItem.FindControl("__urlTextBox");

RadUpload linksFileUpload = (RadUpload)gridDataItem.FindControl("__fileUpload");

string title = string.Empty;

string description = string.Empty;

string url = string.Empty;

if (titleTxtBox != null) title = titleTxtBox.Text;

if (descriptionTxtBox != null) description = descriptionTxtBox.Text;

if (urlTxtBox != null) url = urlTxtBox.Text;

GWAttachment attachment = new GWAttachment();

attachment.Title = title;

attachment.Description = description;

attachment.Url = url;

Stream file = null;

if (linksFileUpload != null && linksFileUpload.UploadedFiles != null

&& urlTxtBox != null && string.IsNullOrEmpty(url)) {

attachment.AttachmentType = 5;

if (linksFileUpload.UploadedFiles != null

&& linksFileUpload.UploadedFiles.Count == 1) {

UploadedFile uploadedFile = linksFileUpload.UploadedFiles[0];

file = uploadedFile.InputStream;

}

//If a file is also defined, we take only the url when it exist too

if (urlTxtBox != null && !string.IsNullOrEmpty(url)) {

if (url.Contains(HttpContext.Current.Request.Url.Host)) {

attachment.AttachmentType = 3;

}

else {

attachment.AttachmentType = 4;

}

#endregion

private string BuildDocumentPopupScript(int documentId) {

string popupScript = string.Empty;

string clientUrl = ResolveClientUrl("~/DetailPopup.aspx");

clientUrl = string.Format("{0}?idDocument={1}", clientUrl, documentId);

popupScript = string.Format("javascript:window.open('{0}','{1}','width=800,height=750,resizable=yes,scrollbars=yes');return false;", clientUrl, 10);

return popupScript;

}

private string WindowsOpenPopup(string url) {

string popupScript = string.Empty;

popupScript = string.Format(@"javascript:window.open('{0}','{1}','width=800,height=750,resizable=yes,scrollbars=yes');return false;", url, url);

return popupScript;

}

private int GetDocumentLinksId(string url) {

int idDocumentLinks = -1;

var uri = new Uri(url);

var query = HttpUtility.ParseQueryString(uri.Query);

return idDocumentLinks;

}

private ImageButton ShowImageError(ImageButton imageBut, string message) {

return imageBut;

}

#endregion

}

Does someone have a solution ??

Thank you for your help

3 Answers, 1 is accepted

answered on 15 May 2012, 04:13 PM

Hi,

I applied the suggestion from the Web page you give me.
That work but with some JavaScript error.

I put a RadAjaxPanel arround my RadGrid to make my RadUpload work.

Based on the previous code, we obtain (we are still in an UpdatePanel) :

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

//On insert and update buttons click temporarily disables ajax to perform upload actions

function conditionalPostback(sender, eventArgs) {

var theRegexp = new RegExp("\.UpdateButton$|\.btnUpdate$|\.PerformInsertButton$", "ig");

if (eventArgs.get_eventTarget().match(theRegexp)) {

var upload = $find(window['UploadId']);

//AJAX is disabled only if file is selected for upload

if (upload.getFileInputs()[0].value != "") {

eventArgs.set_enableAjax(false);

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxPanel id="RadAjaxPanel1" runat="server"

clientevents-onrequeststart="conditionalPostback">

<telerik:RadGrid ID="__linksRadGrid" runat="server"

AllowMultiRowEdit="false"

ShowStatusBar="true"

GridLines="None"

AllowPaging="False"

AllowAutomaticUpdates="false"

AllowAutomaticInserts="false"

OnPreRender="LinksGridView_PreRender"

OnItemCreated="LinksGridView_ItemCreated"

OnNeedDataSource="LinksRadGrid_NeedDataSource"

OnInsertCommand="LinksRadGrid_InsertCommand"

OnUpdateCommand="LinksRadGrid_UpdateCommand"

OnDeleteCommand="LinksRadGrid_DeleteCommand"

OnItemDataBound="LinksRadGrid_ItemDataBound"

OnItemCommand="LinksRadGrid_ItemCommand"

OnEditCommand="LinksRadGrid_EditCommand"

AllowSorting="true"

Skin="Transparent"

Width="450px" >

<MasterTableView AutoGenerateColumns="False"

DataKeyNames="IdAttachment"

CommandItemDisplay="Bottom" >

<PagerStyle Mode="NextPrevAndNumeric" />

......

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

And here is the JavaScript error when we edit a row :
Microsoft JScript runtime error: Sys.InvalidOperationException: A control is already associated with the element.

The JavaScript code breaking (this code is generated by the system) :

Sys.UI.Control = function Sys$UI$Control(element) {

/// <summary locid="M:J#Sys.UI.Control.#ctor" />

/// <param name="element" domElement="true"></param>

var e = Function._validateParams(arguments, [

{name: "element", domElement: true}

]);

if (e) throw e;

if (typeof(element.control) !== 'undefined')

throw Error.invalidOperation(Sys.Res.controlAlreadyDefined);

Sys.UI.Control.initializeBase(this);

this._element = element;

element.control = this;

var role = this.get_role();

if (role) {

element.setAttribute("role", role);

}

Has anyone an idea, how to correct that ?

Thanks in advance