ListView - Scrollable With Fixed Headers Using CSS

May 20, 2010

I am using an ASP.NET ListView control and, at the moment, I have a scrollable grid: (example below is simplified and contains embedded styling for sake of question)

<asp:ListView ID="ListView" runat="server" DataKeyNames="Id">
<LayoutTemplate>
<div style="height:225px; overflow:auto;">
<table runat="server">
<tr>
<th>
<span>Column1</span>
</th>
<th>
<span>Column2</span>
</th>
<th>
<span>Column3</span>
</th>
</tr>
<tr id="itemPlaceholder" runat="server" />
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="items" runat="server">
<td class="first">
<%#Eval("Column1")%>
</td>
<td>
<%#Eval("Column2")%>
</td>
<td>
<%#Eval("Column3")%>
</td>
</tr>
</ItemTemplate>
</asp:ListView>

I'd like to apply CSS such that my headers are fixed. What styling can I add to make it work?

View 1 Replies


Similar Messages:

Forms Data Controls :: Scrollable Gridview With Fixed Headers

Aug 5, 2010

I want scrollable gridview with fixed header. For that i create belw code

[Code]....

It works fine uptil page loads.I have functionality to delete rows from gridview.Once i click delete button from gridview the width of header columns get decreased then the width od data inside gridview.It means depending on the content of data the size gets variable.HOW to show data inside gridview irrespective of the content of data.

View 9 Replies

Data Controls :: Implement Scrollable Nested GridView With Fixed Headers?

Nov 30, 2013

I try to make a combination of 2 of your articles

[URL]

It works but the column header width's are not matching the data columns.

When i take out the nested gridview it works fine.

Here's my code:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");

[code]....

View 1 Replies

AJAX :: Using Scrollable GridView With Fixed Headers Inside Tab Container Control

Dec 3, 2013

I am working with asp.net tab control currently with two tabs.  The first tab is a list of jobs to be worked.  The gridview id is "gvJobs".  I call the ScrollableGridPlug via

