Enabling whole table for editing on single button click

Enabling whole table for editing on single button click

ktadrowskiktadrowski Posts: 13Questions: 5Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2023

    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

  • ktadrowskiktadrowski Posts: 13Questions: 5Answers: 0

    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
    
  • ktadrowskiktadrowski Posts: 13Questions: 5Answers: 0

    Hey Kevin,

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • ktadrowskiktadrowski Posts: 13Questions: 5Answers: 0

    Hi Allan,

    I have PM'd you the details.

Sign In or Register to comment.