Bootstrap Messing Telerik RadGrid

StackOverflow https://stackoverflow.com/questions/19271788

Question

My Telerik RadGrid is working fine on normal page but when I include Bootstrap's CSS it starts to become ugly! What do I do?

Before Adding Bootstrap enter image description here

After Adding Bootstrap enter image description here

Normal Page Code

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

What is the problem? How do I solve this problem?

Was it helpful?

Solution

My method to fix this is to find the setting using the developer tools in Chrome, IE, or Firefox and then apply an appropriate css tag in my site specific css file that I load after bootstrap.

For example, I had to apply this fix to correct a RadComboBox with checkboxes using Bootstrap 3

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

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

Another option is to create custom skin css for your grids and load their css after bootstrap's css file.

If you need a start on creating skins for Telerik controls, see the information here: http://demos.telerik.com/aspnet-ajax/grid/examples/styles/custom-skin/defaultcs.aspx

Pay special attention to Input.MyCustomSkin.css as this can help you set the sizes of your input boxes back to what you want.

OTHER TIPS

I just removed the Tables from Common CSS section from Bootstrap Customization page, and then my Telerik RadGrid larger than normal Command bar gets fixed.

http://getbootstrap.com/customize

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top