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.
Here is the code of the both two grids. I just removed the columns.
<igtbl:UltraWebGrid ID="dgvStade1" runat="server" SkinID="GridStandard" style="width: 100%; height: 100%; top: 0px; left: 0px;" Height="180px"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> <Columns> </Columns> </igtbl:UltraGridBand> </Bands> <DisplayLayout BorderCollapseDefault="Separate" LoadOnDemand="Automatic" Name="UltraWebGrid1" NoDataMessage="Aucune donnée" RowHeightDefault="20px" Version="4.00" ColWidthDefault="50px" autogeneratecolumns="False"> <ClientSideEvents InitializeLayoutHandler="dgvStade1_InitializeLayout" /> <FrameStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" height="180px" width="600px"> </FrameStyle> <Pager MinimumPagesForDisplay="2"> <Style BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /></Style> </Pager> <EditCellStyleDefault BorderStyle="None" BorderWidth="0px"> </EditCellStyleDefault> <FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </FooterStyleDefault> <HeaderStyleDefault BackColor="LightGray" BorderStyle="Solid" HorizontalAlign="Left"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </HeaderStyleDefault> <RowStyleDefault BackColor="Window" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" Cursor="Default"> <Padding Left="3px" /> <BorderDetails ColorLeft="Window" ColorTop="Window" /> </RowStyleDefault> <GroupByRowStyleDefault BackColor="Control" BorderColor="Window"> </GroupByRowStyleDefault> <GroupByBox> <Style BackColor="ActiveBorder" BorderColor="Window"> </Style> </GroupByBox> <AddNewBox> <Style BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /></Style> </AddNewBox> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> <FilterOptionsDefault> <FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Height="300px" Width="200px"> <Padding Left="2px" /> </FilterDropDownStyle> <FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"> </FilterHighlightRowStyle> <FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px"> <Padding Left="2px" /> </FilterOperandDropDownStyle> </FilterOptionsDefault> </DisplayLayout> </igtbl:UltraWebGrid> <igtbl:UltraWebGrid ID="dgvStade2" runat="server" Height="62px" SkinID="GridStandard" style="top: 0px; left: 0px; width: 100%" Width="600px"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> <Columns> </Columns> </igtbl:UltraGridBand> </Bands> <DisplayLayout BorderCollapseDefault="Separate" ColHeadersVisibleDefault="No" ColWidthDefault="50px" LoadOnDemand="Automatic" Name="UltraWebGrid1" NoDataMessage="Aucune donnée" RowHeightDefault="20px" Version="4.00" autogeneratecolumns="False" scrollbar="Always"> <FrameStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" height="62px" width="600px"> </FrameStyle> <Pager MinimumPagesForDisplay="2"> <Style BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </Style> </Pager> <EditCellStyleDefault BorderStyle="None" BorderWidth="0px"> </EditCellStyleDefault> <FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </FooterStyleDefault> <HeaderStyleDefault BackColor="LightGray" BorderStyle="Solid" HorizontalAlign="Left"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </HeaderStyleDefault> <RowStyleDefault BackColor="Window" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" Cursor="Default"> <Padding Left="3px" /> <BorderDetails ColorLeft="Window" ColorTop="Window" /> </RowStyleDefault> <GroupByRowStyleDefault BackColor="Control" BorderColor="Window"> </GroupByRowStyleDefault> <GroupByBox> <Style BackColor="ActiveBorder" BorderColor="Window"> </Style> </GroupByBox> <AddNewBox> <Style BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </Style> </AddNewBox> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> <FilterOptionsDefault> <FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Height="300px" Width="200px"> <Padding Left="2px" /> </FilterDropDownStyle> <FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"> </FilterHighlightRowStyle> <FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px"> <Padding Left="2px" /> </FilterOperandDropDownStyle> </FilterOptionsDefault> </DisplayLayout> </igtbl:UltraWebGrid>
The first, dgvStade1, should also scroll the second, dgvStade2, when scrolled.
I have uploaded the working sample.
Please check it. Do you need the same?
Let me know if it helps.
With your sample the GridScrolled() is well triggered when I move the scrollbar, but I have a Null Exception on this line :
grid2.getDivElement().scrollLeft = grid1.getDivElement().scrollLeft;
Maybe the following lines don't work to get the grids :
var grid1 = igtbl_getGridById("dgvStade1"); var grid2 = igtbl_getGridById("dgvStade2");
I'm working on it.
Try replacing those lines in this way
var grid1 = igtbl_getGridById("<%= dgvStade1.ClientID %>");
var grid2 = igtbl_getGridById("<%= dgvStade2.ClientID %>");
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.