Editor - how to set multi+shift?

efrazier

Hi Guys,

I just want to do this:

https://editor.datatables.net/examples/datatables/mJoin.html

But the example uses 'os' and I need this to work on Mobile. multi+shift is the perfect select type that I need, but I have tried every way I can think of to set this in the editor, setting it in the dataTable has no effect on the editor.

With the docs for the editor, I can't find anything except for multiple:true, but there doesn't seem to be other args for this setting. Thanks!

`const editor = new DataTable.Editor({
table: '#example',
display: 'envelope',
select: {
style: 'multi+shift'
},

        fields: [
            {
                label: 'Email:',
                name: 'Email'
            },
            {
                label: 'FullName:',
                name: 'FullName',
            },
            {
                label: 'Phone Mobile:',
                name: 'PhoneMobile'

            },
            {
                label: 'User Type: ',
                name: 'UserType',
                type: 'select',
                options: ['Employee', 'Driver', 'Dispatch', 'Customer']
            },
            {
                label: 'Routes:',
                name: 'Routes[].id',
                type: 'datatable',
                multiple: true, 
                options: function () {
                    // Extract all unique routes from user data
                    const routeMap = new Map();

                    initialData.forEach(person => {
                        if (Array.isArray(person.Routes)) {
                            person.Routes.forEach(route => {
                                if (route.id && route.name) {
                                    routeMap.set(route.id, {
                                        id: route.id,     // 'id' property (used for value)
                                        name: route.name  // 'name' property (used for label)
                                    });
                                }
                            });
                        }
                    });

                    // Return an array of route objects
                    return Array.from(routeMap.values());
                }(),
                optionsPair: {
                    label: "name",  // Use 'name' property as the display label
                    value: "id"     // Use 'id' property as the value
                }
            }
        ],
        ajax: function... Lots of Ajax stuff not related below... `

efrazier

I am a little worried this isn't possible via config and I will have to make a custom event handler.

https://editor.datatables.net/reference/field/datatable

"The Select extension is used to let users select rows by a simple click or tap on a row in the table. When the multiple option is disabled (which it is by default) the user may select a single row in the table. When multiple is enabled, the user may use ctrl and shift click combinations to multiple select rows (see Select documentation for details)."

allan

You can override the settings for the DataTable in the datatable field through the config option for the field. Add:

config: {
  select: {
    style: 'multi+shift'
  }
}

immediately after your optionsPair object, and that should do it.

Allan

efrazier

I will kiss you with tongue if we meet! That works! Thanks!!! I just didn't at all get the "config" part.

allan

Buy me a beer, that will do nicely

Glad that helped.

Allan