How can I set the inline edit scope of a checkbox to cell?

MSLtd

In my table I use a checkbox on the final column, the problem I'm experiencing with this is that the submit scope seems to encompass the whole row - the problem with this is that in the 'Item Status' column I have a drop-down selector that is getting set to 'Cancelled' every time I change the checkbox, because it seems to select the whole row for editing when it's clicked.

How can I set the scope for when the checkbox is clicked?
Here's the event handler I'm currently using:

$('#line_items').on( 'change', 'input.editor-active', function () {
    editor
        .edit( $(this).closest('tr'), false, {
                submit: 'changed'
            } )
        .set( 'line_item_invoice_received', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
} );

Thanks in advance!

allan

When using the edit() method the scope is always the whole row, since it is a row based editing method. What you could try doing here is using bubble() which will allow individual cell scoping:

$('#line_items').on( 'change', 'input.editor-active', function () {
    editor
        .bubble( $(this).closest('td'), false, {
                submit: 'changed',
                scope: 'cell'
            } )
        .set( 'line_item_invoice_received', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
} );

That said, if the status is changing it sounds like the value for it being edited doesn't match what is in its option list values. That would be something that would be worth fixing as I think it will crop up in other cases and give you problems as well.

What is the configuration for that field and for your DataTable? Also can you show me an example of the data for the table?

Allan

MSLtd

@allan would it make a difference if I used inline() instead of bubble()?
(this would be mostly for the convenience of anyone besides myself taking up the system I'm developing as bubble() isn't used anywhere else in the system).

I've had a lot of issues with the value of the editor field defaulting every time the row is edited and not matching the value the user has specified, or that which is saved in the database - which of course will cause all sorts of issues when the information is submitted to the database incorrectly in the live version of this system.
How exactly do I prevent the selector from defaulting?

Here's the configuration and instantiation scripts for my data table:

<div class="container" style="max-width: none; width: 900px; padding-left:20px; padding-right:20px;">
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="line_items">
                <thead>
            <tr>
                <th>Item No</th>
                <th>QTY</th>
                <th>Description</th>
                <th>Part No</th>
                <th>Unit Cost</th>
                <th>Item Status</th>
                                <th>Invoice Received</th>
                <th></th> <!-- non visible column for 'active'-->
            </tr>
        </thead>
        </table>
</div>

var editor = new $.fn.dataTable.Editor( {
    ajax: 'php/processing.purchase_order.php?UID='+m_nPO_ID,
    table: '#line_items',
    fields: [
        {
            "label": "Line item no:",
            "name": "line_item_no",
            type: "readonly"
        },
        {
            "label": "Line item qty:",
            "name": "line_item_qty",
            def: "1",
            attr: { type: "number"}
        },
        {
            "label": "Line item description:",
            "name": "line_item_desc"
        },
        {
            "label": "Line item part no:",
            "name": "line_item_part_no"
        },
        {
            "label": "Line item unit cost:",
            "name": "line_item_unit_cost"
        },
        {
            "label": "Line item status",
            "name": "line_item_status",
                        "type": "select",
                def: "1"
        },
        {
            "label": "Line po id",
            "name": "line_po_id",
                         type: "readonly"
        },
        {
            name: "line_item_invoice_received",
            type:      "checkbox",
                        separator: "|",
                        options:   [{ label: '', value: 0 }]
        }
    ]
} );

table = $('#line_items').DataTable( {
    dom: 'Bfrtip',
    ajax: 'php/processing.purchase_order.php?UID=' + m_nPO_ID,
    select: {
        style: 'single'
    },
    columns: [
        {
            "data": "line_item_no"
        },
        {
            "data": "line_item_qty"
        },
        {
            "data": "line_item_desc"
        },
        {
            "data": "line_item_part_no"
        },
        {
            "data": "line_item_unit_cost",
            render: $.fn.dataTable.render.number( ',', '.', 2, getCurrencyByCID() )
        },
        {
            "data": "line_item_status",
            className: 'editable'
        },
        {
                       "data": "line_item_invoice_received",
                       render: function ( data, type, row ) {
                           if ( type === 'display' ) {
                               return '<input type="checkbox" class="editor-active">';
                           }
                           return data;
                       },
                       className: "dt-body-center"
                },
        {
            "data": "active",
        }
        ],
        "columnDefs": [
                {
                        "targets": [ 7 ],
                        "visible": false
                }
        ]
} );

Editor::inst( $db, 'line_items', 'line_item_id' )
    ->fields(
        Field::inst( 'line_item_no' ),
        Field::inst( 'line_item_qty' )
            ->validator( Validate::minNum( 1 ) ),
        Field::inst( 'line_item_desc' )
            ->validator( Validate::notEmpty() ),
        Field::inst( 'line_item_part_no' ),
        Field::inst( 'line_item_unit_cost' )
            ->validator( Validate::minNum( 0.0001 ) ),
        Field::inst( 'line_item_status' )
            ->options( Options::inst()
                ->table( 'line_item_states' )
                ->value( 'uID' )
                ->label( 'label' )
            )
            ->validator( Validate::dbValues() ),
        Field::inst( 'line_item_invoice_received' ),
        Field::inst( 'active' ),
        Field::inst( 'line_po_id')
    )
    ->where( 'active', 'Yes')
    ->where( 'line_po_id', $UID)
    ->process( $_POST )
    ->json();

Apologies for the amount of code, I wasn't entirely sure what's important for this.
Many Thanks

allan

Yes. I should probably have explained why I suggested bubble() rather than inline() - sorry. Basically its because bubble() has the option to not display the form, while inline() will insert the form / field, every time. In this case that would replace your own checkbox, which you really don't want.

Regarding the status issue, without seeing the data I'm not 100% certain, but I am 99% certain that the issue is because the data set does not include the value (uID from the options). Instead it includes the label!

Could you show me an example of the data that is used to populate the table. A debugger trace would be perfect for this.

Allan

MSLtd

@allan , I've sent you a link to the Debug trace via message.
Cheers

MSLtd

Oh blimey, never mind... You were right @allan !
Because of the relationships between my tables I was passing the wrong values around. The work around that has fixed it is:

->options( Options::inst()
        ->table( 'line_item_states' )
        ->value( 'label' )
        ->label( 'label' )
)

And now everything works great! thank you very much for your help