RadGrid Row Data Overflow in IE8

7 posts, 0 answers
  1. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 08 Feb 2013 Link to this post

    Totally fed-up Team Telerik.
    Just check the attachment please.

    Please remind if you giving any solution please confirm it will not affect other telerik controls.

    Presently we are using these Global CSS properties


    html{overflow:hidden;}
    html, body, form {width:auto; height:auto;}
    html, body {margin:0; padding:0;}
    html, body{width:100%!important; height:100%!important;}
    form {width:100%!important; height:96%!important;}
    html, body, form, span, label, td, th{font-family:Tahoma, Arial!important; font-size:11px!important;}
    body {overflow:auto;}

    h2, h3 {margin:3px 0 7px 0}
    h2.feldsetLegend {font-size:12px; border-bottom:solid 1px #ccc; margin:0px 0 10px 0; padding-bottom:2px}
    table{border-collapse:collapse;}

    span, label {font-family:Tahoma, Arial, Verdana!important;}
    h2, h3 {margin:3px 0 7px 0}
    hr {border:none;border-bottom:solid 1px #999}
    h2.feldsetLegend {font-size:12px; border-bottom:solid 1px #ccc; margin:0px 0 10px 0; padding-bottom:2px}


    fieldset {padding:0px 5px 7px 5px;}
    legend {font-weight:bold!important; font-size:11px!important}
    table{width:100%;}

    a.rwIcon{background-image: none !important;}
    .rwTitlebarControls td {width:auto!important}

    ----------------------------------------------------------------------------------------------------
    Thanks in Advance
  2. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 11 Feb 2013 Link to this post

    Team Telerik please give a fast solution.
    Its going to release.

    Now we found another major issue in IE8
    RadGrid Header Vertical Line(Border) and Row vertical lines(Border) are not correct vertically ...

    Please refer the attachec screen shot
    Data overflow is also shown in that Screen shot
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 13 Feb 2013 Link to this post

    Hello Vargis,

    It would be hard to reproduce the problem without the full content of your page. Could you please send us your markup and CSS or a page in which the problem can be replicated? I suppose that somewhere you have set position relative for the MasterTableView. If this is the case please try setting:
    .rgDataDiv
       {
           position: relative;   
       }
    Also if you are using static headers and the width of the column is being set please remove the width from one of the columns so the grid can recalculate the alignment. In attachments you can find the project in which I have tried to reproduce the described issue.

    Regards,
    Angel Petrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 13 Feb 2013 Link to this post

    Actually I had already included this class and property
    .rgDataDiv
       {
           position: relative;   
       }

    I have an outer div container with this css property.
  6. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 15 Feb 2013 Link to this post

    Hi Vargis,

    Please provide a page in which this problem replicates. It would be hard to determine what is causing this problem without having a full view over your setup.

    Kind regards,
    Angel Petrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. KARTHIK
    KARTHIK avatar
    21 posts
    Member since:
    Oct 2013

    Posted 01 Oct 2013 Link to this post

    Team Telerik,
      I have issue in Radgrid edit pop up with parent/child relation ship
    attached screenshot shows the Grid values shows in edit pop up.

    please provide solution as soon as possible

    Below is aspx for radgrid
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AllowMultiRowSelection="False"
                Skin="Office2007" GridLines="None" OnItemDataBound="RadGrid1_ItemDataBound" OnInsertCommand="RadGrid2_InsertCommand"
                OnItemCommand="RadGrid2_ItemCommand" ShowStatusBar="true" AllowFilteringByColumn="True"
                AllowPaging="True" PageSize="15" OnUpdateCommand="RadGrid2_OnUpdateCommand" OnNeedDataSource="RadGrid1_NeedDataSource"
                OnDetailTableDataBind="RadGrid1_DetailTableDataBind" AutoGenerateColumns="false">
                <MasterTableView Width="100%" DataKeyNames="TabID" AllowMultiColumnSorting="True"
                    Name="Tabs" CommandItemDisplay="top" EditMode="PopUp"
                    PageSize="15">
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="TabID" Name="Links" Width="100%" CommandItemDisplay="top"
                            EditMode="PopUp">
                            <Columns>
                                <telerik:GridEditCommandColumn>
                                </telerik:GridEditCommandColumn>
                                <telerik:GridBoundColumn UniqueName="LinkID" ItemStyle-ForeColor="White" ItemStyle-Width="20px"
                                    ItemStyle-Wrap="false" Visible="false" HeaderText="" DataField="LinkID">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="TabID" HeaderText="TabID" DataField="TabID"
                                    Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Name" HeaderText="Name" DataField="Name" Visible="true"
                                    FilterControlWidth="150px">
                                    <ItemStyle Width="150px" />
                                    <HeaderStyle Width="150px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Order" HeaderText="Order" DataField="Order"
                                    FilterControlWidth="30px" Visible="true">
                                    <ItemStyle Width="30px" />
                                    <HeaderStyle Width="30px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="status" HeaderText="status" DataField="status"
                                    Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Description" HeaderText="Description" DataField="Description"
                                    FilterControlWidth="150px">
                                    <ItemStyle Width="150px" />
                                    <HeaderStyle Width="150px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="FileName" HeaderText="File Name" DataField="FileName">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="FolderName" HeaderText="Folder Name" DataField="FolderName">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Path" HeaderText="Path" DataField="Path">
                                    <ItemStyle Width="150px" />
                                    <HeaderStyle Width="150px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Parent" HeaderText="Parent" DataField="Parent"
                                    Visible="true">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="HyperLink" HeaderText="HyperLink" DataField="HyperLink"
                                    Visible="false">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="QuickAccess" HeaderText="QuickAccess" DataField="QuickAccess">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Display" HeaderText="Display" DataField="Display"
                                    Visible="false">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="ContextUrl" HeaderText="ContextUrl" DataField="ContextUrl">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Target" HeaderText="Target" DataField="Target">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="ReportType" HeaderText="ReportType" DataField="ReportType">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="FormulaFileName" HeaderText="FormulaFileName"
                                    DataField="FormulaFileName">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="FormulaFolderName" HeaderText="FormulaFolderName"
                                    DataField="FormulaFolderName">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="ReportTemplate" HeaderText="ReportTemplate"
                                    DataField="ReportTemplate">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="ReportServerConfig" HeaderText="ReportServerConfig"
                                    DataField="ReportServerConfig">
                                    <ItemStyle Width="50px" />
                                    <HeaderStyle Width="50px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="Delete"
                                    ConfirmText="Are you sure want to delete the selected LineItem?" ConfirmDialogType="Classic"
                                    ConfirmTitle="Delete" ButtonType="ImageButton" ImageUrl="~/Images/delete.png" />
                            </Columns>
                            <EditFormSettings InsertCaption="Add New Record" CaptionFormatString="Edit " CaptionDataField="Tabid"
                                PopUpSettings-Height="380" EditFormType="Template" PopUpSettings-Modal="true"
                                PopUpSettings-Width="560">
                                <FormTemplate>
                                    <table id="Table1"  cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                            style="border-collapse: collapse;">
                                        <tr>
                                            <td>
                                                <table id="Table2" cellspacing="1" cellpadding="1" border="0">
                                                    <tr>
                                                        <td>
                                                            Name:
                                                        </td>
                                                        <td colspan="3">
                                                            <asp:TextBox ID="txtName" Height="20px" Text='<%# Bind( "Name") %>' runat="server"
                                                                Width="420px" TextMode="MultiLine">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Description:
                                                        </td>
                                                        <td colspan="3">
                                                            <asp:TextBox ID="txtDescription" Height="20px" Text='<%# Bind( "Description") %>'
                                                                runat="server" TextMode="MultiLine" Width="420px">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            File Name:
                                                        </td>
                                                        <td colspan="3">
                                                            <asp:TextBox ID="txtFilename" Height="20px" Text='<%# Bind( "Filename") %>' runat="server"
                                                                Width="420px" TextMode="MultiLine">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Path:
                                                        </td>
                                                        <td colspan="3">
                                                            <asp:TextBox ID="txtPath" Height="20px" Text='<%# Bind( "Path") %>' runat="server"
                                                                Width="420px" TextMode="MultiLine">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Order :
                                                        </td>
                                                        <td>
                                                            <telerik:RadNumericTextBox ID="txtOrder" Text='<%# Bind( "Order") %>' runat="server"
                                                                Width="150px" NumberFormat-DecimalDigits="0">
                                                            </telerik:RadNumericTextBox>
                                                        </td>
                                                        <td>
                                                            Folder Name:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtFolderName" Text='<%# Bind( "FolderName") %>' runat="server"
                                                                Width="150px">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Quick Access :
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtQuickAccess" Text='<%# Bind( "QuickAccess") %>' runat="server"
                                                                Width="150px">
                                                            </asp:TextBox>
                                                        </td>
                                                        <td>
                                                            Context Url:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtContextUrl" Text='<%# Bind( "ContextUrl") %>' runat="server"
                                                                Width="150px">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Parent :
                                                        </td>
                                                        <td>
                                                            <telerik:RadNumericTextBox ID="txtParent" Text='<%# Bind( "Parent") %>' runat="server"
                                                                Width="150px" NumberFormat-DecimalDigits="0">
                                                            </telerik:RadNumericTextBox>
                                                        </td>
                                                        <td>
                                                            Report Type:
                                                        </td>
                                                        <td>
                                                            <telerik:RadNumericTextBox ID="txtReportType" Text='<%# Bind( "ReportType") %>' runat="server"
                                                                Width="150px" NumberFormat-DecimalDigits="0">
                                                            </telerik:RadNumericTextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Target :
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtTarget" Text='<%# Bind( "Target") %>' runat="server" Width="150px">
                                                            </asp:TextBox>
                                                        </td>
                                                        <td>
                                                            Formula&nbsp;FileName:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtFormulaFileName" Text='<%# Bind( "FormulaFileName") %>' runat="server"
                                                                Width="150px">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Formula&nbsp;FolderName :
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtFormulaFolderName" Text='<%# Bind( "FormulaFolderName") %>' runat="server">
                                                            </asp:TextBox>
                                                        </td>
                                                        <td>
                                                            Report&nbsp;Template:
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtReportTemplate" Text='<%# Bind( "ReportTemplate") %>' runat="server"
                                                                Width="150px">
                                                            </asp:TextBox>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            Report ServerConfig :
                                                        </td>
                                                        <td>
                                                            <asp:TextBox ID="txtReportServerConfig" Text='<%# Bind( "ReportServerConfig") %>'
                                                                Width="150px" runat="server">
                                                            </asp:TextBox>
                                                        </td>
                                                        <td>
                                                        </td>
                                                        <td>
                                                            <asp:CheckBox ID="chkhyperlink" Text="Hyperlink" runat="server" />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                        </td>
                                                        <td>
                                                            <asp:CheckBox ID="chkdisplay" Text="Display" runat="server" />
                                                        </td>
                                                        <td>
                                                        </td>
                                                        <td>
                                                            <asp:CheckBox ID="chkstatus" Text="Status" runat="server" />
                                                        </td>
                                                    </tr>
                                                </table>
                                                <table style="width: 100%">
                                                    <tr>
                                                        <td align="Center" colspan="2">
                                                            <asp:Button ID="Button31" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                                                runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                                            </asp:Button>&nbsp;
                                                            <asp:Button ID="Button41" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">
                                                            </asp:Button>
                                                        </td>
                                                        <td>
                                                            <asp:Label ID="lblerror1" Font-Size="Medium" Font-Bold="true" ForeColor="Red" runat="server"
                                                                Text=""></asp:Label>
                                                        </td>
                                                    </tr>
                                                </table>
                                </FormTemplate>
                            </EditFormSettings>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridEditCommandColumn>
                        </telerik:GridEditCommandColumn>
                        <telerik:GridBoundColumn UniqueName="TabID" Visible="false" HeaderText="TabID" DataField="TabID">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="TabName" HeaderText="Tab Name" DataField="TabName"
                            Visible="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="Order" HeaderText="Order" DataField="Order"
                            Visible="true">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="status" HeaderText="status" DataField="status"
                            Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="Delete"
                            ConfirmText="Are you sure want to delete the selected LineItem?" ConfirmDialogType="Classic"
                            ConfirmTitle="Delete" ButtonType="ImageButton" ImageUrl="~/Images/delete.png">
                        </telerik:GridButtonColumn>
                    </Columns>
                    <EditFormSettings InsertCaption="Add New Record" CaptionFormatString="Edit " CaptionDataField="Tabid"
                        PopUpSettings-Height="180" EditFormType="Template" PopUpSettings-Modal="true"
                        PopUpSettings-Width="230">
                        <FormTemplate>
                            <table id="Table1" cellspacing="1" cellpadding="1" border="0"  cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                            style="border-collapse: collapse;">
                                <tr>
                                    <td>
                                        <table id="Table2" cellspacing="1" cellpadding="1" border="0">
                                            <tr>
                                                <td>
                                                    Tab&nbsp;Name:
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txttabname" Text='<%# Bind( "TabName") %>' runat="server">
                                                    </asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Order :
                                                </td>
                                                <td>
                                                    <telerik:RadNumericTextBox ID="txtOrdertab" Text='<%# Bind( "Order") %>' runat="server"
                                                        Width="150px" NumberFormat-DecimalDigits="0">
                                                    </telerik:RadNumericTextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                </td>
                                                <td>
                                                    <asp:CheckBox ID="chkstatustab" Text="Status" runat="server" />
                                                </td>
                                            </tr>
                                            <table style="width: 100%">
                                                <tr>
                                                    <td align="Center" colspan="2">
                                                        <asp:Button ID="Button3" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                                            runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                                        </asp:Button>&nbsp;
                                                        <asp:Button ID="Button4" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel">
                                                        </asp:Button>
                                                    </td>
                                                    <td>
                                                        <asp:Label ID="lblerror" Font-Size="Medium" Font-Bold="true" ForeColor="Red" runat="server"
                                                            Text=""></asp:Label>
                                                    </td>
                                                </tr>
                                            </table>
                        </FormTemplate>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>


    Thanks & regards
    Karthik.A
  8. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 04 Oct 2013 Link to this post

    Hi Karthik,

    Using the code provided I was able to reproduce the problem. It was due to invalid HTML. The first tables in the FormTemplates are not closed properly thus the HTML is not rendered correctly. By deleting the most outer tables I was able to resolve the problem. Please apply the appropriate changes on your side and test whether this resolves the issue.

    Regards,
    Angel Petrov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017