Issue with FileUpload in RadGrid Popup

[Firoz Ansari]

Hi,
I am facing issue to get uploaded file from FileUpload control embeded in a popup dialog box. This popup is rendered using EditFormSettings
for RadGrid.

My RadGrid look like this:

DocumentList.aspx

<telerik:RadGrid ID="RadGridDocuments" runat="server" Visible="true"
        Skin="Simple" EnableEmbeddedSkins="false" CssClass="CustomGrid"
        OnInsertCommand="RadGridDocuments_InsertCommand">
    <MasterTableView CommandItemDisplay="Top" DataKeyNames="DocumentId" EditMode="PopUp">
        <CommandItemTemplate>
            <table class="rgCommandTable" style="width: 100%;" cellpadding="0" cellspacing="0" border="0" id="customGridHeader">
            <tr>
                <td align="right" class="block-title">
                    <asp:Button runat="server" ID="buttonAddNewRecord" CommandName="InitInsert" CssClass="rgAdd" Text=" " Visible="true" />
                    <asp:LinkButton runat="server" ID="linkbuttionInitInsert" CommandName="InitInsert" CommandArgument="TestPlan" Text="Upload Document" Visible="true"></asp:LinkButton>
                </td>
            </tr>
            </table>
        </CommandItemTemplate>
        <Columns>
            <telerik:GridBoundColumn UniqueName="DocumentName" HeaderText="Document Name" DataField="DocumentName" ItemStyle-Width="350px"></telerik:GridBoundColumn>
            <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" Text="Delete" ConfirmDialogType="Classic" ConfirmText="Are you sure you want to delete this document?" ItemStyle-Width="10px" ItemStyle-CssClass="rgAction"></telerik:GridButtonColumn>
        </Columns>
        <EditFormSettings InsertCaption="Upload Document" EditFormType="WebUserControl" PopUpSettings-Modal="true" UserControlName = "~/UserControls/UploadDocument.ascx">
            <FormTemplate>
            </FormTemplate>
        </EditFormSettings>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnPopUpShowing="PopUpShowing" />
    </ClientSettings>
</telerik:RadGrid>

UploadDocument.ascx

<asp:FileUpload runat="server" ID="fileUploadDocument" Width="220px" />
<asp:Button ID="buttonUpload" Text="Upload" runat="server"
    CausesValidation="true" CommandName="Upload" Width="80px"
    onclick="buttonUpload_Click"></asp:Button>

When I hit Upload button, page is properly postback but I unable to get uploaded file in buttonUpload_Click event of the button. fileUploadDocument.PostedFile property is showing null in this event.

Please advice.

Thanks very much in advance for your help.

[Firoz Ansari]

Please also note that enctype="multipart/form-data" is set in form.

[Princy]

Hello Firoz,

I have tried the same code and it is working for me. The following is the code that I tried to get PostedFile.

ascx:

protected void buttonUpload_Click(object sender, EventArgs e)
   {
       FileUpload fileUpload = (FileUpload)this.FindControl("fileUploadDocument");
       string fileName = fileUpload.FileName;
       HttpPostedFile file= (HttpPostedFile)fileUpload.PostedFile;
     }

Thanks,
Princy.

[Firoz Ansari]

Thanks Princy. I got the actual culprit.

It was RadAjaxManager which causing this issue. I removed AjaxSetting for RadGridDocuments in RadAjaxManager and I can get uploaded file in that user control. Now this lead to another issue. Whole page is now get postback when I open that popup or upload any file in the user control. This is completely different issue. Any advice on this? Thank you once again for your help.

<telerik:RadAjaxManager runat="server" ID="radAjaxManager">
    <ClientEvents OnRequestStart="requestStart"></ClientEvents>
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGridDocuments">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGridDocuments" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

[Princy]

Hello Firoz,

I am not quite sure about the issue. Please take a look at the following forum, which discusses the issue with FileUpload control and RadAjax.
RadAjaxManager + GridView + FileUpload
Can you please paste your code if it does'nt help?

Thanks,
Princy.

[Firoz Ansari]

Here is the required code which explain the issue.

Document.cs

public class Document
{
    public Document(string documentName)
    {
        DocumentName = documentName;
    }
    public string DocumentName { get; set; }
}

Default.aspx

    <form id="form1" runat="server" enctype="multipart/form-data">

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="Disabled">

        </telerik:RadScriptManager>

         

        <telerik:RadAjaxManager runat="server" ID="radAjaxManager">

            <ClientEvents></ClientEvents>

            <AjaxSettings>

