Skip to content

Instantly share code, notes, and snippets.

@macinnir

macinnir/KendoUIJS

Last active October 9, 2015 18:17
Show Gist options
  • Save macinnir/3555338 to your computer and use it in GitHub Desktop.
Save macinnir/3555338 to your computer and use it in GitHub Desktop.
Download ZIP
Kendo UI Example
Raw
KendoUIJS
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/kendo.web.min.js"></script>
<style type="text/css">
<!--
.active { display: list-item; }
.inactive { display: none; }
.type_new { background: #eeffee; }
table { border-collapse: collapse; width: 100%; }
table tr td { padding: 3px; border: solid 1px #909090; }
-->
</style>
<script type="text/javascript">
$(document).ready(function(){
$('select[name="classFilter"]').bind('change', function(){
if($(this).val().length < 1){
$('table#ars tr').addClass('active').removeClass('inactive');
return true;
}
/** mark all rows with this class id as active **/
$('table#ars tr[data-classid="' + $(this).val() + '"]').addClass('active').removeClass('inactive');
/** mark all rows without this class id as inactive **/
$('table#ars tr:not([data-classid="' + $(this).val() + '"])').addClass('inactive').removeClass('active');
});
$('select[name="statusFilter"]').bind('change', function(){
if($(this).val().length < 1){
$('table#ars tr').addClass('active').removeClass('inactive');
return true;
}
/** mark all rows with this class id as active **/
$('table#ars tr[data-status="' + $(this).val() + '"]').addClass('active').removeClass('inactive');
/** mark all rows without this class id as inactive **/
$('table#ars tr:not([data-status="' + $(this).val() + '"])').addClass('inactive').removeClass('active');
});
});
</script>
</head>
<body>
<select name="classFilter">
<option value="">Select...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select name="statusFilter">
<option value="">Select...</option>
<option value="paid">Paid</option>
<option value="unpaid">UnPaid</option>
</select>
<table id="ars" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<tbody>
</tbody>
</table>
<script id="template" type="text/x-kendo-template">
<tr data-status="#= status #" data-classid="#= classId #"class="ui-li ui-li-divider ui-bar-a ui-li-has-count ui-corner-top">
<td>#= classId #"</td>
<td style="font-size: 18px; " class="ui-li-heading">
#= first_name # #= last_name #
</td>
<td class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="font-size: 13px; ">
<span class="amt #= status #-#= amt #">$#= total #</span>
</td>
<td>#= status #</td>
</tr>
</script>
<script>
$(document).ready(function(){
var template = kendo.template($('#template').html());
var datasource = [
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 1, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "paid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "unpaid", "amt" : 1.00, "total" : 2.00 },
{ "classId" : 2, "first_name" : "John", "last_name" : "Doe", "status" : "unpaid", "amt" : 1.00, "total" : 2.00 }
];
var dataSource = new kendo.data.DataSource({
data : datasource,
change: function() { // subscribe to the CHANGE event of the data source
$("table#ars tbody").html(kendo.render(template, this.view())); // populate the table
}
});
dataSource.read();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment