2

私の Telerik RadGrid は通常のページでは正常に動作していますが、Bootstrap の CSS を含めると見苦しくなります! 私は何をしますか？

ブートストラップを追加する前に ここに画像の説明を入力

ブートストラップ追加後 ここに画像の説明を入力

通常のページ コード

<%@ 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 Enable Page aka Messy Page

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

何が問題ですか？この問題を解決するにはどうすればよいですか?

4

2 に答える 2

3

これを修正する私の方法は、Chrome、IE、または Firefox の開発者ツールを使用して設定を見つけ、ブートストラップ後にロードするサイト固有の css ファイルに適切な css タグを適用することです。

たとえば、Bootstrap 3 を使用してチェックボックスを含む RadComboBox を修正するには、この修正を適用する必要がありました。

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

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

もう 1 つのオプションは、グリッドのカスタム スキン css を作成し、ブートストラップの css ファイルの後にそれらの css をロードすることです。

Telerik コントロールのスキンの作成を開始する必要がある場合は、次の情報を参照してください: http://demos.telerik.com/aspnet-ajax/grid/examples/styles/custom-skin/defaultcs.aspx

Input.MyCustomSkin.css に特に注意してください。これは、入力ボックスのサイズを希望どおりに設定するのに役立つためです。

于 2013-11-14T15:29:06.153 に答える
0

Bootstrap Customization pageからTables from Common CSSセクションを削除したところ、通常のコマンド バーよりも大きい Telerik RadGrid が修正されました。

http://getbootstrap.com/customize

于 2015-12-30T07:40:34.307 に答える