Using Links in Colums with Responsive Expand Buttons

Jordan901

Hi all,

I'm using the Responsive plugin with child rows. When the user clicks the little green + icon, the child row appears with the all the extra data. It works great.

I would like to use page links in that first column (when you click the link, it takes you to a different page). The issue is that the entire column that has the + icon can be clicked to expand the child row. So, when you click the link to go to a different page, it expands the child row just before redirecting to the new page (which looks rather ridiculous).

Is there a way to restrict it so that the user has to click the + icon to expand the child row, instead of being able to click anywhere in that column?

allan

You can use the responsive.details.target option to specify the selector you want to use for the trigger (example), or move the Responsive control into its own column (example).

Allan

Jordan901

[Post deleted, it was a stupid question]

Thanks for the help!

drewturk

Hello,
I am trying to do as you suggested and move the Responsive control into its own column (example). What happens is that responsive works but the custom control that we have does not appear, and therefore the child row is not accessible.

   var dt = $("#contacts").CbtDataTable({
        serverSide: false,
        select: false,
        ajax: '/client/people/getcontacts',
        // needed for rowReorder
        cbtdom: {
            buttons: {
                editor: {
                    instance: editor,
                    create: canEdit,
                    edit: canEdit,
                    remove: canEdit
                }
            }
        },
        rowId: 'id',
        // needed for rowReorder
        rowReorder: {
            dataSrc: 'order',
            editor: editor
        },
        responsive: {
            details: {
                type: 'column'
            }
        },
        columnDefs: [
            {
                className: 'control',
                orderable: false,
                targets: 0
            },
            {
                targets: '_all',
                orderable: false
            }
        ],
        order: [[1, "desc"]],
        columns: [
            {
                orderable: false,
                data: 'order',
                className: "reorder",
                colvis: 'false',
                render: function( data, type, row, meta ) {
                    return '<i class="fa fa-reorder fa-2x"></i>'
                }
            },
            {
                align: 'left',
                title: 'First Name',
                name: 'manager.firstName',
                data: 'manager.firstName'
            },
            {
                align: 'left',
                title: 'Last Name',
                name: 'manager.lastName',
                data: 'manager.lastName'
            },
            {
                align: 'left',
                title: 'Role',
                name: 'role.name',
                data: 'role.name'
            },
            {
                align: 'left',
                title: 'Phone',
                name: 'directLine',
                data: 'directLine'
            },
            {
                align: 'left',
                title: 'Email',
                name: 'email',
                data: 'email'
            },
            {
                align: 'Left',
                title: 'Division',
                name: 'client.name',
                data: 'client.name'
            },
            {
                defaultContent: '',
                searchable: false,
                reportOpts: {
                    visible: 'false'
                },
                colvis: false,
                buttonSet: [
                    {
                        tooltip: 'View Agent',
                        triggerClass: 'view',
                        activeText: '<i title="Manager" class="fa fa-person fa-2x"></i>',
                        onClick: function(rowIndex, rowData){
                            window.location = '/tools/user/index?id=' + rowData.manager.id + '&role=manager';
                        }
                    }
                ],
                title: 'Actions',
                data: null,
                name: 'actions'
            }

        ],
        searchCols: [
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]
    });

I thought perhaps I needed an empty column so I added one:

{
    data: null,
    colvis: false,
    defaultContent: ''
},

This then provided the actual responsive control, but not our custom control we want. Even then, the control is 'unresponsive' (no pun intended), it does not show child row when clicked.

Any ideas would be greatly appreciated.

allan

You probably need to use responsive.details.target to target the required column. However, I'd need a test case showing the issue to say for sure.

Allan

drewturk

Alright, Kurt was also able to help me.

I am also using the rowReorder ext and it was conflicting with the controls. So I added a selector to the rowReorder option:

rowReorder: {
            selector: 'td:not(:first-child)',
            dataSrc: 'order',
            editor: editor
        },

That fixed the first issue, the second issue I fixed by adding a new class .dtr-column to the css we are using for our custom responsive control. .dtr-inline was already defined for using default control but not the column control. Which of course is now fixed when adding the .dtr-column to the appropriate css.

Thank you for your help