[RESOLVED] Gridview ButtonField with dynamic Image

[a5m0d1]

I have been trying to work this out for ages but nothing seems to work.
I am using a database as my source of data, I then fill a Datatable with the restult and bind it to my gridview cntrl.

Here is my code.

        dbconn = New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=" & (PathVar))
        dbconn.Open()
        da.Fill(ds, "dbs")
        dbconn.Close()
        Maxrows = ds.Tables("dbs").Rows.Count

        Dim dt2 As New DataTable()
        dt2.Columns.Add(New DataColumn("PictureURL", GetType(String)))
        dt2.Columns.Add(New DataColumn("Title", GetType(String)))
        dt2.Columns.Add(New DataColumn("Price", GetType(String)))
        dt2.Columns.Add(New DataColumn("ButtonField", GetType(String)))
        dt2.Columns.Add(New DataColumn("id", GetType(String)))

        Dim dr As DataRow = dt2.NewRow()
        inc = "0"
        Dim ButtonField As New ButtonField()

        For Each dr In ds.Tables("dbs").Rows

            dr = dt2.NewRow()
            dr("PictureURL") = ResolveUrl("~/images/" + ds.Tables("dbs").Rows(inc).Item(4) + "")
            dr("Title") = ds.Tables("dbs").Rows(inc).Item(3).ToString
            dr("Price") = "£" + ds.Tables("dbs").Rows(inc).Item(2).ToString
            dr("ButtonField") = ButtonField.ImageUrl("~/images/click.png") '<- when this works I will replace click.png with a database value
            dr("id") = ds.Tables("dbs").Rows(inc).Item(0)
            dt2.Rows.Add(dr)

            dr = dt2.NewRow()
            inc = inc + 1

        Next

        GridView1.DataSource = dt2
        GridView1.DataBind()

Everything works except the button image. All I need to do is make it so that the ButtonField.imageurl is loaded from my database. I dont want one picture for all I want a specific one.

Thanks in advance for any help you can give me

[gep13]

Hello,

Okay, I am slightly confused by what you are trying to do here?!?

If you already have a DataSet, with a DataTable in it, why are you creating another one? Why not simply reference the existing one directly.

Also, this line:

dr("ButtonField") = ButtonField.ImageUrl("~/images/click.png")

From what you have described, you want to set the value of ButtonField.ImageUrl, but this isn't what the above it doing?!?! Can you explain?

Gary

[avrail]

hay,
really i don't understand what you mean,
really you need to explain more

[a5m0d1]

I realize that I don't need to use a second Data table thinking about it. I had a problem at the start that I couldn't fix but that is no longer an issue

My issue is this:
I want a button with type="image" and this works great
I can the assign an individual image to the grid view by using the command imageURL="~/images/click.png" from my aspx page.

I need to be able to assign the image from my code behind using the stored filename from the database. tbh If I could get it to work from my codebehind with a static image I would be happy.

Cheers for the reply's
Does that help?

[avrail]

hay,
i think this will help you
http://msdn.microsoft.com/en-us/library/aa479350.aspx

http://www.codeproject.com/KB/aspnet/GridImage.aspx

[a5m0d1]

Thank you for your time with this.

The two sites you have linked aren't quite what I am looking for. Well as far as I can tell.

I can as shown on both sites make an ImgaeField and update the picture via my database.

I can also make a set of buttons with an image as the button, but I can't update the ButtonField with a picture from my database, it has to be set manually not programmatically.

bottom line is I need a picture I can click which will then fire of more code
Thanks again

[danasegarane]

I would suggest you to create the gridview the item template column and handle the image setting in the row_databound event.

Link

[gep13]

As I mentioned before, I think you are doing things backward. You are not setting the value of the Buttonfield's ImageUrl, you are try to set the value in the DataTable with the current value of the ButtonField.

Take a step back, and make sure you know exactly what you are trying to do.

Gary

[a5m0d1]

I do know exactly what I want to achieve and I do realize that I may not be going about it the best way which is why I am here, not to mention the fact it doesn't work

Correct me if I am wrong but the link above is showing me exactly what I have done already.

I can make a button with an image.
I can make a picture field with an image from a database.

But I don't care how I do it but I need to be able to click said image and then fire of some code.

Ive added gridview RowDatabound event but I have no idea how to use it to pass the value for each button as it is created.

Sorry to go on folks and I do appreciate the help

[a5m0d1]

I'm getting somewhere with the Rowdatabound event.

 Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then

           
            e.Row.Cells(1).Text = "<i>" 
            

        End If
    End Sub

This makes each one of my descriptions italic
So now if I can I just need to work out how to update the button field with a new ImageUrl property

