Keeping Table Header Fixed in MVC

Question

I have a Table for which I need to keep the header fixed. The code for the table is as below:

@Html.Grid(Model).Columns(column =>
{
     column.For(m => m.Id).Attributes(@class => "HideColumn").HeaderAttributes(@class => "HideHeader");                                   
     column.For(m => m.HolidayName).Named("Holiday Name").Attributes(@style => "width:300px;");
     column.For(m => m.HolidayDetails).Named("Holiday Details ").Attributes(@style => "width:300px;");
     column.For(m => m.Status).Named("Status").Attributes(@style => "width:200px;"); 
}

How to do this? Thanks in advance. :)

Answer 1

Grid in MVC will be rendering as normal HTML table (at least in my understanding you are using MVC Grid Nugets like Grid.MVC) on the client side. So you can use any HTML Table Fixed header JQuery plugins to fix the header.

Some options what you have is -

JQuery FreezeHeader in which you can simply have -

 $(document).ready(function () {
            $("#tableid").freezeHeader();
        })

And some more options are - Fixed Header Table, Sticky Table Headers etc.

Answer 2

you can use this code in script section:

  $(document).ready(function () {
                $('#yourTableId').floatThead({
                    top: $('.topbar').height(),
                    autoReflow: true,
                    zIndex: 1
                });
    });

Answer 3

Don't forget to add

<script src="/path/to/jquery.freezeheader.js"></script>

;-)