submit all edits at once with button

jmccolgan93

hey,

So I'm building an inventory system. One of the components is a popup window with an editor table that allows the user to select items to add to their lists.

currently when a user adds a quantity of an item line I'm having Editor send a request to the server (and send back the same data) so that the quantity field updates. Obviously, that's VERY slow when you are trying to add lots of items to a list.

QUESTION:

What's the best/fastest way to handle this? is there a way to have a field value be changed and then when the user is done they hit a button and send all the changed lines to the backend? should I be using the multi editing api? i kinda got stuck at figuring out how to have a field updated without having to send it to the server first.

jmccolgan93

update 2...

I'm slowly solving my own issue. seems to always happen after I go asking for help... lol

I added " drawType: 'none' " to the inline editor part and it seems to be handling it better.

is there any downside to doing this?

popstock_DT.on("click", "tbody td:first-child", function (e) {
  editor2.inline(this, {
    drawType: 'none',
    submit: "allIfChanged",
    onBlur: "submit",
  });
});

jmccolgan93

well, my first update got deleted some how? that was weird... here's my editor/table setup for this. if I comment out the Ajax portion it will update locally. it was still VERY slow to update with over 5000 rows in the table but I fixed that in my second update. now on to submitting all the edited rows with a button press.

    var popstock_DT = popstocktable.DataTable({
      ajax: "/migtrack/popstock/data/" + $(".currentlist").text(),
      columns: [
        { data: "amount", name: "amount"},
        { data: "name", name: "name"},
        { data: "available", name: "available"},
        { data: "owned", name: "owned"},
        { data: "mastercatergory", name: "mastercatergory"},
        { data: "catergory", name: "catergory"},
      ],
      columnDefs: [
        {
            targets: [0,2,3],
            width: '4%',
            orderable: false,
        },
        {
            targets: [1],
        },
        {
            targets: [5],
            visible: false,
        },
        {
            targets: [4],
            visible: false,            
        },
      ],
      layout: {
        top: {
          searchPanes: {
              className: 'mx-2',
              columns: [4],
              orderable: false,
              initCollapsed: true,
              show: true,
              layout: 'columns-1'
          },

      },
        topEnd: ["search"],
      },
      order: [[9, "asc"]],
      info: false,
      ordering: true,
      paging: false,
      scrollCollapse: true,
      scrollY: '50vh',
      lengthMenu: [
        [10, 25, 50, -1],
        [10, 25, 50, "All"],
      ],
      rowCallback: function (row, data, displayNum, displayIndex, dataIndex) {
        if (data.type == 1) {
          $(row).addClass("bg-label-warning");
        }
        if (data.type == 2) {
          $(row).addClass("bg-label-info");
        }
      },
      drawCallback: function () {
        $(".dt-select2").select2();
      },
    });

    editor2 = new DataTable.Editor({
      // ajax: {
      //   url: `/migtrack/popstock/data/${$(".currentlist").text()}`,
      //   contentType: "application/json",
      //   data: function (d) {return JSON.stringify(d);},
      //   success: function (json) {},
      // },
      fields: [
        { data: "DT_RowId", name: "DT_RowId"},
        { data: "name", name: "name"},
        { data: "amount", name: "amount"}

      ],
      table: "#popstocktable",
    });

    editor2.on('edit', function(e, json, data, id) {
      var row = popstock_DT.row( "#" + id ).data();
      console.log(row);
      });
  }

  popstock_DT.on("click", "tbody td:first-child", function (e) {
    editor2.inline(this, {
      submit: "allIfChanged",
      onBlur: "submit",
    });
  });

allan

Have you seen this blog post about queuing changes in Editor and then batch submitting them using the multi-row editing interface? That sounds more or less like what you are looking for.

Allan