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

[Solved] RadGrid - Fileupload in using Popup

3 Answers 258 Views

Grid

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

Prasad asked on 21 Apr 2009, 08:25 AM

Hi,

I have attached the sample application which display icons from the database on RadGrid

I have attached the sample web pages to simulate the functionality.

Approach 1
--------------

I use the asp:FileUpload placed in the <EditItemTemplate>
This approach works fine, i.e. when I upload the new Image the grid is displays the new image

Approach 2
--------------
I have the asp:ImageButton placed in telerik:GridTemplateColumn when the button is clicked it opens a popup, you can then select the file you wish to upload. I close the popup and refresh the grid, but it does not show the new uploaded image.

When I refresh the page, I can see the new uploaded Icon in the Grid.

Can you look in the code and find out why the RadGrid would not show the proper icon image, when I upload the new image via the popup functionaliy?

Sample Code
------------------

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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">

<title>Untitled Page</title>

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

function refreshGrid(arg)

{

var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

if(arg== 'false')

{

ajaxManager.ajaxRequest("RebindAndNavigate");

}

else

{

ajaxManager.ajaxRequest("Rebind");

}

function openUpdateIconWindow(rowId)

{

oWnd= radopen('<%=Page.ResolveUrl(@"~/UploadTest/UploadIcon.aspx?ParentUrl=RadWindow&UploadIconTo=AuditRatingConfig")%>&IconID=' + rowId ,"AttachWindow");

oWnd.SetSize(350,307);

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<div>

<asp:ScriptManager runat="server" ID="scriptManager1"> </asp:ScriptManager>

 <telerik:RadGrid DataSourceID="SqlDataSource1" ID="RadGrid1" runat="server" OnItemDataBound="RadGrid1_ItemDataBound" OnItemCommand="RadGrid1_ItemCommand">

<telerik:GridEditCommandColumn>

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn

ReadOnly="true"

DataField="ConfigId"

HeaderText="ConfigId"

UniqueName="ConfigId">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn

HeaderText="Image"

UniqueName="Image">

<asp:Image ID="Image1" runat="server" />

</ItemTemplate>

<asp:FileUpload ID="FileUpload1" runat="server" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="UploadIcon" CurrentFilterFunction="NoFilter"

FilterListOptions="VaryByDataType" ForceExtractValue="None">

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

ImageUrl="~/images/btn_attach.gif" ToolTip="Upload Icon"

CommandArgument='<%# Eval("ConfigId") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource

ID="SqlDataSource1"

runat="server"

ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

SelectCommand="SELECT [ConfigId], [Icon] FROM [TBL_AuditRatingConfig]">

</asp:SqlDataSource>

</div>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_OnAjaxRequest">

<telerik:AjaxSetting AjaxControlID="gridScoring">

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25">

<asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadWindowManager ID="windowManager" runat="server" Skin="Vista"

Behaviors="Close, Move" Height = "700px" Width="900px" >

<telerik:RadWindow ID="RadWindow1"

Skin="Vista"

VisibleOnPageLoad = "false"

Height="517px" Width="650px" VisibleStatusBar="false"

Title="Emex"

runat="server"></telerik:RadWindow>

</Windows>

{1}

</div>

<div>

<a onclick="$find('{0}').callBack('false');"

class="radwindowbutton" href="javascript:void(0);"><span class="outerspan"><span

class="innerspan">No</span></span></a>

</div>

</ConfirmTemplate>

</telerik:RadWindowManager>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using Telerik.Web.UI;

using System.IO;

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

{

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridDataItem gridDataItem = (GridDataItem)e.Item;

System.Web.UI.WebControls.Image image =

(System.Web.UI.WebControls.Image)gridDataItem["Image"].FindControl("Image1");

image.ImageUrl = "Image.aspx?EmployeeID=" + gridDataItem["ConfigId"].Text;

ImageButton imgUploadIcon = (ImageButton)gridDataItem["UploadIcon"].FindControl("imgUploadIcon");

imgUploadIcon.OnClientClick = "openUpdateIconWindow('" + imgUploadIcon.CommandArgument + "'); return false;";

}

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)

{

SqlConnection connection = new

SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);

SqlCommand cmd = new SqlCommand();

if (e.CommandName == "Update")

{

String employeeID =

RadGrid1.MasterTableView.DataKeyValues[e.Item.ItemIndex]["ConfigId"].ToString();

cmd.CommandText =

String.Format("UPDATE TBL_AuditRatingConfig SET Icon=@Photo WHERE ConfigId='{0}'", employeeID);

}

else if (e.CommandName == "PerformInsert")

{

cmd.CommandText =

"INSERT INTO [Employees] ([LastName], [FirstName], [Title], [HireDate], [Address], [Photo]) VALUES (@LastName, @FirstName, @Title, @HireDate, @Address, @Photo)";

cmd.Parameters.AddWithValue("@LastName", "tLN");

cmd.Parameters.AddWithValue("@FirstName", "tFN");

cmd.Parameters.AddWithValue("@Title", "tT");

cmd.Parameters.AddWithValue("@HireDate", DateTime.Now);

cmd.Parameters.AddWithValue("@Address", "tA");

}

else

{

return;

}

cmd.Connection = connection;

GridEditFormItem gridEditFormItem = (GridEditFormItem)e.Item;

FileUpload FileUpload1 = (FileUpload)gridEditFormItem["Image"].FindControl("FileUpload1");

if (FileUpload1.HasFile)

{

int _imageSize;

string _imageType;

int len = FileUpload1.PostedFile.ContentLength;

byte[] pic = new byte[len + 78];

FileUpload1.PostedFile.InputStream.Read(pic, 78, len);

try

{

connection.Open();

cmd.Parameters.AddWithValue("@Photo", pic);

cmd.ExecuteNonQuery();

}

finally

{

connection.Close();

}

else

{

e.Canceled = true;

}

protected void RadAjaxManager1_OnAjaxRequest(object sender, AjaxRequestEventArgs e)

{

if (e.Argument == "Rebind" || e.Argument == "RebindAndNavigate")

{

RadGrid1.Rebind();

}

Image.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Image.aspx.cs" Inherits="Image" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Image.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

using System.Data.SqlClient;

using System.Drawing;

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (this.Page.Request.QueryString["EmployeeID"] != null)

{

String employeeID = (String)this.Page.Request.QueryString["EmployeeID"];

MemoryStream stream = new MemoryStream();

SqlConnection connection = new

SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);

try

{

connection.Open();

SqlCommand command = new

SqlCommand("SELECT Icon FROM TBL_AuditRatingConfig WHERE (ConfigId='" + employeeID + "')", connection);

byte[] img = (byte[])command.ExecuteScalar();

MemoryStream ms = new MemoryStream();

int offset = 78;

ms.Write(img, offset, img.Length - offset);

Bitmap bmp = new Bitmap(ms);

Response.ContentType = "image/gif";

bmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);

ms.Close();

}

finally

{

connection.Close();

stream.Close();

}

UploadIcon.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UploadIcon.aspx.cs" Inherits="UploadTest_UploadIcon" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<title>Untitled Page</title>

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

function CloseAndRebind(args)

{

GetRadWindow().Close();

GetRadWindow().BrowserWindow.refreshGrid(args);

}

function GetRadWindow()

{

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;//IE (and Moz as well)

return oWindow;

}

function CancelUpload()

{

GetRadWindow().Close();

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<div>

<asp:Label Font-Size="8" runat="server" ID="fileLabel" Text="Icon : "></asp:Label>

</div>

<asp:FileUpload runat="server" ID="iconUpload" /> 

<br />

</div>

<asp:LinkButton ID="buttonCancel" CssClass="form_btn_sml btn_cancel" CommandName="Close" Text="<span><b>close</b></span>" runat="server" OnClick="buttonCancel_Click" />

<asp:LinkButton ID="buttonSave" CssClass="form_btn_sml btn_add" CommandName="Upload" Text="<span><b>upload</b></span>" runat="server" OnClick="buttonSave_Click" />

</div>

</form>

</body>

</html>

UploadIcon.aspx.cs

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

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

{

Guid? _iconId = null;

public Guid? IconID

{

get

{

if (Request.QueryString["IconID"] != null)

{

return new Guid(Request.QueryString["IconID"].ToString());

}

return null;

}

set

{

_iconId = value;

}

protected void Page_Load(object sender, EventArgs e)

{

}

protected void buttonCancel_Click(object sender, EventArgs e)

{

Page.ClientScript.RegisterStartupScript

(Page.GetType(), "mykeyCancelUpload", "CancelUpload();", true);

}

protected void buttonSave_Click(object sender, EventArgs e)

{

SqlConnection connection = new

SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString);

SqlCommand cmd = new SqlCommand();

cmd.Connection = connection;

cmd.CommandText =

String.Format("UPDATE TBL_AuditRatingConfig SET Icon=@Photo WHERE ConfigId='{0}'", IconID);

if (iconUpload.HasFile)

{

int _imageSize;

string _imageType;

int len = iconUpload.PostedFile.ContentLength;

byte[] pic = new byte[len + 78];

iconUpload.PostedFile.InputStream.Read(pic, 78, len);

try

{

connection.Open();

cmd.Parameters.AddWithValue("@Photo", pic);

cmd.ExecuteNonQuery();

}

finally

{

connection.Close();

Page.ClientScript.RegisterStartupScript

(Page.GetType(), "mykeyCloseAndRebind", "CloseAndRebind();", true);

}

3 Answers, 1 is accepted

answered on 24 Apr 2009, 07:24 AM

Hi Prasad,

You should set RadAjaxManager to update the RadGrid control. Similar to the following:

    
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">  
        
               <UpdatedControls> 
        
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                </UpdatedControls> 
        
            </telerik:AjaxSetting>

Regards,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.