This is a migrated thread and some comments may be shown as answers.

RadGrid isn't responsive from Theme Builder

4 Answers 122 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Randy asked on 20 Apr 2016, 06:09 PM

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 />

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

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

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

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

</asp:Panel>

</asp:Content>

RadGrid isn't responsive from Theme Builder

4 Answers, 1 is accepted