No Scroll Bars after adding data

I am having an issue that my grid does not get scroll bars at all. I create a blank grid then add the records to it. It might be an issue in that I am creating a grid that does not need scroll bars then adding data to it, it somehow is not updating the scroll bars to reflect the new data.

Jim Hunter

October 24,

follow-up, more info: I don't get the vertical scroll bar on IE but I do on FF. And I don't get the horizontal scroll bar on either browser.

Jim Hunter

October 24,

I have the same problem as Jim. No scroll bars exist after loading data into a grid. The column definition is 11 columns, when the grid displays the first 6 are shown, but a horizontal scroll-bar does not appear.

I have found that the horizontal scroll will appear if the grid is not sharing the frame with anything else. However if I try to add a button bar across the top of the frame then the scroll bar stops working.

This code shows a scroll bar:

<html>
<head>
<title>Object List Page Grid</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;font: menu;border: none;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<link href="../ActiveWidgets/runtime/styles/flat/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../ActiveWidgets/runtime/lib/grid.js"></script>

</head>
<body>

<script>
var obj_columns = [
"Filename","Title","Description","DateModified","State","UniqueId","Security","Version","Format","Locked","LockedBy"
];
var obj_data = [
["395381.png", "sample1", "description1", "", "Review", "TestProject1-0000002y", "Project", "1.0", "Image", "n", "", ],
["Point and Click Linux.jpg", "sample2", "description2", "", "Review", "TestProject1-0000002z", "Project", "1.0", "Image", "n", "", ],
];
try {
  var scrollGrid = new Active.Templates.Scroll;
  var obj = new Active.Controls.Grid;
  obj.setRowCount(2);
  obj.setColumnCount(11);
  obj.setDataText(function(i, j){return obj_data[i][j]});
  obj.setColumnText(function(i){return obj_columns[i]});
  obj.setLayoutTemplate(scrollGrid);
  document.write(obj);
}
catch (error){
  document.write(error.description);
}
</script>

</body>
</html>

This code does not show the scroll bar:

<html>
<head>
<title>Object List Page Grid</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;font: menu;border: none;} </style>

<!-- ActiveWidgets stylesheet and scripts -->
<script src="../workspace/obj_button_bar.js"></script>
<link href="../ActiveWidgets/runtime/styles/flat/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../ActiveWidgets/runtime/lib/grid.js"></script>
</head>
<body>

<table><tr><td>
<A href="http://localhost/sjm_edms/import/ImportFrames.html" onMouseOver="return changeImage('btnImport')" onMouseOut=" return changeImageBack('btnImport')" onMouseDown="return handleMDown('btnImport')" onMouseUp="return handleMUp('btnImport')">
 <img name="btnImport" src="../images/btnImport.png" width="32" height="24" border="0" alt="Import"></A></td>
<td><A href="http://www.google.com" onMouseOver="return changeImage('btnView')" onMouseOut=" return changeImageBack('btnView')" onMouseDown="return handleMDown('btnView')" onMouseUp="return handleMUp('btnView')">
 <img name="btnView" src="../images/btnView.png" width="32" height="24" border="0" alt="View"></A></td>
<td><A href="http://www.google.com" onMouseOver="return changeImage('btnEdit')" onMouseOut=" return changeImageBack('btnEdit')" onMouseDown="return handleMDown('btnEdit')" onMouseUp="return handleMUp('btnEdit')">
 <img name="btnEdit" src="../images/btnEdit.png" width="32" height="24" border="0" alt="Edit"></A></td>
<td><A href="http://www.google.com" onMouseOver="return changeImage('btnCheckOut')" onMouseOut=" return changeImageBack('btnCheckOut')" onMouseDown="return handleMDown('btnCheckOut')" onMouseUp="return handleMUp('btnCheckOut')">
 <img name="btnCheckOut" src="../images/btnCheckOut.png" width="32" height="24" border="0" alt="Check Out"></A></td>
<td><A href="http://www.google.com" onMouseOver="return changeImage('btnCheckIn')" onMouseOut=" return changeImageBack('btnCheckIn')" onMouseDown="return handleMDown('btnCheckIn')" onMouseUp="return handleMUp('btnCheckIn')">
 <img name="btnCheckIn" src="../images/btnCheckIn.png" width="32" height="24" border="0" alt="Check In"></A></td>
<td><A href="http://www.google.com" onMouseOver="return changeImage('btnCancelChkOut')" onMouseOut=" return changeImageBack('btnCancelChkOut')" onMouseDown="return handleMDown('btnCancelChkOut')" onMouseUp="return handleMUp('btnCancelChkOut')">

 <img name="btnCancelChkOut" src="../images/btnCancelChkOut.png" width="32" height="24" border="0" alt="Cancel Check Out"></A></td>
<td><A href="http://www.google.com" onMouseOver="return changeImage('btnDelete')" onMouseOut=" return changeImageBack('btnDelete')" onMouseDown="return handleMDown('btnDelete')" onMouseUp="return handleMUp('btnDelete')">
 <img name="btnDelete" src="../images/btnDelete.png" width="32" height="24" border="0" alt="Delete"></A></td>
