Sample Code: upload CSV & load into Grid

3 posts, 1 answers
  1. Scott
    Scott avatar
    35 posts
    Member since:
    Sep 2012

    Posted 05 Apr 2013 Link to this post

    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.
  2. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 10 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Scott
    Scott avatar
    35 posts
    Member since:
    Sep 2012

    Posted 14 Apr 2013 Link to this post

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