Open a detailed view of a listview item kendo ui

Question

I am attempting to have it so when a listview item is clicked a modal view appears of the object with all its details inside. I am trying to find out how to reference the clicked listview item and I am kind of stumped. This JS Fiddle is the same listview setup as mine. Any help on how to reference the clicked item would be super.

I have found some documentation that is something like this, but im struggling to understand the javascript

   var lvData = $('#eventFeed').data('kendoListView');
   var index = $(this).parents('.event:first').index() + lvData.eventInfo._skip;

   var itemInfo = lvData.eventInfo._data[index];
   $('<div id="eventInfo"></div>').appendTo(document.body);
   $('views/eventInfo').kendoWindow();

Answer 1

First: You can get set id as a flag like this:

<a data-role="button" class="view" data-click="onClick" id="#=id#">Details</a>

Second : You can use Kendo-template to pass data to your template: http://docs.kendoui.com/getting-started/framework/templates/overview

<div id="modal" data-role="modalview" style="width: 95%; height: 95%;">
</div>

<script id="javascriptTemplate" type="text/x-kendo-template">
    <ul>
    #=data['indexKey']#
    </ul>
</script>

 <script type="text/javascript">
    function onclick(e)
    {
        var dataSet = $('#eventfeed').data("kendoMobileListView").dataSource._pristine; //raw data-source
        var currentData;
        var curID = e.sender.element.attr('id');
        for(var i=0; i < dataSet.length; i++)
        {
            if(dataSet[i].id == curID)
            {
                currentData = dataSet[i];
                break;
            }           
        }
        var template = kendo.template($("#javascriptTemplate").html());
        var htmlCode = template(currentData); //Execute the template
        $("#modal").html(htmlCode); //Append the result
        $("#modal").data("kendoMobileModalView").open();
    }
</script>

If your data don't have any ID, then you can use uid(which was auto-generated by kendo-ui). So you can get dataSet by this way:

$('#eventfeed').data("kendoMobileListView").dataSource._data

Then your codes like this:

 <script type="text/javascript">
    function onclick(e)
    {
        var dataSet = $('#eventfeed').data("kendoMobileListView").dataSource._data;
        var currentData;
        var curUID = e.sender.element.closest('li').attr('data-uid');
        for(var i=0; i < dataSet.length; i++)
        {
            if(dataSet[i].uid == curUID)
            {
                currentData = dataSet[i];
                break;
            }           
        }
        var template = kendo.template($("#javascriptTemplate").html());
        var htmlCode = template(currentData); //Execute the template
        $("#modal").html(htmlCode); //Append the result
        $("#modal").data("kendoMobileModalView").open();
    }
</script>