Permalink
Find file
81acb80 Aug 14, 2015
135 lines (122 sloc) 4.01 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.bootstrap.min.css" />
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
<label for="name">Enter users name click add:</label>
<div class="input-group">
<input type="text" id="name" class="form-control" placeholder="name">
<span class="input-group-btn">
<button class="btn btn-primary" id="add" type="button">Add</button>
</span>
</div>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="template">
<tr>
<td>#:id#</td>
<td>
<input value="#:name#">
<button type="button" data-id="#:id#" id="update" class="btn btn-default btn-xs">update</button>
<button type="button" data-id="#:id#" id="delete" class="btn btn-danger btn-xs">delete</button>
</td>
</tr>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<script>
var localdata = [{
"id": 1,
"name": "Leanne Graham",
}];
var dataNextID = localdata.length + 1;
function getIndexById(id) {
var idx;
var l = localdata.length;
for (var j; j < l; j++) {
if (localdata[j].id == id) {
return j;
}
}
return null;
}
var dataSource = new kendo.data.DataSource({
offlineStorage: 'users',
transport: {
read: function(e) {
e.success(localdata);
},
create: function(e) {
e.data.id = dataNextID++;
localdata.push(e.data);
e.success(e.data);
},
update: function(e) {
localdata[getIndexById(e.data.id)] = e.data;
e.success();
},
destroy: function(e) {
localdata.splice(getIndexById(e.data.id), 1);
e.success();
}
},
schema: {
model: {
id: 'id',
fields: {
id: {
editable: false,
nullable: true
},
name: {
validation: {
required: true
},
type: 'string'
},
}
}
},
change: function() {
$('tbody').html(kendo.render(kendo.template($('#template').html()), this.view()));
}
});
dataSource.online(false);
dataSource.read();
$('#add').on('click', function() {
dataSource.add({
name: $('#name').val()
});
dataSource.sync();
});
$('tbody').on('click', '#delete', function() {
var $this = $(this);
dataSource.remove(dataSource.get($this.data('id')));
dataSource.sync();
});
$('tbody').on('click', '#update', function() {
var $this = $(this);
dataSource.get($this.data('id')).set('name', $this.prev('input').val());
dataSource.sync();
});
</script>
</body>
</html>