How do I add an ImageButton to a column?

6 posts, 1 answers
  1. Todd Davis
    Todd Davis avatar
    36 posts
    Member since:
    Aug 2009

    Posted 19 Mar 2010 Link to this post

    I don't know why I'm having so much trouble finding info on this, but I just can't seem to find an example...

    I need to add a few small ImageButtons to each row that I can use to launch an event (i.e. click on the pencil icon to edit this record, click on the little person to change the record owner, etc.).

    This will be the exact same icon on every row, and will perform the same function, albeit referencing the row in question.

    How do I do this?
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 19 Mar 2010 Link to this post

    Hi Todd Davis,

    The column Has a CellTemplate property .  It is a data template so you need to set the GridViewColumn.CellTemplate property to a data template containing your image .

    Let me know if you need further assistance on this .

    All the best,
    Pavel Pavlov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. DevCraft banner
  4. Todd Davis
    Todd Davis avatar
    36 posts
    Member since:
    Aug 2009

    Posted 19 Mar 2010 Link to this post

    Yes please, I could use a hand.

    I figured out this much so far to add the image and fire an event:

                    <grid:GridViewDataColumn>
                        <grid:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <Image Source="edit.png" Height="16" Width="16" MouseLeftButtonUp="Image_MouseLeftButtonUp" />
                            </DataTemplate>
                        </grid:GridViewDataColumn.CellTemplate>
                    </grid:GridViewDataColumn>

    So the only question for me now is, how do I associate this click with the current record (in the code behind)?

    For example, let's say I have the grid bound to a collection of Person objects, and I want to know which Person I clicked the edit button on so I can display their name and address. How do I do that?
  5. Todd Davis
    Todd Davis avatar
    36 posts
    Member since:
    Aug 2009

    Posted 19 Mar 2010 Link to this post

    PS - this grid allows multiple selected items, so I can't just grab current selected item, I need to know which row was clicked.
  6. Answer
    Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 19 Mar 2010 Link to this post

    Hi Todd ,

    The image will have your person as a DataContext so checking the DataContext of the sender ( or args.originalSource)  in your event handler should let you know which is the relevant record.

    If you have trouble implementing this , just paste me your event handler and I will make the changes  for you.

    Best wishes,
    Pavel Pavlov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. Todd Davis
    Todd Davis avatar
    36 posts
    Member since:
    Aug 2009

    Posted 19 Mar 2010 Link to this post

    Thanks, that worked!
Back to Top
DevCraft banner