locked
freeze header of the Grid MVC RRS feed

  • Question

  • User1914091530 posted

    Hi,

    I want to freeze header of the Grid MVC to the top of grid.

    How to do..

    Here is my view 

    @model Tasks.Models.CheckinReportPageDTO
    
    @using GridMvc.Html
    @{
        ViewBag.Title = "CheckInOut Report";
    }
    
    <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
    @*<script src="~/Scripts/jquery-1.11.1.js"></script>*@
    <script src="~/Scripts/jquery-ui.min.js"></script>
    <link href="~/Scripts/jquery-ui.min.css" rel="stylesheet" />
    <script src="~/bootstrap/js/bootstrap.min.js"></script>
    <link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    
    
    <style>
        .collapse {
            display: none;
        }
    
        .bolded {
            font-weight: bold;
        }
    
            .container {
        padding-right: 0px !important;
        padding-left: 0px !important;
        margin-right: auto;
        margin-left: auto;
    }
    
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
        ;
        min-height: 1px;
        padding-right: 5px !important;
        padding-left: 8px !important;
    }
    
        .fixed {
        ;
        top:0; left:0;
        width: 100%; }
    
    
    </style>
    
    <div class="container">
         <div class="clearfix"></div>
        <fieldset>
            <legend class="legend">CheckInOut Report</legend>
    
            <div class="panel">
    
                <div class="panel-body">
    
                    @using (Html.BeginForm("FindCheckInOutRep", "Reports", FormMethod.Post))
                    {
                        @Html.AntiForgeryToken()
                        <div class="row">
                            <div class="col-md-3">
                                @Html.DisplayNameFor(model => model.FromDate)
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(model => model.FromDate, "{0:dd/MM/yyyy}", new { @class = "form-control", @readonly = true })
                                @Html.ValidationMessageFor(model => model.FromDate)
                            </div>
                            <div class="col-md-3">
                                @Html.DisplayNameFor(model => model.ToDate)
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(model => model.ToDate, "{0:dd/MM/yyyy}", new { @class = "form-control", @readonly = true })
                                @Html.ValidationMessageFor(model => model.ToDate)
                            </div>
                        </div>
                        <div style="margin-top: 5px"></div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                @Html.DisplayNameFor(model => model.Department)
                                            </div>
                                            <div class="col-md-3">
                                                @Html.DropDownListFor(model => model.Department, new SelectList(Model.ListUserDepartments, "WorkStatus", "WorkStatus"), new { @class = "form-control" })
                                                @Html.ValidationMessageFor(model => model.Department)
                                            </div>
                                            <div class="col-md-3">
                                                @Html.DisplayNameFor(model => model.UserId)
                                            </div>
                                            <div class="col-md-3">
                                                @Html.DropDownListFor(model => model.UserId, new SelectList(Model.ListUsers, "UserID", "Name"), new { @class = "form-control" })
                                                @Html.ValidationMessageFor(model => model.UserId)
                                            </div>
    
                                        </div>
                                        <div style="margin-top: 5px"></div>
                                        <div class="row">
                                            <div class="col-md-3">
                                                @Html.DisplayNameFor(model => model.CheckinStatus)
                                            </div>
                                            <div class="col-md-3">
                                                @Html.DropDownListFor(model => model.CheckinStatus, new SelectList(Model.ListCheckinStatus, "WorkStatus", "WorkStatus"), new { @class = "form-control" })
                                                @Html.ValidationMessageFor(model => model.CheckinStatus)
                                            </div>
    
    
                                        </div>
                        <div style="margin-top: 5px"></div>
                        <div class="row">
                            <div class="col-md-1 dt-col text-center float-right">
                                <div class="text-center">
                                    <input id="Submit" class="btn btn-success" type="submit" value="Find" />
                                </div>
                                @*@Html.ActionLink("Cancel", "Index", "HolidayMaster", new { @class = "btn btn-success" })*@
                            </div>
                        </div>
                    }
    
                    <div class="col-md-1 dt-col text-center float-right">
                        @using (Html.BeginForm("ExportCIO", "Reports", FormMethod.Post))
                        {
                            <input id="btnSubmit" name="submit" class="btn btn-info" type="submit" value="PDF" />
                        }
                    </div>
                    <div class="col-md-1 dt-col text-center float-right">
                        @using (Html.BeginForm("ExcelExportCIO", "Reports", FormMethod.Post))
                        {
                            <input id="btnSubmit" name="submit" class="btn btn-info" type="submit" value="Excel" />
                        }
                    </div>
    
                    <div class="container">
                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="sticky" style="overflow-x: auto; overflow-y: scroll; height: 300px;">
                                    @Html.Grid(Model.ListCheckInOut).Columns(columns =>
                               {
                                   columns.Add(c => c.UserName).Titled("UserName").Filterable(true).Encoded(false)
                    .Sanitized(false).SetWidth(40);
                                   columns.Add(c => c.Location).Titled("Location").Filterable(true).Encoded(false)
    .Sanitized(false).SetWidth(40);
                                   columns.Add(c => c.CheckinDate).Titled("CheckInDate").Format("{0:dd/MM/yyyy}").Filterable(true).Encoded(false)
                       .Sanitized(false).SetWidth(50);
                                   columns.Add(c => c.CHECKIN_TIME).Titled("CheckinTime").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
                    .Sanitized(false).SetWidth(50);
                                   columns.Add(c => c.CHECKOUT_TIME).Titled("CheckoutTime").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
                    .Sanitized(false).SetWidth(50);
                                   columns.Add(c => c.TOTAL_ACTIVE_TIME).Titled("Total_Active_Time").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
                    .Sanitized(false).SetWidth(50);
                                   columns.Add(c => c.TOTAL_WORK_TIME).Titled("Total_Work_Time").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
    .Sanitized(false).SetWidth(50);
                                   columns.Add(c => c.TOTAL_BREAK_TIME).Titled("Total_Break_Time").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
    .Sanitized(false).SetWidth(50);
                                   columns.Add(c => c.OffSet).Titled("OffSet").Filterable(true).Encoded(false)
    .Sanitized(false).SetWidth(40);
    
                               }).WithPaging(10).Sortable(true)
    
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
    
    </fieldset>
    
    </div>
    @section Scripts {
    <script src="~/Content/js/jquery.freezeheader.js"></script>
        <script src="~/Content/js/jquery.stickytableheaders.min.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>
        @Styles.Render("~/Content/themes/base/css")
    
        <script type="text/javascript">
            $(document).ready(function () {
                $("#FromDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy'
                });
                $("#ToDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy'
                });
            });
    
            $(function () {
                $("table").freezeHeader();
                //$("table").stickyTableHeaders();
            });
        </script>
    
    
    
    }

    freezeHeader and stickyTableHeaders options do not work for me..

    Thanks & Regards

    Shijo

    Thursday, June 25, 2020 4:42 AM

