1. 首页
  2. 问答
  3. Bootstrap Messing Telerik RadGrid

Bootstrap Messing Telerik RadGrid

2013-10-09 119 views
2

我的Telerik RadGrid在正常页面上工作正常，但是当我包含Bootstrap的CSS时，它开始变得丑陋！我该怎么办？Bootstrap Messing Telerik RadGrid

前加入引导 enter image description here

添加引导 enter image description here

普通网页代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication8.WebForm2" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 

      <asp:ScriptManager ID="ScriptManager1" runat="server"> 
      </asp:ScriptManager> 
      <telerik:RadGrid ID="RadGrid3" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0" DataSourceID="SqlDataSource1" GridLines="None" ShowGroupPanel="True"> 
       <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True"> 
        <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
       </ClientSettings> 
       <MasterTableView AutoGenerateColumns="False" DataKeyNames="room_amenities_id" DataSourceID="SqlDataSource1"> 
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings> 

        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"> 
         <HeaderStyle Width="30px"></HeaderStyle> 
        </RowIndicatorColumn> 

        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"> 
         <HeaderStyle Width="30px"></HeaderStyle> 
        </ExpandCollapseColumn> 

        <Columns> 
         <telerik:GridBoundColumn DataField="room_amenities_id" DataType="System.Int32" FilterControlAltText="Filter room_amenities_id column" HeaderText="room_amenities_id" ReadOnly="True" SortExpression="room_amenities_id" UniqueName="room_amenities_id"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
         <telerik:GridBoundColumn DataField="room_id" DataType="System.Int32" FilterControlAltText="Filter room_id column" HeaderText="room_id" SortExpression="room_id" UniqueName="room_id"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
         <telerik:GridBoundColumn DataField="amenities_id" DataType="System.Int32" FilterControlAltText="Filter amenities_id column" HeaderText="amenities_id" SortExpression="amenities_id" UniqueName="amenities_id"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
         <telerik:GridBoundColumn DataField="cost" DataType="System.Decimal" FilterControlAltText="Filter cost column" HeaderText="cost" SortExpression="cost" UniqueName="cost"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
         <telerik:GridBoundColumn DataField="guest_cost" DataType="System.Decimal" FilterControlAltText="Filter guest_cost column" HeaderText="guest_cost" SortExpression="guest_cost" UniqueName="guest_cost"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
         <telerik:GridBoundColumn DataField="expiry_date" DataType="System.DateTime" FilterControlAltText="Filter expiry_date column" HeaderText="expiry_date" SortExpression="expiry_date" UniqueName="expiry_date"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
         <telerik:GridCheckBoxColumn DataField="in_service" DataType="System.Boolean" FilterControlAltText="Filter in_service column" HeaderText="in_service" SortExpression="in_service" UniqueName="in_service"> 
         </telerik:GridCheckBoxColumn> 
         <telerik:GridBoundColumn DataField="service_remarks" FilterControlAltText="Filter service_remarks column" HeaderText="service_remarks" SortExpression="service_remarks" UniqueName="service_remarks"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
         <telerik:GridCheckBoxColumn DataField="isactive" DataType="System.Boolean" FilterControlAltText="Filter isactive column" HeaderText="isactive" SortExpression="isactive" UniqueName="isactive"> 
         </telerik:GridCheckBoxColumn> 
         <telerik:GridBoundColumn DataField="date" DataType="System.DateTime" FilterControlAltText="Filter date column" HeaderText="date" SortExpression="date" UniqueName="date"> 
          <ColumnValidationSettings> 
           <ModelErrorMessage Text="" /> 
          </ColumnValidationSettings> 
         </telerik:GridBoundColumn> 
        </Columns> 

        <EditFormSettings> 
         <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn> 
        </EditFormSettings> 

        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle> 
       </MasterTableView> 

       <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle> 

       <FilterMenu EnableImageSprites="False"></FilterMenu> 
      </telerik:RadGrid> 
      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:xClassHotelConnectionString %>" SelectCommand="SELECT * FROM [CI_Room_Amenities]"></asp:SqlDataSource> 
     </div> 
    </form> 
</body> 
</html>

引导启用页面又名凌乱的页面后

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication8.WebForm1" %> 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 

    <!-- Latest compiled and minified JavaScript --> 
