Freeze columns

Sep 18, 2014 at 1:21 AM
I am using Grid.MVC, like it very much. I need to freeze the first 4 columns and let the rest of them scroll. Any suggestions?
Sep 18, 2014 at 8:00 AM
Add table responsive class to your grid table...

and then add the following custom css .. this is bootstrap 3 responsive css...

http://getbootstrap.com/css/#tables-responsive
/*The following table responsive class css style is from Bootstrap V 3.2..
  They are applied .table responsive only for smaller devices.. So we overwrite it*/

/*Table responsive has started*/
.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
}

    .table-responsive > .table {
        margin-bottom: 0;
    }

        .table-responsive > .table > thead > tr > th,
        .table-responsive > .table > tbody > tr > th,
        .table-responsive > .table > tfoot > tr > th,
        .table-responsive > .table > thead > tr > td,
        .table-responsive > .table > tbody > tr > td,
        .table-responsive > .table > tfoot > tr > td {
            white-space: nowrap;
        }

    .table-responsive > .table-bordered {
        border: 0;
    }

        .table-responsive > .table-bordered > thead > tr > th:first-child,
        .table-responsive > .table-bordered > tbody > tr > th:first-child,
        .table-responsive > .table-bordered > tfoot > tr > th:first-child,
        .table-responsive > .table-bordered > thead > tr > td:first-child,
        .table-responsive > .table-bordered > tbody > tr > td:first-child,
        .table-responsive > .table-bordered > tfoot > tr > td:first-child {
            border-left: 0;
        }

        .table-responsive > .table-bordered > thead > tr > th:last-child,
        .table-responsive > .table-bordered > tbody > tr > th:last-child,
        .table-responsive > .table-bordered > tfoot > tr > th:last-child,
        .table-responsive > .table-bordered > thead > tr > td:last-child,
        .table-responsive > .table-bordered > tbody > tr > td:last-child,
        .table-responsive > .table-bordered > tfoot > tr > td:last-child {
            border-right: 0;
        }

        .table-responsive > .table-bordered > tbody > tr:last-child > th,
        .table-responsive > .table-bordered > tfoot > tr:last-child > th,
        .table-responsive > .table-bordered > tbody > tr:last-child > td,
        .table-responsive > .table-bordered > tfoot > tr:last-child > td {
            border-bottom: 0;
        }
Mar 22, 2015 at 6:33 PM
Did you get this to work for you? Were you able to adjust it to freeze the first 4 columns and horizontally scroll the rest? I will need this inmy grid, too.