All replies

  • User1686398519 posted

    Hi shijostephen,

    I modified your code according to your needs, please refer to it.

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    @model WebApplication5.Models.CheckinReportPageDTO
    
    @using GridMvc.Html
    @{
        ViewBag.Title = "CheckInOut Report";
    }
    
    
    <style>
        .collapse {
            display: none;
        }
    
        .bolded {
            font-weight: bold;
        }
    
        .container {
            padding-right: 0px !important;
            padding-left: 0px !important;
            margin-right: auto;
            margin-left: auto;
        }
    
        .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
            ;
            min-height: 1px;
            padding-right: 5px !important;
            padding-left: 8px !important;
        }
    
        .fixed {
            ;
            top: 0;
            left: 0;
            width: 100%;
        }
        .grid-table thead tr {
            background: #fff;
        }
    </style>
    
    <div class="container">
        <div class="clearfix"></div>
        <fieldset>
            <legend class="legend">CheckInOut Report</legend>
    
            <div class="panel">
    
                <div class="panel-body">
    
                    @using (Html.BeginForm("FindCheckInOutRep", "Reports", FormMethod.Post))
                    {
                        @Html.AntiForgeryToken()
                        <div class="row">
                            <div class="col-md-3">
                                @Html.DisplayNameFor(model => model.FromDate)
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(model => model.FromDate, "{0:dd/MM/yyyy}", new { @class = "form-control", @readonly = true })
                                @Html.ValidationMessageFor(model => model.FromDate)
                            </div>
                            <div class="col-md-3">
                                @Html.DisplayNameFor(model => model.ToDate)
                            </div>
                            <div class="col-md-3">
                                @Html.TextBoxFor(model => model.ToDate, "{0:dd/MM/yyyy}", new { @class = "form-control", @readonly = true })
                                @Html.ValidationMessageFor(model => model.ToDate)
                            </div>
                        </div>
                        <div style="margin-top: 5px"></div>
                        <div class="row">
                            <div class="col-md-3">
                                @Html.DisplayNameFor(model => model.Department)
                            </div>
                            <div class="col-md-3">
                                @Html.DropDownListFor(model => model.Department, new SelectList(Model.ListUserDepartments, "WorkStatus", "WorkStatus"), new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.Department)
                            </div>
                            <div class="col-md-3">
                                @Html.DisplayNameFor(model => model.UserId)
                            </div>
                            <div class="col-md-3">
                                @Html.DropDownListFor(model => model.UserId, new SelectList(Model.ListUsers, "UserID", "Name"), new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.UserId)
                            </div>
    
                        </div>
                        <div style="margin-top: 5px"></div>
                        <div class="row">
                            <div class="col-md-3">
                                @Html.DisplayNameFor(model => model.CheckinStatus)
                            </div>
                            <div class="col-md-3">
                                @Html.DropDownListFor(model => model.CheckinStatus, new SelectList(Model.ListCheckinStatus, "WorkStatus", "WorkStatus"), new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.CheckinStatus)
                            </div>
    
    
                        </div>
                        <div style="margin-top: 5px"></div>
                        <div class="row">
                            <div class="col-md-1 dt-col text-center float-right">
                                <div class="text-center">
                                    <input id="Submit" class="btn btn-success" type="submit" value="Find" />
                                </div>
                                @*@Html.ActionLink("Cancel", "Index", "HolidayMaster", new { @class = "btn btn-success" })*@
                            </div>
                        </div>
                    }
                    <div class="col-md-1 dt-col text-center float-right">
                        @using (Html.BeginForm("ExportCIO", "Reports", FormMethod.Post))
                        {
                            <input id="btnSubmit1" name="submit" class="btn btn-info" type="submit" value="PDF" />
                        }
                    </div>
                    <div class="col-md-1 dt-col text-center float-right">
                        @using (Html.BeginForm("ExcelExportCIO", "Reports", FormMethod.Post))
                        {
                            <input id="btnSubmit2" name="submit" class="btn btn-info" type="submit" value="Excel" />
                        }
                    </div>
    
                    <div class="container">
                        <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    @Html.Grid(Model.ListCheckInOut).Columns(columns =>
                                   {
                                       columns.Add(c => c.UserName).Titled("UserName").Filterable(true).Encoded(false)
                        .Sanitized(false).SetWidth(40);
                                       columns.Add(c => c.Location).Titled("Location").Filterable(true).Encoded(false)
        .Sanitized(false).SetWidth(40);
                                       columns.Add(c => c.CheckinDate).Titled("CheckInDate").Format("{0:dd/MM/yyyy}").Filterable(true).Encoded(false)
                           .Sanitized(false).SetWidth(50);
                                       columns.Add(c => c.CHECKIN_TIME).Titled("CheckinTime").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
                        .Sanitized(false).SetWidth(50);
                                       columns.Add(c => c.CHECKOUT_TIME).Titled("CheckoutTime").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
                        .Sanitized(false).SetWidth(50);
                                       columns.Add(c => c.TOTAL_ACTIVE_TIME).Titled("Total_Active_Time").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
                        .Sanitized(false).SetWidth(50);
                                       columns.Add(c => c.TOTAL_WORK_TIME).Titled("Total_Work_Time").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
        .Sanitized(false).SetWidth(50);
                                       columns.Add(c => c.TOTAL_BREAK_TIME).Titled("Total_Break_Time").Format("{0:HH:mm:ss}").Filterable(true).Encoded(false)
        .Sanitized(false).SetWidth(50);
                                       columns.Add(c => c.OffSet).Titled("OffSet").Filterable(true).Encoded(false)
        .Sanitized(false).SetWidth(40);
    
                                   }).WithPaging(20).Sortable(true)
                                </div>
                                </div>
                    </div>
                </div>
            </div>
    
        </fieldset>
    
    </div>
    
    <link href="~/Content/Gridmvc.css" rel="stylesheet" />
    <link href="~/Content/jquery-ui.css" rel="stylesheet" />
    @section Scripts {
        <script src="~/Scripts/gridmvc.min.js"></script>
        <script src="~/Scripts/jquery.freezeheader.js"></script>
        <script src="~/Scripts/jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#FromDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy'
                });
                $("#ToDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    dateFormat: 'dd/mm/yy'
                });
            });
            $(function () {
                $("table").freezeHeader({ 'offset': '50px' });
                //$("table").stickyTableHeaders();
            });
        </script>
    }

    Here is the result.

     
    Best Regards,

    YihuiSun

    Friday, June 26, 2020 4:04 AM
  • User1914091530 posted

    Hi,

    I need the result to be in the div container with scroll, so cannot remove  <div style="overflow-x: auto; overflow-y: scroll; height: 300px;">.

    Also , could you share me the jquery for jquery.freezeheader.js.

    Thanks & Regards,

    Shijo.

    Friday, June 26, 2020 4:38 AM
  • User1686398519 posted

    Hi shijostephen,

    • If you use freezeHead, you don't need to create "<div style="overflow-x: auto; overflow-y: scroll; height: 300px;">" yourself.
    • Based on your needs, I made the following modifications based on the examples given earlier.
      • Modify "$("table").freezeHeader({'offset': '50px' });" to "$("table").freezeHeader({'height': '300px'});".
      • Modify the "jquery.freezeheader.js" code. The revised part is as follows.Please refer to this link for the file jquery.freezeheader.js.
        •           if (params && params.height !== undefined) {
          
                          if (params.offset !== undefined) {
                              obj.container.css("top", 0 + (params.offset.replace("px", "") * 1) + "px");
                          }
                          else {
                              obj.container.css("top", 0 + "px");
                          }
          
                          obj.container.css("z-index", "2");
                          obj.container.css("position", "absolute");
          
                      } 

    Here is the result.

     
    Best Regards,

    YihuiSun

    Friday, June 26, 2020 9:25 AM
  • User1914091530 posted

    Hi,

    Thanks for the reply..

    https://imgur.com/Q88aq1X

    But I need a horizontal scroll too.. Also header fields are shown twice. one header is the freezed one and other not freezed header.

    How to solve this..

    Thanks 

    Shijo

    Friday, June 26, 2020 10:44 AM