</head> 
<body> 
    <div> 
     <form id="form1" runat="server"> 
      <div class="container"> 
       <asp:ScriptManager ID="ScriptManager1" runat="server"> 
       </asp:ScriptManager> 
       <telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0" DataSourceID="SqlDataSource1" GridLines="None" ShowGroupPanel="True"> 
        <ClientSettings AllowDragToGroup="True"> 
         <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        </ClientSettings> 
        <MasterTableView AutoGenerateColumns="False" DataKeyNames="room_amenities_id" DataSourceID="SqlDataSource1"> 
         <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings> 

         <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"> 
          <HeaderStyle Width="20px"></HeaderStyle> 
         </RowIndicatorColumn> 

         <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"> 
          <HeaderStyle Width="20px"></HeaderStyle> 
         </ExpandCollapseColumn> 

         <Columns> 
          <telerik:GridBoundColumn DataField="room_amenities_id" DataType="System.Int32" FilterControlAltText="Filter room_amenities_id column" HeaderText="room_amenities_id" ReadOnly="True" SortExpression="room_amenities_id" UniqueName="room_amenities_id"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
          <telerik:GridBoundColumn DataField="room_id" DataType="System.Int32" FilterControlAltText="Filter room_id column" HeaderText="room_id" SortExpression="room_id" UniqueName="room_id"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
          <telerik:GridBoundColumn DataField="amenities_id" DataType="System.Int32" FilterControlAltText="Filter amenities_id column" HeaderText="amenities_id" SortExpression="amenities_id" UniqueName="amenities_id"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
          <telerik:GridBoundColumn DataField="cost" DataType="System.Decimal" FilterControlAltText="Filter cost column" HeaderText="cost" SortExpression="cost" UniqueName="cost"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
          <telerik:GridBoundColumn DataField="guest_cost" DataType="System.Decimal" FilterControlAltText="Filter guest_cost column" HeaderText="guest_cost" SortExpression="guest_cost" UniqueName="guest_cost"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
          <telerik:GridBoundColumn DataField="expiry_date" DataType="System.DateTime" FilterControlAltText="Filter expiry_date column" HeaderText="expiry_date" SortExpression="expiry_date" UniqueName="expiry_date"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
          <telerik:GridCheckBoxColumn DataField="in_service" DataType="System.Boolean" FilterControlAltText="Filter in_service column" HeaderText="in_service" SortExpression="in_service" UniqueName="in_service"> 
          </telerik:GridCheckBoxColumn> 
          <telerik:GridBoundColumn DataField="service_remarks" FilterControlAltText="Filter service_remarks column" HeaderText="service_remarks" SortExpression="service_remarks" UniqueName="service_remarks"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
          <telerik:GridCheckBoxColumn DataField="isactive" DataType="System.Boolean" FilterControlAltText="Filter isactive column" HeaderText="isactive" SortExpression="isactive" UniqueName="isactive"> 
          </telerik:GridCheckBoxColumn> 
          <telerik:GridBoundColumn DataField="date" DataType="System.DateTime" FilterControlAltText="Filter date column" HeaderText="date" SortExpression="date" UniqueName="date"> 
           <ColumnValidationSettings> 
            <ModelErrorMessage Text="" /> 
           </ColumnValidationSettings> 
          </telerik:GridBoundColumn> 
         </Columns> 

         <EditFormSettings> 
          <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn> 
         </EditFormSettings> 

         <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle> 
        </MasterTableView> 

        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle> 

        <FilterMenu EnableImageSprites="False"></FilterMenu> 
       </telerik:RadGrid> 
       <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues" ConnectionString="<%$ ConnectionStrings:xClassHotelConnectionString %>" DeleteCommand="DELETE FROM [CI_Room_Amenities] WHERE [room_amenities_id] = @original_room_amenities_id AND [room_id] = @original_room_id AND [amenities_id] = @original_amenities_id AND (([cost] = @original_cost) OR ([cost] IS NULL AND @original_cost IS NULL)) AND (([guest_cost] = @original_guest_cost) OR ([guest_cost] IS NULL AND @original_guest_cost IS NULL)) AND (([expiry_date] = @original_expiry_date) OR ([expiry_date] IS NULL AND @original_expiry_date IS NULL)) AND (([in_service] = @original_in_service) OR ([in_service] IS NULL AND @original_in_service IS NULL)) AND (([service_remarks] = @original_service_remarks) OR ([service_remarks] IS NULL AND @original_service_remarks IS NULL)) AND (([isactive] = @original_isactive) OR ([isactive] IS NULL AND @original_isactive IS NULL)) AND (([date] = @original_date) OR ([date] IS NULL AND @original_date IS NULL))" InsertCommand="INSERT INTO [CI_Room_Amenities] ([room_id], [amenities_id], [cost], [guest_cost], [expiry_date], [in_service], [service_remarks], [isactive], [date]) VALUES (@room_id, @amenities_id, @cost, @guest_cost, @expiry_date, @in_service, @service_remarks, @isactive, @date)" OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT * FROM [CI_Room_Amenities]" UpdateCommand="UPDATE [CI_Room_Amenities] SET [room_id] = @room_id, [amenities_id] = @amenities_id, [cost] = @cost, [guest_cost] = @guest_cost, [expiry_date] = @expiry_date, [in_service] = @in_service, [service_remarks] = @service_remarks, [isactive] = @isactive, [date] = @date WHERE [room_amenities_id] = @original_room_amenities_id AND [room_id] = @original_room_id AND [amenities_id] = @original_amenities_id AND (([cost] = @original_cost) OR ([cost] IS NULL AND @original_cost IS NULL)) AND (([guest_cost] = @original_guest_cost) OR ([guest_cost] IS NULL AND @original_guest_cost IS NULL)) AND (([expiry_date] = @original_expiry_date) OR ([expiry_date] IS NULL AND @original_expiry_date IS NULL)) AND (([in_service] = @original_in_service) OR ([in_service] IS NULL AND @original_in_service IS NULL)) AND (([service_remarks] = @original_service_remarks) OR ([service_remarks] IS NULL AND @original_service_remarks IS NULL)) AND (([isactive] = @original_isactive) OR ([isactive] IS NULL AND @original_isactive IS NULL)) AND (([date] = @original_date) OR ([date] IS NULL AND @original_date IS NULL))"> 
        <DeleteParameters> 
         <asp:Parameter Name="original_room_amenities_id" Type="Int32" /> 
         <asp:Parameter Name="original_room_id" Type="Int32" /> 
         <asp:Parameter Name="original_amenities_id" Type="Int32" /> 
         <asp:Parameter Name="original_cost" Type="Decimal" /> 
         <asp:Parameter Name="original_guest_cost" Type="Decimal" /> 
         <asp:Parameter Name="original_expiry_date" Type="DateTime" /> 
         <asp:Parameter Name="original_in_service" Type="Boolean" /> 
         <asp:Parameter Name="original_service_remarks" Type="String" /> 
         <asp:Parameter Name="original_isactive" Type="Boolean" /> 
         <asp:Parameter Name="original_date" Type="DateTime" /> 
        </DeleteParameters> 
        <InsertParameters> 
         <asp:Parameter Name="room_id" Type="Int32" /> 
         <asp:Parameter Name="amenities_id" Type="Int32" /> 
         <asp:Parameter Name="cost" Type="Decimal" /> 
         <asp:Parameter Name="guest_cost" Type="Decimal" /> 
         <asp:Parameter Name="expiry_date" Type="DateTime" /> 
         <asp:Parameter Name="in_service" Type="Boolean" /> 
         <asp:Parameter Name="service_remarks" Type="String" /> 
         <asp:Parameter Name="isactive" Type="Boolean" /> 
         <asp:Parameter Name="date" Type="DateTime" /> 
        </InsertParameters> 
        <UpdateParameters> 
         <asp:Parameter Name="room_id" Type="Int32" /> 
         <asp:Parameter Name="amenities_id" Type="Int32" /> 
         <asp:Parameter Name="cost" Type="Decimal" /> 
         <asp:Parameter Name="guest_cost" Type="Decimal" /> 
         <asp:Parameter Name="expiry_date" Type="DateTime" /> 
         <asp:Parameter Name="in_service" Type="Boolean" /> 
         <asp:Parameter Name="service_remarks" Type="String" /> 
         <asp:Parameter Name="isactive" Type="Boolean" /> 
         <asp:Parameter Name="date" Type="DateTime" /> 
         <asp:Parameter Name="original_room_amenities_id" Type="Int32" /> 
         <asp:Parameter Name="original_room_id" Type="Int32" /> 
         <asp:Parameter Name="original_amenities_id" Type="Int32" /> 
         <asp:Parameter Name="original_cost" Type="Decimal" /> 
         <asp:Parameter Name="original_guest_cost" Type="Decimal" /> 
         <asp:Parameter Name="original_expiry_date" Type="DateTime" /> 
         <asp:Parameter Name="original_in_service" Type="Boolean" /> 
         <asp:Parameter Name="original_service_remarks" Type="String" /> 
         <asp:Parameter Name="original_isactive" Type="Boolean" /> 
         <asp:Parameter Name="original_date" Type="DateTime" /> 
        </UpdateParameters> 
       </asp:SqlDataSource> 
      </div> 
     </form> 
    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="//code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

