locked
GridMVC Header Freeze RRS feed

  • Question

  • User1509050366 posted

    I'm looking for some help with GridMVC header freeze. I have tried a 3 plugins (http://www.jqueryscript.net/table/jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll.html) of JavaScript options but not able to freeze the header on page scroll.

    http://gridmvc.azurewebsites.net/ 

    The nearest I could get is on applying JQuery plugin I got 2 headers :( when I scrolled on the same grid. 

    My MVC code 

    <meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1" />
    <script src="@Url.Content("~/Scripts/jquery-3.1.0.min.js")"></script>
    <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/modernizr-2.8.3.min.js")"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-datepicker.js")"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.customwidgets.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.freezeheader.js")" type="text/javascript"></script>
    
    <script>
        jQuery(document).ready(function ($) {
            $(".table").freezeHeader({ 'height': '1200px; Width: 1900px' });
        });
    
    </script>
    
    <div id="divVendorRfq" >
    
    @Html.Grid(Model).Columns(columns =>
    {
        columns.Add(d => d.RowId).Css("permHide-mode");
        columns.Add(d => d.PrimaryAction).Titled("Primary Action")
             .Filterable(true)
             .Sortable(true)
             .SetFilterWidgetType("CustomCompanyNameFilterWidget")
             .RenderValueAs(d => d.PrimaryAction);
        columns.Add(d => d.ItemStatus).Titled("Item Status")
             .Encoded(false)
             .Sanitized(false)
             .Filterable(true)

    My HTML code looks like this..

    <meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1" />
    <script src="/Scripts/jquery-3.1.0.min.js"></script>
    <link href="/Content/Gridmvc.css" rel="stylesheet" />
    <script src="/Scripts/modernizr-2.8.3.min.js"></script>
    <script src="/Scripts/gridmvc.min.js"></script>
    <script src="/Scripts/bootstrap-datepicker.js"></script>
    <script src="/Scripts/gridmvc.customwidgets.js" type="text/javascript"> </script>
    <script src="/Scripts/jquery.freezeheader.js" type="text/javascript"></script>
    
    <script>
        jQuery(document).ready(function ($) {
            $(".table").freezeHeader({ 'height': '1200px; Width: 1900px' });
        });
    </script>
    
    <div id="divVendor" >
    
        
    
    
        <div class="grid-mvc" data-lang="en" data-gridname="VendorGrid" data-selectable="true" data-multiplefilters="true">
            <div class="grid-wrap">
                <table class="table table-striped grid-table" >
                    
                    <thead>
                            <tr>
    <th class="grid-header permHide-mode"><div class="grid-filter" data-filterdata="[]" data-name="RowId" data-type="System.Int32" data-widgetdata="null">
    <span class="grid-filter-btn" title="Filter this column"></span></div><div class="grid-header-title">
    <a href="?grid-column=RowId&amp;grid-dir=0">RowId</a></div></th><th class="grid-header"> ... Other Columns
    
                    </thead>
                    <tbody>
                                    <tr class="grid-row " >
    <td class="grid-cell permHide-mode" data-name="RowId">219</td>... Other data elements

    Any help is high appreciated. Thanks!

    Friday, December 30, 2016 3:30 PM

All replies

  • User-271186128 posted

    Hi singhswat,

    GridMVC Header Freeze

    As for this issue, you could try to use JQuery DataTable plugin, code like this:

    $(document).ready(function() {
        var table = $('#example').DataTable( {
            fixedHeader: {
                header: true,
                footer: true
            }
        } );
    } );

    You could download the JS reference from this links:

    https://datatables.net/extensions/fixedheader/examples/options/header_footer.html

    http://www.aspdotnet-pools.com/2014/07/frozen-rows-and-columns-in-asp.net-mvc-webgrid-using-jquery-like-excel-sheet.html

    Besides, you could also use this method:

    http://www.aspsnippets.com/Articles/Dynamically-freeze-ASP.Net-Gridview-header-using-JavaScript.aspx

    Best regards,
    Dillion

    Monday, January 2, 2017 8:30 AM
  • User1509050366 posted

    Thanks Dillion

    It looks like the Jquery is using older version or am I missing something. I get below errors.

    My code based for your reference. https://github.com/singhswat/GridMVC_Freeze_Header

    Uncaught TypeError: $(...).on is not a function
        at initCodeCuts (main.js:7)
        at HTMLDocument.<anonymous> (main.js:3)
        at l (jquery-2.0.3.min.js:4)
        at Object.fireWith [as resolveWith] (jquery-2.0.3.min.js:4)
        at Function.ready (jquery-2.0.3.min.js:4)
        at HTMLDocument.S (jquery-2.0.3.min.js:4)
    
    (index):140 Uncaught TypeError: $(...).DataTable is not a function
        at HTMLDocument.<anonymous> ((index):140)
        at Object.resolveWith (jquery.js:2)
        at Function.ready (jquery.js:2)
        at HTMLDocument.C (jquery.js:2)

    My headers looks like this

    <meta http-equiv="X-UA-Compatible" content="IE=11;chrome=1" />
    <script src="@Url.Content("~/Scripts/jquery-3.1.1.min.js")"></script>
    <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/modernizr-2.8.3.js")"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-datepicker.js")"></script>
    
    <script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.dataTables.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/FixedColumns.js")" type="text/javascript"></script>

    Thursday, January 12, 2017 9:46 AM