[gep13]

Hello,

Within the RowDataBound event, you can use the FindControl method to locate the control that you want to update:

http://msdn.microsoft.com/en-us/library/486wc64h.aspx

Once you have a reference to the control, you can set the ImageUrl property.

Gary

[a5m0d1]

I give up for now. I cant work out how I would do this at all.
If anyone could give me more info then id be great-full for ever.

[gep13]

Did you try what I suggested? Did you read the documentation?

I am more than willing to help you, but it would be good to show some willing from your side?

What did you try? Didn't it work? If not, why not? Were there any exceptions? If so, what were they?

Gary

[a5m0d1]

I've been at this for the past 12 hours, so I am putting in the effort, but if I don't know what to do based on your advice (due to my lack of experience) then I need to ask again.

Didn't mean to offend you and thanks for your time.

I will post if I do manage to make something of your link.
If I do manage to get the value out of the gridview I have no idea how I would set it.

[a5m0d1]

It may be me but all I get from that link is this

   Private Sub Button1_Click(sender As Object, MyEventArgs As EventArgs)
   ' Find control on page.
   Dim myControl1 As Control = FindControl("TextBox2")
   If (Not myControl1 Is Nothing)
      ' Get control's parent.
      Dim myControl2 As Control = myControl1.Parent
      Response.Write("Parent of the text box is : " & myControl2.ID)
   Else
      Response.Write("Control not found.....")
   End If
   End Sub

Am I looking at the wrong thing cause I cant even make this work with a textbox never mind a cell within a gridview which happens to be a buttonfeild

[avrail]

hay,

you don't need to do all of this,

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataSourceID="SqlDataSource1" 
        Width="145px">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton3" runat="server" 
                        ImageUrl='<%# Eval("Pic") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

in my database i have a table with a column named Pic
and now i can see this images over my button

[a5m0d1]

Found this which works
http://authors.aspalliance.com/aspxt...dImageUrl.aspx

A link to the source
http://authors.aspalliance.com/aspxt...geUrl.aspx.src

So it has to be in C# lol and I can't get the same result in VB

 if ( e.Row.RowType == DataControlRowType.DataRow ) {
         DataRowView rowView = ( DataRowView ) e.Row.DataItem;
         string productId = rowView [ "productid" ].ToString ( );

         ImageButton imgButton = ( ImageButton ) e.Row.Cells [ 0 ].Controls [ 0 ];
         imgButton.ImageUrl = string.Format ( "~/shared/images/gear/{0}.jpg", productId );
      }

What I have so far

        Dim imgButton As ImageButton = e.Row.Cells(3).Controls(0)
        imgButton.ImageUrl = String.Format("~/images/click.png")

[avrail]

as i told you if you stored the images paths into the database table then you don't have to do all of this,
you just use the part i sent you
and it will do what you are looking for

[a5m0d1]

I posted my reply at the same time you posted yours so I hadn't read ur post at the time. Starting to think I am doing all your heads in now

as i told you if you stored the images paths into the database table then you don't have to do all of this

I have the image path in the database not the image

ResolveUrl("~/images/" + ds.Tables("dbs").Rows(inc).Item(4) + "")

Ill try and work out what you have given me now but I am not sure if it will work without changing everything I have done already. (I am a nube, not trying to wind folks up)

I would be ace if I could do it from the code behind.

[avrail]

actually, the code i post before,
just set your GridView.DataSource to your datatable, and then Bind the Grid, thats all

[a5m0d1]

If you are refering to this
http://www.codeproject.com/KB/aspnet/GridImage.aspx

That works for an imagefield but doesn't work for a Buttonfield. Button fields dont have an option for "DataImageUrlField"

[avrail]

no
i mean TemplateField

<asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton3" runat="server" 
                        ImageUrl='<%# Eval("Pic") %>' />
                </ItemTemplate>
            </asp:TemplateField>

[a5m0d1]

I'm trying that one atm but because I have bound my data from the code behind I can't link it!

Do I have to bind from the aspx page to make this work or am I missing something?

[avrail]

this will do the exactly the same thing you are looking for,
instead of

ImageUrl='<&#37;# Eval("Pic") %>'

use PictureURL

ImageUrl='<%# Eval("PictureURL") %>'

[a5m0d1]

You lost me completely. I thought the "pic" was the name of your image path within your database?

I changed mine to dbimage to reflect my database.
ohhhhh

So is

ImageUrl='<%# Eval("PictureURL") %>'

looking at my code behind for the info and not the database?

please say yes lol

[avrail]

it is the column name from the database

[a5m0d1]

