.NET Editor: Inline edit + select feature not working

jgessinger

Hello,

First I am gonna post my example code:
HTML:

<table id="example" data-token="..."></table>

JS:

var editor = new $.fn.dataTable.Editor({
    ajax: '/myController/myAction',
    table: '#example',
    fields: [
    {
        label: 'Example',
        name: 'ExampleTable.ExampleField'
    }
    ]
});

$('#example').DataTable({
    dom: 'Bfrtip',
    ajax: {
        url: editor.s.ajax,
        type: 'POST',
        data: {
            __RequestVerificationToken: $('#example').data('token')
        }
    },
    serverSide: true,
    columns: [
    {
        data: 'ExampleTable.ExampleField',
        title: 'Example'
    }
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit', editor: editor },
        { extend: 'remove', editor: editor }
    ]
});

This is working fine! I get the correct JSON result from my MVC action and it displays my data.

Now I want to realize this example https://editor.datatables.net/examples/inline-editing/simple.html

But as soon as I extend the columns by:

{
    data: null,
    defaultContent: '',
    className: 'select-checkbox',
    orderable: false
}

at first object in columns, I get an alert:
DataTables warning: table id=example - Unknown field: (index 0)

Then I tried to add it as last column and it gets displayed but without function. I also added:

select: {
    style:    'os',
    selector: 'td:last-child'
}

but it has no function when I click it. But it would be great if I could add the checkbox to the first column, as in the example.

Is there a bug in the editor JS? Can you maybe check this?

allan

You need to change the default sorting option to use a different column other than the first one. The order column will default to the first column (index zero), even if you have it orderable: false (which is the user's ability to sort the column, not the API's).

Allan

jgessinger

Ok, thank you very much for that advise. Its now displayed in the first column without error. Maybe this would be an important info in the example page.

I also added

select: {
    selector: 'td:first-child' // or 'td.select-checkbox'
}

but when I click on this cell, it is not selecting the row, just nothing happens and there is also no console output.
The inline edit feature is working great with:

$(table.table().container()).on('click', 'tbody td:not(.select-checkbox)', function () {
    editor.inline(this);
});

Btw. if I just set select: true the row selection is working fine. Do you know whats the problem here?

allan

Good to hear that helped. I think the error message could be improved there!

Regarding the Select issue, add the select.style option to you table's initialisation. By default, if you use true it will default to os but if off but default if you specify options.

Allan

jgessinger

Just thought, that it is set automatically to the default value, even when setting an selector. It seems to work now. Thank you very much for your help!