How to Fix\Freeze the Header of Grid-view in dot net?
Recently I faced an issue when my client asked me to Fix the header of a gridview in an aspx page same like how we fix the header in excelsheet.
I tried so many logics\solution but none of them worked, I tried so many javascript\JQuery controls but the issue I faced with that is those controls were re-setting the value on my page in my application.
Finally I came across a site where I found this control to use a third party grid control instead of asp grid control and it worked for me...
Here is the link of that blog site: http://ideasparks.codeplex.com/
Download this control from here in use in your project. Here are the instruction on how to use this control...
- Add the DLL in bin folder of your project.
- Register the assembly by adding below lines in your page:
<%@ Register Assembly="IdeaSparx.CoolControls.Web" Namespace="IdeaSparx.CoolControls.Web" TagPrefix="cc" %>
Instead of adding this line, you can also register the control in web.config:
<system.web>
<pages>
<controls>
<add tagPrefix="cc" namespace="IdeaSparx.CoolControls.Web" assembly="IdeaSparx.CoolControls.Web"/>
</controls>
</pages>
</system.web>
<pages>
<controls>
<add tagPrefix="cc" namespace="IdeaSparx.CoolControls.Web" assembly="IdeaSparx.CoolControls.Web"/>
</controls>
</pages>
</system.web>
3. Now you can use the control, just like a normal gridview
<cc:CoolGridView ID="GridView1" runat="server" Height="400px" Width="600px">
</cc:CoolGridView>
</cc:CoolGridView>
If you have static data or the header to display, below is another solution you can use to fix header:
<body>
<form id="form1" runat="server">
<div style="width:478px;border:1px solid #084B8A;color:#ffffff;font-weight:bold;">
<table bgcolor="#3090C7" rules="all" >
<tr>
<td style ="width:71px;">Pub ID</td>
<td style ="width:180px;">Pub Name</td>
<td style ="width:90px;">City</td>
<td style ="width:60px;">State</td>
<td style ="width:78px;">Country</td>
</tr>
</table>
</div>
<div style ="height:130px; width:500px; overflow:auto;" >
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
ShowHeader = "false" Width ="480px" >
<AlternatingRowStyle BackColor="#BFE4FF" />
</asp:GridView>
</div>
</form>
</body>
If you notice in above code... we have used a data-table to create a header like structure on top of grid.
<table bgcolor="#3090C7" rules="all" >
<tr>
<td style ="width:71px;">Pub ID</td>
<td style ="width:180px;">Pub Name</td>
<td style ="width:90px;">City</td>
<td style ="width:60px;">State</td>
<td style ="width:78px;">Country</td>
</tr>
</table>
Then we have made the grid as scrollable so that you can scroll the rows up and down.
<div style ="height:130px; width:500px; overflow:auto;" >
Last but not the least we have set the property of showHeader as False, so that our actual header will get hidden and our data-table row will be shown as header and it'll be fixed.
