twlikol / gridviewscroll Goto Github PK
View Code? Open in Web Editor NEWFreeze column and fixed header in Table or GridView
License: MIT License
Freeze column and fixed header in Table or GridView
License: MIT License
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
its working fine. but we have loading control on runtime in gridview we unable to read value dynamically from frozen column
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 ?
ProductID | Product Full Information | New | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic | Addition | |||||||||||||
Name | Number | SafetyStockLevel | ReorderPoint | StandardCost | ListPrice | Weight | Size | SellStartDate | ||||||
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 |
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.
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.
Thanks!
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.
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.
Cursor not Moving Found Record in gridivew in firefox
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 !
Calender Extender Control (Ajax) not Display on Top.it is showing on Back of the Scroll
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.
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.
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.
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 :)
Hi,
How to set paging number in top of the gridview instead of bottom of the gridview.
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.
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.
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?
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.
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
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.
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]
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?
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....?
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....
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.
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
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.
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.
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!
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
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' });`
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.
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
}
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.
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.
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.
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:
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!
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.