EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Wojak on October 08, 2024, 06:24:19 AM



Title: Problem with scrollview rendering rows
Post by: Wojak on October 08, 2024, 06:24:19 AM
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');
});


Title: Re: Problem with scrollview rendering rows
Post by: jarry on October 11, 2024, 07:57:59 PM
Please look at this example https://www.jeasyui.com/demo/test/test20.html. It works fine.