On row select open responsive modal

mattdykstra

Hi,
Can I open the responsive modal from SELECT row when not in responsive view?

live.datatables.net/jaxecidu/1/edit

$(document).ready( function () {
    var table = $('#example').DataTable({
        select: true,
        responsive: {
            details: {
                type: 'column',
                target: 'tr', //THIS WORKS GREAT IN RESPONSIVE VIEW
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                    tableClass: 'table'
                })
            }
        }
    }).on( 'select', function ( e, dt, type, indexes ) {
        //if not responsive view launch responsive modal
    });
});

Abhi R

This is modal

    <div class="modal fade" id="DescModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
                 <h3 class="modal-title">Job Requirements & Description</h3>

            </div>
            <div class="modal-body">
                 <h5 class="text-center">Hello. Below is the descripton and/or requirements for hiring consideration.</h5>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
                <button type="button" class="btn btn-primary">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

In Script Add this

$('#example').on('click', 'tr', function () {
        var name = $('td', this).eq(1).text();
        $('#DescModal').modal("show");
    });

mattdykstra

I was actualy after the built in responsive Modal $.fn.dataTable.Responsive.display.modal
https://datatables.net/reference/option/responsive.details.display

allan

Listen for the responsive-resize event and then trigger a click event on the row.

Allan

etilley

@allan - could you cite an example of code? For select to be responsive way, click (highlighted select status) has to convey a row or selected data identifier as well. Ideally a chart.js script could be listening and respond to the selected row - in the case of a dashboard.