submit all edits at once with button

submit all edits at once with button

jmccolgan93jmccolgan93 Posts: 19Questions: 11Answers: 0

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.

Answers

  • jmccolgan93jmccolgan93 Posts: 19Questions: 11Answers: 0
    edited July 25

    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",
      });
    });
    
  • jmccolgan93jmccolgan93 Posts: 19Questions: 11Answers: 0

    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",
        });
      });
    
  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin

    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

Sign In or Register to comment.