RadGrid isn't responsive from Theme Builder

5 posts, 0 answers
  1. Randy
    Randy avatar
    9 posts
    Member since:
    Jan 2013

    Posted 20 Apr Link to this post

    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>

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 22 Apr Link to this post

    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.



    Regards,
    Viktor Tachev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Randy
    Randy avatar
    9 posts
    Member since:
    Jan 2013

    Posted 22 Apr in reply to Viktor Tachev Link to this post

    Hi Viktor,

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

    Randy

  5. Randy
    Randy avatar
    9 posts
    Member since:
    Jan 2013

    Posted 22 Apr in reply to Randy Link to this post

    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

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 26 Apr Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017