How to make the header of a grid fixed ( Freeze Header )

Home ASP.Net & C#
MVC
Interview Questions & Answers
Others


How to make the header of a grid fixed ( Freeze Header )





Hi All..
In this post I will tell you how we can make the header of a grid fixed( freezing the header). Most of us are using grid control for displaying the data in a grid view structure. It is a powerful control by the .net frame work. But there are some limitations for it. I am not going to tell you the limitations. But One of the limitation of grid control is that header of the grid is not fixed. If we are displaying a large amount of rows, we need to make the grid scrollable.But the problem is that the header of the grid also get scrolled.  So at the end of the rows , user will not get an idea about which is the data corresponding to each column.
Here I am going to show how to make this possible. I am not using the grid control. I am using only html controls- div, table, css and jquery. Here I will give you only a simple structure of the html - how to make the header freeze and the content rows scrollable It is a simple structure. If you want to know what should be the structure to make this posssible, you can continue reading. If you want to know and need to bind dynamic datas to this grid( from datatable or some other souces) and make it scrollable, you can refer the new post here.  If you want to know how to dynamically bind data to this structure from database tables, you can see more details here.

 So let us start with this.

Here I am using 2 divs, 2 html tables, css and javascript(jquery).
Step 1.
Copy and paste the following html codes into your .aspx or html page.

<div>
    <div id="divHeader" style="background-color:#ccc;" >
        <table class='gridstyle'>
            <tr style='height:43px; ' class='clsTableHeader' >
                <td class="ClsProduct1" >Product Name</td>
                <td class="ClsProduct1" >Product Code</td>
                <td class="ClsProduct1" >Product Type</td>
                <td class="ClsProduct1" >Price</td>
                <td class="ClsProduct2" >Number</td>
            </tr>
        </table>
    </div>
    <div id="divContent" runat="server" style="height:250px;overflow:auto;" >
        <table class='gridstyleBody'>
            <tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
            <tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
            <tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
            <tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
            <tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
            <tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
            <tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
            <tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Name</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Code</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product Type</td>
                <td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
                <td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
            </tr>
        </table>
    </div>
    </div>

 Step 2 
Copy and paste the style also.
<style type="text/css">

.gridstyle

{

    border:none;
    border-collapse:collapse;
    border-right:none;
    font-family: Tahoma, Arial, Verdana;
    font-size: 11px;
    text-align:left;
    width: 100%;
    min-width:400px;
}
.gridstyleBody
{
    border:none;
    border-collapse:collapse;
    border-right:none;
    font-family: Tahoma, Arial, Verdana;
    font-size: 11px;
    text-align:left;
    width: 100%;
    min-width:400px;
}

.ClsProduct1
{
    border:1px solid #FFFFFF;
    width: 20%;
    font-weight:bold;
    text-align:center;
}
.ClsProduct2
{
    border:1px solid #FFFFFF;
    font-weight:bold;
    text-align:center;   
}

</style>

Now everything is done. Copy and paste this code and see how it works. It makes the structure as you want. You can use this structure for making the header fixed. If you think you cannot bind dynamically data from the datatable or xml, you are wrong. It is very simple. It is simple than we are binding data to the grid control. For binding data to the grid view control we need to create the item templates etc. In our structure, it is not needed. It is very simple. I have given explanation and C# code on how to dynamically bind data from a datatable to our gridview structure. To know how it is possible, you can refer here. 

Thanks for reading my post. Have a great day. Happy coding. :)





Posted by at
Labels: , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)