Answers

• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  December 2022

  At the moment no - however, it is a very good point. Let me think on this a bit - the UI interaction in that example is most certainly broken as it stands. I'm not sure I can make what you are looking for happen, but it shouldn't be possible for the user to get it into that state in the first place.

  Allan
• bblumedtr Posts: 13Questions: 6Answers: 0

  December 2022

  Thanks, Allan.

  I'm working on a workaround.

  Do you see any problems with the following plan?

  Button for creating a new site brings up a form. This form:
  1. does not show the users table.
  2. Has a custom button labeled "create site and add people"

  The custom button's action is:
  1. Submit the form.
  2. Capture the newly created row-id
  3. Select this row.
  4. Trigger the edit menu which does include the users table.

  I've tried implementing it, however custom button's actions don't seem to have access to their datatable (the documentation suggests they should). The following code results in the console logging "undefined" for dt, node, and config. Do you have any suggestions?

    orders_table = $('#example').DataTable( 
          { 
          ajax: "/api_orders",
          dom: "Bfrtip",
          columns: [
              { data: 'orders.order_number' },
              { data: 'contacts.name' },
              { data: 'lineitems', render: "[, ].lineitem_type" }
          ],
          select: true,
          buttons: [
              { extend: "create", editor: orders_editor, 
              formButtons: [
                      { text: 'Create and add lineiteems', action: function (e, dt, node, config ) {
                          console.log(e)// prints the jquery event
                          console.log(dt) // prints undefined
                          console.log(node)// prints undefined
                          console.log(config)// prints undefined
                          this.submit( function (json_response) {
                              console.log(json_response) // prints the full json object
                              var row_id = json_response["data"]["0"]["DT_RowId"]
                              row_id = '#row-' + row_id.slice(4)
  
                              // this generates an error: Uncaught TypeError: Cannot read properties of undefined (reading 'row')
                              dt.row( row_id ).select();
                              console.log("submitted")
  
                              // TODO: trigger the edit menu:
                              // dt.button( 1 ).trigger();
  
                            }, null, null, false );
  
                          // this.close(); 
                      } },
                      { text: 'Cancel', action: function () { this.close(); } }
                  ] 
              
              },
              { extend: "edit",   editor: orders_editor },
              { extend: "remove", editor: orders_editor },
          ]
          },
      );
  
• kthorngren Posts: 21,349Questions: 26Answers: 4,955

  December 2022 edited December 2022

  I've tried implementing it, however custom button's actions don't seem to have access to their datatable

  I answered this in your other thread.

  @allan is the person to answer about your approach.

  Kevin
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  December 2022

  Kevin's comment in your other thread on this topic is spot on the money as always.

  With regard to your approach, yes, I think that is fine. There might be a fair bit of nesting code, but I think that will do it okay as long as you can reference the right tables.

  Allan