Data Entry App with Kendo grid and angularjs // code using kendo ui native functions - kendo-grid

Question

i use kendo grid for a data entry form. it have a grid with four columns. a single row have four input text boxes (one for each column ) for data entry. the first time the grid load it should have a single row with four inputs, with the cursor focused to first input. when user enter some data and press 'enter' key, the focus should move to next cell input in the same row. when you press enter in the last column input, a new row should be added to the grid and the data entered should be saved on the grid. focus should go to new row's first input. all cells should be editable and navigatable with enter key.
Can some one please give me a solution for this in angularjs/ javascript? Im using angularjs with kendo grid.
//-> Grid Start
var d2 = [
{ ConnectionReference: '001', ContractNumber: '', Amount: '', ReferenceNumber: '' },
{ ConnectionReference: '002', ContractNumber: '', Amount: '', ReferenceNumber: '' },
{ ConnectionReference: '003', ContractNumber: '', Amount: '', ReferenceNumber: '' },
{ ConnectionReference: '004', ContractNumber: '', Amount: '', ReferenceNumber: '' }];
var dataSource2 = new kendo.data.DataSource({
//data: data,
transport: {
read: function (e) {
e.success(d2);
},
update: function (e) {
e.success();
},
create: function (e) {
var item = e.d2;
item.Id = d2.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
'ConnectionReference': { editable: true, type: "string" },
'ContractNumber': { editable: true, type: "string" },
'Amount': { editable: true, type: "number" },
'ReferenceNumber': { editable: true, type: "string" }
}
}
}
});
var grid2 = $("#desgrid").kendoGrid({
dataSource: dataSource2,
scrollable: true,
navigatable: true,
toolbar: ["save", "cancel", "create"],
columns: [
{
field: "ConnectionReference",
// attributes: {
// "class": "colclass"
// "navi-text": ""
// },
// headerTemplate: 'Connection Reference',
// template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
},
{
field: "ContractNumber",
// attributes: {
// "class": "colclass"
// "navi-text": ""
// },
// headerTemplate: 'Contract Number',
// template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
},
{
field: "Amount",
// attributes: {
// "class": "colclass"
// "navi-text": ""
// },
// headerTemplate: 'Amount',
// template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
},
{
field: "ReferenceNumber",
// attributes: {
// "class": "colclass"
// "navi-text": ""
// },
// headerTemplate: 'Reference Number',
// template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
}
],
editable: {
createAt: "bottom"
},
navigatable: true
//edit: function onEdit(e) {
// var grid = this;
// var cellIndex = e.container.index();
// var nextCell = e.container.next().eq(cellIndex);
// if (nextCell) {
// e.container.find("input").on("keypress", function (e) {
// if (e.which === 13) {
// $(this).trigger("change");
// grid.closeCell();
// grid.editCell(nextCell);
// }
// });
// }
//},
}).data("kendoGrid");
grid2.tbody.on('keydown', function (e) {
if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')) {
grid2.addRow();
}
})
// grid2.tbody.on('keydown', function (e) {
// var key = e.keyCode ? e.keyCode : e.which;
// if (key === 13) {
// var focusedElement = $(e.target);
// var nextElement = focusedElement.parent().parent().parent().next();
// var nextElement = focusedElement.next();
// if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')) {
// if (nextElement.find('input').length > 0) {
// grid2.addRow();
// }
//}
// }
// })
$scope.submitForm = function () {
// $scope.alertMessage = new Message("0", "NIC format is invalid!");
//var fun = $scope.callback();
//var d = $scope.dgGridAddPaymentsEnter.data();
//d.splice(0, 1);
//fun($scope.params.Qty, $scope.dgGridAddPaymentsEnter.data());
}