Kendo Mobile SplitView - Example

by kendomobile

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<div data-role="splitview" >
    
  <div data-role="pane" >
      <!-- Master view -->
    <div data-role="view" data-title="Genre" >
        <ul data-role="listview" data-style=="inset" >
            <li>
                <a href="#view-detail?genre=Drama"
                   data-target="pane-detail"> Drama </a>
            </li>
            <li>
                <a href="#view-detail?genre=Horror"
                   data-target="pane-detail">Horror </a>
            </li>
            <li>
                <a href="#view-detail?genre=Family"
                   data-target="pane-detail">Family </a>
            </li>
            <li>
                <a href="#view-detail?genre=History"
                   data-target="pane-detail">History </a>
            </li>        
        </ul>        
        
    </div>
  </div>    
    
  <div data-role="pane" id="pane-detail" >
      <!-- Detail view -->
    <div data-role="view" id="view-detail" 
         style="font-size:16px"
         data-show="detailViewShown" >
             
        <div style="padding:10px;">
        <strong >Selected Genre:  </strong>
        <strong>
            <!--Selected genre will be written here -->
            <span id="selected-genre"
                  style="color:green"> </span>
        </strong>       
        </div>
             
    </div>
  </div>    
</div>

JavaScript

var app = new kendo.mobile.Application(document.body);

function detailViewShown(e){
    //Read the selected genre from the query string
     $('#view-detail #selected-genre').text(e.view.params.genre);
}