How to bind to Image Field in table

5 posts, 0 answers
  1. James
    James avatar
    60 posts
    Member since:
    Sep 2007

    Posted 19 Jan 2009 Link to this post


    This is probably a simple one, but when I use the auto generate to retrieve records from a table, I get all my fields, including an image displayed for an image field when I click the "test query" button.

    When I look at the grid however, the image field is missing. How can I add a column to bind to and display the image field from the SQL table?

    thx in advance
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Jan 2009 Link to this post

    Hi Bobby,

    Hope you have set AutoGenerateColumns property to true. This property will create Columns automatically at runtime. To bind the image field you may consider adding one GridButtonColumn/GridTemplateColumn manually to the Grid's column collection.
    Column types


  3. James
    James avatar
    60 posts
    Member since:
    Sep 2007

    Posted 20 Jan 2009 Link to this post

    Hi Shinu,

    thanks for the reply. I'm still a bit stumped unfortunately. The auto generate columns at runtime is enabled.

    The gridbuttoncolumn only seems to allow simple datatypes (e.g. byte, int, string)

    I can see how to use a template to put an image in a template column, but how would I bind it to a field in the SQL table as it usually expects an image file on disk

    Thanks in advance
  4. Ron
    Ron  avatar
    16 posts
    Member since:
    Aug 2008

    Posted 17 Mar 2009 Link to this post


    Did you get an solution for your Question already. I need similair functionality in my app.
    I have images stored in an Oracle DB that I need to collect in a Date Table first  and bind afterwards to a Grid.

    Any help on this would be highly appriciated.

  5. BobbyOwens
    BobbyOwens avatar
    6 posts
    Member since:
    Jul 2007

    Posted 17 Mar 2009 Link to this post

    Hi Ron,

    I ended up having to do it semi manually. I've created a template column using the following code:

                    <telerik:GridTemplateColumn HeaderText="Image" UniqueName="Image"  HeaderStyle-Width="100px">
                        <asp:ImageButton ID="imgPhoto" runat="server" Width="100px" />                   
                        <asp:FileUpload ID="FileUpload1" runat="server" />

    Then I have code in the DataBinding event to read the image from the database, write it to disk and then allow it to be displayed in the grid:

    Public Sub mimbImage_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
                Dim imbImage As System.Web.UI.WebControls.ImageButton = DirectCast(sender, System.Web.UI.WebControls.ImageButton)
                Dim container As GridDataItem = DirectCast(imbImage.NamingContainer, GridDataItem)
                Dim drvDataRowView As DataRowView = DirectCast(container.DataItem, DataRowView)

                Dim RecordID As String = drvDataRowView("ID").ToString()
                Dim strImage As String = mstrTableName & "_" & RecordID & "_" & Now.ToString("yyyyMMDDHHmmss") & ".jpg"
                Dim strImagePath As String = "~/Pictures/" & strImage
                Dim connection As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("TitanicConnectionString").ConnectionString)


                    Dim command As SqlCommand = New SqlCommand("SELECT Picture FROM " & mstrTableName & " WHERE (" & mstrTableName & "ID=" + RecordID + ")", connection)
                    Dim fltImage As System.IO.FileStream = Nothing
                    Dim bytImage As Byte() = Nothing
                    Dim objResult As Object = command.ExecuteScalar

                            'Execute the stores proc
                            objResult = command.ExecuteScalar

                            'No Image?
                            If Not objResult Is System.DBNull.Value Then

                                'There is an image, to covert it to a byte array
                                bytImage = CType(objResult, Byte())
                            End If
                        Catch ex As Exception

                        End Try

                        'DO we have an object?
                        If Not bytImage Is Nothing Then

                            'Open a file and write out the image
                            Dim dirInfo As New System.IO.DirectoryInfo(msutServer.MapPath("~/Pictures/"))

                            'Does the file alread exist?
                            For Each finFile As System.IO.FileInfo In dirInfo.GetFiles(mstrTableName & "_" & RecordID & "_*.*")

                                'Delete it

                            'Create e new image
                            fltImage = New System.IO.FileStream(msutServer.MapPath(strImagePath), FileMode.CreateNew)

                            'Write the image to disk
                            fltImage.Write(bytImage, 0, bytImage.Length)
                            fltImage = Nothing

                            'Set the image url
                            imbImage.ImageUrl = strImagePath
                            imbImage.PostBackUrl = "~/ShowImage.aspx?Image=~/Pictures/~/Pictures/" & strImage

                            imbImage.Visible = False
                        End If

                    Catch ex As Exception
                        Throw ex

                        If Not fltImage Is Nothing Then
                            fltImage = Nothing
                        End If
                        bytImage = Nothing
                    End Try

                End Try
            Catch ex As Exception
            End Try

        End Sub

    Becuase I have grids on multiple pages, I've made this quite generic so that the table names/ID Fields are done automatically, and this is actually in a shared module. You can probably ignore the "FileUpload1", as I use it to be able to write to the database. If you want to see how it looks, you can go to

    Hope this helps, but let me know if you need any more info.



Back to Top