Title: SUBGRID ROWEDITING: how to copy date from one column in editmode to next column?
Post by: rannacher on April 25, 2023, 09:53:57 AM
Hi, I want to copy - during row editing - a date from one column to another (and maybe change date during copy as required). With documentation I got to add a button in the datebox field and also an additional button in bottom of the datebox calendar. See screenshot attached. Just I cannot get, that on pressing one of these to set the actual date or anything else to the next datebox column... please for help! Calculating 2 columns example did not help as I want the copy to happen on a button click and not on onChange. https://www.jeasyui.com/tutorial/datagrid/datagrid15.php Thanks and BR Michael! what I tried... {field:'client_date',title:'Termin Kunde',width:150,align:'center',... {field:'ops_date',title:'Planung OPS',width:120,align:'center',...
// --------------------------------------------------------------------------------- // not working code in handler for icon-ok // --------------------------------------------------------------------------------- buttons: datebox_buttons, required:false, formatter: myformatter, parser: myparser, currentText: 'Heute', closeText: 'Schließen', icons:[ { iconCls:'icon-ok', handler: function(e) { var ed = ddv.datagrid('getEditor', {index:editIndex,field:'client_date'}); var val = ed.target.datebox('getValue',''); alert(val); var ed = ddv.datagrid('getEditor', {index:editIndex,field:'ops_date'}); // not working ( $(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target) ).datebox('setValue',val); } }, { iconCls:'icon-clear', handler: function(e) { // SET FOCUS ON 'OWN' COLUMN WORKS.... var ed = ddv.datagrid('getEditor', {index:editIndex,field:'client_date'}); ed.target.datebox('setValue',''); ed.target.datebox('setText',''); ( $(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target) ).select(); ( $(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target) ).focus(); } } ]
// --------------------------------------------------------------------------------- // not working code in datebox_buttons // --------------------------------------------------------------------------------- var datebox_buttons = $.extend([], $.fn.datebox.defaults.buttons); datebox_buttons.splice(1, 0, { text: 'CONFIRM', handler: function(target) { alert('click MyBtn'); var ed = $(this).datagrid('getEditor', {index:editIndex,field:'ciient_date'}); var val = ed.target.datebox('setValue',''); alert( val );
var ed = SubDG.datagrid('getEditor', {index:editIndex,field:'ops_date'}); ed.target.datebox('setValue',val); ed.target.datebox('setText',val); ( $(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target) ).select(); ( $(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target) ).focus(); } });
Title: Re: ROWEDITING: how to copy date from one column in editmode to next column?
Post by: jarry on April 25, 2023, 07:15:43 PM
Please refer to this example. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>Row Editing in DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script> var data = [ { subpart: 'subprt1', termin: '03/04/2023' }, { subpart: 'subprt2', termin: '03/05/2023' }, { subpart: 'subprt3', termin: '03/06/2023' }, { subpart: 'subprt4', termin: '03/07/2023' } ] $(function () { var editIndex = undefined; var dg = $('#dg').datagrid({ columns: [[ { field: 'subpart', title: 'Subpart', width: 100, editor: 'textbox' }, { field: 'termin', title: 'Termin Kunde', width: 200, editor: { type: 'datebox', options: { icons: [{ iconCls: 'icon-ok', handler: function (e) { var val = $(e.data.target).datebox('getValue'); var ed = dg.datagrid('getEditor', { index: editIndex, field: 'planung' }); $(ed.target).datebox('setValue', val); } }] } } }, { field: 'planung', title: 'Planung OPS', width: 200, editor: 'label', editor: 'datebox' } ]], data: data, singleSelect: true, onClickCell: function (index, field) { dg.datagrid('endEdit', editIndex); if (editIndex != index) { dg.datagrid('selectRow', index).datagrid('beginEdit', index); var ed = dg.datagrid('getEditor', { index: index, field: field }); if (ed) { ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus(); } editIndex = index; } } }) }) </script> </head>
<body> <table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto"> </table>
</body>
</html>
Title: Re: ROWEDITING: how to copy date from one column in editmode to next column?
Post by: rannacher on April 26, 2023, 02:42:43 AM
Thanks for help, I understand and get this working with a normal datagrid, just I use an editable subgrid for which I need this and it seems I simply dont get the reference to this editable subgrid right in the code. Whatever I put here instead of dg like ddv, $(this)... etc I dont get the editor correctly and hence the setValue is not working. Once again thanks and Greetings from Vienna! Michael. field: 'termin', title: 'Termin Kunde', width: 200, editor: { type: 'datebox', options: { icons: [{ iconCls: 'icon-ok', handler: function (e) { var val = $(e.data.target).datebox('getValue'); var ed = dg.datagrid('getEditor', { index: editIndex, field: 'planung' }); $(ed.target).datebox('setValue', val); } }] } }
|