RadGrid isn't responsive from Theme Builder

[Randy]

Hello and thank you in advance,

I have created a customized theme using the Telerik Theme Builder which is supposed to be compatible with Bootstrap from what I understand. However, the issue I'm seeing is that the grid does not resize responsively when I reduce the size of the browser window. Below is the markup for my grid. The grid still appears to take up the size of the screen that you would see if you viewed it from a laptop but does not resize to fit a mobile-device-sized window.

<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" runat="Server">
    <asp:Panel ID="borderPanel1" runat="server" Style="margin-left: 2px;">
        <div class="container">
            <asp:Label ID="lblTitle" runat="server" CssClass="LabelHeader" Text="LAST 7 DAYS QUICK VIEW"></asp:Label>
            <br />
            <br />
            <div class="row" style="float: left;">
                <div class="col-sm-5" style="vertical-align: top; float: left;">
                    <telerik:RadGrid ID="RequestGrid" EnableEmbeddedSkins="false" Skin="NEE_Theme" OnNeedDataSource="RequestGrid_NeedDataSource" OnItemDataBound="RequestGrid_ItemDataBound" ShowStatusBar="true" runat="server"
                        AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
                        AllowMultiRowSelection="True" GridLines="None" BorderWidth="0" HeaderStyle-BorderWidth="0" FooterStyle-BorderWidth="0">
                        <MasterTableView BorderWidth="0">
                            <Columns>
                                <telerik:GridBoundColumn DataField="request__request_id" Visible="false" HeaderText="ID" UniqueName="request__request_id" ReadOnly="true" />
                                <telerik:GridBoundColumn DataField="place__place_id" HeaderText="Location" ItemStyle-Width="20%" ReadOnly="true" UniqueName="place__place_id" Visible="true" />
                                <telerik:GridBoundColumn DataField="request__req_type" HeaderText="Type" ItemStyle-Width="20%" ReadOnly="True" UniqueName="request__req_type" Visible="True" />
                                <telerik:GridBoundColumn DataField="request__req_status" HeaderText="Status" ItemStyle-Width="15%" ReadOnly="True" UniqueName="request__req_status" Visible="false" />
                                <telerik:GridBoundColumn DataField="req_status__description" HeaderText="Status" ItemStyle-Width="15%" ReadOnly="True" UniqueName="req_status__description" Visible="True" />
                                <telerik:GridBoundColumn DataField="request__cust_prob_descr" HeaderText="Description" ItemStyle-Width="45%" ReadOnly="True" UniqueName="request__cust_prob_descr" Visible="True" />
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>
                </div>
                <div class="col-sm-7">
                    <div class="row">
                        <div style="width: 100%;" class="col-sm-12">
                            <table style="width: 70%; height: 100%; border: 1px solid; line-height: 70px;">
                                <tr>
                                    <td class="topalign">
                                        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx?page=NEE_ViewRequests.aspx"
                                            Text="View Service Requests" CssClass="leftalign" Font-Overline="false"></asp:HyperLink>
                                    </td>
                                    <td>
                                        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Default.aspx?page=NEE_ViewRequests.aspx" CssClass="rightalign">
                                                            <img src="../../../Custom/Images/viewrequests.png" alt="Requests" style="line-height: 70px; height: 50px; float: right;"/>
                                        </asp:HyperLink>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div style="width: 100%;" class="col-sm-12">
                            <table style="width: 70%; height: 100%; border: 1px solid; line-height: 70px;">
                                <tr>
                                    <td class="topalign">
                                        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Default.aspx?page=NEE_ViewPlacesRecert.aspx"
                                            Text="View Places & PM/Recert Due" CssClass="leftalign"></asp:HyperLink>
                                    </td>
                                    <td>
                                        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Default.aspx?page=NEE_ViewPlacesRecert.aspx" CssClass="rightalign">
                                                            <table>
                                                                <tr>
                                                                    <td>
                                                                        <img src="../../../Custom/Images/viewplaces_1.png" alt="View Places & PM" />
                                                                    </td>
                                                                    <td>
                                                                        <img src="../../../Custom/Images/viewplaces_2.png" alt="View Places & PM" />
                                                                    </td>
                                                                    <td>
                                                                        <img src="../../../Custom/Images/viewplaces_3.png" alt="View Places & PM" width="50px" height="50px"/>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                        </asp:HyperLink>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div style="width: 100%;" class="col-sm-12">
                            <table style="width: 70%; height: 100%; border: 1px solid; line-height: 70px;">
                                <tr>
                                    <td class="topalign">
                                        <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Default.aspx?page=NEE_ViewProducts.aspx"
                                            Text="View Products/Assets" CssClass="leftalign"></asp:HyperLink>
                                    </td>
                                    <td>
                                        <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/Default.aspx?page=NEE_ViewProducts.aspx" CssClass="rightalign">
                                                            <table style="line-height: 70px; float: right;">
                                                                <tr>
                                                                    <td>
                                                                        <img src="../../../Custom/Images/viewproducts_1.png" alt="View Products" style="line-height: 70px; height: 50px;"/>
                                                                    </td>
                                                                    <td>
                                                                        <img src="../../../Custom/Images/viewproducts_2.jpg" alt="View Products" style="line-height: 70px; height: 50px;"/>
                                                                    </td>
                                                                    <td>
                                                                        <img src="../../../Custom/Images/viewproducts_3.png" alt="View Products" style="line-height: 70px; height: 50px;"/>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                        </asp:HyperLink>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <br />
                    <div class="row">
                        <div style="width: 100%;" class="col-sm-12">
                            <table style="width: 70%; height: 100%; border: 1px solid; line-height: 70px;">
                                <tr>
                                    <td class="topalign">
                                        <asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="~/Default.aspx?page=NEE_CreateRequest.aspx"
                                            Text="Create Service Request" CssClass="leftalign"></asp:HyperLink>
                                    </td>
                                    <td>
                                        <asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="~/Default.aspx?page=NEE_CreateRequest.aspx" CssClass="rightalign">
                                                            <img src="../../../Custom/Images/createservicerequest.png" alt="Create Service Request" style="line-height: 70px; height: 50px; float: right;"/>
                                        </asp:HyperLink>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </asp:Panel>
</asp:Content>

[Viktor Tachev]

Hello Randy,

If you would like to optimize the RadGrid for both computers and mobile devices you can set the RenderMode property to Auto. This way the control will be rendered with the mode that is most appropriate to the used device.

• http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/mobile-support/render-modes

Regards,
Viktor Tachev
Telerik

[Randy]

Hi Viktor,

I have set the RenderMode to Auto but it still has no effect when resizing the browser window. See attached picture.

Randy

[Randy]

Hi Viktor,

It turns out that there was a bunch of stuff I still needed to tweak on the master page (unrelated to the Telerik controls) in order to get this to render properly - dealing with content placeholders and navigation, etc. Thanks for pointing me in the right direction, this now works as expected.

Regards,

Randy

[Viktor Tachev]

Hi Randy,

I am glad that you have the issue resolved. Thank you for sharing what was causing the behavior with the community.

Regards,
Viktor Tachev
Telerik