Resize width of RadGrid based on screen or window size

5 posts, 1 answers
  1. Keith
    Keith avatar
    117 posts
    Member since:
    Mar 2015

    Posted 17 Aug 2016 Link to this post

    Here is a link to a demo you have for the RadGrid:

    http://demos.telerik.com/aspnet-ajax/grid/mobile-examples/overview/default.aspx?name=overview&utm_source=AJAX+Demos&utm_medium=QRcode&utm_campaign=Ajax_mobile_demos_qrcode

    I have a RadGrid with Static Headers=True and AutoGenerateColumns = False.  The RadGrid is populated by a DataSet.  My RadGrid does not respond like this demo does when the window of the browser is resized.  I have tried RenderMode=Auto and the resizing in Client Settings.

    I do have an AjaxLoadingPanel for my RadGrid.

    What do I need to do to get my RadGrid to respond like the demo does?

    Can you provide an example code so the RadGrid responds the same as this demo when browser window is resized?

    Please help!

    Here is the markup for my RadGrid:

    <telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel"></telerik:RadAjaxLoadingPanel>
    <telerik:RadGrid ID="rgRYGReport" runat="server" Height="456px" Width="100%" AutoGenerateColumns="False" AllowPaging="True" PageSize="100"
            OnDataBinding="rgRYGReport_DataBinding" OnPageIndexChanged="rgRYGReport_PageIndexChanged" OnNeedDataSource="rgRYGReport_NeedDataSource" ShowStatusBar="True">
        <GroupingSettings CollapseAllTooltip="Collapse all groups" />
        <ExportSettings IgnorePaging="True">
            <Pdf AllowPrinting="False">
            </Pdf>
            <Excel FileExtension="xlsx" Format="Xlsx" />
        </ExportSettings>
        <ClientSettings>
            <Selecting AllowRowSelect="True" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            <Resizing AllowResizeToFit="True" />
        </ClientSettings>
        <MasterTableView EnableViewState="true" DataKeyNames="MILL_PART_NO,RSDC_PART_NO,PO_SUPPLIER_CODE" ClientDataKeyNames="MILL_PART_NO,RSDC_PART_NO,PO_SUPPLIER_CODE">
            <Columns>
                <telerik:GridBoundColumn DataField="MILL_PART_NO" FilterControlAltText="Filter column0 column" HeaderText="<br/><br/><br/>Mill Part No." ReadOnly="True" UniqueName="MillPartNbr">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="RSDC_PART_NO" FilterControlAltText="Filter column1 column" HeaderText="<br/><br/><br/>RSDC Part No." ReadOnly="True" UniqueName="RSDCPartNbr">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="OVRALL_DOH_RATIO" FilterControlAltText="Filter column2 column" HeaderText="<br/><br/>OVL<br/>DOH" ReadOnly="True" UniqueName="OvlDOH">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="OVRALL_STATUS" FilterControlAltText="Filter column3 column" HeaderText="<br/><br/>OVL<br/>Status" ReadOnly="True" UniqueName="OverallStatus">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DOH_WHSE" FilterControlAltText="Filter column4 column" HeaderText="<br/><br/>DOH<br/>WHSE" ReadOnly="True" UniqueName="DOHWhse">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="FINAL_PROCESSING" FilterControlAltText="Filter column5 column" HeaderText="<br/><br/><br/>Proc" ReadOnly="True" UniqueName="Proc">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="TIER" FilterControlAltText="Filter column6 column" HeaderText="<br/><br/><br/>Tier" ReadOnly="True" UniqueName="Tier">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PART_TYPE" FilterControlAltText="Filter column7 column" HeaderText="<br/><br/>Part<br/>Type" ReadOnly="True" UniqueName="PartType">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="GM_PRESSLINE" FilterControlAltText="Filter column8 column" HeaderText="<br/><br/>Press<br/>Line" ReadOnly="True" UniqueName="PressLine">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="COMMENTS" FilterControlAltText="Filter column8 column" HeaderText="<br/><br/><br/>Comments" ReadOnly="True" UniqueName="Comments">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="TemplateCommentsColumn">
                    <ItemTemplate>
                        <asp:HyperLink ID="CommentsLink" runat="server" Text="Add/Edit Comment"></asp:HyperLink>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridTemplateColumn HeaderText="<br/><br/><br/>Release" UniqueName="TemplateReleaseColumn">
                    <ItemTemplate>
                        <asp:HyperLink ID="ReleaseLink" runat="server" Text="Click To Order"></asp:HyperLink>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="PO_SUPPLIER_CODE" FilterControlAltText="Filter column9 column" HeaderText="<br/><br/><br/>Mill" ReadOnly="True" UniqueName="Mill">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="SHIP_TO_CODE" FilterControlAltText="Filter column10 column" HeaderText="<br/><br/><br/>MFD" ReadOnly="True" UniqueName="MFD">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="VEHICLE" FilterControlAltText="Filter column11 column" HeaderText="<br/><br/><br/>Vehicle" ReadOnly="True" UniqueName="Vehicle">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PROG_NO" FilterControlAltText="Filter column12 column" HeaderText="<br/><br/><br/>Prog." ReadOnly="True" UniqueName="ProgNbr">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="DESCRIP" FilterControlAltText="Filter column13 column" HeaderText="<br/><br/><br/>Desc." ReadOnly="True" UniqueName="Description">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="REQ_MIN_QTY" FilterControlAltText="Filter column14 column" HeaderText="<br/><br/><br/>Coil Min" ReadOnly="True" UniqueName="CoilMin">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="REQ_MAX_QTY" FilterControlAltText="Filter column14 column" HeaderText="<br/><br/><br/>Coil Max" ReadOnly="True" UniqueName="CoilMax">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="REWORKHOLWGT" FilterControlAltText="Filter column14 column" HeaderText="<br/><br/>Rework/Hol<br/>Weight" ReadOnly="True" UniqueName="ReworkHolWgt">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="REWORKHOLPCS" FilterControlAltText="Filter column14 column" HeaderText="<br/><br/>Rework/Hol<br/>Pcs." ReadOnly="True" UniqueName="ReworkHolPcs">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="MASTER_AVAILABLE" FilterControlAltText="Filter column14 column" HeaderText="<br/>Available<br/>Master Coils<br/>Weight" ReadOnly="True" UniqueName="AvailMasterCoilsWgt">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="MASTER_TO_PRODUCE" FilterControlAltText="Filter column14 column" HeaderText="Approx.<br/>Yield From<br/>Coils<br/>Weight" ReadOnly="True" UniqueName="ApproxYieldFromCoilsWgt">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PULL_SIZE" FilterControlAltText="Filter column14 column" HeaderText="<br/><br/>Per Day<br/>Part Usage" ReadOnly="True" UniqueName="PerDayPartUsage">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="REQ_REC_QTY" FilterControlAltText="Filter column14 column" HeaderText="<br/><br/>Pcs/Kgs<br/>Min" ReadOnly="True" UniqueName="PcsKgsMin">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="REQ_REC_MAX_QTY" FilterControlAltText="Filter column14 column" HeaderText="<br/><br/>Pcs/Kgs<br/>Max" ReadOnly="True" UniqueName="PcsKgsMax">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="RTSWHSEPCSKGS" FilterControlAltText="Filter column14 column" HeaderText="<br/>RTS<br/>WHSE<br/>Pcs/Kgs" ReadOnly="True" UniqueName="RTSWhsePcsKgs">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PCS_AT_OPW" FilterControlAltText="Filter column2 column" HeaderText="<br/><br/>OWH<br/>Pieces" ReadOnly="True" UniqueName="OWHPieces">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="COIL_KGS_AT_OPW" FilterControlAltText="Filter column2 column" HeaderText="<br/><br/>OWH<br/>Coils" ReadOnly="True" UniqueName="OWHCoils">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PCS_INTRANSIT_OPW" FilterControlAltText="Filter column14 column" HeaderText="<br/>RTS<br/>Intransit<br/>Pieces" ReadOnly="True" UniqueName="RTSIntransitPcs">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="RTSINPRRSDCPCSKGS" FilterControlAltText="Filter column14 column" HeaderText="RTS/Inpr<br/>RSDC<br/>Pieces<br/>Kgs" ReadOnly="True" UniqueName="RTSInprRSDCPcsKgs">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
    </telerik:RadGrid>

  2.
  3. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 22 Aug 2016 Link to this post

    Hi Keith,

    You can check the appraoch and the example provided in the code library below:
    http://www.telerik.com/support/code-library/responsive-radgrid-d82dc6333682

    Regards,
    Maria Ilieva
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Keith
    Keith avatar
    117 posts
    Member since:
    Mar 2015

    Posted 22 Aug 2016 in reply to Maria Ilieva Link to this post

    Hi Maria,

        Thanks for your response but that example is not what I am looking for.  In that example at a certain window size, it changes from a grid to each record being in a block format.  I am not looking to go to a block format.  In the demo I provided a link for above, stays as a grid at the width of the window and has a horizontal scroll bar show up when the width of the window is not wide enough and the paging at the bottom of the grid adjust accordingly.  That is what I am looking for.

    Sincerely,

    Keith Jackson

  7. Answer
    Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Aug 2016 Link to this post

    Hello,

    I would suggest you to place the RadGrid control it in a container and set Height and Width of the RadGrid to 100%. The RadGrid will occupy the full space of its wrapper and you can easy control its dimensions.

    If this does not help It will be best of you can open a separate support ticket and send us sample runnbale version of your applictaion that demonstrates the issue you are facing. Thus we will be able to debug it locally and advise you further.

    Regards,
    Maria Ilieva
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  9. Keith
    Keith avatar
    117 posts
    Member since:
    Mar 2015

    Posted 26 Aug 2016 in reply to Maria Ilieva Link to this post

    Thanks Maria!

    That is the information I was looking for.

    The RadGrid is placed within a div for the restriction zone for the RadWindows used on the page.  I have changed the RadGrid to have a width of 100%.  I did not want to change the Height setting.  In the CSS class for the div, I changed the width to 100%.  Now the RadGrid is responding like I was looking for.

    Thanks for your help!

    Sincerely,

    Keith Jackson

Back to Top