Multi-item editing - How to limit selectable (and editable) columns?

dlanz38

Link to test case:

http://live.datatables.net/zesokoko/1/edit
Modified from:
https://editor.datatables.net/examples/advanced/multiItem.html

Debugger code (debug.datatables.net):
N/A
Error messages shown:
https://datatables.net/manual/tech-notes/11

Description of problem:
When using multi-item editing, how would you limit an entire column from being selectable (and subsequently editable)? For example, if I didn't want "Salary" to be editable in the example? Main focus is on preventing the editing of the column, by extension I'd also be fine with preventing the selection of the column. Selection is fine, so long as the user can't edit.

I realize that if selecting a row(s) to edit, I can achieve the behavior by omitting the "Salary" column in the editor.fields definition. Like this:

editor = new $.fn.dataTable.Editor( {
        table: "#example",
        fields: [ {
                label: "Name:",
                name: "name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Age:",
                name: "age"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }
           /* No entry for salary */
        ],
        formOptions: {
            main: {
                scope: 'cell' // Allow multi-row editing with cell selection
            }
        }
    } );

However, with this configuration, if I select by column and chose the "Salary" column - this error occurs: https://datatables.net/manual/tech-notes/11
Which makes sense, as the field doesn't exist in the editor.

I couldn't find a built in way to enable/disable "editability" or "selectability" though, the best I could come up with was hooking into the onSelect event outlined here: https://datatables.net/extensions/select/examples/api/events.html

Is that the best (only) way to achieve this behavior?

Many thanks, and much appreciation!

dlanz38

Note: I realize the "edit" functionality doesn't work at all on the custom example due to there being no DT_RowId specified for any of the rows. The only difference with the on site example is that there is no fields element for "Salary".

Also came across these two, which seem to do the job as well.

https://editor.datatables.net/reference/option/fields.submit
https://editor.datatables.net/reference/option/fields.multiEditable

So I think I answered my own question. But if there is another method, I sure am interested!

Thanks you all!

dlanz38

Though, using the submit and multiEditable options are a little misleading to the user. It appears as if they can edit these fields, but behind the scenes nothing is changing.

Hooking into the onSelect event might be best. But like I said, I'm open ears for other methods.
https://datatables.net/extensions/select/examples/api/events.html

colin

You can use select.selector to specify what can, and cannot, be selected. The last example on that page shows how the last column can't be selected.

Colin

dlanz38

Thank you @colin, that's a much better approach. However, I noticed when selecting by row, the user must select by one of the fields specified by select.selector. This makes sense given the purpose of select.selector. But it might be a little confusing to the user when their selecting by row doesn't always work, but other times it does. But to be honest, the best I can come up with to address this is to allow an instance of select.selector to be specified for each selection type (Row, Column, Cell). And I'm not even sure how practical that is.

I'll just try to add some clarification elsewhere in my current application to shore this up for now. Many Thanks!

dlanz38

I just want to add to this to help someone in the future.

The method I mentioned of not defining the non-editable fields in the editor instance is not the correct way to go about it. There is the readonly field type which should be used instead. And if necessary, you can use fields.submit to prevent the field from being passed for update.

Example:

editor = new $.fn.dataTable.Editor( {
        table: "#example",
        fields: [ {
                label: "Name:",
                name: "name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Age:",
                name: "age"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary",
                type: 'readonly',
                submit: false /* Optional */

            }
        ],
        formOptions: {
            main: {
                scope: 'cell' // Allow multi-row editing with cell selection
            }
        }
    } );