Recent Posts

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

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

Hello,
I would like to add to the datagrid the ability to edit after two clicks, I am already able to do this. But also I would like to add that when I start to edit a row then after I click enter or escape it is to save the row or cancel the row. Is there such a possibility?
Also will this only work on one datagrid or many?

Hi Jarry

Yes, have already used nbsp;

But the solution in onLoadSuccess is much better

thanks

Improve the 'formatRow' function to let it display tooltip on empty cells.

Code:

function formatRow(value, row) {
if (row.udgaaet == '1') {
return '<div title="Udgået">' + (value||'&nbsp;') + '</div';
} else {
return value;
}
}

If you really refuse to use the 'formatter' function, please try this code to display the tooltip on the specified rows.

Code:

$('#dgList').datagrid({
columns: [[
{ field: 'metaServer', width: 200, title: 'Meta Server'},
{ field: 'objektNavn', width: 250, title: 'Objekt navn'},
{ field: 'jobNavn', width: 500, title: 'Job navn'},
{ field: 'filNavn', width: 300, title: 'Fil navn'},
{ field: 'lastfiledate', width: 120, title: 'Senest ændret'},
{ field: 'dato_udgaaet', width: 120, title: 'Udgået'},
]],
onLoadSuccess: function (data) {
const opts = $(this).datagrid('options');
data.rows.forEach((row, index) => {
if (row.udgaaet == '1') {
opts.finder.getTr(this, index).attr('title', 'Udgået');
}
})
}
});