Problem in responsive radgrid

2 posts, 0 answers
  1. Ehab
    Ehab avatar
    4 posts
    Member since:
    Sep 2014

    Posted 28 Jun 2017 Link to this post

    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

     

  2. Rumen
    Admin
    Rumen avatar
    14459 posts

    Posted 03 Jul 2017 Link to this post

    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.
Back to Top