How to use multiSet()?

richard.carree.com@gmail.com

Link to test case: https://editor.datatables.net/examples/simple/simple.html

Error messages shown:

Uncaught TypeError: Cannot read property 'length' of undefined
    at Editor.<computed>.multiGet (dataTables.editor.min.js:21)
    at String.<anonymous> (dataTables.editor.min.js:21)
    at Function.each (jquery-3.5.1.js:381)
    at Editor.<computed>.<computed> [as multiGet] (dataTables.editor.min.js:21)
    at <anonymous>:1:8

Description of problem:

I'd like to add rows programmatically in JavaScript using multiSet(). However, after following the simple example, when I add in the browser console editor.multiGet(); as a starting point, I get this error. I mention that the issue is even reproducible on the example page. I have the same issue locally with my downloaded trial version of Editor.

allan

How are you calling the function? Is the form already in edit / create mode?

When I load up that example and select a row (id row_5) I can do:

editor.multiSet({
  first_name: {
    row_5: 'Allan'
  }
})

to set the value.

I'm wondering if you haven't yet called the create() method (or edit() if editing)?

Allan

richard.carree.com@gmail.com

Thanks Allan for your quick reply. If I directly execute after loading the example page the multiset function you mentioned, I get:

dataTables.editor.min.js:1 Uncaught TypeError: Cannot read property 'push' of undefined
    at set (dataTables.editor.min.js:1)
    at String.<anonymous> (dataTables.editor.min.js:1)
    at Function.each (jquery-3.5.1.js:387)
    at Editor.<computed>.multiSet (dataTables.editor.min.js:1)
    at Object.<anonymous> (dataTables.editor.min.js:1)
    at Function.each (jquery-3.5.1.js:387)
    at Editor.<computed>.<computed> [as multiSet] (dataTables.editor.min.js:1)
    at <anonymous>:1:8

To avoid this error, I have to click on the New button (and close the Create new entry modal window) before executing the function.

I recorded the situation: https://recordit.co/m7cr94ShLG

I'm wondering if you haven't yet called the create() method (or edit() if editing)?

You're most probably right. I didn't see the info about that in the doc. Could you link the section about how to do it programmatically?

richard.carree.com@gmail.com

I noticed that if I use editor.create(false); before editor.multiSet({first_name: {row_5: 'Allan'}});, the error does not appear anymore but the table is still not updated.

How to use multiSet() in the console of the simple example?

kthorngren

Are you using submit() to submit the data to the server?

You probably don't want to define the row ID when creating a new record as that is something that should be done automatically by the server.

Try these commands to add a record:

editor.create(false);

editor.field( 'first_name' )
    .multiSet( 0, 'Allan' );
editor.field( 'last_name' )
    .multiSet( 0, 'Jardine' );
    
editor.submit();

Kevin

richard.carree.com@gmail.com

Oh yes, it works! Thank you Kevin.

By any chance would you be able to give an example with editor.edit(false);? I can't figure out how to edit for example the row with Extn. 1042

kthorngren

The first question is how are you wanting to find that row programmatically?

The second question is are you wanting to edit just the single row or are you still wanting the ability to select multiple rows and use multiSet()?

I'll assume you still want the ability to programmatically edit multiple rows. The e-edit() docs state that the first parameter, which is required, are the item(s) you want to edit. You have these options for passing one or more rows:

Rows: This is the default mode of operation and if anything other than a plain object is passed in, the value is used as a row-selector to select the rows to edit. This can be table row nodes, a jQuery selector or row indexes. Please refer to the DataTables row-selector for full information on this data type.

For this example we will use the row indexes for editing and for choosing the rows. See the row-selector to see the options you have to programmatically select the rows.

The row ID of the row with Extn. 1042 is row_41 and the index is 41. You can look at the Ajax Load tab of the example to find this. Use the following to get two rows:

var rows = $('#example').DataTable().rows([40, 41]).indexes();

Use editor.edit(rows, false); to put then in edit mode.

Optionally you can use editor.multiGet(); to see the rows for editing.

Use the following to change the first name of the user for Extn 1042:

editor.multiSet( 'first_name', {
    "row_41": "Alpha1"
        } );

Optionally you can use editor.multiGet(); to see the updated data.

Then use editor.submit(); to submit to the server. Use the browser's network inspector to see that both rows are sent to the server for updating and the server responds with the updated two rows.

Kevin

richard.carree.com@gmail.com

Thank you Kevin for your very clear and quality answer.