Mobile Widget Custom Event

by dvmac

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<div data-role="view" data-title="Events" data-style="inset" data-init="loadEventNames">
    <header data-role="header" data-id="default-header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>            
            <span data-role="view-title"></span>
        </div>
    </header>    
    <ul id="eventfeed"></ul>  
        <div id="modal" data-role="modalview" style="width: 95%; height: 95%;">
        <div data-role="header">
        <div data-role="navbar">
            <a data-align="right" data-click="closeModalView" data-role="button">Close</a>
        </div>
    </div>
            #= name #
    </div>
</div>
<script id="eventNameTemplate" type="text/x-kendo-template">
    <div class="txtname">
        <img class="pullImage" src="#= picturePath #"/>#= name #
        <div class="eventInfo">
            <b> Time:</b> #= time #  &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<a  data-role="button" class="view" data-click="onClick">Details</a>
             </div>
        </div>
</script>
<script id="javascriptTemplate" type="text/x-kendo-template">
    <div data-role="navbar">
            <a data-align="right" data-click="closeModalView" data-role="button">Close</a>
        </div>
    <ul>
        <h1>#=data['name']#</h1>
        <h3>#=data['description']#</h3>
            #=data['time']#
    </ul>
</script>
<script>
    function onClick(e)
    {
        var dataSet = $('#eventfeed').data("kendoMobileListView").dataSource._pristine; //raw data-source
        var currentData;
        var curID =...

CSS

body {
    font: Arial, sans-serif;
}
.buttonArea, .footerText, #geoLocationContainer, #helloWorldInput, #helloWorldText {
    text-align: center;
}
#map .km-content, #map .km-scroll-container, #map #map_canvas {
    display: -webkit-box;
    width: 100%;
}
#txtName {
    border: 1px solid #AAA;
    border-radius: 15px;
    position:static;
    margin-left: 1em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    background:white;
    color: black;
    padding: 7px;
}
.eventInfo {
    font-size: .8em;
    line-height: 1.4em;
}
.tweet {
    font-size: .8em;
    line-height: 1.4em;
}
.pullImage {
    width: 64px;
    height: 64px;
    border-radius: 3px;
    float: left;
    margin-right: 10px;
}
.sublink {
    font-size: .9em;
    font-weight: normal;
    display: inline-block;
    padding: 3px 3px 0 0;
    text-decoration: none;
    opacity: .8;
}

JavaScript

var app = new kendo.mobile.Application(document.body);
 var eventData = new kendo.data.DataSource({

     transport: {
         read: {
             //using jsfiddle echo service to simulate JSON endpoint
             url: "/echo/json/",
             dataType: "json",
             type: "POST",
             data: {
                 // /echo/json/ echoes the JSON which you pass as an argument
                 json: JSON.stringify([{
                     "category": "123",
                         "description": "Event for testing purposes",
                         "eventID": "1",
                         "locationID": "1",
                         "name": "Kendo",
                         "picturePath": "https://si0.twimg.com/profile_images/1514396238/KendoUI-Figure.png",
                         "subcategory": "SEIT",
                         "time": "12:00:00"
                 }, {
                     "category": "123",
                         "description": "Event for testing purposes",
                         "eventID": "1",
                         "locationID": "1",
                         "name": "jQuery",
                         "picturePath": "http://dochub.io/images/jquery_logo.png",
                         "subcategory": "SEIT",
                         "time": "12:00:00"
                 }

                 ])
             }
         }
     }
 });




 //initialise the list view 
 function loadEventNames() {
     $("#eventfeed").kendoMobileListView({
         dataSource: eventData,
         template: $("#eventNameTemplate").html(),
         style: 'inset'
     });
 }