I get an error now.

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. 

Parser Error Message: Databinding expressions are only supported on objects that have a DataBinding event. System.Web.UI.WebControls.ButtonField does not have a DataBinding event.

Source Error: 


Line 68:                             <ItemStyle Font-Size="Large" ForeColor="White" />
Line 69:                         </asp:BoundField>
Line 70:                         <asp:ButtonField CommandName="select" ButtonType="Image" ImageUrl='<%# Eval("PictureURL") %>'>
Line 71:                             <ControlStyle BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" 
Line 72:                                 ForeColor="Yellow" />

Source File: /TotallyUnited/Scarves.aspx    Line: 70

Does it matter that I am linking my gridview to a datatabale? and not my actual database?

[avrail]

hay,
you need to change this lines

<asp:ButtonField CommandName="select" ButtonType="Image" ImageUrl='<&#37;# Eval("PictureURL") %>'>
                             <ControlStyle BorderColor="Red" BorderStyle="Solid" BorderWidth="1px" 
                                 ForeColor="Yellow" />

with

<asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton3" runat="server" 
                        ImageUrl='<%# Eval("PictureURL") %>' OnClick="DoSomething" CommandArgument='<%# Eval("id") %>'/>
                </ItemTemplate>
            </asp:TemplateField>

and in the code behind add this lines

protected void DoSomething(object sender, EventArgs e)
    {

    }

[a5m0d1]

I'm so sorry for making such a hash of this!

It works ofc!!!!
Ty ever so much. I was about to turn to the bottle.

I'm going to upload my page and ill link it so you can see it. may take me a while but ill do it

Thanks again!

Bet your glad this ones over

[avrail]

glad to hear this,
i love to see thread resolved

[gep13]

Hey,

Wow, you go away for a couple of hours, and come back, and everything is fixed. Glad to hear that you got this working!!

Bear in mind that this:

ImageButton imgButton = ( ImageButton ) e.Row.Cells [ 0 ].Controls [ 0 ];

Is an alternative to the FindControl method that I recommended earlier.

Also, using this approach:

ImageUrl='<&#37;# Eval("PictureURL") %>'

Is not something that I would recommend. Instead, I would recommend that you continue to use the RowDataBound method, find the ImageButton control, and then set the ImageUrl property.

Gary

[a5m0d1]

Id love to work out how I can find the control and then set its value. Much appreciation to Avrail for getting me past this but if I can do this via the method you mention then id like to know how.

The MSDN website you linked isnt clear and I did google search "FindControl method" and so on.

If you can point me in the direction of an example then I may understand better how to do it.

[gep13]

Have a look here:

http://msdn.microsoft.com/en-us/library/aa479353.aspx

Gary

[avrail]

Also, using this approach:

ImageUrl='<%# Eval("PictureURL") %>'

Is not something that I would recommend. Instead, I would recommend that you continue to use the RowDataBound method, find the ImageButton control, and then set the ImageUrl property.

Gary

hay Gary,
why?

[gep13]

Lots of reasons, but mainly due to the fact that putting server side script tags inline means that you are doing work in essentially the wrong place. I would suggest that you have a look here:

http://www.codeguru.com/csharp/.net/...cle.php/c14739

Specifically page 4.

Gary

[a5m0d1]

 ImageUrl='<%# Eval("PictureURL") %>' OnClick="DoSomething" CommandArgument='<%# Eval("id") %>

Okay Avrail, one more question
When you click the button how can I pass the ID to my codebehind (or even the image url)
I need to make the image that is clicked bigger so I need to reference which button is click?

Gary mate thanks for your help as well. I am still reading how I can use the code behind to assign the ImageUrl and if I do work it out then I will surely use it.

[gep13]

Hey,

You are already passing the id back to the code behind. By setting the CommandArgument, you can read this back in the corresponding RowCommand event for the GridView. You might also want to think about setting the CommandName property, such that you can distinguish which button was pushed.

Gary

[a5m0d1]

I was using this to know what button was clicked

Dim gridinc As Integer = GridView1.SelectedRow.DataItemIndex

How can I use the ID. I know I am passing it back I just cant work out what to put to access it

Ive tried all sorts.

I want I presume

Dim gridinc As Integer = 'ID passed back from ASPX page

But for the life of me I have no idea what to put. this is so new to me

[a5m0d1]

Please tell me you guys make more mny than me knowing all this stuff!

I have been a field engineer for 15 years setting up networks, servers and such. No mny in it at all for me so I am trying to increase my skills with programming talents!

[gep13]

Have a look here:

http://msdn.microsoft.com/en-us/libr...owcommand.aspx

Gary