asp.net - Bootstrap 梅辛 Telerik RadGrid

标签 asp.net twitter-bootstrap telerik radgrid

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

添加 Bootstrap 之前 enter image description here

添加 Bootstrap 后 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>

Bootstrap 启用页面又名困惑页面

<%@ 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>

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

最佳答案

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

例如，我必须应用此修复程序来使用 Bootstrap 3 更正带有复选框的 RadComboBox

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

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

另一个选项是为网格创建自定义皮肤 css，并在 bootstrap 的 css 文件后加载其 css。

如果您需要开始为 Telerik 控件创建外观，请参阅此处的信息: http://demos.telerik.com/aspnet-ajax/grid/examples/styles/custom-skin/defaultcs.aspx

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

关于asp.net - Bootstrap 梅辛 Telerik RadGrid，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19271788/

上一篇：symfony - Doctrine2 - 通过关系发现了一个新实体 [...]

下一篇：jdbc - Apache 希罗 : PermissionsQuery seems to return nothing

相关文章：

jquery - Bootstrap Material 设计中带有子菜单的垂直菜单

wpf - Telerik RadTileList 控件的布局问题

javascript - Kendo Grid 更新时表现奇怪

c# - 关于Web应用程序体系结构，域类和业务类之间有什么区别？

c# - Find Control on RowDataBound-Event 返回 NULL/Empty

asp.net - 在 ASP.NET 的另一个 UpdatePanel 中使用 TargetControl 调用模式弹出窗口

asp.net - 谁能告诉我Mvc View 中@using和@Model之间的主要区别是什么，什么时候需要什么

forms - 如何在 Bootstrap 模式框中重置表单主体？

javascript - 图像上传 - MVC 在 Bootstrap 模式中使用时返回 null

c# - 不支持 Telerik.Web.UI.RadComboBoxContext，因为它实现了 IDictionary

©2024 IT工具网  联系我们