Problem: one-to-many join, need to display multiple checkboxes per editing row

mccwebdev

Hello,
I must replicate almost exactly the functionality from this example:
https://editor.datatables.net/examples/advanced/joinArray.html

The only difference is, I'm not using an AJAX call, but rather I assign the JSON that builds the DataTable + Editor in Javascript to a variable (users_data), and then reference that variable as data: users_data when constructing the DataTable.

The incoming JSON data contains and array of objects, and those objects have an array in one of their elements. I must be able to generate checkboxes from the elements of those member arrays.

The JSON used to build the DataTable is like this and is passed from an MVC controller variable:

        [
            {
                "id": 4,
                "name": "James Smith",
                "email": "js@mailinator.com",
                "roles_array": [
                    {
                        "id": 2,
                        "name": "reviewer"
                    }
                ]
            },
            {
                "id": 3,
                "name": "John Doe",
                "email": "jd@mailinator.com",
                "roles_array": [
                    {
                        "id": 3,
                        "name": "chairperson"
                    },
                    {
                        "id": 2,
                        "name": "reviewer"
                    }
                ]
            }
        ]

In the DataTable declaration I have:

        data: users_data,
        select: true,
        columns: [
          { data: 'name' },
          { data: 'email' },
          { data: 'roles_array', render: '[, ].name' }
        ]

And this successfully builds the DataTable that renders in the browser, including the comma separated list of role names inside the cell for 'John Doe'.

The problem starts when I try to edit the cell that contains the comma-separated role information, and in the Editor that comma-separated list must show as checkboxes (checked and unchecked). When I try to invoke the editor on those cells I get the "Unable to automatically determine field from source. Please specify the field name." error.

I configure the Editor this way (like in the example using roles_array[].name for the checkboxes cell):

        table: "#usersTable",
        idSrc: "id",
        fields: [ {
           label: "User Full Name:",
           name: "name"
        }, {
           label: "User Email / Login:",
           name: "email"
        }, {
           label: "User Role:",
           name: "roles_array[].name",
           type: "checkbox"
        }]

If I were to add to the DataTable declaration editField: "roles_array[].name" the error disappears, but the inline bubble editor box shows up empty. If I use the full row editing button, this field also comes up empty with no checkboxes.

What am I doing wrong? Could anyone assist please?

allan

Use the columns.editField option in the DataTable configuration to tell DataTables which field it is in the table that you want it to edit.

By default it will automatically match fields.name to columns.data. If that doesn't match (as is the case here) then columns.editField can be used to fill in the missing step.

Allan

mccwebdev

Hi Allan,
Right, so I did that as I indicated above, but the bubble pop-up shows up empty when I do it. It looks like the edit feature is not sourcing the content for the bubble properly - in this case the list of user roles. Could you provide some instruction as to what I must do to populate the bubble?
Thank you.