Hi all !
I'm in front of a problem : I got two webgrids vertically aligned in my page. The top grid has a horizontal scrollbar at the bottom. I want to make this scrollbar scrolling the two webgrids at the same time. I don't know how to do that because the webgrids don't have a scrolling event handler.
Could someone help me please ?
Bye
Hi,
You can try following.
(1) Setting scroll event handler to grid. Handle InitializeLayout event of grid1 in following way.
function grid1_InitializeLayout(gridName)
{
var grid = igtbl_getGridById(gridName);
if(ig_shared.IsFireFox)
grid.getDivElement().addEventListener("scroll", GridScrolled, false);
}
else
grid.getDivElement().onscroll = GridScrolled;
(2) Handling the scroll event
function GridScrolled()
var grid1 = igtbl_getGridById("grid1");
var grid2 = igtbl_getGridById("grid2");
grid2.getDivElement().scrollLeft = grid1.getDivElement().scrollLeft ;
I think that all other things are already managed like changing column width of any grid.
Also note: You need a reference of html component which contains scrollbar. Usage of grid.getDivElement() in above code is valid for XMLLoadOnDemand = virtual. You may need to use some other way to get reference of the control showing scrollbar.
Please let me know if this helps you.
Hi HBA,
Thanks for your reply. Your solution seems really good, I'm trying to implement it in my project.
But, as you said, Usage of grid.getDivElement() doesn't work. I'm looking for another way to get the reference of the control showing scrollbar.
I will inform you on my progress.
Thanks for sharing your solutions/samples on this issue. I need to implement the same thing - Horizontal scroll for 2 grids, but got not much help from IG priority supports. Thanks.
Hi
I am using the above mentioned logic in my application.
In my case I am able to scroll the other grids when I scroll the first grid. But in the first grid, scroll bar is moving but the grid is not scrolling.
Please help me.
Thanks
Naresh Thandu
I'm in front of another problem. The rows of the both two grids move with the scrollbar but the columns' headers don't. Any idea to resolve it ?
I tried this code :
var grid1 = igtbl_getGridById("<%= dgvStade1.ClientID %>");
var grid2 = igtbl_getGridById("<%= dgvStade2.ClientID %>");
It seems to find my grids but their appearance is not correct after (the column and rows overflow from the grid).
For the moment I keep this solution which is working but you're right it's not a so good practice.
Great…
Have you tried usage of following code which I posted in previous post?
What happened with above code?
I think it is wrong practices to provide element id in that way. Your page will stop working if your architecture get changes or any container in hierarchy gets renamed.
I think above code should work other wise you need to find some alternate way to get grid’s id.