Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Freeze asp.net grid view column

How can i freeze initial 2 -3 leftmost column in asp.net grid view? so that while horizontal scrolling initial 2 - 3 columns that got freezes will always be display.

Any answers??

like image 370
yadavr Avatar asked Nov 23 '12 12:11

yadavr


People also ask

How do I freeze the grid?

Right-click the column header of the grid you want to freeze. Select the Freeze option from the context menu. The columns that are visible to the left side of the selected column header, including the selected column will be frozen.

How do I freeze the GridView header while scrolling?

Freeze Gridview Row Here we set GridView ShowHeader = "false" and make a separate header for the GridView by using HTML Table and places the GridView just below the Table. So the header row is always fixed there and we can scroll the GridView and see the data.


2 Answers

Yes, it seems to be possible with some css magic, with the pinned and scrollable columns on different z-indexes to keep the pinned on top. This comes with the caveat that overflow:scroll may not be 100% portable (I've tested on IE 8/9 and Chrome FWIW).

Take a look at this jsFiddle here

The ASPX I used to generate the GridView is below.

Note the css classes pinned and scrollable for fixed and scrolling columns respectively (applied to headers and items)

But the real work is done in the css. Note especially that you need to fiddle to get your column widths correct to align the fixed td's / th's at the left.

aspx

<div id="scrolledGridView">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="Col 1">
                <HeaderStyle CssClass="pinned col1"></HeaderStyle>
                <ItemStyle CssClass="pinned col1"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Name" HeaderText="Column 2">
                <HeaderStyle CssClass="pinned col2"></HeaderStyle>
                <ItemStyle CssClass="pinned col2"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Description" HeaderText="Column 3">
                <HeaderStyle CssClass="scrolled"></HeaderStyle>
                <ItemStyle CssClass="scrolled"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Cost" HeaderText="Column 4">
                <HeaderStyle CssClass="scrolled"></HeaderStyle>
                <ItemStyle CssClass="scrolled"></ItemStyle>
            </asp:BoundField>
        </Columns>
    </asp:GridView>

css

    #scrolledGridView
    {
        overflow-x: scroll; 
        text-align: left;
        width: 400px; /* i.e. too small for all the columns */
    }

    .pinned
    {
        position: fixed; /* i.e. not scrolled */
        background-color: White; /* prevent the scrolled columns showing through */
        z-index: 100; /* keep the pinned on top of the scrollables */
    }
    .scrolled
    {
        position: relative;
        left: 150px; /* i.e. col1 Width + col2 width */
        overflow: hidden;
        white-space: nowrap;
        min-width: 500px; /* set your real column widths here */
    }
    .col1
    {
        left: 0px;
        width: 50px;
    }
    .col2
    {
        left: 50px; /* i.e. col1 Width */
        width: 100px;
    }

like image 198
StuartLC Avatar answered Sep 19 '22 14:09

StuartLC


i wrote jQuery plug-in can fixed header and freeze column, it can be apply to GridView. see the image:

enter image description here

look the website: http://gridviewscroll.aspcity.idv.tw/

Supported Browsers

  • Internet Explorer 7, 8 (IE 9 Compatibility)
  • Internet Explorer 9 (9.0.8112)
  • Internet Explorer 10 on Windows 7 Preview
  • Google Chrome(23.0.1271.64 m)
  • Mozilla Firefox (16.0.2)
  • Apple Safari (5.1.7)
like image 26
Likol Lee Avatar answered Sep 20 '22 14:09

Likol Lee