//-> Grid Sample data for demo purposes
var s1 = [];
var d2 = [];
//@@@@@@@@@@@@@@@@@@@@@@@@@@
//-> Grid Start
var configAddPaymentsEnter = {};
configAddPaymentsEnter.resizable = true
configAddPaymentsEnter.sortable = true;
configAddPaymentsEnter.navigatable = true;
configAddPaymentsEnter.pageable = false;
//{
// input: true,
// numeric: false
// };
configAddPaymentsEnter.editable =
{
createAt : 'bottom'
};
// configAddPaymentsEnter.addParams = { position: "last" };
configAddPaymentsEnter.columns = [
{
field: "ConnectionReference",
attributes: {
"navi-text": ""
},
headerTemplate: 'Connection Reference',
template: '<input ng-keydown="AA(this,$event)" type ="text" ng-model="dataItem.ConnectionReference" class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
, aggregates: ["count"], footerTemplate: "No of Records: #=count-1#"
},
{
field: "ContractNumber",
attributes: {
"navi-text": ""
},
headerTemplate: 'Contract Number',
template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.ContractNumber" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
},
{
field: "Amount",
attributes: {
"navi-text": ""
},
headerTemplate: 'Amount',
template: '<input ng-keydown="AA(this,$event)" kendo-numeric-text-box type ="text" class="k-fill text-right aa" ng-model="dataItem.Amount" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
, aggregates: ["sum"], //footerTemplate: function (s1) { return "Total Amount: " + s1["dataItem.Amount"].sum; }
footerTemplate: "Total Amount: #=+sum#"
},
{
field: "ReferenceNumber",
attributes: {
"navi-text": ""
},
headerTemplate: 'Reference Number',
template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.ReferenceNumber" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
width: "130px"
}
//,
//{
// field: "RowIndex",
// attributes: {
// "navi-text": ""
// },
// headerTemplate: 'RowIndex',
// template: '<input ng-keydown="AA(this,$event)" type ="text" class="k-fill text-right aa" ng-model="dataItem.RowIndex" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/" />',
// width: "130px"
//}
];
configAddPaymentsEnter.scrollable = true;
configAddPaymentsEnter.dataSource = new kendo.data.DataSource({
data: [s1],
aggregate: [{ field: "ConnectionReference", aggregate: "count" },
{ field: "Amount", aggregate: "sum" }],
schema: {
model: {
id: "ID",
fields: {
'ConnectionReference': { editable: true, type: "number" },
'ContractNumber': { editable: true, type: "number" },
'Amount': { editable: true, type: "number" },
'ReferenceNumber': { editable: true, type: "number" }
//,
// 'RowIndex': { editable: false, type: "number" }
}
}
},
pageSize: 5000,
});
$scope.dgGridAddPaymentsEnter = new DataGrid();
$scope.dgGridAddPaymentsEnter.options(configAddPaymentsEnter);
$scope.Init = function (arg) {
$scope.dgGridAddPaymentsEnter.Init(arg);
};
$scope.Init = function (arg) {
$scope.dgGridAddPaymentsEnter.Init(arg);
};
$scope.submitForm = function () {
// var fun = $scope.callback();
// var d = $scope.dgGridAddPaymentsEnter.data();
// d.splice(0, 1);
// fun($scope.params.Qty, $scope.dgGridAddPaymentsEnter.data());
}
/////////////////////////////////////////////////////////////////////////////
$scope.AA = function (row, e) {
var key = e.keyCode ? e.keyCode : e.which;
if (key === 13) {
var focusedElement = $(e.target);
// var nextElement = focusedElement.parent().next();
var nextElement = focusedElement.closest('td').next();
//if (nextElement[0] == undefined) {
// // s1.push({ 'ConnectionReference': '1', 'ContractNumber': '2', 'Amount': '3', 'ReferenceNumber': '4' });
// var nextElement = focusedElement.closest('tr').next().children().eq(0);//next row's first column;
// nextElement.find('input').focus();
//}
if (nextElement.find('input').length > 0) {
setTimeout(function () {
nextElement.find('input').focus();
}, 10);
} else if ((nextElement.next().length) == 0) {
// if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')) {
setTimeout(function () {
var index = 0;
$('.aa').eq(index).focus();
// var firstRow = $scope.dgGridAddPaymentsEnter.tbody.find('tr:first');
}, 10);
// var s1 = [];
s1 = $scope.dgGridAddPaymentsEnter.data();
$scope.dgGridAddPaymentsEnter.data([]);
var s = row.dataItem;
// var rowCounter = s1.length;
// console.log(rowCounter);
//s1.push({ 'ConnectionReference': '', 'ContractNumber': '', 'Amount': '', 'ReferenceNumber': '' });
s1.push({ 'ConnectionReference': s.ConnectionReference, 'ContractNumber': s.ContractNumber, 'Amount': s.Amount, 'ReferenceNumber': s.ReferenceNumber });
$scope.dgGridAddPaymentsEnter.data(s1);
// var addGrid = $scope.dgGridAddPaymentsEnter.data()
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="dgAddPaymentsEnterId" tabindex="0"
kendo-grid="dgAddPaymentsEnter1"
ng-init="Init('dgAddPaymentsEnterId')"
k-options="dgGridAddPaymentsEnter.options()">
</div>https://i.stack.imgur.com/wkyxb.png the sample ui
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.