问题是什么？我该如何解决这个问题？

来源

2013-10-09 MD TAHMID HOSSAIN

+0

您必须使用Web调试工具检查CSS冲突。在确定具体问题之前，尝试解决问题并精确地发布不适用的问题，但我们无法为您提供更多帮助。 – CharlesAD

回答

3

我的解决方法是使用Chrome，IE或Firefox中的开发人员工具查找设置，然后在引导后加载的特定于站点的css文件中应用适当的css标记。

例如，我必须应用此修复程序使用自举3

/* ----- RadComboBox Bootstrap Fix ----- */ 
.RadComboBox { 
    border: none; 
} 

.RadComboBoxDropDown .rcbCheckBox { 
    margin-top: -3px; 
    margin-bottom: 0; 
    margin-right: 5px; 
}

另一种选择是创建你的网格的自定义皮肤css和后引导的CSS文件加载其CSS来纠正复选框一个radcombobox控件。

如果你需要对Telerik控制产生的皮肤开始，在这里看到的信息： http://demos.telerik.com/aspnet-ajax/grid/examples/styles/custom-skin/defaultcs.aspx

要特别注意Input.MyCustomSkin.css，因为这可以帮助您设置您的输入框大小回你想要什么。

来源

2013-11-14 15:29:06 Owen

相关问题

 相关问题