Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
265
Webgrid UI Issue
posted

 I posted this earlier also but did not get any solution. Here is my issue.
I am having a webgrid on my page. There is a  button on that page which when clicked opens a  modal pop up with a search.
On successfull search there is a button on my modal pop up which when clicked creates a new row in my webgrid and populates
the grid with that search result. My problem is with the UI of the grid. When the number of rows in the grid become greater than the
height of the grid, my grid starts moving upwards overlapping the controls above.
Below is my grid html. I have tried setting the height, scroll, or even that of the table or having a div outside but no help.
Any help is appreciated. Thanks.

 <table width="32%" id="tbl1" >
    <tr>
        <td style="width:40%;position:relative">
              <igtbl:UltraWebGrid  ID="myGrid" EnableViewState="False"
                Browser="Xml" runat="server" Height="150px" 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>  
                                <Footer>
                                <RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo>
                                </Footer>
                            </igtbl:UltraGridColumn>
                            <igtbl:UltraGridColumn BaseColumnName="Protocol" IsBound="True" Key="Protocol"
                                Width="120px">
                                <Header Caption="Protocol">                                    
                                    <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo>
                                </Header>    
                                <Footer>
                                <RowLayoutColumnInfo OriginX="2"></RowLayoutColumnInfo>
                                </Footer>
                            </igtbl:UltraGridColumn>
                            <igtbl:UltraGridColumn BaseColumnName="Type" IsBound="True" Key="type" Width="100px">
                                <Header Caption="Type">                                   
                                    <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo>
                                </Header>
                                <Footer>
                                <RowLayoutColumnInfo OriginX="3"></RowLayoutColumnInfo>
                                </Footer>
                            </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="150px"  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>

 See below howthe grid overlaps the controls above whenver a new row is added to it.

 

 

  • 265
    Verified Answer
    posted

     I solved it.

     set the style of my table as:

    style="position:relative;overflow:auto;:

    and removed the height property of my grid and framestyle and it worked