How do I make a clickable link in grid?

[Francis]

Hello, 

In my grid, I'd like to make the text in 'field: companyName' a clickable link. I have tried to change it to: 

{ title: "Company Name", template: '<a href="#">#= companyName#</a>', width: "300px"}

but have no luck. I have also searched around the forums but couldn't find the answer. Can anyone help me. Also, I am looking to add URL link to each client but am not sure how to do that either. 

Here is my script code in its entirety. 

<script>
var clients = [ { clientLogo: "img/lowes.png",
            companyName: "Lowe's Home Improvement",
            clientID: 123456,
            lastEdited: "02/15/2016",
            lastEditedBy: "Barbara Johnson",
            status: "In Progress"},
            { clientLogo: "img/verizon.png",
            companyName: "Verizon Wireless",
            clientID: 123456,
            lastEdited: "02/15/2016",
            lastEditedBy: "Barbara Johnson",
            status: "In Progress"},
            { clientLogo: "img/mcdonalds.png",
            companyName: "McDonald's Corporation",
            clientID: 123456,
            lastEdited: "02/15/2016",
            lastEditedBy: "Barbara Johnson",
            status: "In Progress"},
            { clientLogo: "img/att.png",
            companyName: "AT&T Wireless & Network Information",
            clientID: 123456,
            lastEdited: "02/15/2016",
            lastEditedBy: "Barbara Johnson",
            status: "In Progress"},
            { clientLogo: "img/stjoseph.png",
            companyName: "St Joseph Healthcare System",
            clientID: 123456,
            lastEdited: "02/15/2016",
            lastEditedBy: "Barbara Johnson",
            status: "In Progress"},
            { clientLogo: "img/proteinbar.png",
            companyName: "Protein Bar",
            clientID: 123456,
            lastEdited: "02/15/2016",
            lastEditedBy: "Barbara Johnson",
            status: "In Progress"},
            { clientLogo: "img/invision.png",
            companyName: "InVisionApp",
            clientID: 123456,
            lastEdited: "02/15/2016",
            lastEditedBy: "Barbara Johnson",
            status: "In Progress"} ];
$("#grid").kendoGrid({
    columns: [ { title: "Client Logo", template: '<img src="#= clientLogo #" />' },
               { title: "Company Name", field: 'companyName', width: "300px"},
               { title: "Client ID", field: 'clientID'},
               { title: "Last Edited", field: 'lastEdited'},
               { title: "Last Edited By", field: 'lastEditedBy'},
               { title: "Status", field: 'status'} ],
    dataSource: clients
});

[Dimiter Madjarov]

Hello Francis,

The reason for the issue is the # symbol in the href attribute of the link. It should be escaped, because it is not part of the Kendo UI template syntax. Here is a working example of the same.

Regards,
Dimiter Madjarov
Telerik

 

 

[Francis]

Thank you. I tried looking for the documentation but was not able to find it. Would you be able to provide a link? Thanks. 

[Dimiter Madjarov]

Hello Francis,

Detailed information about the Kendo UI templates could be found on the following documentation page.

Regards,
Dimiter Madjarov
Telerik