RadUpload in AJAX enabled RadGrid

Thread is closed for posting
3 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 posts
    Member since:
    Oct 2004

    Posted 23 Oct 2007 Link to this post


    Article relates to

    .NET version

    2.0, 3.5 and later
    Visual Studio version

    2005, 2008 and later
    programming language

    C#, VB
    browser support

    all browsers supported by RadControls

    The attached project demonstrates how to integrate RadUpload in RadGrid to upload images and edit the image information. RadGrid is set to work in AJAX mode by setting its EnableAJAX property to True. However, since RadUpload can upload files only on full postback, when a new file needs to be uploaded(clicking Insert or Update button in a row's edit template) the AJAX is being temporally disabled. This is achieved by handling RadGrid's client event OnRequestStart and setting grid's EnableAJAX to false:

    //on insert and update buttons click temporarily disables ajax to perform upload actions 
                function conditionalPostback(e, sender) 
                    var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig"); 
                    if (sender.EventTarget.match(theRegexp)) 
                        var upload = window['UploadId']; 
                        //AJAX is disabled only if file is selected for upload 
                        if(upload.GetFileInputs()[0].value != "") 
                            sender.EnableAjax = false

    This method also checks whether a file has been selected for upload and if not AJAX is not being disabled.

    Image and thumbnail files are saved in a folder, information about them including the folder path is saved in a database with server-side code. RadComboBox with template rows is used to edit the author name information.


    Since RadUpload cannot upload files using AJAX calls (this is a limitation of the XmlHttpRequest component, used in all AJAX frameworks for asynchronous calls to the application), in order to upload a file you should perform a full page postback.
    If you have button or other control, which normally does postbacks, placed in a RadGrid which is inside a RadAjaxPanel or the RadGrid is ajaxified by RadAjaxManager, you need to attach an event handler on the OnRequestStart client-side event of the RadAjaxPanel or RadAjaxManager, which will disable the AJAX functionality by e.set_enableAjax(false) function. You can also perform validation over the file input as shown in the code library demo code:

    var uploadId;
    function conditionalPostback(sender, e)
       var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
       if (e.EventTarget.match(theRegexp))
           var upload = $find(uploadId);
           //AJAX is disabled only if file is selected for upload
           if (upload.getFileInputs()[0].value != "")
  2. BC19154A-DA20-4A3F-A34D-060F5E8CB3DF
    BC19154A-DA20-4A3F-A34D-060F5E8CB3DF avatar
    18 posts
    Member since:
    Nov 2010

    Posted 10 Nov 2012 Link to this post

    Why is it not working for me.

  3. 8300C70A-CB4B-404C-ABEA-2A727C2CDF57
    8300C70A-CB4B-404C-ABEA-2A727C2CDF57 avatar
    1566 posts
    Member since:
    Apr 2022

    Posted 14 Nov 2012 Link to this post

    Hello Aamir,

    To achieve the desired functionality you could try handling the InsertCommand of the RadGrid and extract the uploaded file from the RadUpload control. The same approach is used into the code library and the following example:
    Also in your case you could pass the value to the "url" insert parameter of the SqlDataSource into the InsertCommand. More information about passing parameters to the SqlDataSource you could find here:

    I hope this helps.

    Kind regards,
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.