kendo重写tab事件
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
function grid_edit(e){
var grid=$("#grid").data("kendoGrid");
//获取当前触发edit事件是哪个元素
var editEle;
var productname=e.container.find("input[name=ProductName]");
if(productname.attr("name")!==undefined)
{
editEle=productname;
}
var UnitPrice=e.container.find("input[name=UnitPrice]");
if(UnitPrice.attr("name")!==undefined)
{
editEle=UnitPrice;
}
var UnitsInStock=e.container.find("input[name=UnitsInStock]");
if(UnitsInStock.attr("name")!==undefined)
{
editEle=UnitsInStock;
}
var Discontinued=e.container.find("input[name=Discontinued]");
if(Discontinued.attr("name")!==undefined)
{
editEle=Discontinued;
}
//alert(editEle.attr("name"));
//获取下一个元素
editEle.bind("keydown",function(event){
var keycode=event.which;
var t=grid.current(editEle).parent();
if(keycode==13)
{
grid.editCell($("#grid td:eq(2)"));//t.next();
}
});
}
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
// toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
var grid=$("#grid").data("kendoGrid");
//grid.bind("edit",grid_edit);
grid.editCell($("#grid td:eq(2)"));
});
</script>
</div>
</body>
</html>
================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
function grid_edit(e){
var grid=$("#grid").data("kendoGrid");
//获取当前触发edit事件是哪个元素
var editEle;
var productname=e.container.find("input[name=name]");
if(productname.attr("name")!==undefined)
{
editEle=productname;
}
var UnitPrice=e.container.find("input[name=age]");
if(UnitPrice.attr("name")!==undefined)
{
editEle=UnitPrice;
}
//alert(editEle.attr("name"));
//获取下一个元素
editEle.bind("keydown",function(event){
var keycode=event.which;
var t=grid.current(editEle).parent();
if(keycode==13)
{
grid.editCell($("#grid td:eq(1)"));//t.next();
}
});
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: { id: "id" }
}
},
editable: true
});
var grid=$("#grid").data("kendoGrid");
grid.bind("edit",grid_edit);
</script>
</body>
</html>