<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/listview/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.3.1111/styles/kendo.material.min.css" />
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" data-semver="3.3.5" data-require="bootstrap"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
  
  <style>
	
  
  </style>
</head>
<body>
<script src="../content/shared/js/products.js"></script>

<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">

    <div class="demo-section k-content wide" style="margin:20px">
        <div kendo-list-view id="listView" k-data-source="source">
            <div class="product" k-template>
              <div ng-include="'qTemplate'"></div>
            </div>
        </div>
        <div kendo-pager k-data-source="source"></div>
    </div>

        
      <script type="text/ng-template" id="qTemplate">
    <div class="container-fluid col-md-12" style="background:#ecc">
        <div class="row">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-1 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-1 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Remember me
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
      </script>

    <style>
      
    .row
    {
    	margin:0px;
      box-sizing: border-box;
    }
   
      
        #listView {
            padding: 1px;
            margin-bottom: -1px;
            min-height: 510px;
          overflow-x: hidden;
          box-sizing: border-box;
        }
      
      
.k-listview .row {
    box-sizing: border-box;
}
   .k-listview .col-xs-1, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        box-sizing: border-box;
    }


      
       .k-listview:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
      
        .product {
          
       
            margin: 1px;
            padding: 0;
        }
       
    </style>
</div>
</div>

<script>
    angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
            $scope.source = new kendo.data.DataSource({
                data: products,
                pageSize: 1
            });
        })
</script>


</body>
</html>
