Enabling whole table for editing on single button click

ktadrowski

Hello,

I am using Editor with DataTables.
I have two main requirements
1. I want to edit whole table together, just like an Excel sheet. I found out that we can enable editing on complete row, but couldn’t find it for complete table. Is it possible?
2. I also want to mimic the Excel similar functionality of drag and copy into multiple cells. Is that also possible on the same table?

I don’t have any code base as such to demonstrate, but I am using the Vue Js library for the same.

Thanks

kthorngren

Sounds like you want to use the KeyTable and Autofill extensions. There are a few examples here that might be of interest.
https://editor.datatables.net/examples/extensions/index.html

Kevin

ktadrowski

Thanks for the reply. I tried using the extensions together. The editor is working fine with editing individual cells. But when I try to drag a cell and autofill, the cells shows they’ve updated by glowing yellow for a second but cell isn't populating the dragged value in it.

I have made a quick video of it. You can check that here https://awesomescreenshot.com/video/15902640?key=e64d58b388c9d13a374391924df735b5

I am also queuing my changes as per https://datatables.net/blog/2017-10-24

Here is my code block with editor options and Datatable extensions
What could be the reason for autofill not working?

    const editOpts = {
      table: table.value,
      idSrc: 'timekeeper_id',
      fields: [
        {
          name: "timekeeper_name",
        },
        {
          name: "timekeeper_classification",
          type: "select",
          ipOpts: timekeeperClassificationConst,
        },
        {
          name: "timekeeper_pqe",
        },
        {
          name: "hourly_rates",
        },
      ],
    }; // Editor configuration


    dtEditor = new Editor(editOpts); // local editor
    dtEditorAjax = new Editor($.extend(true, {
      ajax() {
        submitResp();
      }
    }, editOpts)); // ajax editor to submit buch of data together


    const options = {
      dom: 'Bftip', // add this to display buttons at the top of the table
      autoFill: {
        columns: ':not(:first-child)',
        editor: dtEditor
      },
      keys: {
        columns: ':not(:first-child)',
        editor: dtEditor,
      },
      buttons: {
        buttons: [{
          text: 'Save changes',
          action: function (e, dt) {
            dtEditorAjax
              .edit(changedRows, false)
              .submit();

            dt.table().buttons().disable();
          },
          enabled: false,
        }, {
          text: 'Discard changes',
          action: function (e, dt) {
            // Clear out the saved rows and disable the save / discard buttons

            dt.table().clear().draw();
            dt.table().rows.add(timkeeperRecords.value).draw();
            dt.table().buttons().disable();
          },
          enabled: false,
        },
        ],
      },
    }; // DataTables extentions aka options

    const columns = [
      { data: 'timekeeper_id', title: 'Timekeeper ID', },
      { data: 'timekeeper_name', title: 'Timekeeper name', className: 'editable', },
      { data: 'timekeeper_classification', title: 'Classification', },
      { data: 'timekeeper_pqe', title: 'PQE', className: 'editable', },
      { data: 'hourly_rates', title: 'Hourly rate', className: 'editable', },

    ]; // Datatables columns

ktadrowski

Hey Kevin,

Can you please check this one? ☝️ I am still stuck at it.
@kthorngren

allan

Hi,

Thanks for the video. I've just taken a look and I can visually see the problem, but the code you have above looks okay as far as I can tell at the moment. Can you give me a link to your page so I can debug it please? The AutoFill in this example appears to be working okay, so I'd need to be able to debug your page. You can PM me a link if you don't want to make it public.

Regards,
Allan

ktadrowski

Hi Allan,

I have PM'd you the details.