Adding a row to a DT using row.add()

dynasoft

Hi

I'm trying to move one record from one DT to another but get error :

DataTables warning: table id=tblFileFieldTable - Requested unknown parameter 'Pop3FileCol.FieldName' for row 3, column 4. For more information about this error, please see http://datatables.net/tn/4

Here's my code:

• Model:

    public class MyFilesAdvFileFieldDBModel
    {
        public class Pop3FileCol
        {
            public long id { get; set; }
            public long FieldID { get; set; }
            public int FieldType { get; set; }
            public string FieldCode { get; set; }
            public string FieldName { get; set; }            
        }

        public class Pop3FileAddCol
        {
            public string FieldValue { get; set; }
        }
    }

• Server (works fine, reads the data w/o any error):

HttpRequest formData = System.Web.HttpContext.Current.Request;

using (Database db = new Database(SetGetDbType2, SetGetDbConnection))
{
    editor = new Editor(db, "Pop3FileCol").Model<MyFilesAdvFileFieldDBModel>();
    editor.Field(new Field("Pop3FileCol.id")
        .Set(false)
    );
    editor.Field(new Field("Pop3FileCol.FieldID")
        .SetFormatter(Format.IfEmpty(null))
    );
    editor.Field(new Field("Pop3FileCol.FieldType")
        .SetFormatter(Format.IfEmpty(null))
    );
    editor.Field(new Field("Pop3FileCol.FieldCode")
        .SetFormatter(Format.IfEmpty(null))
    );
    editor.Field(new Field("Pop3FileCol.FieldName")
        .SetFormatter(Format.IfEmpty(null))
    );
    editor.Field(new Field("Pop3FileAddCol.FieldValue")
        .SetFormatter(Format.IfEmpty(null))
    );
    editor.LeftJoin("Pop3FileAddCol", "Pop3FileCol.FieldID", "=", "Pop3FileAddCol.id" );
    editor.TryCatch(false);
    editor.Debug(true);
    editor.Process(formData);
    editor.Data();

• JS (no errors):

    var dataTable = $('#tblFileFieldTable').DataTable( {

        scrollY: '250px',
        scrollCollapse: true,
        paging: false,
        ordering: false,
        info: false,
        bFilter: false,
        order: [[0, 'desc']],
        columnDefs: [
            { 'bVisible': false, 'targets': 0 },
            { 'bVisible': false, 'targets': 1 },
            { 'bVisible': false, 'targets': 3 }
        ],
        dom: 'Bfrtip',
        ajax: {
            url: '/MyFiles/CRUDAdvFileField/',
            type: 'GET',
            async: true,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
        },
        columns: [
            { data: 'Pop3FileCol.id' },
            { data: 'Pop3FileCol.FieldID' },
            { data: 'Pop3FileCol.FieldType' },
            { data: 'Pop3FileCol.FieldCode' },
            { data: 'Pop3FileCol.FieldName' },
            { data: 'Pop3FileAddCol.FieldValue' }
        ],
        select: true,
           buttons: [
        ],
        language: {
            zeroRecords: '@(lblo.lblNoDataFound)',
            loadingRecords: '@(lblo.lblLoading)',
            emptyTable: '@(lblo.lblNoDataFound)'
        }
    });

• Error is when trying to run this code:

    var table3 = $('#tblFileFieldTable').DataTable();

    table3.row.add( [ {
        'Pop3FileCol.id': 0,
        'Pop3FileCol.FieldID': 12,
        'Pop3FileCol.FieldType': 2,
        'Pop3FileCol.FieldCode': "QWAS",
        'Pop3FileCol.FieldName': "AWSE",
        'Pop3FileAddCol.FieldValue': ""
    } ] )
    .draw();

Many thanks.

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

The problem is you are encapsulating the Javascript object (row) you want to add using row.add() into an array. Since row.add() only adds one row it is not expecting an array of rows. You could use rows.add() with that array or remove the object form the array like this:

table3.row.add( {
    'Pop3FileCol.id': 0,
    'Pop3FileCol.FieldID': 12,
    'Pop3FileCol.FieldType': 2,
    'Pop3FileCol.FieldCode': "QWAS",
    'Pop3FileCol.FieldName': "AWSE",
    'Pop3FileAddCol.FieldValue': ""
} )
.draw();

Kevin

dynasoft

Thanks. I tried what you suggest but still get the same error.

kthorngren

Missed it the first time but that structure doesn't build a nested object. You will need something like this:

  table3.row.add( { 'Pop3FileCol': 
                    {
                      'id': 0,
                      'FieldID': 12,
                      'FieldType': 2,
                      'FieldCode': "QWAS",
                      'FieldName': "AWSE"
                    },
                  'Pop3FileAddCol': 
                    {
                      'FieldValue': ""
                    }
                  }
               )
.draw();
} );

