On row select open responsive modal

On row select open responsive modal

mattdykstramattdykstra Posts: 3Questions: 2Answers: 0
edited June 2017 in Free community support

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
    });
});

This question has an accepted answers - jump to answer

Answers

  • Abhi RAbhi R Posts: 17Questions: 5Answers: 0
    edited June 2017

    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");
        });
    
  • mattdykstramattdykstra Posts: 3Questions: 2Answers: 0

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

  • allanallan Posts: 61,635Questions: 1Answers: 10,092 Site admin
    Answer ✓

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

    Allan

  • etilleyetilley Posts: 31Questions: 4Answers: 0

    @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.

This discussion has been closed.