using jqxgrid for data entry purpose - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: calculate, column, computed column, DropDownList, editor, focus, grid, jqxDropDownList, jqxgrid, keyboard, mouse, open

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

using jqxgrid for data entry purpose Posts
January 30, 2015 at 6:38 pm using jqxgrid for data entry purpose #66239

ankitkuchhal2000
Participant

I got engaged in teaching the poor children of society , my foundation assign me a task to develop a journal entry form for financial accounting , so that we can teach children to pass journal entries, so I thought to use a grid for data entry purpose. I am using jqxgrid but I need to automate it a little bit,

my code :

<!DOCTYPE html>
<html>
<head>
<title>Accounting Classes Bharat Vikas Parishad</title>
<link type=”text/css” href=”jqwidgets/styles/jqx.base.css” rel=”stylesheet”/>
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var currentcolumn=0;
var currentrow=0;
var url = ‘demos/sampledata/employees.xml’;
var source = {
datatype: “xml”,
datafields: [
{ name: ‘EmployeeID’, map: ‘[EmployeeID]’ },
{ name: ‘FirstName’, map: ‘[FirstName]’ }
],
root: “Employees”,
record: “Employee”,
url:url
};
var dataadapter = new $.jqx.dataAdapter(source,{autoBind: true, async: false});
var dropdownListSource = [];
for (var i = 0; i < dataadapter.records.length; i++) {
dropdownListSource[i] = dataadapter.records[i][‘FirstName’];
}
var tobylistsource=[];
tobylistsource[0]=”TO”;
tobylistsource[1]=”BY”;
$(“#jqxgrid”).jqxGrid({
width: 1000,
//source: dataadapter,
columnsresize: false,
editable: true,
editmode: ‘selectedcell’,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘SrNo.’, sortable: false, filterable: false, editable: false,groupable: false,
draggable: false, resizable: false,columntype: ‘number’, width: 50, pinned: true,
cellsrenderer: function (row, column, value){
return “<div style=’margin:4px;’>” + (value + 1) + “</div>”;
}
},
{ text: ‘To/By’, columngroup: ‘particulars’, width: 50 ,columntype:’dropdownlist’,
initeditor:function(row,cellvalue,editor){
editor.jqxDropDownList({incrementalSearch: true,incrementalSearchDelay: 2000, source: tobylistsource,selectedIndex: 0});
}
},
{ text: ‘Ledger Name’, columngroup: ‘particulars’, width: 450,columntype: ‘dropdownlist’,
initeditor: function (row, cellvalue, editor) {
editor.jqxDropDownList({autoOpen:true,incrementalSearch: true,incrementalSearchDelay: 2000, source: dropdownListSource});
}
},
{ text: ‘Balance’, columngroup: ‘particulars’, width: 150, align: ‘right’, cellsalign: ‘right’ },
{ text: ‘Debit’, columngroup: ‘amounts’, width: 150, align: ‘right’, cellsalign: ‘right’ },
{ text: ‘Credit’, columngroup: ‘amounts’, width: 150, align: ‘right’, cellsalign: ‘right’ }
],
columngroups: [
{ text: ‘Particular’, align: ‘center’, name: ‘particulars’ },
{ text: ‘Amounts’, align: ‘center’, name: ‘amounts’ }
],
ready: function () {
var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, 0, [”]);
$(‘#jqxgrid’).jqxGrid(‘selectcell’, 0,1);
$(“#jqxgrid”).jqxGrid(‘begincelledit’, 0,1);
//$(“#jqxgrid”).jqxGrid(‘focus’);
},
handlekeyboardnavigation:function(event){
var key=event.charCode?event.charCode:event.keyCode ?event.keyCode :0;
if(key==13){
alert(currentcolumn);
return true;
}
}
});
$(“#jqxgrid”).on(‘cellselect’, function (event){
// event arguments.
var args = event.args;
// column data field.
var dataField = event.args.datafield;
// get the column’s text.
//$(‘#jqxGrid’).jqxGrid(‘getcolumnindex’, ‘name’);
var column = $(“#jqxgrid”).jqxGrid(‘getcolumn’, event.args.datafield);
currentcolumn=dataField;
// row’s bound index.
currentrow = event.args.rowindex;
// cell value
var value = args.value;
});
});
</script>

</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”></div>
</div>
</body>
</html>

i need a few things:
1. my first requirement is “No operations with mouse”, that will be secondary
2. dropdownlist to be expand automatically when cell got focus
3. calculate the balance from mysql .phpscript “this part done”, value echo by script shall put in balance column

hope for the positive response.

thanks and regards

February 2, 2015 at 8:17 am using jqxgrid for data entry purpose #66281
Dimitar
Participant
Hello ankitkuchhal2000,

Before answering your questions, I would like to point out that in your case settings to the editors should be applied in the column callback createeditor, not in initeditor. You can read about the differences between them in the jqxGrid API Documentation. Another thing is that you would probably want your columns to have datafields (if you need to have initial information in them).
1. jqxGrid supports keyboard navigation, which is customizable, too.
2. You would have to implement the following (also given is the change from initeditor to createeditor):
```
{ text: 'To/By', columngroup: 'particulars', width: 50, columntype: 'dropdownlist',
 createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
     editor.jqxDropDownList({ incrementalSearch: true, incrementalSearchDelay: 2000, source: tobylistsource, selectedIndex: 0 });
 },
 initeditor: function (row, cellvalue, editor) {
     setTimeout(function () {
         editor.jqxDropDownList('open');
     }, 0);
 }
},
```
  and
```
$("#jqxgrid").on('cellselect', function (event) {
 // event arguments.
 var args = event.args;
 // column data field.
 var dataField = event.args.datafield;
 // get the column's text.
 //$('#jqxGrid').jqxGrid('getcolumnindex', 'name');
 var column = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield);
 currentcolumn = dataField;
 // row's bound index.
 currentrow = event.args.rowindex;
 // cell value
 var value = args.value;

 if (dataField === '1') { // if you set a datafield to the column, replace '1' with its name
     $("#jqxgrid").jqxGrid('begincelledit', 0, dataField);
 }
});
```
3. If the values are calculated by the PHP script, you can set them directly with the method setcellvalue. If you wish the grid to calculate the values, please check out the demo Computed Column to see how this can be achieved.
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.