</tr></table>
<script>
var obj_columns = [
"Filename","Title","Description","DateModified","State","UniqueId","Security","Version","Format","Locked","LockedBy"
];
var obj_data = [
["395381.png", "ob1_name", "ob1_descript", "2005-09-15", "Draft", "TestProject1_00000029", "Version", "1.0", "Image", "n", "", ],
["Point and Click Linux.jpg", "ob2_name", "ob2_description", "2005-09-12", "Review", "TestProject1_0000002a", "Read-only", "1.0", "Image", "n", "", ],
["395381.png", "sample1", "description1", "", "Review", "TestProject1-0000002y", "Project", "1.0", "Image", "n", "", ],
["Point and Click Linux.jpg", "sample2", "description2", "", "Review", "TestProject1-0000002z", "Project", "1.0", "Image", "n", "", ],
["395381.png", "ob3_name", "ob3_description", "2005-09-11", "Checked", "TestProject1_0000002b", "Private", "1.1", "Image", "y", "ceg", ],
];
try {
  var scrollGrid = new Active.Templates.Scroll;
  var obj = new Active.Controls.Grid;
  obj.setRowCount(5);
  obj.setColumnCount(11);
  obj.setDataText(function(i, j){return obj_data[i][j]});
  obj.setColumnText(function(i){return obj_columns[i]});
  obj.setLayoutTemplate(scrollGrid);
  document.write(obj);
}
catch (error){
  document.write(error.description);
}
</script>


</body>
</html>

Scott Mathews

October 26,

Have you found a workaround/fix for this yet?

I've tried a refresh() after adding the data, and that doens't seem to help.

Clinton

November 4,

Nothing yet...

Jim Hunter

November 4,

I have tracked down the problem to the AW.Grid.Controllers.Size function. When the browser is trying to render the populated grid, an error occurs in the following line:

this._columnWidth1[ii] = this.getHeaderTemplate(ii).element().offsetWidth;

the exception states that element().offsetWidth is null or not an object.

OK Alex, your turn. I found the offending code, now you get to work your magic. I tried putting a try catch around that line and it does get rid of the error message but then I get a blank spot on the right of the grid where the scroll bar should be. Without the Try/Catch I get an exception but I don't get a voided area where the scroll bar should be, it displays the grid information.

Jim Hunter

December 13,

Have anybody solved this issue?... Alex, Have you planned to fix it in a next release? I would like to include the grid component in my projects, but I'm finding too many unresolved bugs...

Pls, don't missunderstand me, I think it's a good product, but no mature enough to use it in real projects...

Jose Luis (Spain)

January 13,

I think I have found a workaround that works in my case. When I insert new rows, I raise an event manually... something like this...

grid.onRowAdded = function(row){
    gridCupones.raiseEvent("adjustScrollBars");
}

The only problem seems to be that it doesn't take into account the horizontal scroll bar so until you add another row more the vertical scroll bar is not painted...

I hope this can help...

Jose Luis (Spain)

January 13,

I concur on this issue, I have had the same problem.

Tony

January 13,

Jose, version 2 is still in beta! It is not mature, it is beta. Yes there are unresolved issues, it's still beta. I use version 1 right now, today, for over a thousand users on a daily basis and it is performing wonderfully. Version 1 in a released product. If version 2 was considered final and not beta, then taking issue that there are unresolved bugs is perfectly fine. But when a product is in a beta cycle, THERE ARE GOING TO BE BUGS. It is the responsibility of the beta testers, that would be all of us, the find and report the bugs not complain about them. You are fortunate that you are able to test this fine product before it's released. This gives you the ability to be ahead of the game once the product is released. I have been beta testing software for 20 years and this toolkit is no different then anything else I have tested.
And my final thought on the subject of using this in your products that your customers are going to see is that if it does everything that you need to do and it does it well, then use it. I suggest setting up test scenarios that test the functionality that you need. And as long as the test pass then go ahead and use the toolkit as is. And when a new release comes out, run it through your tests and if they still pass then you are good to go, go ahead and use it. If they fail, continue to use the version that passes until the new versions pass your tests. There are lots of things that people might not like about version 1, but I don't use anything that those issues would effect. So I don't have to worry about patching version 1 or upgrading it or anything else, I run it like it is since it does what I want. And for version 2, once it does everything that I need, I will go ahead and deploy it. It doesn't bother me that something doesn't work that I don't use because I don't use it. Alex has done a ton of work on this and I suggest giving him the credit he deserves in creating the best (and I have tested a bunch of them) grid component and toolkit available today! Nice work Alex!

Jim Hunter

January 13,

I have the same problem...any solutions yet?

Josh Johnson

June 8,

try adding this at the end

objGridConference.raiseEvent("adjustScrollHeight");
objGridConference.raiseEvent("adjustScrollBars");

blaxxun

June 19,

allso had a problem with the scrollbar, after adding of showing the grid i put a javascript timer of 1 second and then refreshed the grid.

hope it helps

raduen

July 17,

This topic is archived.

No Scroll Bars after adding data

See also:

Search

New Data Grid

Version 2