How do I make a clickable link in grid?

4 posts, 0 answers
  1. Francis
    Francis avatar
    10 posts
    Member since:
    Mar 2016

    Posted 09 Mar 2016 Link to this post

    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
    });     

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 10 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Francis
    Francis avatar
    10 posts
    Member since:
    Mar 2016

    Posted 10 Mar 2016 in reply to Dimiter Madjarov Link to this post

    Thank you. I tried looking for the documentation but was not able to find it. Would you be able to provide a link? Thanks. 
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 11 Mar 2016 Link to this post

    Hello Francis,

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

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top