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