I am using Kendo ListView with remote datasource. I would like to add links to the data that is displayed but I am struggling.
Here is my function:
$(function () {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: URL + "/Read",
dataType: "json"
}
},
schema: {
data: function (response) {
return response.Data["dsStudent"]["ttStudent"];
},
},
});
$("#listView").kendoListView({
dataSource: dataSource,
selectable: "multiple",
dataBound: onDataBound,
change: onChange,
template: kendo.template($("#template").html())
});
function onDataBound() {
//console.log("ListView data bound");
}
function onChange() {
var data = dataSource.view(),
selected = $.map(this.select(), function (item) {
return data[$(item).index()].fileID;
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
});
Here is my template
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<ul class="list-group">
<li class="list-group-item">#:Name#</li>
</ul>
</div>
</script>
The data is displayed as expected. My JSON contains a value that I would like to append to a url, this would then be used to create the href link. This is where I am struggling.
I have been able to console.log the value I need form my JSON but I am lost trying to figure out how to create the href.
Here is a snippet of my JSON:
{"Data": {"dsStudent": {"ttStudent": [{"studentNum": 366,"studentVersion": 2,"createDate": "2018-02-11","fileID":"18525478387e8","description":"StudentNames.pdf","displayCreateTime": "15:31"}]}}}
Using the onChange function, I am able to console.log the required field from the JSON.
I am trying to output the results like this, the fileID would change for each record in the JSON file.
<ul>
<li>
<a href="mydomain.co.uk/download?**fileID**">Download Student Record</a>
</li>
</ul>
I hope I have been able to explain where I am struggling.
Just do like in your first template, print the value:
<a href="mydomain.co.uk/download?#= fileID #">Download Student Record</a>
^ here is where you print the fileId inside the link address