Auto hiding all columns except for first column

jamalsabs

Hello,

I am using datatables in an asp.net application. I have attached a screenshot of what the datatable looks like. If you shrink the window the first column will eventually hide, removing the ability to expand the details of a row. How do I ensure that regardless of auto hiding of columns the first columns never hides. The second screenshot attached shows what the datatable looks like when the first column is hidden.

Here is the javascript written when the datatables is rendered.

<script type="text/javascript">
    $(document).ready(function () {
        jquerydatatables('#ctl00_ContentPlaceHolder1_LoginView1_grid').DataTable({
            columnDefs: [
                { responsivePriority: 1, targets: -1 },
                { responsivePriority: 2, targets: 0 },
                { responsivePriority: 10001, targets: 1 },
                { responsivePriority: 10000, targets: 2 },
                { responsivePriority: 6, targets: 3 },
                { responsivePriority: 7, targets: 4 },
                { responsivePriority: 8, targets: 5 },
                { responsivePriority: 9, targets: 6 },
                { responsivePriority: 10, targets: 7 },
                { responsivePriority: 3, targets: 8 },
            ]
        });
    });
</script>

jr42.gordon

Your target assignment is wrong. Based on your config, your last column will always be shown. Which according to your screenshots, that is happening as 'Actions' is your last column. If you want the first column to be shown, then you must have the following config

{ responsivePriority: 1, targets: 0 },

jamalsabs

Sorry I should have been clearer in my question. The last column needs to always show, because that is the column that contains a drop down menu for the user. But the first column needs to also NEVER hide in order to allow the user to expand the collapsed details.

so I need the first and last column to never hide.

jr42.gordon

Then remove your current first and last columnDefs config and modify to following and try.

{ responsivePriority: 1, targets: [-1, 0] },