Checkbox submit conflicts with Column reordering

dpanscik

I have Column reordering that conflicts with two checkboxes in the right most columns.

When columns look like this, I can edit "PO Amount".

When columns look like this, I cannot edit "PO Amount"

To solve this I need 1 of 2 solutions
1 - need to find a different way to exclude not:child (perhaps by class)
2 - block columns from reordering past the last to columns

Chasing after option 1

        $('#ApForm').on('click', 'tbody td:not(:nth-last-child(-n+2))', function (e) {
            editor

                .inline(this, {
                    //onBlur: 'submit'

                });

        });

This strategy excludes the first one pinkHighlight but does not exclude the second yellowHighlight

        $('#ApForm').on('click', 'tbody td:not(input.editor-pinkHighlight)','not(input.editor-yellowHighlight)', function (e) {
            editor

                .inline(this, {
                    //onBlur: 'submit'

                });

        });

kthorngren

You can have more than one class in the :not() selector. See the jQuery :not() docs.

Kevin

dpanscik

and in my typical fashion. I figured it out.

give everything you want to exclude the same class
className: "excludeFromSubmit"

               { "data": "pinkHighlight", "title": "PH", "name": "pinkHighlight", "autoWidth": true ,
                    render: function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-pinkHighlight">';
                        }
                        return data;
                    },
                    className: "dt-body-center",
                    className: "excludeFromSubmit"
                },
                { "data": "yellowHighlight", "title": "YH", "name": "yellowHighlight", "autoWidth": true,
                    render: function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-yellowHighlight">';
                        }
                        return data;
                    },
                    className: "dt-body-center",
                    className: "excludeFromSubmit"
                },

then you can exclude by referencing one class

        $('#ApForm').on('click', 'tbody td:not(".excludeFromSubmit")', function (e) {
            editor

                .inline(this, {
                    //onBlur: 'submit'

                });

        });