Recent Posts

Hi jarry


Thanks. Works fine.

Any way to revert it without reload ??

Here is the extended method to achieve this functionality.

Code:

$.extend($.fn.datagrid.methods, {
	setSameColumnWidth: function (jq) {
		return jq.each(function () {
			const dg = $(this);
			let colWidth = 0;
			const fields1 = dg.datagrid('getColumnFields',true);
			const fields2 = dg.datagrid('getColumnFields',false);
			const fields = fields1.concat(fields2);
			fields.forEach(field => {
				const opt = dg.datagrid('getColumnOption', field);
				if (colWidth < opt.width) {
					colWidth = opt.width;
				}
			});
			fields.forEach(field => {
				const opt = dg.datagrid('getColumnOption', field);
				opt.width = colWidth;
				opt.boxWidth = colWidth - opt.deltaWidth;
			});
			dg.datagrid('fixColumnSize').datagrid('fitColumns');
		})
	}
})

Usage example:

Code:

$('#dg').datagrid('setSameColumnWidth')

One solution

var colWidth = 0;
$.each(scrollCols, function(index, element) {
     if ($('#'+element.id).width() > colWidth){colWidth = $('#'+element.id).width()}
});
$.each(scrollCols, function(index, element) {
   $('#'+element.id).css('width',colWidth);
});

BUT, is there a better way to do it ??

HI.

Can't find anythig about this.

Have a datagrid with dynamic columns. How can i set the width to alle columns depending on the longest header title.

Jesper

Please look at this example https://www.jeasyui.com/demo/test/test20.html. It works fine.

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

Code:

_83b.ss.clean();

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

Im using version 1.10.19

Hello,
I have again noticed a problem with the Scrollview in Datagrid. I have two datagrids with scrollview on the site. During the first load up, the rows do not render and after getData it shows any data, but not the “rows” are empty. Checking the item, I see that cells are generated, but they are empty. The POST method to the server renders the variable “rows”. After reload it shows correctly.

Code:

$(function () {
    $('#hor-premia-projektowa').datagrid({
        url: 'p/.../select-premia-projektowa.php',
        columns: [[
            { field: 'data_wprowadzenia', title: 'Data wprowadzenia', width: '120px', sortable: true, halign: 'center' },
            { field: 'wprowadzajacy', title: 'Wprowadzający', width: '100px', sortable: true, halign: 'center' },
            { field: 'realizacja_numer', title: 'Realizacja', width: '80px', sortable: true, align: 'center' },
            { field: 'nazwisko', title: 'Nazwisko', width: '100px', sortable: true, halign: 'center' },
            { field: 'imie', title: 'Imie', width: '100px', sortable: true, halign: 'center' },
            { field: 'kwota', title: 'Kwota', width: '90px', sortable: true, halign: 'center', align: 'right',
                formatter: function (value, row, index) {
                    if (value > 0) {
                        return new Intl.NumberFormat('pl-PL', { useGrouping: true, style: 'currency', currency: 'PLN' }).format(value);
                    } else {
                        return '';
                    }
                }
            },
            { field: 'opis', title: 'Opis', width: '430px', sortable: true, halign: 'center' },
            { field: 'zatwierdzona', title: 'Zatwierdzona', width: '80px', sortable: true, align: 'center',
                formatter: function (value, row, index) {
                    switch (value) {
                        case '1':
                            return '<i style="color:green;" class="fa fa-check fa-xl"></i>';
                        case '2':
                            return '<i style="color:red;" class="fa fa-times fa-xl"></i>';
                        default:
                            return '';
                    }
                }
            },
            { field: 'data_zatwierdzenia', title: 'Data zatwierdzenia', width: '120px', sortable: true, halign: 'center' },
            { field: 'zatwierdzajacy', title: 'Zatwierdzający', width: '100px', sortable: true, halign: 'center' },
            { field: 'data_wyplaty', title: 'Data naliczenia', width: '100px', sortable: true, align: 'center' },
            { field: 'wyplacona', title: 'Wypłacona', width: '80px', sortable: true, align: 'center',
                formatter: function (value, row, index) {
                    switch (value) {
                        case '1':
                            return '<i style="color:inherit;" class="fa fa-coins fa-xl"></i>';
                        default:
                            return '';
                    }
                }
            },
            { field: 'wyplacajacy', title: 'Wypłacający', width: '100px', sortable: true, halign: 'center' },
        ]],
        idField: 'id',
        singleSelect: true,
        rownumbers: true,
        // showFooter: true,
        pageSize: 100,
        remoteFilter: true,
        filterDelay: 1000,
        remoteSort: true,
        view: scrollview,
        onDblClickRow: function (index, row) {
            $(this).datagrid('selectRow', index);
            horPremiaProjektowaWinOpen(row.id);
        }
    }).datagrid('enableFilter');

    $('#hor-premia-projektowa-budzet').datagrid({
        url: 'p/.../select-premia-projektowa-budzet.php',
        columns: [[
            { field: 'realizacja_numer', title: 'Realizacja', width: '120px', sortable: true, halign: 'center' },
            { field: 'budzet', title: 'Budżet', width: '120px', sortable: true, halign: 'center', align: 'right',
                formatter: function (value, row, index) {
                    return new Intl.NumberFormat('pl-PL', { useGrouping: true, style: 'currency', currency: 'PLN' }).format(value);
                }
            },
            { field: 'wykorzystany_budzet', title: 'Wykorzystany budżet', width: '120px', sortable: true, halign: 'center', align: 'right',
                formatter: function (value, row, index) {
                    return new Intl.NumberFormat('pl-PL', { useGrouping: true, style: 'currency', currency: 'PLN' }).format(value);
                }
            },
            { field: 'roznica', title: 'Różnica', width: '120px', sortable: true, halign: 'center', align: 'right',
                formatter: function (value, row, index) {
                    return new Intl.NumberFormat('pl-PL', { useGrouping: true, style: 'currency', currency: 'PLN' }).format(value);
                }
            },
            { field: 'data_modyfikacji', title: 'Data modyfikacji', width: '160px', sortable: true, align: 'center' },
            { field: 'data_wprowadzenia', title: 'Data wprowadzenia', width: '160px', sortable: true, halign: 'center' },
        ]],
        idField: 'id_realizacja',
        singleSelect: true,
        rownumbers: true,
        pageSize: 100,
        remoteFilter: true,
        filterDelay: 1000,
        remoteSort: true,
        clientPaging: false,
        view: scrollview,
        onDblClickRow: function (index, row) {
            $(this).datagrid('selectRow', index);
            horPremiaProjektowaBudzetWinOpen(row.id_realizacja);
        }
    }).datagrid('enableFilter');
});

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}

Works like a charm

Please listen to the 'onBeginEdit' event and then bind additional events on each editors.

Code:

$('#dg').datagrid({
	onBeginEdit: function (index, row) {
		const editors = $(this).datagrid('getEditors', index);
		editors.forEach((editor) => {
			const t = $(editor.target);
			if (t.hasClass('textbox-f')) {
				t.textbox('textbox').on('keydown', (e) => {
					if (e.which == 13) {	// enter
						// do your save action
					} else if (e.which == 27) {	// escape
						$('#dg').datagrid('cancelEdit', index)
					}
				})
			}
		})
	}
})