Title: datagrid with combogrid as editor keyevent (keypress) detect
Post by: shivavalkyre on April 16, 2018, 11:21:48 PM
Hi, please help me i have problem with edatagrid with combogrid as editor, editor work perfect but until now i can not capture keypress on combogrid, anyone can explain to me.. Thanks here my code: <html> <head> <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <link rel="stylesheet" type="text/css" href="../themes/color.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/jquery.edatagrid.js"></script> <link rel="stylesheet" href="../css/w3.css"> <style> .w3-button {width:100px;height:30px;} </style>
</head> <body> <table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true"> <thead> <tr> <th field="pcn" width="50" editor="{type:'combogrid',options:{required:true,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[ {field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],onSelect: onSelectGrid, onShowPanel: onShowPanel, onHidePanel: onHidePanel,keyHandler: $.extend({}, $.fn.combogrid.defaults.keyHandler, { enter: function(e){ onSelectGrid(); } })}}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:true}}">Unit</th> <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr> </thead> </table> <div align="right" style="margin:10 0 0"> <a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a> </div> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div>
<script type="text/javascript"> var cbg=null; var tb=null; var pono; function getValue(){ pono = $('#reffpono').combogrid('getValue');
} function onBeforeLoad(param) {
var opts = $(this).datagrid('options'); opts.url = '../control/get_product_receive.php?pono='+pono; } function onSelectGrid(index,record) { if(cbg) { var cb = cbg; var opts =cb.combogrid('options'); var grid = cb.combogrid('grid'); var row= grid.datagrid('getSelected'); // alert (row.price); var dgs = $('#dg'); var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected')); // var index = $('#dgs').datagrid('getSelected'); // alert (index); // alert (row.price);
var editors = dgs.datagrid('getEditors', index); $(editors[1].target).val(row.unit); //$(editors[2].target).val(row.OS); //$(editors[3].target).val(row.price); //$(editors[4].target).val(row.price); var e = jQuery.Event("keydown"); e.which = 13; // # Some key code value $("input").trigger(e); e.which = 9; // # Some key code value $("input").trigger(e); e.which = 9; // # Some key code value $("input").trigger(e);
} } function onBeginEdit(index,row){ }
function onShowPanel() { cbg = $(this); } function onHidePanel() { cbg = null; } $('#dg').edatagrid({ onEndEdit:function(index,row){ var edQty = $(this).datagrid('getEditor', { index: index, field: 'qty' }); //row.productname = $(ed.target).combobox('getText'); //var qty = $(edQty.target).text('getValue'); //alert (qty);
} }); document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) { var keyCode = e.keyCode; if(keyCode==78) { //alert("You hit the enter key."); var dg = $('#dg'); dg.edatagrid('addRow'); var index = dg.edatagrid('getRows').length-1; // the editing row index var ed = dg.edatagrid('getEditors', index)[0]; // get the first editor $(ed.target).focus(); } else if (keyCode==67) { //alert (keyCode); //alert("Oh no you didn't."); $('#dg').edatagrid('cancelRow'); }else{ //alert(keyCode); } } </script> </body> </head>
Title: Re: datagrid with combogrid as editor keyevent (keypress) detect
Post by: shivavalkyre on April 17, 2018, 03:24:33 AM
i think it is difference with what i mean, at this case i need blank edatagrid with combogrid as editor for new record, at my code i give keydown(keyboard) detection for add new data and cancel and my code has work, but my code has several problem:
1. can not focus on editor when add new row (blinking cursor at editor) 2. need combogrid editor keydown (enter key) detection
Thanks
Title: Re: datagrid with combogrid as editor keyevent (keypress) detect
Post by: shivavalkyre on April 17, 2018, 12:51:15 PM
Closed <html> <head> <link rel="stylesheet" type="text/css" href="../themes/metro-gray/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../css/demo.css"> <link rel="stylesheet" type="text/css" href="../themes/color.css"> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/jquery.edatagrid.js"></script> <link rel="stylesheet" href="../css/w3.css"> <script type="text/javascript"> $(function(){ $('#dg').edatagrid({ onAdd: function(index,row){ var ed1 =$(this).datagrid('getEditor', { index: index, field: 'pcn' }); var t = $(ed1.target).combogrid('textbox').focus(); t.focus(); }, onBeginEdit:function(index){ var ed1 = $(this).edatagrid('getEditor',{index:index,field:'pcn'}); var ed2 = $(this).edatagrid('getEditor',{index:index,field:'unit'}); var ed3 = $(this).edatagrid('getEditor',{index:index,field:'qty'}); setKeydown([ed1.target,ed3.target]); } });
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) { var keyCode = e.keyCode; if(keyCode==78) { //alert("You hit the enter key."); var dg = $('#dg'); dg.edatagrid('addRow'); var index = dg.edatagrid('getRows').length-1; // the editing row index var ed = dg.edatagrid('getEditors', index)[0]; // get the first editor $(ed.target).focus(); } else if (keyCode==67) { //alert (keyCode); //alert("Oh no you didn't."); $('#dg').edatagrid('cancelRow'); }else{ //alert(keyCode); } } }); </script> <style> .w3-button {width:100px;height:30px;} </style>
</head> <body> <table id="dg" style="width:100%;height:250px" data-options="toolbar:'#toolbar', pagination:true, idField:'id', rownumbers:true, fitColumns:true, singleSelect:true"> <thead> <tr> <th field="pcn" width="50" editor="{type:'combogrid',options:{required:false,panelWidth:580,idField:'pcn',textField:'pcn',mode:'remote',url:'../control/get_product.php',columns: [[ {field:'pcn',title:'pcn',width:100},{field:'product',title:'product',width:250},{field:'unit',title:'unit',width:50},
]],
onSelect: onSelectGrid, onShowPanel: onShowPanel,onHidePanel: onHidePanel,onChange: onChange,
}}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:true}}">Unit</th> <th field="qty" width="50" editor="{type:'validatebox',options:{required:true}}">Qty</th>
</tr> </thead> </table> <div align="right" style="margin:10 0 0"> <a href="#" id="btnSave" class="easyui-linkbutton c5" style="width:120px;height:35px">Save Transaction</a> </div> <div id="toolbar"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onClick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onClick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a> </div>
<script> function onShowPanel() { cbg = $(this); } function onHidePanel() { cbg = null; } function onSelectGrid(index,record) { if(cbg) { var cb = cbg; var opts =cb.combogrid('options'); var grid = cb.combogrid('grid'); var row= grid.datagrid('getSelected'); // alert (row.price); var dgs = $('#dg'); var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));
var editors = dgs.datagrid('getEditors', index); $(editors[1].target).val(row.unit);
} } function onChange(newValue, oldValue) { if(cbg) { var opts = cbg.combogrid('options'); grid=cbg.combogrid('grid'); var row= grid.datagrid('getSelected'); var dgs = $('#dg'); var index = dgs.datagrid('getRowIndex', dgs.datagrid('getSelected'));
var editors = dgs.datagrid('getEditors', index); $(editors[1].target).val(row.unit); } } function setKeydown(tt){ for(var i=0; i<tt.length; i++){ var t = tt[i]; getInputBox(t).bind('keydown',{i:i},function(e){ if (e.keyCode == 13){ var next = getInputBox(tt[e.data.i+1]||tt[0]); next.focus(); } }); } } function getInputBox(target){ return $(target).data('textbox') ? $(target).textbox('textbox') : $(target); } </script> </body> </head>
|