twlikol / gridviewscroll Goto Github PK

View Code? Open in Web Editor NEW

115.0 24.0 43.0 1.07 MB

Freeze column and fixed header in Table or GridView

License: MIT License

CSS 0.63% JavaScript 13.78% HTML 70.45% TypeScript 15.14%

javascript html typescript gridview table

gridviewscroll's Introduction

GridViewScroll - NEW

Freeze column and fixed header in Table or GridView

Features

Default scrollbar of browser
Freeze Header, Column, Footer (only last row)

Getting Started

Download the latest release from GitHub
Include the gridviewscroll.js in web page

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

Initialize table with options, then call enhance

<script type="text/javascript">
    window.onload = function () {
        var gridViewScroll = new GridViewScroll({
            elementID : "gvMain" // Target element id
        });
        gridViewScroll.enhance();
    }
</script>

Options

<script type="text/javascript">
    var gridViewScroll = new GridViewScroll({
        elementID : "", // String
        width : 700, // Integer or String(Percentage)
        height : 350, // Integer or String(Percentage)
        freezeColumn : false, // Boolean
        freezeFooter : false, // Boolean
        freezeColumnCssClass : "", // String
        freezeFooterCssClass : "", // String
        freezeHeaderRowCount : 1, // Integer
        freezeColumnCount : 1, // Integer
        onscroll: function (scrollTop, scrollLeft) // onscroll event callback
    });
</script>

Properties

<script type="text/javascript">
    var gridViewScroll = new GridViewScroll({
        elementID : "gvMain"
    });
    gridViewScroll.enhance();
    var scrollPosition = gridViewScroll.scrollPosition // get scroll position
    var scrollTop = scrollPosition.scrollTop;
    var scrollLeft = scrollPosition.scrollLeft;
  
    var scrollPosition = { scrollTop: 50, scrollLeft: 50};
    gridViewScroll.scrollPosition = scrollPosition; // set scroll position
</script>

Methods

<script type="text/javascript">
    var gridViewScroll = new GridViewScroll({
        elementID : "gvMain"
    });
    gridViewScroll.enhance(); // Apply the gridviewscroll features
    gridViewScroll.undo(); // Undo the DOM changes, And remove gridviewscroll features
</script>

Events

<script type="text/javascript">
    var gridViewScroll = new GridViewScroll({
        elementID : "gvMain",
        onscroll: function (scrollTop, scrollLeft) {
            console.log("scrollTop: " + scrollTop + ", scrollLeft: " + scrollLeft);
        }
    });
    gridViewScroll.enhance();
</script>

Supported Browsers

Internet Explorer 9+
Google Chrome (61.0.3163.100)
Mozilla FireFox (56.0.2)

Technical Support

If you have any question with gridviewscroll welcome to filing an issue on GitHub, I will try my best to help.

Or you can send email to [email protected].

Copyright and License

GridViewScroll with jQuery (v0.9.6.8)

This version is no longer supported, you can find in link: https://github.com/twlikol/GridViewScroll/tree/v0.9.6.8

gridviewscroll's People

Contributors

Stargazers

Watchers

gridviewscroll's Issues

Height not set when passing a variable

