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

Problem in responsive radgrid

1 Answer 433 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ehab
Top achievements
Rank 2
Ehab asked on 28 Jun 2017, 03:03 PM

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

Sort by
0
Rumen
Telerik team
answered on 03 Jul 2017, 03:17 PM
Hi Ehab,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Ehab
Top achievements
Rank 2
Answers by
Rumen
Telerik team
Share this question
or