twlikol / gridviewscroll Goto Github PK

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]

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!

Cursor not Moving Found Record in gridivew in firefox

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.

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.

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.

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?

1. 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.
2. 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.
3. Could this Scrolling Tool support freezeColumns at right side?

Thanks!

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.

1. 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...

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' });`

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.

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

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,
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....

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?

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.

1. ScriptManager.RegisterStartupScript(UpdatePanel_Objective, this.GetType(), UpdatePanel_Objective.UniqueID, "gridviewScroll();", true);

2. ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "gridviewScroll();", true);

3. 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.

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
    } 

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 :)

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:

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.

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.

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.

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.

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.

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.

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

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.

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

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

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....?

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

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 ,
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 ?

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.

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 scroll to last row, and then click a textbox with an Ajax Calendar extender on this row, the calendar can't be shown completely.

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

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,

getting error if row count = 0.

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

Hi,

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

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.

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.

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,

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.

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?

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.