Nested Editor - tables aren't properly linked

Vincent.P

Hi @allan

In our current project, we would like to use the nested editor option in order to allow editing multiple tables in a single interface.

However, we are facing the following issue:
- the data retrieved by the table is correct, we get everything from the server-side, but whenever we try to update the data, the editor doesn't seem to send the id to link between the 2 tables.

const sectorEditor = new $.fn.dataTable.Editor({
        ajax: {
            url: '/Sector',
            data: function (d) {
                d.type = 'sector_edit';
            },
            type: 'POST',
        },
        idSrc: "sector.id",
        fields: [
            {
                "label": "ID",
                "name": "sector.id",
                "type": "hidden"
            },
            {
                "label": "Name",
                "name": "sector.name",
                "type": "text"
            }
        ]
    });

const editor = new $.fn.dataTable.Editor({
    ajax: {
        url: '/Sector',
        data: function (d) {
            d.type = 'overview';
        },
        type: 'POST',
        headers: {
            'RequestVerificationToken': $('input:hidden[name="__RequestVerificationToken"]').val()
        }
    },
    table: '#resultTable',
    idSrc: "sector_priority.id",
    fields: [            
        {
            "label": "ID",
            "name": "sector_priority.id",
            "type": "hidden",
        },
        {
            "label": "Sector",
            "name": "sector_priority.sector_id",
            "type": "datatable",
            "editor": sectorEditor,
            "optionsPair": {
                "value": "id"
            },
            "config": {
                ajax: {
                    url: '/Sector',
                    data: function (d) {
                        d.dpmt = 'consult';
                        d.type = 'sector_edit';
                    },
                    type: 'POST',
                    headers: {
                        'RequestVerificationToken': $('input:hidden[name="__RequestVerificationToken"]').val()
                    },
                },
                buttons: [
                    { extend: 'create', editor: sectorEditor },
                    { extend: 'edit',   editor: sectorEditor },
                    { extend: 'remove', editor: sectorEditor }
                ],
                columns: [
                    {
                        data: "sector.id",
                        title: "id"
                    },
                    {
                        data: "sector.name",
                        title: "Name"
                    }
                ],
                pageLength: 5,
            }
        }
    });

The backend code:

    // called by the main editor based on the "type" sent by the AJAX
        public DtResponse GetPriorities(DtRequest request)
        {
            using (var _db = new Database(/* db config */))
            {
                var editor = new Editor(_db, "sector_priority", "id")
                        .Field(new Field("sector_priority.id").Set(Field.SetType.None))
                        .Field(new Field("sector.name"))
                        .Field(new Field("sector_priority.sector_id"))
                        .LeftJoin("sector", "sector.id", "=", "sector_priority.sector_id");


                var result = editor.TryCatch(true)
                    .Debug(true)
                    .Process(request)
                    .Data();

                return result;
            }
        }

    // called by the nested editor based on the "type" sent by the AJAX
        public DtResponse GetSector(DtRequest request)
        {
            using var db = new Database(/* db config */);
            var editor = new Editor(db, "sector", "id")
                    .Field(new Field("sector.id")
                        .Set(Field.SetType.Create)
                    )
                    .Field(new Field("sector.name"));

            DtResponse result = editor.TryCatch(false)
                                .Debug(true)
                                .Process(request)
                                .Data();

            return result;
        }

Do you see anything that could lead to that issue?

Best regards,
Vincent

allan

Hi Vincent,

Nothing immediately obvious there I'm afraid - can you give me a link to a page showing the issue so I can trace it through?

Thanks,
Allan

Vincent.P

Hi Allan,

I am afraid it won't be possible to do so as the website is hosted on our client's cloud, using their active directory. Would another way be possible?

Best regards,
Vincent.

allan

We'll see what we can do then, but it might take a few back and forward e-mails for me to get the picture I'm afraid

the editor doesn't seem to send the id to link between the 2 tables.

What variable is it that you are expecting to be sent, and where should it be written to?

Thanks,
Allan

Vincent.P

Hi Allan,

The data we expect to send is the new selected sector_id from the editor when we select another row in the nested datatables. What we currently get in JSON is the following:

data[2][sector_priority][sector_id] "", which therefore updates the ID to 0

(We also discussed internally on a way to provide you access to the DEV environment or to do sharing screen sessions if it would be doable for you).

Best regards,
Vincent.

allan

Hi Vincent,

Thanks for the clarification. sector_priority.sector_id is being submitted as an empty string.

Can you use the debugger (https://debug.datatables.net) on your page to give me a trace please - click the Upload button and then let me know what the debug code is.

Access to your dev environment would be really useful if possible. You can PM me by clicking my forum user name above and then Send message.

Allan

BjornHa

OptionPair value field is described as "id", but in the table definition below it is "sector.id"?
Isn't this not going to create the same issue with pluck not working on 'table.column' in nested tables?

Vincent.P

I changed it already to sector.id, but it still isn't working as expected

BjornHa

The reason is an issue with pluck not working on 'table.column' as described here

tangerine

I have pluck working like this:

pluck(table).pluck(column)

Vincent.P

Hi @BjornHa , thanks for your input. I see now where is the issue. I guess I'll have to find a workaround, maybe the one posted by @tangerine .

I'll have a look at this today.