I am having a Webgrid display issue that I posted earlier also sometime back but did not get any help.So here its again:I have a web page with an add button and a Webgrid . On Clicking the add button I open an Ajax Modal Popup Extender where there is a input form. Once they fill that form and click input button on the modal popup I am populating my web grid with the values entered. Where in a create a new row in the webgrid through javascript. Now I have wrapped my grid inside a table and set the height of the grid.Now whenever the rows become more it overlaps my table and keeps on overlapping other controls going up.Here is the code I am using to Add a new row in BLOCKED SCRIPTfunction PopulateGrid(name, protocol, type { var gridClientId = '<%=myGrid.ClientID %>'; var grid = igtbl_getGridById(gridClientId); var gridRow; var found = false; var activeRow = igtbl_getActiveRow(gridClientId); var activeRow1 = igtbl_getActiveRow(gridClientId); igtbl_setActiveRow(gridClientId,igtbl_getElementById(gridClientId)); igtbl_setActiveRow(gridClientId,igtbl_getElementById(gridClientId)); gridRow = igtbl_addNew(gridClientId,0); gridRow.getCell(0).setValue(id); gridRow.getCell(1).setValue(""); gridRow.getCell(2).setValue(protocol); gridRow.getCell(3).setValue(""); gridRow.getCell(4).setValue(""); gridRow.getCell(5).setValue(""); gridRow.getCell(6).setValue(""); }
And here is my grid:
<table width="100%"> <tr><td>
igtbl:UltraWebGrid ID="myGrid" EnableViewState="False" Browser="Xml" runat="server" Height="200px" Width="100%" Indentation="0" StyleSetPath="~/ig_res/" StyleSetName="IMC" EnableAppStyling="True"> <Bands> <igtbl:UltraGridColumn BaseColumnName="Name" IsBound="True" Key="Name" Width="160px"> <Header Caption="Name"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="Phone" IsBound="True" Key="Phone" Width="160px"> <Header Caption="Phone"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> <igtbl:UltraGridColumn BaseColumnName="Type" IsBound="True" Key="Type" Width="160px"> <Header Caption="Type"> <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo> </Header> </igtbl:UltraGridColumn> </Bands> <DisplayLayout OptimizeCSSClassNamesOutput="False" AllowAddNewDefault="Yes" AllowColSizingDefault="Free" AllowSortingDefault="OnClient" BorderCollapseDefault="Separate" HeaderClickActionDefault="SortMulti" Name="xrecg" RowHeightDefault="20px" RowSelectorsDefault="No" SelectTypeRowDefault="Extended" StationaryMargins="Header" StationaryMarginsOutlookGroupBy="True" Version="4.00" ScrollBarView="Vertical" RowsRange="10" ViewType="OutlookGroupBy" ScrollBar="Auto" CellClickActionDefault="RowSelect"> <FilterOptionsDefault AllowRowFiltering="No" /> <SelectedRowStyleDefault CssClass="igtbl_IMCSelected"> </SelectedRowStyleDefault> <FrameStyle Height="200px" Width="100%" BackColor="#DDE7F4" Font-Names="Microsoft Sans Serif" Font-Size="8.25pt" CustomRules="display:inline;" TextOverflow="Ellipsis" > </FrameStyle> <HeaderStyleDefault Width="100%"> </HeaderStyleDefault> <GroupByBox Hidden="True"> </GroupByBox> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> </DisplayLayout> </igtbl:UltraWebGrid>
</td></tr></table>
Any suggestions where am I going wrong.
Here is the link to the layout
http://img136.imageshack.us/img136/1594/79332281ao5.jpg
see how its going out of the table border.
No I just tried that, it did not solved the issue
I have specified in the displaylayout itself above the scrollbar = auto
and specified the rows to be displayed = 10
thats where the scrollbar is coming from there are no containers anywhere else