$(document).ready( 
function () {
        $('[id*=gvJobs]').Scrollable({
            ScrollHeight: 450

[code]...

When i click at the Equip Tab is get a blank gridview.  There is a scrollbar on the left side indicating there is data in the gridview; however there is nothing visible. Additionally is there a way to scrollable function when I click on the appropriate tab?

View 1 Replies

Data Controls :: Scrollable GridView With Fixed Headers - Header Column Alignment

Jan 16, 2014

Scrollable GridView with Fixed Headers inside ASP.Net UpdatePanel using jQuery Plugin. I have one more question in that.  How to adjust the width of the columns headers because for some of my gridviews the headers not showing the proper format.  in the gridview I gave HorizontalAlign="Left" and in the columns I gave 

<asp:BoundField DataField="XXX" HeaderText="XXX" ItemStyle-Width="150px" HeaderStyle-HorizontalAlign="Left" />  

It's not showing in the correct fomart. header is coming to the left side and data is coming to the right side...

View 1 Replies

Data Controls :: Scrollable GridView With Fixed Headers With Label Control In HeaderTemplate

Sep 17, 2013

In article [URL] .... I want to change the header Styling. Is it possible to change?? If yes then how?

Also, i want to use label inside header (to write heading).

View 1 Replies

C# - IE8 Fixed Header / Scrollable GridView?

May 24, 2010

I know this topic has been asked, but the posts are all out of date, or not functional on IE8. In brief we basically want to do the excel style locking of column headers in a GridView. I have seen a couple of solutions one jquery+ css(setExpression) which doesn't work in IE8. And another that uses ajax extensions, yet again doesn't work in IE8.

I have been through every solution in the below link and have yet to find a working implementation for IE8. [URL]

View 3 Replies

SCROLLABLE GridView With Fixed Header?

Oct 3, 2010

How Can We Have A SCROLLABLE GridView With Fixed Header???(in vs 2008 - asp.net with c#) Fixed Header is my problem! i test many ways for doing that and see some live demos / but they did not work. can u show me a simple way 4 doing that with an example?

View 2 Replies

C# - Fixed Header Gridview With Scrollable Body

Nov 6, 2010

I have a grid-view placed inside a div and scroll bar is there. I want to set the grid view header fixed and while scrolling only the content will be scrollable. How can do this..

View 2 Replies

Web Forms :: Scrollable Grid With Fixed Header

Mar 28, 2012

I tried to have a grid with the fixed header. I implement this using the jquery plug  "ScrollableGridPlugin.js" and the following script:

 <script type="text/javascript">
            $(document).ready(function () {
            $('#<%=GridView1.ClientID %>').Scrollable({
                ScrollHeight: 500,
            });
        });
    </script>

But the problem is that, when the grid is placed inside the "Update panel" and if some button action fired, the scrollable grid with the fixed header is changed to the normal grid.

View 1 Replies

Data Controls :: Scrollable Gridview With Fixed Pager

Mar 5, 2012

In my div displaying list of records using gridview. The div properties are like height=200, width=200, overflow-y:scroll, etc. I know in gridview we will get a default Page navigation bar appened to the records (it could be bottom or top) but what I want is records in gridview is scrobble and page navigation bar should be static at both the places (bottom and top). if we enabled page navigation bar in gridview...it will be appended to the gridview records and it will be scroll along with records but i want static page navigation bar.

View 1 Replies

Web Forms :: Can Display Datagrid With A Scrollable Table But Fixed Header

Oct 6, 2010

I Have can I have the scrollable table but Fixed Header

[Code]....

View 7 Replies

Javascript - Create Html Table With Fixed Header And Scrollable Body?

Nov 3, 2010

I have an html table. I want to set table header as fixed and table body as scrollable.. How can i do this...?

View 1 Replies

Data Controls :: Scrollable Nested GridView With Fixed Header Using JQuery

Mar 26, 2016

I came across a page that showed a solution for freezing the top (header) row of a gridview and allowed it to be scrollable.  Here is the article: [URL] ....

It works and I was able to freeze the top row! However, I have a nested gridview ("gridview2") within that gridview ("gridview1") and I need to freeze it's header row...but I am encountering the following compilation error: "The name 'gridview2' does not exist in the current context"

I have tried many approaches to solve this, including calling the javascript function on the button event in which gridview2 is displayed, however I receive the compile error every time.

Here is the code that is causing the error:

<script type="text/javascript">

function gridlock() {

var GridId = "<%#gridview2.ClientID %>";

View 1 Replies

Data Controls :: When Applying Scrollable Gridview Headers Does Not Match With TemplateField

Feb 21, 2013

I used the link below [URL] .....

I have nearly 25 columns in my Gridview so when i apply the scrollable gridview the header does not align with template field.

View 1 Replies

Data Controls :: Make Multiple Header Rows Fixed In Scrollable GridView?

Jul 17, 2015

[URL]

i just wanted to fixed 2 rows of headertemplate. how can i do that using jQuery?

View 1 Replies

Data Controls :: JQuery Scrollable GridView With Fixed Header Not Working With UpdatePanel

Dec 27, 2012

I have a form with multiple update panels in one form. here i have a gridview with update panel where jqery scrolable with fixed header is not working. i saw your post where IsInUpdatepanel: true

View 1 Replies

Datagrid Scrolling With Fixed Headers

May 7, 2010

How can you have a fixed header on a DataGrid or GridViw and allow the grid to scroll? I'd like to avoid a solution that uses another separate table for headers.

View 1 Replies

Web Forms :: Fixed Headers On Gridview In IE8?

Mar 18, 2011

Given all the research I've done, I don't think this is possible - am I correct? I've been all over the web looking for ways to do this. My grid needs to scroll vertically, horizontally, sort, and go into edit mode. I've been able to do the "cheap" solution where a table sits above the grid to hold the column names, but this does not work well with putting the grid into edit mode or scrolling horizontally. In both cases, the columns become out of synch with their headers. My organization will not pay for a grid, so JQGrid is out. So, since the 'expression' capability has been removed from IE8, we are left with no possibilities for fixed column headers?

I'm not advanced enough in JQuery to do this...but wouldn't it be possible to create a JQuery function that copies the grid header row to a div that sits above the grid, so that the headers are always visible? (And hide the original grid header row). Anyone want to take a crack at it? Maybe I'll try but it will probably take me too long.

View 2 Replies

Forms Data Controls :: Fixed Headers In Gridview

Mar 25, 2011

I wanted to have fixed headers in grid view. I came across multiple solutions but none worked with IE 8 and Chrome. One of the best solutions is following:

<style type="text/css">
<!--
.DataGridFixedHeader {background-color: white; position:relative; top:expression(this.offsetParent.scrollTop);}
-->
</style>

View 3 Replies

Forms Data Controls :: Fixed / Freezed Headers In Grid

May 25, 2010

I have a gridview that displays a list of records and i have a verical scroll bar on that grid i want the grid headers to be freezed when i am coming to the last record i added css like this

.container table
th {/* Keep the header cells positioned as we scroll */
position:relative;/* Style */
}
color: Black;background:silver;font-weight:
bold;border-bottom:
solid 1px
#CCCCCC;text-align:
left;padding-left:5px;
and after this calling this css class within div tag
<div class="container"
style="height:300px;">

but it is not working

View 1 Replies

Data Controls :: Adding Horizontal ScrollBar With Fixed Headers To GridView

May 7, 2015

Refer here: [URL] ....

What If i have many fields to be included in the gridview, so in that case I need HORIZONTAL SCROLL BAR. But I can't fixed the headers...

View 1 Replies

Forms Data Controls :: How To Display Group Headers In ListView

Apr 26, 2010

I'm trying to use a ListView to display product specs. I also want to display the group headings such as "Dimensions", "Input Ports", etc.

How do I display these group headers? My code below lists the specs but doesn't show me the header. If I put some static text however, that shows up. What am I doing wrong?

[Code]....

View 4 Replies

Forms Data Controls :: ListView To Display In Rows And With Headers?

Mar 22, 2011

I tried to use ListView with following code to display 2 columns for name and address:

<asp:ListView ID="ListView1" runat="server">
<LayoutTemplate>
<ol>
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ol>
</LayoutTemplate>
<ItemTemplate>
<li>
<%# Eval("PersonName") %>
<%# Eval("PersonAddress")%>
</li>
</ItemTemplate>
</asp:ListView>

The problem is the address is not aligned depends on the person's name length.

I want to have 2 columns aligned and with horizontal and vertical grid lines. Can I do that?

View 1 Replies

Forms Data Controls :: Listview - Fixed Number Of Rows In A Table?

Mar 29, 2010

I've searched for this several times but have never been able to find the answer with my search terms. Say you have a listview and a datapager set to 10 rows, but you only have 4 data items in the database at the time the query is run. Is there a way to force it to show a 10 row table (4 with data and 6 without)?

Everytime I search on this, I just find information on setting the number of rows for the datapager, which will not show empty rows if the data isn't there. Probably an easy solution, but the heck I can find it.

View 12 Replies







Copyrights 2005-15 www.BigResource.com, All rights reserved