kendo mobile listView Exam

Example using listView with horizontal ul/li child

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<html>
<head>
    <title>test</title>
</head>
<body>
   
    <div data-role="view" id="listview-sample" 
        data-init="mobileListViewTemplatesInit" data-title="ListView">
            <div data-role="navbar">
                <span>Test Data / Template</span>

            </div>

        <!-- listview w/dataSource and template works -->            
        <h2>Exam sample - works</h2>
        <ul id="custom-listview" data-role="listview" data-style="inset" >
            <li>
                <ul class="horizontal">
                    <li class="questionIndex">1</li>
                    <li>2 </li>
                    <li>3 </li>
                    <li>4 </li>
                </ul>
            </li>
            <li>
           
                <ul class="horizontal">
                    <li class="questionIndex">10</li>
                    <li>2 </li>
                    <li>3 </li>
                    <li>4 </li>
                </ul>
            </li>
            <li >
                <ul class="horizontal">
                    <li class="questionIndex">100</li>
                    <li>2 </li>
                    <li>3 </li>
                    <li>4 </li>
                </ul>
                
            </li>
        </ul>
            
       

    </div>
        
    
</body>
</html>

CSS

.horizontal li{
    
    float: left; 
    list-style-type: none;
    padding: 0px 4px 0px 0px;
    line-height:2.0em;
    
}
.questionIndex2
{
    float: left;
    border-width: 1px;
    border-color: #CCCCCC;
    border-right-style: solid;
    text-align: center;
    width: 50px;
}
.questionIndex
{
    border-width: 1px;
    border-color: #CCCCCC;
    border-right-style: solid;
    text-align: center;
    width: 45px;
    margin-right:15px;
}

JavaScript

var app = new kendo.mobile.Application(document.body, {
    platform: "ios"
});




function mobileListViewTemplatesInit() {
   
    
};