<%--                <telerik:AjaxSetting AjaxControlID="RadGridDocuments">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="RadGridDocuments" LoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelRenderMode="Block"  />

                    </UpdatedControls>

                </telerik:AjaxSetting>--%>

            </AjaxSettings>

        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 

                IsSticky="True" ZIndex="1000" Width="50" Height="50" Skin="Default">

        </telerik:RadAjaxLoadingPanel>

                             

        <div>

            <telerik:RadGrid ID="RadGridDocuments" runat="server" Visible="true"

                    Skin="Simple"

                    OnNeedDataSource="RadGridDocuments_NeedDataSource">

                <MasterTableView CommandItemDisplay="Top" DataKeyNames="DocumentName" EditMode="PopUp">

                    <CommandItemTemplate>

                        <asp:LinkButton runat="server" ID="linkbuttionInitInsert" CommandName="InitInsert" CommandArgument="TestPlan" Text="Upload Document" Visible="true"></asp:LinkButton>

                    </CommandItemTemplate>

                    <Columns>

                        <telerik:GridBoundColumn UniqueName="DocumentName" HeaderText="Document Name" DataField="DocumentName" ItemStyle-Width="350px"></telerik:GridBoundColumn>

                        <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" Text="Delete" ConfirmDialogType="Classic" ConfirmText="Are you sure you want to delete this document?" ItemStyle-Width="10px" ItemStyle-CssClass="rgAction"></telerik:GridButtonColumn>

                    </Columns>

                    <EditFormSettings InsertCaption="Upload Document" EditFormType="WebUserControl" PopUpSettings-Modal="true" UserControlName = "~/UserControls/UploadDocument.ascx">

                        <FormTemplate>

                        </FormTemplate>

                    </EditFormSettings>                  

                </MasterTableView>

                <ClientSettings>

                    <ClientEvents />

                </ClientSettings>              

            </telerik:RadGrid>   

        </div>

    </form>


Default.aspx.cs

protected void RadGridDocuments_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    List<Document> documents = new List<Document>();
    documents.Add(new Document("Document 1"));
    documents.Add(new Document("Document 2"));
    documents.Add(new Document("Document 3"));
    documents.Add(new Document("Document 4"));
    documents.Add(new Document("Document 5"));
    RadGridDocuments.DataSource = documents;
}

UploadDocument.ascx

<asp:FileUpload runat="server" ID="fileUploadDocument" Width="220px" />
<asp:Button ID="buttonUpload" Text="Upload" runat="server"
    CausesValidation="true" CommandName="Upload" Width="80px"
    OnClick="buttonUpload_Click"></asp:Button>
<asp:Button ID="buttonCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" Width="80px"></asp:Button>

UploadDocument.ascx.cs

protected void buttonUpload_Click(object sender, EventArgs e)
{
    FileUpload fileUpload = (FileUpload)this.FindControl("fileUploadDocument");
    string fileName = fileUpload.FileName;
    HttpPostedFile file = (HttpPostedFile)fileUpload.PostedFile;
}

I have commented out the AjaxSetting in Default.aspx page and file upload feature is now working pefectly. But I loose the ajaxy thing with RadGridDocuments and whole page is postback if I click on "Upload Document" button.

After uncommenting the AjaxSetting section I do get ajax refresh RadGridDocuments grid with but now I unable to get upload file in UploadDocument.ascx.cs.

Thank you once again for your help.

[Princy]

Hello Firoz,

Please take a look at the AJAX And File Upload help topic explaining how the desired functionality can be achieved.

I hope this helps.
Princy.

[John]

 

 

 

https://www.telerik.com/forums/problem-with-asp-fileupload-control-in-radgrid-edititemtemplate

i tried <asp:radupload and ... :)

Hello Praveen,

Check out the following example to access a RadUpload control in the ItemTemplate of a TemplateColumn.
aspx:
<telerik:GridTemplateColumn UniqueName="TemplateColumn">                       
             <ItemTemplate>    
                   ... 
              </ItemTemplate> 
              <EditItemTemplate>                          
                   <telerik:RadUpload ID="RadUpload1" runat="server"></telerik:RadUpload> 
              </EditItemTemplate> 
</telerik:GridTemplateColumn> 
c#:
 protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) 
    { 
      if (e.Item is GridEditableItem && e.Item.IsInEditMode) 
        { 
            GridEditableItem editItem = (GridEditableItem)e.Item; 
            RadUpload upload = (RadUpload)editItem.FindControl("RadUpload1");          
        }  
    } 
Thanks
Princy.