Sample Code: upload CSV & load into Grid

[Scott]

I'm new to using the RadAsyncUploader & I'm hoping there's some sample code to help jumpstart my work.  I need to upload a CSV & place it in a RadGrid. If possible, I'd like to use my own Icon (called Up.png) for the Select button, and not show the input Text box, and not show the Remove option, since it should place the file contents straight into the grid & then delete the file.  I didn't see anything in the Code Library showing how to upload a CSV & place it in a grid, but it seems like someone must have done this before me.  Any guidance is appreciated.

[Hristo Valyavicharski]

Hi Scott,

Yes, it is possible. First add RadAsyncUpload on the page:

<telerik:RadAsyncUpload
    ID="RadAsyncUploadCSV"
    runat="server"
    HideFileInput="true"
    MultipleFileSelection="Disabled"
    OnClientValidationFailed="OnClientValidationFailed"
    OnClientFilesUploaded="OnClientFilesUploaded"
    OnFileUploaded="RadAsyncUploadCSV_FileUploaded"
    AllowedFileExtensions="csv">
</telerik:RadAsyncUpload>

As we do not set Target folder, the files will be uploaded only into the Temporary folder and will be deleted automatically after 4 hours. We handle OnFileUploaded server event, where we read and display the content of uploaded csv file into RadGrid:

protected void RadAsyncUploadCSV_FileUploaded(object sender, FileUploadedEventArgs e)
{
    //Read uploaded file and write it to DataTable
    StreamReader sr = new StreamReader(e.File.InputStream);
    string line = sr.ReadLine();
    string[] value = line.Split(',');
    DataTable dt = new DataTable();
    DataRow row;
    foreach (string dc in value)
    {
        dt.Columns.Add(new DataColumn(dc));
    }

    while (!sr.EndOfStream)
    {
        value = sr.ReadLine().Split(',');
        if (value.Length == dt.Columns.Count)
        {
            row = dt.NewRow();
            row.ItemArray = value;
            dt.Rows.Add(row);
        }
    }
    sr.Close();

    RadGrid RadGridCSV = new RadGrid();
    RadGridCSV.Width = 600;
    this.form1.Controls.Add(RadGridCSV);
    RadGridCSV.DataSource = dt;
    RadGridCSV.DataBind();
}

Finally to change the image of the select button you will have to modify the existing Sprites and apply the new image with the following css:

<style type="text/css">
    #RadAsyncUploadCSV.RadUpload_Default .ruButton {
        background-image: url("Images/Sprite.png");
    }

    div.RadUpload .ruBrowse {
        background-position: 0 0px;
        /*width: 135px;*/
    }

    div.RadUpload_Default .ruFileWrap .ruButtonHover {
        background-position: 100% 0px !important;
    }
</style>

Please find the completed sample attached.

Regards,
Hristo Valyavicharski
the Telerik team

[Scott]

Thank you Hristo for providing this sample code: I appreciate it!