Fix the header of Gridview with Bootstrap 4 template

Question

User1239610449 posted

I am using bootstrap 4 template for my web application and i want to fix the header of my gridview control using bootstrap.

Please anyone can guide me as I have been gone through several examples but no success.

My Gridview HTML:

           <asp:GridView ID="gvList" runat="server" Width="100%" ShowFooter="false" cssclass="table table-bordered" AllowPaging="True" PageSize="100" AutoGenerateColumns="False">
               
                   <Columns>
                    <asp:TemplateField HeaderText="S.No.">
                        <ItemTemplate>
                            <asp:Label ID="lblSerialNo" runat="server" Text='<%# Container.DataItemIndex + 1 %>' ></asp:Label> 
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Customer Name">
                        <ItemTemplate>
                            <asp:Label ID="lblCustomerName" runat="server" Text='<%# Bind("NAME") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Sales No.">
                        <ItemTemplate>
                            <asp:Label ID="lblSalesNo" runat="server" Text='<%# Bind("SALES_NO") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Reg. No.">
                        <ItemTemplate>
                            <asp:Label ID="lblRegNo" runat="server" Text='<%# Bind("VECH_REGNO") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>

                </Columns>

            </asp:GridView>

 

Answer 1

User-474980206 posted

Simple sample

https://jsfiddle.net/bootstrapious/dmp7tr4g

Answer 2

User1535942433 posted

Hi knowledgist,

As far as I think,you could use bootstrap-datatable-gridview,just like bruce says.

Also,you could use some third party controls like ScrollableGridPlugin or GridviewScroll.

<script src="Scripts/ScrollableGridPlugin_ASP.NetAJAX_2.0.js"></script>
 <script>
        $(document).ready(function () {
            $('#<%=gvList.ClientID %>').Scrollable({
                  ScrollHeight: 300,
              });
          });
    </script>

Best regards,

Yijing Sun

Answer 3

User-1151440187 posted

You can see this post also

https://forums.asp.net/t/1919610.aspx?Scrollable+GridView+with+fixed+grid+header+and+footer+

https://forums.asp.net/t/2132622.aspx?Fix+header+with+vertical+scroll+in+grid+view+

Hope you will find the answer.

Answer 4

User1239610449 posted

Hello Yijing Sun

From where I can download ScrollableGridPlugin or GridviewScroll.

Answer 5

User1239610449 posted

The problem is I am using Gridview control in which I am applying some logic on rowdatabound event which I can not perform If I use bootstrap datatable grid. Also I can't find the tag <thead> in gridview control.

Answer 6

User1535942433 posted

Hi knowledgist,

As far as I think,<thead> exist in a html table.

You could download ScrollableGridPlugin and  GridviewScroll in follow these:

ScrollableGridPlugin :

https://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-inside-ASPNet-UpdatePanel-using-jQuery-Plugin.aspx

GridviewScroll:

https://libraries.io/github/twlikol/GridViewScroll

Best regards,

Yijing Sun

Answer 7

User1239610449 posted

Can you please share the exact link from where I could download, thank you!

Answer 8

User1535942433 posted

Hi knowledgist,

The ScrollableGridPlugin's download link is this.

Best regards,

Yijing Sun