How to populate bubble editor form with grid data?

How to populate bubble editor form with grid data?

RSerflingRSerfling Posts: 3Questions: 1Answers: 0

I am having an issue with getting the bubble editor form to populate with row data. I see in the example that the fields current value is presented in the form. I seem to have everything configured the same as the example but the form is blank for each field. Any ideas?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,353Questions: 1Answers: 10,444 Site admin
    Answer ✓

    Are you able to give me a link to the page showing the issue so I can take a look and debug it please? If that isn't possible can you show your Javascript initialisation for the DataTable, Editor and a sample of the data being loaded please.

    Allan

  • RSerflingRSerfling Posts: 3Questions: 1Answers: 0

    Here is what I got.

    $('#head').DataTable({
      dom: "Bfrtip",
      data: [{
        "Code": "H",
        "CompanyId": "Fake1",
        "Edi810HedId": 26,
        "InvoiceDate": "\/Date(1460782800000)\/",
        "InvoiceNum": "900005",
        "InvoiceTotal": 49.00,
        "Matched": false,
        "MisMatchedReason": "Not Found 1",
        "Notes": "Test Note 1",
        "PackSlip": "3",
        "PoNum": 23,
        "ShippedDate": "\/Date(1457244000000)\/",
        "SupplierNum": 1
      }, {
        "Code": "H",
        "CompanyId": "Fake2",
        "Edi810HedId": 27,
        "InvoiceDate": "\/Date(1460782800000)\/",
        "InvoiceNum": "900006",
        "InvoiceTotal": 50.00,
        "Matched": false,
        "MisMatchedReason": "Not Found 2",
        "Notes": "Test Note 2",
        "PackSlip": "25-1",
        "PoNum": 25,
        "ShippedDate": "\/Date(1457244000000)\/",
        "SupplierNum": 2
      }],
      columns: [{
        data: "Edi810HedId",
        visible: false
      }, {
        data: "SupplierNum"
      }, {
        data: "PoNum"
      }, {
        data: "InvoiceNum"
      }, {
        data: "InvoiceDate",
      }, {
        data: "InvoiceTotal"
      }, {
        data: "PackSlip"
      }, {
        data: "ShippedDate",
      }, {
        data: "Matched",
        visible: false
      }, {
        data: "MisMatchedReason"
      }, {
        data: "Notes"
      }]
    });
    
    var editor = new $.fn.dataTable.Editor({
      ajax: {
        "url": '',
        "type": "POST"
      },
      table: "#head",
      idSrc: 'Edi810HedId',
      fields: [{
        label: "PO:",
        name: "ponum"
      }, {
        label: "Pack Slip:",
        name: "packslip"
      }, {
        label: "Notes:",
        name: "notes"
      }, {
        label: "Match (Invoice manually created):",
        name: "matched",
        type: "checkbox",
        separator: "|",
        options: [{
          label: '',
          value: 1
        }]
      }]
    });
    
    $('#head').on('dblclick', 'tbody td', function(e) {
      editor.bubble(this, ['ponum', 'packslip', 'notes', 'matched'], {
        title: 'Edit',
        submit: 'all'
      });
    });
    
  • allanallan Posts: 63,353Questions: 1Answers: 10,444 Site admin
    Answer ✓

    Javascript is case sensitive, so:

    data: "PoNum"

    and:

    name: "ponum"

    do not refer to the same property. Without a sample of the data I can't say which one it should be, but they should be consistent.

    Allan

  • RSerflingRSerfling Posts: 3Questions: 1Answers: 0

    ugh...silly mistake. Thanks for looking at it for me!

This discussion has been closed.