shivavalkyre
Newbie
Posts: 39
|
|
« on: April 17, 2018, 09:45:38 AM » |
|
Hi anybody, please help me for code Set Focus in edatagrid editor when click add New Row. in my case combine between combogrid and text as editor. <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: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},
]], onShowPanel: onShowPanel, onHidePanel: onHidePanel, }}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">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;
function onShowPanel() { cbg = $(this); } function onHidePanel() { cbg = null; } $('#dg').edatagrid({ onAdd: function(index,row){ var ed1 =$(this).datagrid('getEditor', { index: index, field: 'pcn' }); var ed2 =$(this).datagrid('getEditor', { index: index, field: 'unit' }); var ed3 =$(this).datagrid('getEditor', { index: index, field: 'qty' }); (ed1.target).focus(); //$(this).edatagrid('editCell', {index: index,field: 'pcn'}); //setKeydown([ed1.target,ed2.target,ed3.target]); } }); 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); return $(target).data('combogrid') ? $(target).combogrid('grid') : $(target); }
document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) { var keyCode = e.keyCode; if(keyCode==78) { var dg = $('#dg'); dg.edatagrid('addRow');
} else if (keyCode==67) { $('#dg').edatagrid('cancelRow'); }else{ //alert(keyCode); } } </script> </body> </head> Thanks
|
|
« Last Edit: April 17, 2018, 10:04:37 AM by shivavalkyre »
|
Logged
|
|
|
|
shivavalkyre
Newbie
Posts: 39
|
|
« Reply #1 on: April 17, 2018, 10:30:54 AM » |
|
my edit code is: <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: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},
]],
}}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">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">
$('#dg').edatagrid({ onAdd: function(index,row){ var ed1 =$(this).datagrid('getEditor', { index: index, field: 'pcn' }); var ed2 =$(this).datagrid('getEditor', { index: index, field: 'unit' }); var ed3 =$(this).datagrid('getEditor', { index: index, field: 'qty' }); $(ed1.target).focus(); //$(this).edatagrid('editCell', {index: index,field: 'pcn'}); //setKeydown([ed1.target,ed2.target,ed3.target]); }, onEdit:function(index,row){ var ed1 =$(this).datagrid('getEditor', { index: index, field: 'pcn' }); var ed2 =$(this).datagrid('getEditor', { index: index, field: 'unit' }); var ed3 =$(this).datagrid('getEditor', { index: index, field: 'qty' }); $(ed1.target).focus(); } });
</script> </body> </head>
|
|
|
Logged
|
|
|
|
shivavalkyre
Newbie
Posts: 39
|
|
« Reply #2 on: April 17, 2018, 10:50:31 AM » |
|
Finally Find solution: <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' }); //$(ed1.target).focus(); var t = $(ed1.target).combogrid('textbox').focus(); t.focus(); } }); }); </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},
]],
}}">Product</th> <th field="unit" width="30" editor="{type:'validatebox',options:{readonly:false}}">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>
</body> </head>
|
|
|
Logged
|
|
|
|
|