Title: TreeGrid Drag&Drop And Editable Functionality Problem
Post by: drecco on September 23, 2017, 12:28:04 PM
Hi all, I want to use drag&drop extesion of treegrid with editable feature. But when I use drag&drop extension, I cannot edit the row values. Below is my code example. Anybody face this problem? Or any idea about the problem ? Any help wiil be appreciated. Regards. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Editable TreeGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="treegrid-dnd.js"></script> </head> <body> <h2>Editable TreeGrid</h2> <p>Select one node and click edit button to perform editing.</p> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">Edit</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">Cancel</a> </div> <table id="tg" class="easyui-treegrid" title="Editable TreeGrid" style="width:700px;height:250px" data-options=" iconCls: 'icon-ok', rownumbers: true, animate: true, collapsible: true, fitColumns: true, url: 'treegrid_data2.json', method: 'get', idField: 'id', treeField: 'name', showFooter: true "> <thead> <tr> <th data-options="field:'name',width:180,editor:'text'">Task Name</th> <th data-options="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th> <th data-options="field:'begin',width:80,editor:'datebox'">Begin Date</th> <th data-options="field:'end',width:80,editor:'datebox'">End Date</th> <th data-options="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">Progress</th> </tr> </thead> </table> <script type="text/javascript"> $('#tg').treegrid({ onLoadSuccess: function (row) { $(this).treegrid('enableDnd', row ? row.id : null); } }); function formatProgress(value){ if (value){ var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>' '</div>'; return s; } else { return ''; } } var editingId; function edit(){ if (editingId != undefined){ $('#tg').treegrid('select', editingId); return; } var row = $('#tg').treegrid('getSelected'); if (row){ editingId = row.id $('#tg').treegrid('beginEdit', editingId); } } function save(){ if (editingId != undefined){ var t = $('#tg'); t.treegrid('endEdit', editingId); editingId = undefined; var persons = 0; var rows = t.treegrid('getChildren'); for(var i=0; i<rows.length; i++){ var p = parseInt(rows[i].persons); if (!isNaN(p)){ persons += p; } } var frow = t.treegrid('getFooterRows')[0]; frow.persons = persons; t.treegrid('reloadFooter'); } } function cancel(){ if (editingId != undefined){ $('#tg').treegrid('cancelEdit', editingId); editingId = undefined; } } </script>
</body> </html>
Title: Re: TreeGrid Drag&Drop And Editable Functionality Problem
Post by: jarry on September 23, 2017, 05:27:47 PM
You should avoid to drag a editing row. Please try this code: $('#tg').treegrid({ onBeforeDrag: function(row){ if (row.id == editingId){ return false; } }, onLoadSuccess: function (row) { $(this).treegrid('enableDnd', row ? row.id : null); } });
Title: Re: TreeGrid Drag&Drop And Editable Functionality Problem
Post by: drecco on September 24, 2017, 01:31:00 PM
Hi jarry,
It works. Thanks!
I also want to ask a couple of questions;
https://www.jeasyui.com/forum/index.php?topic=5644 blog post denotes that drag&drop extension doesn't support multiple selection. Does any improvement that drag&drop extension support multiple selection ?
I also examined https://www.jeasyui.com/tutorial/datagrid/datagrid12.php this blog post. When I click Edit button, the formatter don't triggered and 'Save' and 'Cancel' buttons don't appear. Any comment about this subject ?
Best Regards.
Title: Re: TreeGrid Drag&Drop And Editable Functionality Problem
Post by: jarry on September 24, 2017, 11:44:50 PM
Please look at this example https://www.jeasyui.com/tutorial/datagrid/datagrid12_demo.html. It works fine.
|