Problems linking Listview to Detail view

2 posts, 0 answers
  1. George
    George avatar
    5 posts
    Member since:
    Aug 2013

    Posted 23 Aug 2013 Link to this post

    I have been at this for hours! Using the Sushi example as a reference im trying to link the from my list view to the details view by passing the "alert_ID" from my datasource. Please help, im sure it's something simple.

    here is my code:

    <!DOCTYPE html>
        <title>IRIS Mobile</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <link href="styles/" rel="stylesheet" />
        <link href="styles/IRISmobile.css" rel="stylesheet" type="text/css">
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>

    <div id="alerts_list" data-role="view" data-title="IRIS Alerts" style="background-color: #FFF">
    <header data-role="header" >
            <div data-role="navbar">
                <span data-role="button" data-align="left" data-icon="home" href="#main-menu" data-rel="drawer"></span>
                <span data-role="view-title"></span>
                <a data-role="button" data-rel="drawer" href="#alert-menu" data-icon="info" data-align="right"></a>
        <div class="head">&nbsp;</div>
            <ul id="list" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="tmp"></ul>
        <!--DETAIL VIEW-->
    <div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView" style="background-color: #FFF">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" data-align="left">Back</a>
                    <span data-role="view-title">Alert Details</span>

            <div data-role="content">

    <script id="tmp" type="text/x-kendo-template">
            <a class="details-link" data-role="listview-link" href="\#details">
    <img class="alertimage" src=" degree #.png" />
    <div class="listviewdiv">
    <h3 class="item-info">#: title #</h3>
    <p class="item-title">#: sentDT # <span class="AlertTitle"> :: #: sender # </span></p>
    <a data-role="button" href="\#details" class="listviewbutton" data-icon="mostrecent"></a>

    <!--DETAIL VIEW LAYOUT-->     
        <script id="detailTemplate" type="text/x-kendo-template">
            <img src=" degree #.png" />
            <h2>#: title #</h2>
            <p>#: message #</p>

    <!--GET REMOTE JSON DATA-->    

            //var app = new;
            var IRISalerts = new{
                transport: {
        read: {
          url: "",
          dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
     schema: {
                    data: "results",
                    model: {
                        id: "alert_ID",
                        fields: {
                            //field description

    //Get Details


            var itemDetailsTemplate = kendo.template($("#detailTemplate").text());

            function showDetailsView(e) {
                var view = e.view;

                ds.fetch(function() {
                    item = ds.get(view.params.alert_ID);
    <!--END GET REMOTE JSON DATA-->     

    <div data-role="drawer" id="main-menu">
    <div><img src="images/greylogo.png"></div>
                <ul data-role="listview">
                    <li><a href="views/settings.html" data-transition="none">Settings</a></li>
                    <li><a href="index.html" data-transition="none">Log Out</a></li>

    <!--RIGHT DATA DRAWER-->      
    <div data-role="drawer" id="alert-menu" data-position="right" style="width: 80px" data-title="Codes">
     <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
        <img src="images/alertlegend.png" width="100%"/>

        var app = new;
  2. Nikolay Rusev
    Nikolay Rusev avatar
    2289 posts

    Posted 28 Aug 2013 Link to this post

    Hello George,

    If I understand your problem correctly you will need to modify the ListView item template so that the link contains the value of `alert_ID` in the href as in this help article. For example:

    <script id="tmp" type="text/x-kendo-template">
     <a data-role="button" href="\#details?alert_ID=#=alert_ID#" class="listviewbutton" data-icon="mostrecent"></a>

    I've created an example from the code you've posted so that it illustrates what I mean.

    Nikolay Rusev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top