I want to create a responsive radgrid
my Master Page as the following
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%--<meta name="viewport" content="width=device-width, initial-scale=1">--%>
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><%: Page.Title %> - Amoun ECMS</title>
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="f1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
</Scripts>
</telerik:RadScriptManager>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
<div class="container-fluid">
<asp:ContentPlaceHolder ID="Body" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-3.2.1.min.js"></script>
</form>
And a page is as the following
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
<link type="text/css" rel="stylesheet" href="styles.css" />
<style type="text/css">
.panelItem {
height: auto;
}
.DivCenter {
text-align: center;
align-items: center;
vertical-align: middle;
margin: 0 auto;
}
.gridHieght{
height:auto !important;
border: 0 none;
}
</style>
<title>Doctors List</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Body" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="p1">
<UpdatedControls>
<%--<telerik:AjaxUpdatedControl ControlID="gridAffs" LoadingPanelID="l1" />--%>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="l1" runat="server" RenderMode="Auto" />
<%--<script src="scripts.js" type="text/javascript"></script>--%>
<div class="row DivCenter" style="width:100%">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 DivCenter" style="width:100%">
<table style="width:100%" class="table-responsive">
<tr style="width:100%">
<td style="text-align:left">
<telerik:RadLabel RenderMode="Auto" ID="lblTitle" runat="server" Text="Doctors List" style="text-align:left"
Font-Bold="false" Font-Size="Medium" ForeColor="Black"></telerik:RadLabel>
<br /><br />
<telerik:RadLabel RenderMode="Auto" ID="lblAffsTotal2" runat="server" style="text-align:left"
Font-Bold="false" Font-Size="Medium" ForeColor="Black"></telerik:RadLabel>
<telerik:RadLabel RenderMode="Auto" ID="lblAffsClassA2" runat="server" style="text-align:left"
Font-Bold="false" Font-Size="Medium" ForeColor="Black"></telerik:RadLabel>
<telerik:RadLabel RenderMode="Auto" ID="lblAffsClassB2" runat="server" style="text-align:left"
Font-Bold="false" Font-Size="Medium" ForeColor="Black"></telerik:RadLabel>
</td>
</tr>
<tr><td role="separator"><br /></td></tr>
<tr>
<td style="text-align:right">
<asp:LinkButton ID="LinkButton1" Text="Export to Excel" runat="server" OnClick="btnExport_Click" ForeColor="Black"
Font-Size="Medium" style="text-align:right" />
</td>
</tr>
</table>
<telerik:RadGrid ID="gridAffs" runat="server" DataSourceID="ListOfAffDS" AllowFilteringByColumn="True" AllowPaging="True"
EnableGroupsExpandAll="True" EnableHeaderContextFilterMenu="True" EnableHeaderContextAggregatesMenu="True"
AllowSorting="True" GroupPanelPosition="Top" ShowGroupPanel="True"
MasterTableView-EditFormSettings-FormTableButtonRowStyle-Wrap="false" CssClass="table-responsive"
Skin="WebBlue" EnableHeaderContextMenu="True" GridLines="Both" PageSize="50" ShowFooter="True" RenderMode="Auto">
<ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true" FileName="DoctorsList">
<Excel Format="Xlsx" />
</ExportSettings>
<ClientSettings AllowDragToGroup="True" AllowExpandCollapse="true">
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
<Resizing AllowResizeToFit="true" AllowRowResize="true" AllowColumnResize="true" EnableRealTimeResize="true" ResizeGridOnColumnResize="true" />
</ClientSettings>
<MasterTableView DataSourceID="ListOfAffDS" AutoGenerateColumns="False" ShowHeader="true" ShowGroupFooter="true" AllowPaging="true"
AllowSorting="true" CommandItemDisplay="Top" EnableViewState="true" EnableHeaderContextMenu="True" EnableHeaderContextAggregatesMenu="true"
EnableHeaderContextFilterMenu="true" CssClass="table-responsive">
<GroupHeaderItemStyle CssClass="visible-lg hidden-md hidden-sm hidden-xs" />
<FilterItemStyle CssClass="visible-lg hidden-md hidden-sm hidden-xs" />
<CommandItemSettings ExportToExcelText="Export" ShowRefreshButton="true" ShowExportToExcelButton="false" ShowAddNewRecordButton="false" />
<PagerStyle AlwaysVisible="True" PageSizes="50;100;150;200;300;400;500" Mode="NextPrevNumericAndAdvanced"
CssClass="visible-lg visible-md visible-sm visible-xs" />
<Columns>
<telerik:GridBoundColumn DataField="AffiliationID" Visible="true" DataType="System.Int32"
FilterControlAltText="Filter AffiliationID column" HeaderText="ID" SortExpression="AffiliationID" UniqueName="AffiliationID"
ItemStyle-CssClass="hidden-md hidden-sm hidden-xs"
HeaderStyle-CssClass="hidden-md hidden-sm hidden-xs"
FooterStyle-CssClass="hidden-md hidden-sm hidden-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="AffiliationName" Visible="true" DataType="System.String" FilterControlAltText="Filter AffiliationName column"
HeaderText="Name" SortExpression="AffiliationName" UniqueName="AffiliationName"
ItemStyle-CssClass="visible-lg visible-md visible-sm visible-xs"
HeaderStyle-CssClass="visible-lg visible-md visible-sm visible-xs"
FooterStyle-CssClass="visible-lg visible-md visible-sm visible-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EntityAddress" Visible="true" DataType="System.String" FilterControlAltText="Filter EntityAddress column"
HeaderText="Address" SortExpression="EntityAddress" UniqueName="EntityAddress"
ItemStyle-CssClass="hidden-md hidden-sm hidden-xs"
HeaderStyle-CssClass="hidden-md hidden-sm hidden-xs"
FooterStyle-CssClass="hidden-md hidden-sm hidden-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="SpecialityCode" Visible="true" DataType="System.String" FilterControlAltText="Filter SpecialityCode column"
HeaderText="Specialty" SortExpression="SpecialityCode" UniqueName="SpecialityCode"
ItemStyle-CssClass="visible-md visible-sm visible-xs"
HeaderStyle-CssClass="visible-md visible-sm visible-xs"
FooterStyle-CssClass="visible-md visible-sm visible-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PhysicianClass" Visible="true" DataType="System.String" FilterControlAltText="Filter PhysicianClass column"
HeaderText="Class" SortExpression="PhysicianClass" UniqueName="PhysicianClass"
ItemStyle-CssClass="visible-lg visible-md visible-sm visible-xs"
HeaderStyle-CssClass="visible-lg visible-md visible-sm visible-xs"
FooterStyle-CssClass="visible-lg visible-md visible-sm visible-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="AmounBrickName" Visible="true" DataType="System.String" FilterControlAltText="Filter AmounBrickName column"
HeaderText="Brick" SortExpression="AmounBrickName" UniqueName="AmounBrickName"
ItemStyle-CssClass="hidden-xs"
HeaderStyle-CssClass="hidden-xs"
FooterStyle-CssClass="hidden-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EmployeeName" DataType="System.String" FilterControlAltText="Filter EmployeeName column" HeaderText="Med. Rep"
SortExpression="EmployeeName" UniqueName="EmployeeName"
ItemStyle-CssClass="hidden-sm hidden-xs" HeaderStyle-CssClass="hidden-sm hidden-xs" FooterStyle-CssClass="hidden-sm hidden-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="AmounTerritoryName" DataType="System.String" FilterControlAltText="Filter AmounTerritoryName column"
HeaderText="Territory" SortExpression="AmounTerritoryName" UniqueName="AmounTerritoryName"
ItemStyle-CssClass="hidden-xs"
HeaderStyle-CssClass="hidden-xs"
FooterStyle-CssClass="hidden-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="SupervisorName" DataType="System.String" FilterControlAltText="Filter SupervisorName column"
HeaderText="District Manager" SortExpression="SupervisorName" UniqueName="SupervisorName"
ItemStyle-CssClass="hidden-md hidden-sm hidden-xs"
HeaderStyle-CssClass="hidden-md hidden-sm hidden-xs"
FooterStyle-CssClass="hidden-md hidden-sm hidden-xs">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="IsTargeted2" Visible="true" DataType="System.String" FilterControlAltText="Filter IsTargeted column"
HeaderText="Mandatory?" SortExpression="IsTargeted" UniqueName="IsTargeted"
ItemStyle-CssClass="hidden-md hidden-sm hidden-xs"
HeaderStyle-CssClass="hidden-md hidden-sm hidden-xs"
FooterStyle-CssClass="hidden-md hidden-sm hidden-xs">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
</div>
<asp:SqlDataSource ID="ListOfAffDS" runat="server" ConnectionString="<%$ ConnectionStrings:ng %>"
SelectCommand="SELECT AffiliationID, AffiliationName, EntityAddress, SpecialityCode, PhysicianClass, AmounBrickName, IsTargeted2, EmployeeName, AmounTerritoryName, SupervisorName FROM View_ss_Admin WHERE SpecialtyValue > 0 AND LastModifierID IS NOT NULL AND [PhysicianClass] IN ('A', 'B') AND ManagerID = @EmployeeIDFromSM">
<SelectParameters>
<asp:SessionParameter Name="EmployeeIDFromSM" SessionField="EmployeeIDFromSM" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<script src="../js/jquery.responsivetable.min.js"></script>
</asp:Content>
The problem is when viewing in tablet all fields' sizes become wrong
also, I have a problem in large size devices
Please help
Thanks
1 Answer, 1 is accepted
RadGrid does not offer integration with the Bootstrap framework and their isn't parity between RadGrid CSS classes and the ones that Bootstrap uses.
If you want to make RadGrid responsive please check the following resources:
http://www.telerik.com/blogs/the-most-mobile-friendly-grid-for-your-responsive-asp.net-web-forms-apps
http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/mobile-and-touch-support/adaptive-behavior/defaultcs.aspx
http://www.telerik.com/support/code-library/responsive-radgrid-d82dc6333682
Best regards,
Rumen
Progress Telerik