RadGrid How To – Configure a HyperLink Client Side

I’ve been doing a lot of work recently with Telerik’s RadGrid configuration client side. This includes data binding, sorting, paging and working with columns and data rows. I’ll likely be doing a series on some of the issues I’ve encountered trying to work with these grids completely client side. The first of this series is a relatively simple thing to do server side, but I definitely had issue with it client side.

Scenario:

I have a RadGrid called rgProjects configured with several GridBoundColumn fields and a single GridHyperLinkColumn field. The data binding for this grid is being done via an ajax call to a method in another page that returns some json that I then bind to the grid. I’m leveraging the OnRowDataBound client event of this grid to perform some custom row manipulation. I figured this would be a good place to set up my HyperLink.

Step 1 - Add the GridHyperLinkColumn to the grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<telerik:RadGrid ID="rgProjects" EnableViewState="false" runat="server"
            GridLines="None" AutoGenerateColumns="False" AllowSorting="true" Width="100%">
            <MasterTableView TableLayout="Fixed"> 
                <Columns>
                    <telerik:GridNumericColumn DataField="ID" HeaderText="ID" />
                    <telerik:GridNumericColumn DataField="Title" HeaderText="Title" Display="false" />
                    <telerik:GridHyperLinkColumn DataTextField="Project" DataNavigateUrlFields="Project"
                        UniqueName="Project" HeaderText="Project" ItemStyle-Font-Underline="true" />
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDataBound="rgProjects_OnRowDataBound" />
            </ClientSettings>
</telerik:RadGrid>

The JSON that’s being returned:

[{"ID":"1204","Title":"shereen's test project","Project":"http://server.local/_layouts/Demo/editform.aspx?ID=1204"}]

So the basic idea was, I wanted my hyperlink to have it’s value set to: “shereen’s test project” and I wanted the url to be set to: http://server.local/_layouts/Demo/editform.aspx?ID=1204.

Do not confuse TITLE with VALUE. By TITLE, I mean the actual TITLE attribute of the A tag that’s used for a tooltip and by VALUE I mean the innerHTML that’s set and is actually visible to the user as the hyperlink itself.

So it would read as follows:

shereen’s test project

This was not working for me initially because both the hyperlink’s value and url were being set as the url, which is not what I wanted:

http://server.local/_layouts/Demo/editform.aspx?ID=1204

In comes the OnRowDataBound event where I can override what’s happening above with what it is I actually want:

Step 2 - Leverage the OnRowDataBound client event to configure our HyperLink

1
2
3
4
5
6
7
8
9
10

function rgProjects_OnRowDataBound(sender, args)
{    
    // manually set the hyperlink's title
    var item = args.get_item();
    var dataItem = args.get_dataItem();
    var link = item.get_cell("Project").getElementsByTagName("a")[0];    
    link.innerHTML = dataItem.Title;
    link.href = dataItem.Project;
    link.title = dataItem.Title;
}

So the key thing to note above is you have to set the innerHTML. Title is optional, but the important ones are href and innerHTML. Any problems let me know!