Kendo UI grid URL Column
18,849
You can do this with a template:
columns: [{ field: "Title", title: "Title Name"},
{ field: "URL", title: "URL :", template: '<a href="#=URL#">#=Title#</a>'}]
You can try it out on the Kendo Dojo here: http://trykendoui.telerik.com/aFAR
Author by
Piyush
Updated on June 12, 2022Comments
-
Piyush almost 2 years
I want to add a hyperlink in my Kendo UI Grid. from data source I am getting a URL back and I just want to to display it as a hyperlink . below is a sample code . Please suggest me the simplest way to do that.
<div id="testGrid" data-role="grid" data-bind="source: sampleData" data-sortable="true" data-resizable="true" /> $(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({ dataSource: ddatasource, columns: [{ field: "Title", title: "Title Name"}, { field: "URL", title: "URL :"}] }); });
-
Piyush almost 10 yearsHi Rick, when I am specifying the template section in Declative initialization in "Data-columns" its throwing error. I am able to do what is desired using a <Table> and creating a template which forms the TR with URL but now the issue is that the alternate row stying is not being imposed.
-
Rick S almost 10 yearsPlease update the kendo dojo code linked to in my answer so I can see what's going on.
-
Piyush almost 10 yearsNever mind. Id got rid of declarative stuff and you code worked for me....Thanks a ton for the help.