Editor datatable field - how to use data from the row?

Editor datatable field - how to use data from the row?

washuit-iammwashuit-iamm Posts: 133Questions: 55Answers: 2

My table data looks like so:

[
    {
        "Id": 1,
        "Name": "Parent 1",
        "Children": [ { "Id": 1, "Name", "Bob" }, { "Id": 2, "Name", "Alice" } ]
    },
    {
        "Id": 2,
        "Name": "Parent 2",
        "Children": [ { "Id": 3, "Name", "Jane" }, { "Id": 2, "Name", "Alice" } ]
    },
]

I am trying and failing to display this as read only info in my table:

 var editor = new $.fn.dataTable.Editor({
     // ...
     fields: [
         {
             "name": "Name",
             "label": "Name",
         },
         {
             label: 'Children:',
             name: 'Children',
             type: 'datatable',
             config: {
                 columns: [
                     {
                         title: 'Id',
                         data: 'Id'
                     },
                     {
                         title: 'Name',
                         data: 'Name'
                     }
                 ]
             }
         },

I have read the docs and I assume Editor is looking for my data in the "options" server-side payload. If I wanted to provide this data I could use config.data I assume, but I am not sure how to supply it with the selected table row as I dont have access to the table instance at that time either. I cant seem to find any options that take a function that give me the editor data and the table API.

Answers

  • washuit-iammwashuit-iamm Posts: 133Questions: 55Answers: 2
    edited May 20

    This worked, but is there a way to do this through config instead of API?

    .on('initEdit', function () {
        // Show fields hidden by initCreate.
        editor.show();
    
        // Todo, hide Children on multi-edit...
    
        const modifier = editor.modifier();
        const data = table.row(modifier).data();
        const childrenDataTable = editor.field("Children").dt();
    
        for (var i = 0; i < data.Children.length; i++) {
            childrenDataTable.row.add(data.Children[i]);
        }
    
        childrenDataTable.draw();
    })
    
  • allanallan Posts: 63,642Questions: 1Answers: 10,492 Site admin

    No - there is no option to do that as a configuration option. It would need to be done with the API as you have done.

    You could use rows.add() (plural) rather than needing to use your own for loop.

    Allan

Sign In or Register to comment.