Title: Datagrid data column width broken
Post by: Wojak on April 17, 2024, 05:35:04 AM
In strange cases the datagrid becomes unresponsive. You cannot change the column width, the width of the data columns changes. If i use $('#example').datagrid(); Reinitialized works fine My code for datagrid $('#example').datagrid({ url: 'example.php, columns: [[ { field: 'opcje', title: 'Opcje', width: '60px', align: 'center', formatter: function (value, row, index) { if (row.editing) { const s = '<a href="javascript:void(0)" onclick="exampleSave(' + row.id + ')"><i class="fa-solid fa-floppy-disk fa-xl" style="color:black;"></i></a> '; const c = '<a href="javascript:void(0)" onclick="exampleCancel(' + row.id + ')"><i class="fa-solid fa-rotate-left fa-xl" style="color:black;"></i></a>'; return s + c; } else { return '<a href="javascript:void(0)" onclick="exampleEdit(' + row.id + ')"><i class="fa-solid fa-pen-to-square fa-xl" style="color:black;"></i></a>'; } } }, { field: 'wydzial_dzial', title: 'Koszty osobowe', width: '200px', halign: 'center' }, { field: 'stawka', title: 'Stawka godz. [PLN]', width: '120px', halign: 'center', align: 'right', editor: { type: 'numberbox', options: { min: 0, precision: 0, decimalSeparator: ',' } } }, { field: 'stawka_0', title: 'Stawka godz. + ogolnozakładowa [PLN]', width: '120px', halign: 'center', align: 'right' }, { field: 'stawka_narzut', title: 'Stawka narzut [PLN]', width: '120px', halign: 'center', align: 'right' }, ]], idField: 'id', rownumbers: true, singleSelect: true, onBeforeEdit: function (index, row) { row.editing = true; $(this).datagrid('refreshRow', index); }, onAfterEdit: function (index, row) { row.editing = false; $(this).datagrid('refreshRow', index); }, onCancelEdit: function (index, row) { row.editing = false; $(this).datagrid('refreshRow', index); }, queryParams: { id: __id } });
Title: Re: Datagrid data column width broken
Post by: jarry on April 18, 2024, 01:38:02 AM
This example works fine. <!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title>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"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.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 = [ {"id":1,"opcje":"opcje1","wydzial_dzial":"wydzial_dzial1"}, {"id":2,"opcje":"opcje2","wydzial_dzial":"wydzial_dzial2"}, {"id":3,"opcje":"opcje3","wydzial_dzial":"wydzial_dzial3"}, {"id":4,"opcje":"opcje4","wydzial_dzial":"wydzial_dzial4"}, {"id":5,"opcje":"opcje5","wydzial_dzial":"wydzial_dzial5"} ] $(function () { $('#example').datagrid({ // url: 'example.php', data: data, columns: [[ { field: 'opcje', title: 'Opcje', width: '60px', align: 'center', formatter: function (value, row, index) { if (row.editing) { const s = '<a href="javascript:void(0)" onclick="exampleSave(' + row.id + ')"><i class="fa-solid fa-floppy-disk fa-xl" style="color:black;"></i></a> '; const c = '<a href="javascript:void(0)" onclick="exampleCancel(' + row.id + ')"><i class="fa-solid fa-rotate-left fa-xl" style="color:black;"></i></a>'; return s + c; } else { return '<a href="javascript:void(0)" onclick="exampleEdit(' + row.id + ')"><i class="fa-solid fa-pen-to-square fa-xl" style="color:black;"></i></a>'; } } }, { field: 'wydzial_dzial', title: 'Koszty osobowe', width: '200px', halign: 'center' }, { field: 'stawka', title: 'Stawka godz. [PLN]', width: '120px', halign: 'center', align: 'right', editor: { type: 'numberbox', options: { min: 0, precision: 0, decimalSeparator: ',' } } }, { field: 'stawka_0', title: 'Stawka godz. + ogolnozakładowa [PLN]', width: '120px', halign: 'center', align: 'right' }, { field: 'stawka_narzut', title: 'Stawka narzut [PLN]', width: '120px', halign: 'center', align: 'right' }, ]], idField: 'id', rownumbers: true, singleSelect: true, onBeforeEdit: function (index, row) { row.editing = true; $(this).datagrid('refreshRow', index); }, onAfterEdit: function (index, row) { row.editing = false; $(this).datagrid('refreshRow', index); }, onCancelEdit: function (index, row) { row.editing = false; $(this).datagrid('refreshRow', index); } }); }) </script> </head>
<body> <table id="example" style="width:700px;height:250px" data-options="singleSelect:true"></table>
</body>
</html>
Title: Re: Datagrid data column width broken
Post by: Wojak on April 18, 2024, 03:13:33 AM
I changed to the newest version, but still the same problem. Is there a way to fix it by calling method?
|