Column width bug with loadData to datagrid

EasyUI Forum

September 14, 2025, 06:47:13 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Column width bug with loadData to datagrid

Pages: [1]

« previous next »

Author

Topic: Column width bug with loadData to datagrid (Read 7590 times)

Wojak

Jr. Member

Posts: 63

Column width bug with loadData to datagrid

« on: February 17, 2024, 03:45:44 PM »

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


	Logged

jarry

Administrator
Hero Member

Posts: 2298

Re: Column width bug with loadData to datagrid

« Reply #1 on: February 21, 2024, 12:05:57 AM »

Please look at this code, it 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">
	<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>
		$(function () {
			$('#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
			});
		})
		function loadData() {
			$('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] });
		}
	</script>
</head>

<body>
	<button onclick="loadData()">LoadData</button>
	<table id="dg"></table>

</body>

</html>


	Logged

Pages: [1]

« previous next »