Basically it should look the same as the data you get in the JSON response.

Kevin

dynasoft

Many thanks again. That worked.

dynasoft

Hi. One more question. The data needs to go through to the db.
I see on https://editor.datatables.net/reference/api/create() I acn use a create statement. How do I format the data ? If I use this it wont work:

                editor1
                    .create( false )
                    .set( { 'Pop3FileCol':
                        {
                            'id': 0,
                            'myFieldID': colId,
                            'FieldType': colTy,
                            'FieldCode': colCode,
                            'FieldName': colName
                        },
                        'Pop3FileAddCol':
                        {
                            'FieldValue': colValue
                        }
                    } )
                    .submit();

Thank you.

colin

Hi @dynasoft ,

You need to set the Editor field names, see the examples in set(). You didn't include that part of your code, where the Editor instance is initialised, but hopefully that example will get you going,

Cheers,

Colin

dynasoft

Hi

Thanks. Here's what I have:

• editor:

      var editor = new $.fn.dataTable.Editor({
  
          ajax: '/BillingFiles/CRUDAdvFileField/',
          table: '#tblFileFieldTable',
          fields: [ {
                  label: 'id',
                  name: 'id'
              }, {
                  label: 'FieldID',
                  name: 'FieldID'
              }, {
                  label: 'FieldType',
                  name: 'FieldType'
              }, {
                  label: 'FieldCode',
                  name: 'FieldCode'
              }, {
                  label: 'FieldName',
                  name: 'FieldName'
              }, {
                  label: 'FieldValue',
                  name: 'FieldValue'
              }
          ],
          i18n: {
              error: {
                  system: '@(lblo.lblError5)'
              }
          }
      });
  

• problem code:

              editor
                  .create( false )
                  .set( 'id', 0 )
                  .set( 'FieldID', colId )
                  .set( 'FieldType', colTy )
                  .set( 'FieldCode', colCode )
                  .set( 'FieldName', colName )
                  .set( 'FieldValue', colValue )
                  .submit();
  

Visual studio runs to the actionresult method (thats one step better than before) but the new record is not created in the db. Thanks.

allan

That looks like it would be submitting POST data to /BillingFiles/CRUDAdvFileField/. What is that program then doing with the data? Is it using the data in the format Editor submits?

Allan

dynasoft

The JS code takes a record from one table, adds it to the other table and has to add that record to a different table (Pop3FileCol) in the db via /BillingFiles/CRUDAdvFileField/. 3rd step and final is it removes that line from the 1st table (but not from the db so does a call to a DT row().remove() statement),

It currently adds it to the 2nd datatable via row.add() and to the db via editor.create(false).set().submit() but that last call does not work. That's all.

allan

In what way does it not work? Does it not send an Ajax request to the server? Is the server code being called, but its not adding to the database? Is there an error? It would be useful to be able to have a link to the page showing the issue if that is possible please.

Allan

dynasoft

I can do this anytime tomorrow Monday. Thank you.

dynasoft

The code has 2 DTs and 2 db tables.

The user has a 1st DT where they can select a field and add it to the 2nd DT. The 2nd db table is called using CRUDAdvFileField. The user moves the fields across but the code only removes the row from the 1st DT not from the 1st db table. I use a "table1.row().remove().draw();" statement for this.

The JS code has to add that record to the 2nd DT (using "table.row.add()") and to the db table via editor.create().set().submit() which triggers a call to "/BillingFiles/CRUDAdvFileField/".

It currently adds the record to the 2nd DT but whilst the call to CRUDAdvFileField gets triggered, nothing is added to the 2nd table. Hope this clariefies things.

dynasoft

Would remote access via teamviewer be suitable? I can leave the access open at a certain time for you to access. I can do this anytime tomorrow Monday. Let me know. Thank you.

allan

Yes, we could do a TeamViewer session under the quick support packages.

It currently adds the record to the 2nd DT but whilst the call to CRUDAdvFileField gets triggered, nothing is added to the 2nd table. Hope this clariefies things.

A little. It suggests that the error is in CRUDAdvFileField since it is being called but not doing anything. Perhaps you can show me that code? Is it custom code, or are you using our libraries?

Allan

dynasoft

Hi. This issue has been fixed by removing all leftjoins from my code.