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>
    <html>
    <head>
        <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/kendo.mobile.flat.min.css" 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>
    </head>
    <body>

    <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>
        </header>
        
        
        
        <div class="head">&nbsp;</div>
            <ul id="list" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="tmp"></ul>
            
        </div></div>
        
        <!--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>
            </header>

            <div data-role="content">
            </div>
        </div>

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


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



    <!--GET REMOTE JSON DATA-->    
        <script>

            //var app = new kendo.mobile.Application();
            var IRISalerts = new kendo.data.DataSource({
                transport: {
        read: {
          url: "http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=3798559",
          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

            ds.fetch();

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

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

                ds.fetch(function() {
                    item = ds.get(view.params.alert_ID);
                    view.scrollerContent.html(itemDetailsTemplate(item));
                    kendo.mobile.init(view.content);
                });
            }
        </script>
    <!--END GET REMOTE JSON DATA-->     
        

    <!--LEFT DATA DRAWER-->
    <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>
                </ul>
            </div>
    <!--END LEFT DATA DRAWER-->  

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

    <script>
        var app = new kendo.mobile.Application(document.body);
    </script>
    </body>
    </html>
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 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>
     ...
    </script>

    I've created an example from the code you've posted so that it illustrates what I mean.
    http://jsbin.com/iLunopI/1/edit

    Regards,
    Nikolay Rusev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top