12 Sep 2010 - Digital Strategy // By Productive Edge Team

Creating a Telerik RadUpload User Control For Use in a RadGrid

I have been working with Telerik controls for a little over two months (the ASP.NET AJAX suite) and have been continuously impressed with the quality and power they provide.  I am working on a project that requires the upload of several different file types which need to be displayed in a grid once uploaded.  The cleanest solution I could think of was to create a User Control to handle the uploads and embed it within the grid through the EditFormSettings FormTemplate.  So first, I created a simple upload User Control as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UploadControl.ascx.cs"
Inherits="WebApplication1.UserControls.UploadControl" %>

Submit

with the code behind set up to store the uploaded files in the database using LINQ:

 protected void btnSubmit_Click(object sender, EventArgs e)
{
LinerModelDataContext dataContext = new LinerModelDataContext();
foreach (UploadedFile file in RadUpload1.UploadedFiles)
{
byte[] bytes = new byte[file.ContentLength];
file.InputStream.Read(bytes, 0, file.ContentLength);
Attachment attachment = new Attachment();
attachment.FileName = file.GetName();
attachment.BinaryAttachment = bytes;
attachment.CustomerID = this.CustomerID;
dataContext.Attachments.InsertOnSubmit(attachment);
}
dataContext.SubmitChanges();
}

I then just added the EditFormSettings section to RadGrid1 and I was able to upload files:

 

But my grid wasn't refreshing and I wasn't getting any notification that the upload was complete. So, to provide the user experience I wanted, I exposed an event to the grid from the upload control by modifying the code behind of the UserControl. I added a delegate, and exposed the event as follows:

 public delegate void UploadHandler();

public partial class UploadControl : System.Web.UI.UserControl
{
...
public event UploadHandler Upload;

protected void btnSubmit_Click(object sender, EventArgs e)
{
LinerModelDataContext dataContext = new LinerModelDataContext();
foreach (UploadedFile file in RadUpload1.UploadedFiles)
{
byte[] bytes = new byte[file.ContentLength];
file.InputStream.Read(bytes, 0, file.ContentLength);
Attachment attachment = new Attachment();
attachment.FileName = file.GetName();
attachment.Attachment1 = bytes;
attachment.CustomerID = this.CustomerID;
dataContext.Attachments.InsertOnSubmit(attachment);
}
dataContext.SubmitChanges(ConflictMode.ContinueOnConflict);
if (Upload != null)
{
Upload.Invoke();
}
}

and changing the FormTemplate to be:

 

(please note that the syntax highlighter I am using mangled the code by changing OnUpload to be onupload in the above source) and adding the handler to the main page:

 protected void UploadControl1_Upload()
{
RadGrid1.MasterTableView.IsItemInserted = false;
RadGrid1.Rebind();
}
Share
Creating a Telerik RadUpload User Control For Use in a RadGrid