Editor datatable field type - server side datatable - setting the selected value

washuit-iamm

Sorry for the wordy title.

I would like to set the selected editor datatable field row(s), when my datatable field is server side.

Partial Editor Config:

{
    "name": "MyEntityId",
    "label": "My Entity",
    "type": "datatable",
    optionsPair: {
        value: "Id",
        label: "Name"
    },
    config: {
        ajax: {
            url: `${apiLocation}/MyEntity/DataTable`,
            type: "POST",
            contentType: "application/json",
            data: function (d) {
                return JSON.stringify(d);
            }
        },
        serverSide: true,
        columns: [
            {
                title: 'Id',
                data: 'Id'
            },
            {
                title: 'Name',
                data: 'Name'
            },
            {
                title: 'Description',
                data: 'Description'
            }
        ]
    }
},

You can see with the above config, the table will not pre-select a selected row.

washuit-iamm

More info:

Payload from main table

{
    "draw": 2,
    "recordsTotal": 12,
    "recordsFiltered": 10,
    "data": [
        {
            "Id": 71,
            "Name": "Bob",
            "MyEntityid": 15
        },
        {
            "Id": 72,
            "Name": "Alice",
            "MyEntityid": 16
        }
    ]
}

payload from MyEntity/DataTable API (the options for the main table editor field "MyEntityId")

{
    "draw": 2,
    "recordsTotal": 12,
    "recordsFiltered": 10,
    "data": [
        {
            "Id": 71,
            "Name": "Option1",
            "Description": "Desc for option1"
        },
        {
            "Id": 72,
            "Name": "Option2",
            "Description": "Desc for option2"
        }
    ]
}

colin

I'm not clear what your problem is, I'm afraid, as Editor works with serverSide, see example here.

Please can you expand on your issue,

Colin

washuit-iamm

@colin thanks for the quick reply.

I think the code example I shared in my first post is confusing. That is a subset of the DataTables Editor field configuration. That is a single field being configured as "type": "datatables" where the config passed to the field, sets serverSide to true.

Another example:

editor = new $.fn.dataTable.Editor({
    ajax: "../php/join.php",
    table: "#example",
    fields: [
        {
            label: "My Entity",
            name: "MyEntitId",
            type: "datatable",
            config: {
                serverSide: true, <------------------------------- 
            }
        },
        // ... more fields
    ],
});

If you look at the sample here: https://editor.datatables.net/examples/datatables/select.html

You will see that when you edit a row, you can see the currently selected value. How can I do this with my example?

Currently, when the editor dialog opens, the datatable field does not show the currently selected row. Say, MyEntitId is 42 for example.

I have implemented an ugly auto-search solution using initEdit where I find the editor field (MyEntityId), extract the dt(), trigger the column().search() on Id to 42, however it has issues. It probably wont work with multiselect for example.

Any ideas? One of the main benefits of the DataTable Editor DataTable field type is that its useful for select and multiselect of huge external data sources. Right now, seeing what is actually selected is not as obvious compared to something like Select2.

allan

Does it work correctly for you if the selected row is on the first page of the nested Editor? It should! If it doesn't, can you give me a link to your page please?

Normally with the nested Editor we jump the paging to the first page which has a row selected. However, with server-side processing, that is much more difficult since we (client-side) don't know what page the selected row is on.

How large is the data set for your inner table? I'm wondering if client-side processing would be an option for it.

Allan

washuit-iamm

@allan I will try and get a sample, but I think based on what you said, the DTE DataTable field might not be for me.

Does it work correctly for you if the selected row is on the first page of the nested Editor? It should! If it doesn't, can you give me a link to your page please?

When the editor dialog opens, I notice an http request is made for the serverSide datatable.

The datatable shows the selected item (if its in the first page) for a second, and then it deselects as soon as the HTTP requests finishes.

How large is the data set for your inner table? I'm wondering if client-side processing would be an option for it.

I have dozens of tables so the data sets range, I just checked and my biggest is around 6k rows (110 columns), smallest is around 30 rows (10 columns). So this might be an option.

Feature request:

Ideally, the editor datatables field would work like the date time picker. Where the datatable would appear when a button or the field is clicked, and the field would show the selected items by a column name.

This is a rough example:

This kind of goes back to my original point that Select2, and DTE datatable field, both excel at letting the user select items from huge datasets that are server-side. But select2 makes it a lot more obvious at what is selected.

Today, my Select2 plugin is customized to query my DataTables endpoint for my entity, I have customized the editor.select2 plugin so that select2 will fetch the selected items via HTTP and display them by name (or any other property) when editor dialog opens.

allan

Ideally, the editor datatables field would work like the date time picker. Where the datatable would appear when a button or the field is clicked,

I hadn't thought of that option before. Thanks for suggesting it - it is something that I will consider for future work.

Allan