The following code snippet does not set the height of the gridview as expected ((the width is set as expected, but the height is not)...please provide help or an update. Thanks!

  function gridviewScroll() {
        var widthMasterMain = $('#MasterMain').css('width');
        var heightMasterMain = $('#MasterMain').css('height');
        $('#<%=gvwDoc.ClientID%>').gridviewScroll({
            width: widthMasterMain,
            height: heightMasterMain
    }

Add dependencies to readme

Please add the dependencies to the readme.md. It took me some time to figure out this required jquery-ui, not just jquery. Please add that fact, preferably with version numbers of what jquery and jquery-ui are supported.

GridViewScroll always applies width to first div in first row

GridViewScroll will wrap the following a div with the class name GridCellDiv around each cell in the first row to enforce cell column widths.

However it will only do this if the first element in the table cell is is not a div.

If the first cell is it a div, it will apply the width to that element.

This causes problems if the users div has its own css or width applied to it that overrides the calculated value.

A better way to do this would be to always wrap the cell in a div with the class GridCellDiv.

Frozen header showing twice

Hello,

For some reason, my fixed (frozen) header rows are being duplicated, and are not aligning properly.

I am using VisualStudio 2015 C# creating a GridView with AutoGenerateColumns="true"

I am using the latest version of GridViewScroll (23 November 2017). I am not using a special style for freezeColumnCssClass: "", // String setting.

In FireBug, I can hide the entire div id="GridView1_Header_Freeze" DIV, and it is not duplicated.

Questions: 1. How can I avoid this duplication on grids that scroll both horizontally and vertically.
2. How can I ensure the column headers align properly.

There is NO element, it is a simple gridview.

Please let me know.

Thank you,

David Ralphs
Dallas, Texas
[email protected]

CODE:

function gridviewScroll() {
var gridViewScroll = new GridViewScroll({
elementID: "<%=GridView1.ClientID%>",
width: winwidth, // Integer or String(Percentage)
height: winheight, // Integer or String(Percentage)
freezeColumn: true, // Boolean
freezeFooter: false, // Boolean
freezeColumnCssClass: "", // String
freezeFooterCssClass: "", // String
freezeHeaderRowCount: 1, // Integer
freezeColumnCount: 5 // Integer
// Target element id
});
gridViewScroll.enhance();
}

              `    <asp:UpdatePanel ID="upGridView1" runat="server">
                  <ContentTemplate>
                  <asp:GridView ID="GridView1" runat="server" style="width:100%;border-collapse:collapse;"

                 AutoGenerateColumns="true" OnRowCreated="GridView1_RowCreated" CellPadding="4" Font-Names="Arial" Font-Size="9"
ForeColor="#333333" OnRowDataBound="GridView1_RowDataBound" GridLines="Both" BorderStyle="Solid" >

NO DATA







</asp:GridView>

</asp:UpdatePanel>
`
USING:

Gridview isn't scrolling in mobile devices

Hello,
I am using this plugin to freeze header and column in my project and I am happy with the result however we want to make the grid mobile friendly and the grid isn't scrolling in mobile devices.

Is there any solution for this? or you guys are going to fix this in next release.
awesome plugin :)

The column is squeezed as a vertical line.

There are 2 ways to set column width and grid Width: one is to set the width of each column and leave grid's width empty, another is to set grid's width and leave only one column's width empty.

In 2nd way, if page is resized small enough, the column with empty width will be squeezed as almost a vertical line.

Could provide a parameter for setting min-width for the column without width set?

Thanks !

The height of Gridview is not automatically adjusted if template field contains ajax hover extender.

I put a Ajax HoverExtender in a template field, initially invisible.

When scroll to last row, and then show the hover extender, the hover panel can't be shown completely. that means most of the panel is covered by the container. the vertical scroll bar doesn't work for this case.

Images of README

Will the vNext be released soon?

I found the exciting demo picture of vNext on the web page. It looks the footer row has been already added.
Will the new version be released soon? I can't wait to its release!

Thanks in advance!

Get cell width and set to other td

Sir,

  i need cell width please give me ref. i did client searching on table ,when i search all row cells scattered except first one row which is having width by your code.so please give me code.

Colspan in header generate error

Hi,
Could you take a look at my simple example?
I've colspan in header which generate error: gridItemCell is undefined.
Example:

 var gridViewScroll = null;
        window.onload = function () {
            gridViewScroll = new GridViewScroll({
                elementID: "gvMain",
                widtdh: 400,
                height: 200,
                freezeColumn: true,
                freezeColumnCssClass: "GridViewScrollItemFreeze",
                freezeHeaderRowCount: 1,
                freezeColumnCount: 2
            });
            gridViewScroll.enhance();
        }

<table id="gvMain">
	<tbody>
		<tr class="GridViewScrollHeader"> 
			<td colspan="2">
				Description
			</td>
		
			<td >
				Values
			</td>
		</tr>		
		<tr class="GridViewScrollItem"> 
				<td rowspan="2">
				desc value
				</td>
			
				<td>
				desc value 1
				</td>
			
				<td>
				 value 1
				</td>
		</tr>
		<tr class="GridViewScrollItem"> 
				<td>
				desc value 2
				</td>
			
				<td>
				 value 2
				</td>
		</tr>	
	</tbody>
</table>

is colspan properly supported?

Scrolling down with large amounts of data / small height.

When Scrolling down with large amounts of data or small height where a scroll is less than a pixel for the vertical bar, there will be an issue when scrolling down b/c Ints will be floored. Thus 14.9 is 14 and 15.6 is 15. [This means that scrolling down in the window will not work, but scrolling up will]

This can be fixed by adding the following into scrollVertical function:

`delta = Math.min(Math.max(delta, opt.arrowsize), maxTop);

// Start New Section
// if we're scrolling down and the delta will end up parsing into the same int, increase the delta
if (y > 0 && parseInt(delta) == parseInt(verticalbar.css('top')))
{
delta = Math.ceil(delta);
}
// End New Section

verticalbar.css({ top: delta + 'px' });`

How to set paging in top of the grid instead of bottom

Hi,

How to set paging number in top of the gridview instead of bottom of the gridview.

Cells do not align with header

Header and cells are not aligned. The freezed column and the table below is not the same size. How to fix please?

Default Find Option not Working in Firefox

Cursor not Moving Found Record in gridivew in firefox

vNext

Could you tell me when you expect to release vNext? I find the current version very useful but would like it to be mobile friendly.

Your current version allows for multiple header rows - will that still be supported within vNext?

Height issue when loading gridview with 0 rows initially

I have set height to 500.
On the initial load my gridview has 0 rows (based on some filter). And then with postback from another udatepanel on the page I get 25 rows, but I don't get vertical scroll. Its only when I do some postback from the same updatepanel where gridview is that vertical scrollbar comes.
Any help or direction please.

How to reposition the scrollbar to a specific row?

Hi,

Can you help me how to reposition the scrollbar into a specific row that I want to focus on?
By the way thanks for this tool. This helps me a lot on freezing columns.

Thanks for your help.

Dorothy

Column width not adjusted automatically.

Hi,
I am using gridviewscroll past few days. In that i have used more columns (more than 15 columns in some of the grid). But, the alignment of the column is Zig-Zag. it means the columns alignment is merging with others. i tiried many ways. but it is not working. This is urgent.pls. help.

Doesn't work if the table has a header on thead instead of tbody

If the GridView renders the header inside <thead> tags instead of <tbody> tags, it mess up the table (duplicate headers, weird scrolling).
There should be an option/flag so the library can use <thead> and <tfoot> tags for creating the scrolling options.

SeletedIdexchanged not firing after onclick row event executed...

But, mainly i have two important points to discuss.

Scenario : when i selected the row in gridview1, then it should bring all the employee records in gridview2 based on gridview1 index selection.

Problem_1 : In gridview i have "n" number of rows. when i select then it should maintain the same position even if scrolling the rows. the below code is working for selected rows maintain the same postion. But, SeletedIndex Changed Event not Firing

e.Row.Attributes("onmouseover") = String.Format("RowMouseOver({0});", e.Row.RowIndex)

e.Row.Attributes("onmouseout") = String.Format("RowMouseOut({0});", e.Row.RowIndex)
e.Row.Attributes("onclick") = String.Format("RowSelect({0});", e.Row.RowIndex) (event not Firing)

Problem_2 : Suppose selected row not maintain the same position,but, it will bring all the records in gridview2. It means selectedIndexchanged is firing. The below code is working for that.

e.Row.Attributes("onmouseover") = String.Format("RowMouseOver({0});", e.Row.RowIndex)
e.Row.Attributes("onmouseout") = String.Format("RowMouseOut({0});", e.Row.RowIndex)
'e.Row.Attributes("onclick") = String.Format("RowSelect({0});", e.Row.RowIndex) (event not Firing)
e.Row.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(grdSearchResult, "Select$" + e.Row.RowIndex.ToString())) (event firing).

My scenario is, i want to maintain selected row in the same position also it should fire the selectedIndexchanged event (both scenario).

Below is the common script

var gridviewID = "<%=grdSearchResult.ClientID%>";
var gridview = null;

var selectedRowIndex = -1;

$(document).ready(function () {
gridview = $('#' + gridviewID);

});

function RowMouseOver(rowIndex) {
if (selectedRowIndex == rowIndex) return;

var gridviewID = "<%=grdSearchResult.ClientID%>";
$('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItemHover';

}

function RowMouseOut(rowIndex) {
if (selectedRowIndex == rowIndex) return;

var gridviewID = "<%=grdSearchResult.ClientID%>";
$('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItem';

}

function RowSelect(rowIndex) {
if (selectedRowIndex == rowIndex) return;

RowReset(selectedRowIndex);

selectedRowIndex = rowIndex;

var gridviewID = "<%=grdSearchResult.ClientID%>";
$('#' + gridviewID)[0].rows[rowIndex + 1].className = 'GridviewScrollItemSelected';

}

function RowReset(rowIndex) {
var row = $('#' + gridviewID)[0].rows[rowIndex + 1]
if (row != null) {
row.className = 'GridviewScrollItem'
}

}

what is the problem....?

Gridview Scrolling Columns And Row

its working fine. but we have loading control on runtime in gridview we unable to read value dynamically from frozen column

I cannot do a horizontal scroll on the grid view using mouse orlaptop touch pad.

I cannot do a horizontal scroll on the grid view using mouse to laptop touch pad. I have to manually scroll horizontally. Is there a way we can do this?

Thanks,
Vip

Calender Extender Control (Ajax) not Display on Top.it is showing on Back of the Scroll

While doing asynchronous postback page losings gridviewscroll script?

While doing asynchronous postback page losings gridviewscroll script even after i did script register on code behind. (I have grid in update panel.. This happen when clicking "add new row" in asp.net grid view.)

I have tried with the following three methods.

ScriptManager.RegisterStartupScript(UpdatePanel_Objective, this.GetType(), UpdatePanel_Objective.UniqueID, "gridviewScroll();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "gridviewScroll();", true);
StringBuilder sb = new StringBuilder();
sb.Append("<script src='js/jquery-1.11.1.min.js'></script>");
sb.Append("<script src='js/jquery-ui.min.js'></script>");
sb.Append("<script src='js/gridviewScroll.min.js'></script>");
sb.Append("<script src='js/gridviewScroll.js'></script>");
sb.Append("<script type = 'text/javascript'>");
sb.Append("$('#<%=Objective.ClientID%>').gridviewScroll({height: 500,freezesize: 2,headerrowcount: 2});");
sb.Append("</script>");
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", sb.ToString(), true);

None of the above is worked. Please advise. Thanks.

HiddenField in FreezeColumns results in duplicate values

if a HiddenField is put in a column which is inside FreezeColumns, after postback, it will be found the HiddenField have duplicated values separated by ','.

I explored the source, and found maybe issue occured in function replaceInput(), which just deal with checkbox, radio and text, except hidden.

Hopefully the information could help improving the lib, which is an exactly wonderful tool for ASP.Net GridView I had found.

Data not synchronized if seaching with Ctrl + F

Hi All,
Issue - Whenever find (Ctrl+F) in browser then grid view scroll pug-in is not working fine in below scenario.
Scenario - We have fixed first six column, header and paging footer (100 Record per page) using this plug-in. If I search any cell value “BK-M82B-42” in grid then left div begin scroll up and right div stay static. That means second div not prompting correct value.

Please see the below snapshot.

Option to always have scrollbars visible.

According to the documentation http://gridviewscroll.aspcity.idv.tw/Documentation.aspx we can set it to Auto or Hidden. I would love the option to always be visible.

The issue of TH rowspan and colspan

Hi ,
Thanks for this plugin, it's very powerful.
But I find one issue need your help.
The below html of table can not apply GridViewScroll.
It will caused gridCopyBody[0].rows[j].cells[cellIndex].childNodes[0].style.width = width + "px"; error.
Could you kindly help to check this issue ?

$('#Table1').gridviewScroll({ width: 1660, height: 300, freezesize: 1, headerrowcount: 3 });

	Name	Number	SafetyStockLevel	ReorderPoint	StandardCost	ListPrice	Weight	Size	SellStartDate
ProductID	Product Full Information							New
	Basic				Addition			New
747	HL Mountain Frame - Black, 38	FR-M94B-38	500	375	739.0410	1349.6000	2.68	38	7/1/2005 12:00:00 AM

Alignment Issue with header and row columns

I have grid view which has dynamic columns, When number of columns to be shown in gridview are less, the header and rows are not aligned. Header width is lower than the datarow width.

I have kept grid view in panel with width set as document width and gridview width is "100%"
The other issues is when i keep the freezcolumn as true. Then also there is alignment issue with Header Row and DataRow.
Can you please help me on this?
Thanks!

Update gridviewScroll.min.js

Pull request #8 was merged, as well as there being a few open pull request. However
gridviewScroll.min.js was never updated to reflect the change.

The height of Gridview can't automatically adjust if template field contains ajax calendar extender.

When scroll to last row, and then click a textbox with an Ajax Calendar extender on this row, the calendar can't be shown completely.

Fixed Footer

Hi,

This plugin serves almost every aspect i needed, but is this possible to fixed the footer like header as my rows in last page are usually less than page size.

Bundle of thanks for this plugin.

gridViewScroll

Hi
How can i set the vertical and horizontal scroll bar to a specific position on a grid where i apply the gridviewscroll?
tkx in advance

Missing border-bottom when using freezesize

I've applied gridviewScroll to my gridview, using option freezesize set to 1. But the first cell (left-top cell) doesn't show its bottom border, as shown in the screenshot:

Without freezesize option, it works well.

Inspecting the element in the browser, I was able to restore the border by applying it to the <table> element with id="[tableid]CopyFreeze". Could you please pick the border from the original elements and apply it to the cloned object(s)?

Thank you.

getting error if row count = 0

Hi,

getting error if row count = 0.

gridviewscroll.js:34 Uncaught TypeError: Cannot read property 'rows' of null
at GridViewScroll.enhance (gridviewscroll.js:34)

Frozen Column Headers are not aligning with scrollable headers

Hi,

I freezed the 1st and 2nd column but I noticed that the column headers are higher than the scrollable column headers. I attached the screenshot.

How can I fix this in gridviewScrollmin CSS?

Internet Explorer 8

Hi Likol,

I have GridViewScroll (November 2017 version) working well in IE 11, Chrome, and FireFox.

In our Citrix environment, we still use Internet Explorer 8. :-<

For some reason, this.ContentFreezeGrid.rows.item(i) (both cgridItemRow and cgridItemCell) is never created (in IE 8), for GridViews that need to scroll horizontally.

Do you know of any way to use the November 2017 version in IE 8?

Again, it works well in all later versions!

Please let me know.

Thank you,

David Ralphs
Dallas, TX
[email protected]

set fixed width for td not working

i tried example from here http://gridviewscroll.aspcity.idv.tw/, with plain html javascript, however i am unable to set fixed width for table cells (td)
really wonderful library it would be great if we can apply fixed width for td. thanks

Window Resize Issue

Hi,

I've noticed that the gridview does not resize to fit the window when it is resized. For instance, if you set the width to 100% and open in a sized window. Then maximize the window, and the gridview stays it's original size unless you refresh the window.

Any thoughts/fixes would be greatly appreciated.

Ajax extender doesn't work in freeze columns.

Just put a link button in a freeze column, and add a confirm extender for it. If click on the link button, the confirm message can't be shown. but in non-freeze columns, it works.

Checkbox all not working when using paging.

Hi,
I am using check and Checkall option in my gridview.
When i am using paging, checkall got clear and selected checked values got disappear when i change the page.
Why....

Selected row color not working

Hi,
I am using gridviewscroll function. i am struggling in Alternating Row style color and selected Row style color. This is not working properly.
can you give us the suggestions to implement the following scenario's.

While page loading, gridview altenating Row Style should be highlighted in different color.
2.When click the particular Row, it should highlighted and show some color.
pls. suggest us...

How do we maintain vertical scroll postion of GridViewScroll after postback?

Could the tool support Footer Row

Is it possible for this Scroll Tool to show the footer row at the bottom of grid, no vertical scrolling, but horizontal scrolling with the body.
The footer row, in most cases, is used to add a new record, or to show some statistical data.
If rows is less, the table doesn't take up the container fully. and then footer and pager row are shown closely follow the last row.
Is it possible for this Scroll Tool to taking up all the container? That means, footer row or pager row shown just at the bottom of the Container DIV, no matter the rows of the body is more or less.
Could this Scrolling Tool support freezeColumns at right side?

Thanks!

How to use gridviewscroll to freeze footer row in grid

How to freeze footer row using gridviewscroll method. I don't find any dome or document regarding it. But this feature is available as per readme.md file. (See support feature list) But dont provide any information to implement this feature in grid.

Please do needful.

Having an issue with colspan on first row edit

Using GridViewScroll.js with asp.net GridView. Everything works fine - able to freeze columns and headers.

Issue is when I have edit button in the first column. When click on edit button I am having colspan for some columns for edit row only and this is getting the header wrong. This problem is only for 1st row edit.

My requirement is i have to fix two header rows for the gird view for that i am using geidview.min.js file . while headercount as2 for gridviewscroll, i am getting selected index object is not for custom header row. In that one header row generated by gridview , second header row generated by custom code on server side .

IE8 Error

Hi,

The script is great, I put it in my page and it is working great in chrome and newer IE versions, but its giving me an error in IE8:
gridviewScroll.min.js, Line: 20, Column: 4099
I don't know what the error could be there, can you help? Thanks.

Asp.net gridview first column and other columns not center alignment issue

Asp.net gridview first column and others column not aligned.gridviewscrollhelper div not taking 100% width and text centre alignment missing.
Please help me on this