Ajax TabContainer and scroll bars

Apr 28, 2010 at 2:06 PM

Good day to all.

I use MS AJAX TabCointainer with 3 tabs. Each tab (or TabPanel) with CoolGridView. (CoolGridView1 on TabPanel1, CoolGridView2 on TabPanel2, CoolGridView3 on TabPanel3).

Scroll bar showed only on first TabPanel1 for CoolGridView1. CoolGridView2 and CoolGridView3 scroll bars are hidden. :-(

Please, help me.

May 2, 2010 at 12:50 PM
I'm using the 3 Tabs with jquery UI and I'm having the same issue in FF and Chrome with grid 2 and 3. However, everything works ok in IE.
May 13, 2010 at 11:36 PM
Hi, don't know if you found a fix for this but just dig in your css and replace the css that hides the divs for your tabs with this : .ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; top: -10000px; }
May 14, 2010 at 11:12 AM

Thank you, thecoach77

But I am not use jQery and i have not css with .ui-tabs or .ui-tabs-hide.

In CoolGridView sources I see only CoolCore.js, CoolGridView.js and Gradient.css for Gradien skin.

Aug 16, 2010 at 11:12 PM

I don't know if this has anything to do with the problem you're having but I had a similar issue with CoolGridView inside of an Ajax modal popup.  The vertical scroll bar would not display when supposed to, the scroll bar shows if you re-size a column.  I fixed this by modifying the CoolGridView.cs source file.  If you're using the DLL version you'll need to download the source and sample project. 

1.Locate class IdeaSparx.CoolControls.Web.CoolGridView and edit method Render.

2.Find the lines

writer.AddAttribute(HtmlTextWriterAttribute.Id, TableContainerID);

writer.AddStyleAttribute(HtmlTextWriterStyle.Overflow, "auto");

3.Insert this line in between:

writer.AddStyleAttribute(HtmlTextWriterStyle.Height, (Height.Value-20).ToString()+ "px");

That's all.  Now, I'm not an ASP.NET master so my fix may be 'bad coding method' or 'ugly hack' but as far as I can tell it seems to work pretty good (tested on FF 3.6.8 and still works in IE 7 and 8.

I hope the author of this control reads this to provide us a real fix for this issue.  Other than that, it's a wonderful control.

Thanks

Jul 13, 2011 at 7:10 PM
Edited Jul 13, 2011 at 7:12 PM

Here's what I get (using the coolgrid control inside ajax tab control).

On the page in question for me, I have a coolgrid above of a set of tabs---this control works as expected. I'll call this coolgridA.

On (3) of the tabs, there are other coolgrids.  Now what I've noticed is if I'm on a non-coolgrid tab when I select a a row in coolgridA, the scrollbars are not present when I switch to a tab that has the control on it initially---of course when I touch the coolgrid control the scrollbar appears.

I refresh/reset the page and then click on a tab that contains the coolgird control, then select a row in coolgridA again.  As long as a tab that has a coolgird on it is showing when I select a ticket the scrollbars show up just fine.

So if you are using tabs, try to make one of the tabs that has the coolgrid control on it the ActiveTab initially and see if the coolgrid control renders with the scrollbars.  Of course this doesn't fix the issue, but thought I'd share my testing and the results to see if there is common behavior between us.

Looks to me like there may be a minor rendering issue when the coolgrid control is not initially visible to the user.

Hopefully this will be fixed soon :).  Minor bug for me, but excellent control for my purposes.

May 18, 2012 at 7:29 AM

ptrinephi , Thanks you. Your change works perfectly with Tabs and with modalpopupExtender. The only small problem is that the modalPopupExtender does not maintain the position of the scroll

But, thanks you!!

Sep 5, 2012 at 4:40 PM
Rainbowing wrote:

ptrinephi , Thanks you. Your change works perfectly with Tabs and with modalpopupExtender. The only small problem is that the modalPopupExtender does not maintain the position of the scroll

But, thanks you!!


Yes! Thank you ptrinephi! I had problems with the CoolGridView inside a tabpanel inside a usercontrol (no scrollbars).

Added your fix and the scrollbars are working!