How would I link to an external site from a cell in a kendo grid?

1.4k views Asked by At

Just like the title says. I want to have a kendo grid with a column called Link. That column would need to dynamically generate a link to whatever address the user puts into it. I don't need to worry about error checking to ensure the link is valid, or anything like that.

I've done research, and all I've found are ways to link to other locations within the same project. In my example, I'd need to set it up so that if a user edits a cell in the Link column to say "www.Temporarysite.com", upon saving the edit, the grid would create a hyperlink to that site.

I've tried using an actionlink, but that doesn't seem like it would fulfill the purpose properly.

Thoughts? I can provide code samples if necessary.

EDIT: I'll include some code below. Help is appreciated!

columns.Bound(o => o.Link).ClientTemplate(@Html.ActionLink("#=Link#", "#= myScript(#= Link#)#").ToHtmlString());

The issue is that this simply creates an anchor tag, which errors out with a "page not found". It's trying to go to something like " www.my site.com/www.Google.com".

1

There are 1 answers

3
Dan Kuida On BEST ANSWER

here is example based on the kendo dojo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>


    <script>
      $(document).ready(function(){
        var sampleData = [
          { "Title": "The Code Project", "URL": "http://codeproject.com/","Developer":"Tom Hanks" },
          { "Title": "Kendo UI", "URL": "http://kendoui.com/" ,"Developer":"Tom Cruise"}
        ];
        var ddatasource=  new kendo.data.DataSource.create(sampleData);
        $("#testGrid").kendoGrid({
           editable: "popup",
          dataSource: ddatasource,
          columns: [{ command: ["edit", "destroy"], title: "פעולות", width: "220px" },
            { field: "Title", title: "Title Name"},
                    { field: "URL", title: "URL", template: '<a href="#=URL#">#=Title#</a>'}]
        });
      });

    </script>
  </head>
  <body>
    <div id="testGrid" data-role="grid" data-bind="source: sampleData"
         data-sortable="true"  data-resizable="true" />
  </body>
</html>