A problem on grid view

Question

4.00/5 (1 vote)

See more:

I have a grid view with the following code.

XML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns ="False"  BorderWidth="1px" BackColor="#DEBA84" 
             CellPadding="3" CellSpacing="2" BorderStyle="None" 
             BorderColor="#DEBA84" Width="932px">
             <footerstyle forecolor="#8C4510">
              BackColor="#F7DFB5"></footerstyle>
            <pagerstyle forecolor="#8C4510">
              HorizontalAlign="Center"></pagerstyle>
            <HeaderStyle ForeColor="Black" Font-Bold="True" 
              BackColor="DarkGray"></HeaderStyle>
            <SelectedRowStyle ForeColor="White" Font-Bold="True" 
             BackColor="#738A9C"></SelectedRowStyle>
            <rowstyle forecolor="#8C4510">
               BackColor="#FFF7E7"></rowstyle>
            <alternatingrowstyle backcolor="PeachPuff">
                forecolor="Black"
                font-italic="False"/>
                <columns>
                <asp:BoundField DataField ="ProductName" HeaderText ="ProductName"  />
                <asp:BoundField DataField ="ProductForm" HeaderText ="ProductForm"  />
                <asp:BoundField DataField ="ProductFlavour" HeaderText ="ProductFlavour"  />
                <asp:BoundField DataField ="DMDCode" HeaderText ="DMDCode"  />
                <asp:BoundField DataField ="CDCode" HeaderText ="CDCode"  />
                <asp:BoundField DataField ="ProductID" HeaderText ="ProductID" />
                <asp:BoundField DataField ="PackID" HeaderText ="PackID" />
                <asp:TemplateField  HeaderText ="Select one">
                <itemtemplate>
                
<asp:RadioButton ID ="radioButton1" runat="server" GroupName ="productDB" AutoPostBack ="true" OnCheckedChanged ="Rb_CheckChanged" />
                </itemtemplate>
                </columns>
                 </alternatingrowstyle>

I fetch the values from a webservice and bind it to the grid view.

I want the headers of the grid view to be static ,while scrolling.

any help would be appreciated.

Posted 15-May-11 19:21pm

bsb25

Updated 16-May-11 11:21am

fjdiewornncalwe

v2

Add a Solution

Comments

senguptaamlan 16-May-11 1:39am

what are the things that you have done???

4 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shahriar Iqbal Chowdhury/Galib · Answer 1 · 2011-05-16T11:10:00

Solution 2

Hi,
try the solutions given below.

http://csharpdotnetfreak.blogspot.com/2009/07/scrollable-gridview-fixed-headers-asp.html[^]
or
http://blogs.msdn.com/b/mattdotson/archive/2006/03/02/542613.aspx[^]

It will be relay easy if you try jquery plugin, a reapeter can do the tricks for you instead of using GridView, try these plugins with Jquery

http://plugins.jquery.com/plugin-tags/fixed-header[^]
or
http://fixedheadertable.com/[^]

Hope this will help.

Posted 16-May-11 11:10am

Shahriar Iqbal Chowdhury/Galib

Comments

fjdiewornncalwe 16-May-11 17:22pm

+5. Good links. I have personally used the fixedheadertable solution in some of my older dotNet1.1 solutions.

Shahriar Iqbal Chowdhury/Galib 16-May-11 17:24pm

thanks marcus, I agree these plugins are relay handy for rich user experience

Ra-one · Answer 2 · 2011-05-15T20:25:00

Solution 1

Add following style rule

<style type="text/css">
  .gvFixedHeader
  {
    font-weight:bold;
    position:relative;
    background-color:White;
  }
</style>

Add the class in header style

<HeaderStyle CssClass="gvFixedHeader" />

Hope it helps

Posted 15-May-11 20:25pm

Ra-one

Comments

bsb25 16-May-11 3:21am

its not working...

janwel · Answer 3 · 2011-05-16T15:35:00

You could add CSS for your program
try this:
before

XML

<style type="text/css">
    /* A scrolable div */
    .GridViewContainer
    {
        overflow: auto;
    }
    /* to freeze column cells and its respective header*/

.FrozenHeader
{
 background-color:yellow;
    position: relative;
    cursor: default;
    top: expression(document.getElementById("GridViewContainer").scrollTop-2);
    z-index: 10;
}
/*for the locked columns header to stay on top*/
.FrozenHeader.locked
{
    z-index: 99;
}

Then you manipulate template of your grid

asp:GridView ID="GridView1" CssClass="GridView"  runat="server"  etc
        Height="338px" Width="1133px" >
<HeaderStyle CssClass="FrozenHeader" />
<Columns>

praveen_07 · Answer 4 · 2011-05-17T23:24:00

http://www.dotnetcurry.com/ShowArticle.aspx?ID=255[^]

iv class="mycontainer" style="height:400px; overflow: auto; position:relative;">
<asp:GridView runat="server" ID="grdSavedResults" AutoGenerateColumns="false"
AllowSorting="true" >
<Columns>
<asp:TemplateField HeaderText="Delete Results" >
<EditItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
<HeaderStyle Width="5%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Job Classification" SortExpression="job_class_name" >
<HeaderTemplate>
<asp:LinkButton runat="server" Text="Job Classification" ></asp:LinkButton>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("job_class_name") %>' ></asp:Label>
</ItemTemplate>
<HeaderStyle Width="10%" />
</asp:TemplateField>
<asp:BoundField DataField="salaryList" HeaderText="Twice-A-Month-Salary" SortExpression="salaryList" />
<asp:BoundField DataField="app_process_type" HeaderText="Application Process" SortExpression="app_process_type" />
<asp:BoundField DataField="countyList" HeaderText="County" />
<asp:BoundField DataField="agencyList" HeaderText="Agency" />
<asp:BoundField DataField="closing_date" HeaderText="Closing Date" SortExpression="closing_date" />
</Columns>
</asp:GridView>
</div>

A problem on grid view

4 solutions

Solution 2

Solution 1

Solution 3

Solution 4

Add your solution here

Preview 0

A problem on grid view

4 solutions

Solution 2

Solution 1

Solution 3

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us