GridView for Web Forms - How to upload files in Edit mode and see them on a click in Browse mode

This example demonstrates how to upload image files from the Grid View edit form and display the uploaded images.

Implementation Details

The Grid View in this example contains an unbound column populated with ASPxHyperLink controls. When a data row has no image, the link has no target and displays the "No data uploaded" text.

 <dx:GridViewDataTextColumn FieldName="Url" UnboundType="Object" VisibleIndex="6">
  <DataItemTemplate>
    <dx:ASPxHyperLink ID="ASPxHyperLink" OnLoad="ASPxHyperLink_Load" runat="server" Target="_blank" Text="No data uploaded">
    </dx:ASPxHyperLink>
  </DataItemTemplate>
  <%--...--%>
</dx:GridViewDataTextColumn>

The link column's EditItemTemplate contains an ASPxUploadControl, which allows users to upload files in edit mode.

 <dx:GridViewDataTextColumn FieldName="Url" UnboundType="Object" VisibleIndex="6">
  <%--...--%>
  <EditItemTemplate>
    <dx:ASPxUploadControl ID="ASPxUploadControl1" ShowProgressPanel="true" UploadMode="Auto" AutoStartUpload="true" FileUploadMode="OnPageLoad"
        OnFileUploadComplete="ASPxUploadControl1_FileUploadComplete" runat="server">
        <ValidationSettings MaxFileSize="4194304" MaxFileSizeErrorText="Size of the uploaded file exceeds maximum file size" AllowedFileExtensions=".jpg,.jpeg">
        </ValidationSettings>
        <ClientSideEvents FileUploadComplete="OnFileUploadComplete" />
    </dx:ASPxUploadControl>
    <%--...--%>
</EditItemTemplate>
</dx:GridViewDataTextColumn>

Files to Look At

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• ASPxGridView
• Unbound Columns

More Examples

• GridView for Web Forms - How to upload files in Edit mode and save them in a binary column