EasyUI Forum
October 15, 2024, 11:55:50 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > Datagrid data column width broken
Pages: [1]
« previous next »
  Print  
Author Topic: Datagrid data column width broken  (Read 2480 times)
Wojak
Jr. Member
**
Posts: 59


View Profile WWW Email
« 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
Code:
$('#example').datagrid();


Reinitialized works fine

My code for datagrid
Code:
$('#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
        }
    });
Logged
jarry
Administrator
Hero Member
*****
Posts: 2276


View Profile Email
« Reply #1 on: April 18, 2024, 01:38:02 AM »
This example works fine.
Code:
<!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>
Logged
Wojak
Jr. Member
**
Posts: 59


View Profile WWW Email
« Reply #2 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?
Logged
Wojak
Jr. Member
**
Posts: 59


View Profile WWW Email
« Reply #3 on: September 23, 2024, 05:10:14 AM »
I found that on a working example, you add the CSS code file inline. And then the class is one of.
Code:
<div class="datagrid-cell hor-tcerp-zlozenia_datagrid-cell-c8-object_name"><span>Object Name</span><span class="datagrid-sort-icon"></span></div>

Code:
.datagrid-header-rownumber{width:29px}
.datagrid-cell-rownumber{width:29px}
.hor-tcerp-zlozenia_datagrid-cell-c8-kompletacja{width:34px}
.hor-tcerp-zlozenia_datagrid-cell-c8-item_id_revision{width:249px}
.hor-tcerp-zlozenia_datagrid-cell-c8-object_name{width:599px;}
.hor-tcerp-zlozenia_datagrid-cell-c8-object_type_pl{width:139px}
.hor-tcerp-zlozenia_datagrid-cell-c8-qty{width:39px}
.hor-tcerp-zlozenia_datagrid-cell-c8-qty_total{width:69px}
.hor-tcerp-zlozenia_datagrid-cell-c8-ilosc_pozycji{width:69px}
.hor-tcerp-zlozenia_datagrid-cell-c8-ilosc_pozycji_kompletnych{width:69px}
.hor-tcerp-zlozenia_datagrid-cell-c8-procent_kompletacji{width:69px}
.hor-tcerp-zlozenia_datagrid-cell-c8-procent_kompletacji_wydanych{width:69px}
.hor-tcerp-zlozenia_datagrid-cell-c8-procent_zamontowanych{width:69px}
.hor-tcerp-zlozenia_datagrid-cell-c8-planowana_data_kompletacji{width:99px}
.hor-tcerp-zlozenia_datagrid-cell-c8-opcje{width:79px}

But in the datagrid that doesn't work, no such file is created and those class names from the columns are not there
Code:
<div class="datagrid-cell hor-tcerp-pozycje-kompletacja-dg_datagrid-cell-c10-object_name" style="text-align: center;"><span>Object name</span><span class="datagrid-sort-icon"></span></div>

I have an inline file with “c9”, but already another one that should be with “c10” is empty, there is only the following in it

Code:
.datagrid-header-rownumber{width:29px}
.datagrid-cell-rownumber{width:29px}
Logged
Wojak
Jr. Member
**
Posts: 59


View Profile WWW Email
« Reply #4 on: October 11, 2024, 03:05:08 PM »
I found a code that calls
Code:
_83b.ss.clean();
it removes the styles for width in datagrid "<style>" and never creates a new styles for columns it lefts only two classes
Code:
.datagrid-header-rownumber and .datagrid-cell-rownumber

After a reload by using
Code:
$('#dg').datagrid('clearSelections').datagrid('removeFilterRule').datagrid('reload');
it loses the styles

If i comment it out it works fine, i wonder why Huh

Im using version 1.10.19
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!