This is a migrated thread and some comments may be shown as answers.

[Solved] RadGrid CSS messed up

7 Answers 256 Views

Grid

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 04 Sep 2009, 02:46 PM

Thanks admin,

Here is my code..see below. Keep in mind that my website has a master connected to other web pages that appears to mess up the radgrid css in some way.

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Family.aspx.vb" Inherits="Family" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <style type="text/css">  
        
                 .maindiv{width:100%; margin-left:auto; margin-right:auto;}  
        
                 .bodybackground{background-color:White;}  
        
                 .radgriddiv{margin-top:150px; margin-left:auto; margin-right:auto; width:60%;}  
        
                </style> 
        
            </head> 
        
            <body class="bodybackground">  
        
                <form id="form1" runat="server">  
        
                <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">  
        
                </telerik:RadStyleSheetManager> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager>      
        
                <div id="maindiv" class="maindiv" runat="server">  
        
                    <div id="griddiv" class="radgriddiv" runat="server">  
        
                        <telerik:RadGrid ID="RadGrid1"  Width="100%" runat="server" AutoGenerateDeleteColumn="True"   
        
                            AutoGenerateEditColumn="True" DataSourceID="SqlDataSource1" GridLines="None"   
        
                            Skin="Vista">  
        
            <MasterTableView autogeneratecolumns="False" cellspacing="-1" datakeynames="MemberFamilyId"   
        
                                datasourceid="SqlDataSource1">  
        
            <RowIndicatorColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </RowIndicatorColumn> 
        
            <ExpandCollapseColumn> 
        
            <HeaderStyle Width="20px"></HeaderStyle> 
        
            </ExpandCollapseColumn> 
        
                <Columns> 
        
                    <telerik:GridBoundColumn DataField="EmployeeId" DataType="System.Int32"   
        
                        HeaderText="EmployeeId" SortExpression="EmployeeId"   
        
                        UniqueName="EmployeeId">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="MemberFamilyId" DataType="System.Int32"   
        
                        HeaderText="MemberFamilyId" ReadOnly="True" SortExpression="MemberFamilyId"   
        
                        UniqueName="MemberFamilyId">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name"   
        
                        SortExpression="Name" UniqueName="Name">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Allergies" HeaderText="Allergies"   
        
                        SortExpression="Allergies" UniqueName="Allergies">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Weight" DataType="System.Int32"   
        
                        HeaderText="Weight" SortExpression="Weight" UniqueName="Weight">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="Age" DataType="System.Int32"   
        
                        HeaderText="Age" SortExpression="Age" UniqueName="Age">  
        
                    </telerik:GridBoundColumn> 
        
                    <telerik:GridBoundColumn DataField="DateOfBirth" DataType="System.DateTime"   
        
                        HeaderText="DateOfBirth" SortExpression="DateOfBirth"   
        
                        UniqueName="DateOfBirth">  
        
                    </telerik:GridBoundColumn> 
        
                </Columns> 
        
            </MasterTableView> 
        
                        </telerik:RadGrid> 
        
                    </div>      
        
                </div> 
        
                <asp:SqlDataSource ID="SqlDataSource1" runat="server"   
        
                    ConnectionString="<%$ ConnectionStrings:EmployeeScreeningConnectionString %>"   
        
                    SelectCommand="SELECT EmployeeId, MemberFamilyId, Name, Allergies, Weight, Age, DateOfBirth FROM MemberFamilyInfo WHERE (EmployeeId = @EmployeeID)">  
        
                    <SelectParameters> 
        
                        <asp:SessionParameter DefaultValue="1" Name="EmployeeID"   
        
                            SessionField="EmployeeID" /> 
        
                    </SelectParameters> 
        
                </asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

answered on 06 Sep 2009, 10:25 PM

Hello Administrator,

I just wanted to make you aware that I posted my code and a picture of how my radgrid came out but you have not responded. Is this a conplex question where no solution has been developed yet or should I just REMOVE the radgrid altogether from my project? It works fine except for the fact it does not look good when the text and lines are completely out of line which makes the grid look TERRIBLE!! Please at least let me know if you plan to answer my question or is it a nonpriority altogether. Thank you!

Accepted

answered on 07 Sep 2009, 08:42 AM

240153-grid.gif

Hello Brett,

Please note that we normally do not reply to forum threads or support tickets during weekends.

As to your question - it looks like the RadGrid <table> elements inherits some margin styles from the website styles.

Since the sample page above does not exhibit the observed misalignment (see attachment), you can use Firebug in order to determine the exact cause (e.g. styles in an external CSS file) or send us a complete runnable project.

Actually, you can use the following CSS rule to prevent the problem:

.rgMasterTable,
.rgCommandRow table
{
margin:0;
}

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.