I changed to the newest version, but still the same problem. Is there a way to fix it by calling method?

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
        }
    });

This might be a better way to export data to XLSX

https://www.jeasyui.com/forum/index.php?topic=8733

Maybe you can use the example from datebox, because dateboxtime extend from datebox

Code:

var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
	text: 'MyBtn',
	handler: function(target){
		alert('click MyBtn');
	}
});
$('#dd').datebox({
	buttons: buttons
});

I found a problem, when I use the "loadData" function in the datagrid then the width of the columns disappears and it makes the minimum width for the columns. I don't know if there is something wrong in the datagrid code because I don't see anything incorrect. A quick fix I found as .datagrid()

Code:

$('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] });

$('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] }).datagrid();

Code:

$('#dg').datagrid({
        columns: [[
            { field: 'nazwa', title: 'Nazwa', width: '160px', halign: 'center' },
            { field: 'opis', title: 'Opis', width: '160px', halign: 'center' },
            { field: 'typ', title: 'Typ', width: '160px', halign: 'center',
                styler: function (value, row, index) {
                    if (!row.idProdukt > 0) {
                        return 'background:#FFC300;';
                    }
                }
            },
            { field: 'nrKatalogowy', title: 'Nr katalogowy', width: '160px', halign: 'center' },
            { field: 'producent', title: 'Producent', width: '120px', halign: 'center',
                styler: function (value, row, index) {
                    if (!row.idProducent > 0) {
                        return 'background:#FFC300;';
                    }
                }
            },
            { field: 'ilosc', title: 'Ilość', width: '50px', halign: 'center', align: 'right' },
            { field: 'jm', title: 'J.m.', width: '50px', halign: 'center',
                styler: function (value, row, index) {
                    if (!row.idJm > 0) {
                        return 'background:#FFC300;';
                    }
                }
            },
            { field: 'cena', title: 'Cena', width: '80px', halign: 'center' },
            { field: 'rabat', title: 'Rabat', width: '50px', halign: 'center', align: 'right',
                formatter: function (value, row, index) {
                    return (value || 0) + '%';
                }
            },
            { field: 'wartosc', title: 'Wartość', width: '80px', halign: 'center' },
            { field: 'waluta', title: 'Waluta', width: '60px', halign: 'center',
                styler: function (value, row, index) {
                    if (!row.idWaluta > 0) {
                        return 'background:#FFC300;';
                    }
                }
            },
        ]],
        idField: 'id',
        rownumbers: true,
        singleSelect: true,
    });

Example of shadow showing while unfolding and closing this window at the same time

Thanks for the quick code improvements for everyone

Can another parameter be added to the "myLoadFilter" function in the "datagrid-filter.js" file without breaking other functions? Because I noticed that when filtering, if I had custom params before, it does not show up in the "onLoadSuccess" function in the datagrid during filtering. I used this option because when downloading data to the datagrid, I could also send other parameters to the inputs at the same time.

Something like this. It starts at 666 line in file.

Code:

data = opts.filterMatcher.call(target, {
	total: state.filterSource.total,
	rows: state.filterSource.rows,
	footer: state.filterSource.footer||[]
});
data.params = data.params; // Here new line of code
data.filterRows = data.rows;

Hi,
Is there a better way to create toolbar with combobox as array then this?

Code:

var toolbar = $('<div style="padding:2px 4px"></div>').appendTo('body');
var db = $('<input>').appendTo(toolbar);
db.datebox();
var cb = $('<input>').appendTo(toolbar);
cb.combobox();

$('#dg').datagrid({
    toolbar:toolbar
})

I have made something like this, but it only works for a non easyui

Code:

{ text: 'Filter: <select id="test"><option value="1">1</option><option value="2">2</option></select>' }

Also in datagrid code i found that every thing in array that is not a "-" it mades as .linkbutton

Thanks for advice 

Works like a glove

Hi,
I would like to add a button that allows the rows to be swapped up and down. I found a post from 2014, but it doesn't work

https://www.jeasyui.com/forum/index.php?topic=3634.0

Snippet of the code

Code:

function dgSwapColumns(from, to) {
      $('#dg).datagrid('moveRow', { from: from, to: to });
}

It gives me this error

Code:

Uncaught TypeError: $.fn.datagrid.methods[_8ee] is not a function
    at $.fn.datagrid (<anonymous>:12356:35)
    at dgSwapColumns ((index):89:30)
    at HTMLAnchorElement.onclick ((index):1:1)

Has anyone encountered such a situation? It works very well on a computer, but if the page is loaded on a tablet/phone it doesn't work so well, it's even hard to work with. For example datagrid, messager is very slow

JSONfn comes with the answer

Code:

$('#datagrid').datagrid({ columns: [JSONfn.parse(JSONfn.stringify(columns))] });

Hi,
How could I solve my problem? I tried eval(); and (function() {})();

Code

Code:

function refreshDatagrid() {
    const columns = $('#datalist').datalist('getRows');
    $('#datagrid').datagrid({ columns: [columns] });
}

Data

Code:

[
    {
        "field": "field_fdqzv",
        "title": "title"
    },
    {
        "field": "field_2agdu",
        "title": "2agdu",
        "_selected": true,
        "width": 200,
        "align": "center",
        "formatter": "function (value, row, index) {\n\treturn value + ' ' + index;\n}",
        "styler": ""
    }
]

Ok, i found it. I needed also title, field was not enough.