module Example.Datasource {
let ds = new kendo.data.DataSource();
$(() => {
$('#grid').kendoGrid();
$('#btnFillValues').bind('click', fillValues);
$('#btnViewData').bind('click', showData);
$('#btnAddTupple').bind('click', addTupple);
$('#btnRemoveByIndex').bind('click', removeByIndex);
$('#txtFileterText').bind('keyup', search);
$('#btnViewFirstIndex').bind('click', getItemByIndex);
$('#btnInsert').bind('click', insert);
$('#btnAddToGrid').bind('click', addToGrid);
$('#btnDeleteFilterdRows').bind('click', searchAndRemove);
$('#btnSearchAndUpdate').bind('click', searchAndUpdate);
});
function fillValues() {
var data = [
{ name: "Jane Doe", age: 30 },
{ name: "Chamith Saranga", age: 33 }
];
ds.data(data);
}
function showData() {
var view = ds.view();
$.each(view, (i, d) => {
console.log(d.name);
});
$('#grid').data('kendoGrid').setDataSource(new kendo.data.DataSource({ data: view }));
}
function addTupple() {
ds.add({ name: 'sajeeka', age: 20 });
}
function removeByIndex() {
ds.remove(ds.at(0));
}
function getItemByIndex() {
var dataItem: any = ds.at(0);
alert(dataItem.name);
}
function removeMultiple() {
var val = $('#txtFileterText').val();
//ds.remove(ds.filter({ field: "name", operator: "startswith", value: val }));
}
//Inserts a data item in the data source at the specified index.
function insert() {
ds.insert(1, { name: "Kasun Chathuranga", age: 20 });
showData();
}
function search() {
var val = $('#txtFileterText').val();
console.log(val);
ds.filter({ field: "name", operator: "startswith", value: val });
showData();
}
function addToGrid() {
ds.insert(0, { name: $('#txtName').val(), age: Number($('#txtAge').val()) });
showData();
}
function searchAndRemove() {
$.each(ds.data(), (i, d) => {
if (d.name === $('#txtFileterText').val()){
ds.remove(ds.at(i));
}
});
showData();
}
function searchAndUpdate() {
$.each(ds.data(), (i, d) => {
if (d.name === $('#txtFileterText').val()) {
d.age = 55;
}
});
showData();
}
}
////////////////////////////
///HTML
///////////////////////////
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<input type="button" name="name" value="Fill values" id="btnFillValues" />
<br />
<input type="button" name="name" value="Add Tupple" id="btnAddTupple" />
<br />
<input type="button" name="name" value="view values" id="btnViewData" />
<br />
<input type="button" name="name" value="remove by index" id="btnRemoveByIndex" />
<br />
<input type="button" name="name" value="view First Index" id="btnViewFirstIndex" />
<br />
<input type="button" name="name" value="Insert" id="btnInsert" />
<br />
<input type="button" name="name" value="Remove Filted rows" id="btnDeleteFilterdRows" />
<br />
<input type="button" name="name" value="Search And Update" id="btnSearchAndUpdate" />
<hr />
<h1>Grid View</h1>
Name : <input type="text" name="name" value="" id="txtName" />
Age : <input type="number" name="name" value="" id="txtAge"/>
<input type="button" name="name" value="Add" id="btnAddToGrid"/>
<br /><br />
<input type="text" name="name" value="" id="txtFileterText" placeholder="type something to fileter"/>
<div id="grid"></div>
</body>
<script src="../assets/ts/datasource.js"></script>
</html>
No comments:
Post a Comment