[Solved] Image Link Buttons

[Vassili King]

Hello,

I have a  on RadGridView on my page. I'm building all columns programmatically. Most columns I'm using are GridViewDataColumns, and I have a couple of GridViewDynamicHyperlinkColumns. The latter has a cool feature where I can pass a parameter to form a URL to which the link navigates like so:

GridViewDynamicHyperlinkColumn myHyperlinkColumn;
myHyperlinkColumn.NavigateUrlFormatString = "http://mysite/{0}";
myHyperlinkColumn.NavigateUrlMemberPaths = "SomeParameter";

Now I'm trying to add two more columns. Each colum needs to have the same image for all records, but different links need to be formed so when a user clicks the image, he/she is taken to different pages depending on the record (or grid row) that was clicked. One column is, pretty much, boils down to a "mailto:blah" link, the other one is similar to my GridViewDynamicHyperlinkColumn in structure with the only difference that instead of a hyperlink, I need to have a static image in the cell. 

How can i build these columns programmatically? How can I append a parameter from my dataset to a link (similar to my GridViewDynamicHyperlinkColumn) and have an image instead of a hyperlink?

Thank you!
- VK.

[Vassili King]

Not a single reply? There have to be some way to create image links in the Telerik grid.

[Veselin Vasilev]

Hi Vassili King,

You can still use the GridViewDynamicHyperlinkColumn, you can just override its CellTemplate to show an image:

<telerik:GridViewDynamicHyperlinkColumn NavigateUrlFormatString="http://www.bing.com/search?q={0}"
     NavigateUrlMemberPaths="FirstName"  Width="200"
     TargetName="_blank" Header="Search Bing">
    <telerik:GridViewDynamicHyperlinkColumn.CellTemplate>
        <DataTemplate>
                <Image Source="{Binding ImageUrl}" Width="96" Height="96" />
        </DataTemplate>          </telerik:GridViewDynamicHyperlinkColumn.CellTemplate>
</telerik:GridViewDynamicHyperlinkColumn>

Hope this helps.

Best wishes,
Veselin Vasilev
the Telerik team

[Vassili King]

Hello Veselin,

Thank you for your response.  I've seen some samples of using DataTemplates.  The challenge I'm facing is to make it happen programmatically.  I haven't seen DataTemplate property on the GridViewDynamicHyperlinkColumn. Perhaps, there is some other way to approach this.

Thank you!
-VK

[Veselin Vasilev]

Hi Vassili King,

No, you do not need to look for the DataTemplate property of the gridview column. You need the CellTemplate property. So, you create a new DataTemplate object in code, add the image to it and then assign it to the CellTemplate property of the column.

Best wishes,
Veselin Vasilev
the Telerik team

[Vassili King]

Thanks, Veselin.  This did work for me.  Adding DataTemplate wasn't as straight-forward as I thought though - I ended up using XamlReader.  Here are some details for those interested in a solution:

//Create DataTemplate with an image
DataTemplate dt = new DataTemplate();

dt = (DataTemplate)XamlReader.Load(
                        @"<DataTemplate
                            xmlns=""http://schemas.microsoft.com/client/2007"">
                            <Image Source=""images/myImage.jpg""/>
                          </DataTemplate>"
                      );

//Create a GridViewDynamicHyperlinkColumn and add it to myDataGrid
GridViewDynamicHyperlinkColumn ghlc = new GridViewDynamicHyperlinkColumn();
ghlc.CellTemplate = dt;
ghlc.NavigateUrlFormatString = "http://mysite.net/{0}";  //If, for example, id='Mary', then the link would be 'http://mysite.net/Mary'
ghlc.NavigateUrlMemberPaths = "SomeID";                   //For example, Mary
ghlc.TargetName = "_blank";                                         //Open in a new window
myDataGrid.Columns.Add(ghlc);                                   //Add the column to my datagrid

By the way, in the XamlReader.Load you can use {Binding ...} instead of hardcoded image Url.