Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 3232
Home > Forums > C# >

Freeze gridview header in c# 2005

Posted by Chitrasathiya under C# on 3/5/2010 | Views : 11262 | Status : [Member] | Replies : 8
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
have to write the code for freeze gridview. i have written this in stylesheet position:relative ;
top:expression(this.offsetParent.scrollTop);
And i applied this stylesheet class in gridview . Header is coming when the page scrolls. But i want that when i am in middle of the page, that time gridview header shouldnot come in the middle of the page.it should be stable in the top of the page.. Pls tell me how to do this . can u pls see that reply me



Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Vuyiswamb on: 3/5/2010 [Member] [MVP] [Administrator] NotApplicable

Up
0
Down
Look at this
http://www.codeproject.com/KB/webforms/FreezePaneDatagrid.aspx
http://weblogs.asp.net/dwahlin/archive/2007/07/31/freeze-asp-net-gridview-headers-by-creating-client-side-extenders.aspx

Thank you for posting at Dotnetfunda

Vuyiswa Maseko

Thank you for posting at Dotnetfunda
[Administrator]

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Chitrasathiya on: 3/5/2010 [Member] Starter

Up
0
Down
I need the scroll in the page and not in the grid.I want to fix the header of teh grid to the top of the page.pls help..
 Download source file

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Vuyiswamb on: 3/5/2010 [Member] [MVP] [Administrator] NotApplicable

Up
0
Down
Can you send a Screen Shot of your Page and Explain in your Image. I see what you mean. Send the Screen-shot and let me think on how you will do it.

Thank you for posting at Dotnetfunda
[Administrator]

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Chitrasathiya on: 3/5/2010 [Member] Starter

Up
0
Down
Pls see the previous response. There i have attached the document. In that document, grid header is coming down. Bt i dont want to be down. It sholud be in the up when i scroll down the page

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Chitrasathiya on: 3/5/2010 [Member] Starter

Up
0
Down
http://craig.mcqueen.id.au/htmlfloatingtableheader/tables.html


see this site. I want like this

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Vuyiswamb on: 3/5/2010 [Member] [MVP] [Administrator] NotApplicable

Up
0
Down
i have attached the Source of that Page and you can use its Functionality to do what you want
 Download source file

Thank you for posting at Dotnetfunda
[Administrator]

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Chitrasathiya on: 3/5/2010 [Member] Starter

Up
0
Down
Hi I cant download from here. Can u send the code without any downloading ...can u just paste the code here?

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Vuyiswamb on: 3/5/2010 [Member] [MVP] [Administrator] NotApplicable

Up
0
Down

Here is the Code 

<html>

<head>

<title>Persistent Table Headers with jQuery</title>



    <!-- Developed and tested using jQuery 1.3.2 -->

    <script type="text/javascript" src="jquery.js"></script>



    <script type="text/javascript">

        function UpdateTableHeaders() {

            $("div.divTableWithFloatingHeader").each(function() {

                offset = $(this).offset();

                scrollTop = $(window).scrollTop();

                if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {

                    $(".tableFloatingHeader", this).css("visibility", "visible");

                    $(".tableFloatingHeader", this).css("top", Math.min(scrollTop - offset.top, $(this).height() - $(".tableFloatingHeader", this).height()) + "px");

                }

                else {

                    $(".tableFloatingHeader", this).css("visibility", "hidden");

                    $(".tableFloatingHeader", this).css("top", "0px");

                }

            })

        }

        $(document).ready(function() {

            $("table.tableWithFloatingHeader").each(function() {

                $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");

                $("tr:first", this).before($("tr:first", this).clone());

                clonedHeaderRow = $("tr:first", this)

                clonedHeaderRow.addClass("tableFloatingHeader");

                clonedHeaderRow.css("position", "absolute");

                clonedHeaderRow.css("top", "0px");

                clonedHeaderRow.css("left", "0px");

                clonedHeaderRow.css("visibility", "hidden");

            });

            UpdateTableHeaders();

            $(window).scroll(UpdateTableHeaders);

        });

    </script>



<style>

<!--

th {

    background-color: lightgrey;

    border: 1px solid black;

}

td {

    border: 1px solid black;

}

-->

</style>



</head>

<body>



<p>Leading lines</p><p>1</p><p>2</p><p>3</p><p>4</p>

<p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>



<table class="tableWithFloatingHeader" style="border: 3px">

<thead>

<tr>

    <th>table1 col header</th>



    <th>table1 col header</th>

</tr>

</thead>

<tbody>

<tr>

    <td>table1 data1</td>

    <td>table1 data1</td>

</tr>

<tr>

    <td>table1 data2</td>



    <td>table1 data2</td>

</tr>

<tr>

    <td>table1 data3</td>

    <td>table1 data3</td>

</tr>

<tr>

    <td>table1 data4</td>

    <td>table1 data4</td>



</tr>

<tr>

    <td>table1 data5</td>

    <td>table1 data5</td>

</tr>

<tr>

    <td>table1 data6</td>

    <td>table1 data6</td>

</tr>



<tr>

    <td>table1 data7</td>

    <td>table1 data7</td>

</tr>

<tr>

    <td>table1 data8</td>

    <td>table1 data8</td>

</tr>

<tr>



    <td>table1 data9</td>

    <td>table1 data9</td>

</tr>

<tr>

    <td>table1 data10</td>

    <td>table1 data10</td>

</tr>

</tbody>

</table>



<p>Between lines</p><p>1</p><p>2</p><p>3</p><p>4</p>



<table class="tableWithFloatingHeader" style="border: 3px">

<thead>

<tr>

    <th>t2 col header</th>

    <th>t2 col header</th>



</tr>

</thead>

<tbody>

<tr>

    <td>t2 data1</td>

    <td>t2 data1</td>

</tr>

<tr>

    <td>t2 data2</td>

    <td>t2 data2</td>



</tr>

<tr>

    <td>t2 data3</td>

    <td>t2 data3</td>

</tr>

<tr>

    <td>t2 data4</td>

    <td>t2 data4</td>

</tr>



<tr>

    <td>t2 data5</td>

    <td>t2 data5</td>

</tr>

<tr>

    <td>t2 data6</td>

    <td>t2 data6</td>

</tr>

<tr>



    <td>t2 data7</td>

    <td>t2 data7</td>

</tr>

<tr>

    <td>t2 data8</td>

    <td>t2 data8</td>

</tr>

<tr>

    <td>t2 data9</td>



    <td>t2 data9</td>

</tr>

<tr>

    <td>t2 data10</td>

    <td>t2 data10</td>

</tr>

</tbody>

</table>



<p>Trailing lines...</p>



<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p>

<p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>



<p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p>

<p>31</p><p>32</p><p>33</p><p>34</p><p>35</p><p>36</p><p>37</p><p>38</p><p>39</p><p>40</p>



<p>41</p><p>42</p><p>43</p><p>44</p><p>45</p><p>46</p><p>47</p><p>48</p><p>49</p><p>50</p>

<p>51</p><p>52</p><p>53</p><p>54</p><p>55</p><p>56</p><p>57</p><p>58</p><p>59</p><p>60</p>



</body>

</html>




Thank you for posting at Dotnetfunda
[Administrator]

Chitrasathiya, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts