javascriptkendo-uikendo-listview

Kendo ListView: include a href


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.


Solution

  • 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