Editor slow rendering for edit multiple rows

khrm

Hi there,

i have a datatable with 7 columns and 2000 rows. When i edit all 2000 rows together, the editor tooks long (12sec) to init the editor.

In Console Performace, there are multiple a.multiSet, that takes each about 200ms and multiValueCheck about 100ms.
Do someone have a workaround to deal with editing lot of rows at the same time?

In Datatables, i configured:
"ordering": false,
"orderClasses": false,
"deferRender": true,

Ticket https://datatables.net/forums/discussion/64849 didn't help me

khrm

A temporarily workaround would be to disable multi-edit and build another solution for editing this 2000 lines at once.

Or do have someone a bugfix or plugin-addon for this ?

khrm

I just deactivated things like fnDrawCallback, order. But still have 13.000ms

table = $("#list").DataTable({
    data: antwort_Array,
    columns: [
        {
            data: '',
            defaultContent: "", 
            'checkboxes': {
                'selectRow': true
            }   
        },
        {
            name: 'nr',
            title: "Nr",
            "visible": false,
            "searchable": false,
            data: '',
            render: function (data, type, row, meta) {
                row.rowid = meta.row;
                return meta.row;
            },
        },
        {
            title: "Projektname",
            data: "projektname",
            name: "projektname",
            visible: false,
        },
        {
            title: "Gültig von",
            data: "gueltigVon",
            name: "gueltigVon",
            width: "180px",
            "visible": false,
            className: "dateColumn",
            render: function (data, type, row, meta) {
                if (data == "0000-00-00 00:00:00" || data == null || data == 0) return '<i class="icon icon-calendar mr-1 mt-1 align-middle" aria-hidden="true"></i>';
                return moment(data).format('YYYY-MM-DD HH:mm') ;
            },
        },
        {
            title: "Gültig bis",
            data: "gueltigBis",
            name: "gueltigBis",
            width: "180px",
            "visible": false,
            className: "dateColumn",
            render: function (data, type, row, meta) {
                if (data == "2098-12-31T23:00:00.000Z" || data == null || data == 0) return '<i class="icon icon-calendar mr-1 mt-1 align-middle" aria-hidden="true"></i>';

                return moment(data).format('YYYY-MM-DD HH:mm');
            },
        },
        
        {
            title: "Aktiv",
            data: "aktiv",
            name: "aktiv",
            "visible": true,
            "searchable": false,
            render: function (data) {
                if (data == "1") {
                return "Ja"
                }
                return "Nein";
            }
        },
        
    ],
    'columnDefs': [
        {
            'targets': 0,
            'checkboxes': true
        }
    ],
    // order: [],
    // timeout: 2000,
    "ordering": false,
    "orderClasses": false,
    deferRender: true,
    responsive: false,
    scrollX: true,
    pageLength: 10,
    paging: true,
    pagingType: "numbers",
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Alle"]],
    processing: true,
    language: {
        loadingRecords: "Lade Datensatz...",
        sSearch: "",
        searchPlaceholder: "Suche...",
        processing: '<div class="icon icon-spinner">Lade Daten</div>',
        lengthMenu: "Zeige _MENU_ Einträge je Seite",
        zeroRecords: "+ Neues Eintrag hinzufügen",
        info: "Seite _PAGE_ von _PAGES_",
        infoEmpty: "Keine Einträge vorhanden",
        infoFiltered: "(gefiltert aus _MAX_ Einträgen)",
        paginate: {
            previous: "Zurück",
            next: "Weiter",
            first: "Anfang",
            last: "Ende",
        },
    },
    // fnDrawCallback: function (oSettings) {
    //  //### Events
    //  if (oSettings.aoData.length <= oSettings._iDisplayLength) {
    //      $(oSettings.nTableWrapper).find(".dataTables_paginate").hide();
    //  } else {
    //      $(oSettings.nTableWrapper).find(".dataTables_paginate").show();
    //  }
    // },
    info: true,
    dom: '<".table-actions py-1"Bf>t<".table-info"<".d-flex flex-wrap expBtns"l>p>',
    'select': {
        'style': 'multi'
    },
    buttons: [
        { extend: 'create', editor: editor, text: 'Neu' },
        { extend: 'edit', editor: editor, text: 'Bearbeiten' },
        { extend: 'remove', editor: editor, text: 'Löschen', "className": 'btn btn-delete ' },
    ],
});

allan

Hi,

Apologies for the delay in getting back to you on this! Thank you for taking the time to write this up. I've got a patch for this performance issue which will make a big difference for you I think. I can package it up and drop you a PM with the updated script if you like? Or it will ship in the next release of Editor, which shouldn't be too far away.

Regards,
Allan

khrm

Great! You can send me PM, so that i can fix this temporarily

allan

PM sent

Allan

khrm

Loadtime reduced from 12s to 200ms :-)

colin

Nice! That's an impressive speed up!

Colin