Controlling width of RadGrid with media queries

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

    Posted 02 Aug 2016 Link to this post

    I have an ASP.Net page with VB.net code-behind that has the RadPageLayout, RadComboboxes, TextBox, RadButton, and a RadGrid.

    The RadComboboxes, TextBox, RadButton, and RadGrid are placed in the RadPageLayout.

    I have set up everything so it looks good on a Desktop/Laptop PC and mobile devices of various sizes.

    Everything looks good when the RadGrid has data.

    But when the RadGrid has no data, it shrinks rather small.  The RadGrid has RenderMode = Auto.

    I would like to set the RadGrid to certain width sizes depending on the screen size so it stays the same size on the screen no matter if it has data or not.  Is there a way to do that using media queries?

    Sincerely,

    Keith Jackson

  2.
  3. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 05 Aug 2016 Link to this post

    Hello Keith,

    You should be able to set a height of the grid by using a media queries. Generally you can set a min height of the grid so this way it will not shrink completely when the grid does not have a data.

    Regards,
    Kostadin
    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 08 Aug 2016 in reply to Kostadin Link to this post

    Hi Kostadin,

         I think you misunderstand.  I am looking for a way to control the width not height of the RadGrid using media queries.  I am new to using media queries.  Can you provide some example code of a media query that controls the WIDTH of the RadGrid?

    Sincerely,

    Keith Jackson

  7. Keith
    Keith avatar
    117 posts
    Member since:
    Mar 2015

    Posted 08 Aug 2016 in reply to Keith Link to this post

    I have found a way to do this using media queries.  I just needed the right CSS element for the RadGrid.

    Here is what I did:

    <style type="text/css">
        @media (max-width:360px){
            .RadGrid {
                width: 300px;
            }
        }
        @media (min-width:361px) and (max-width:768px){
            .RadGrid {
                width: 360px;
            }
        }
        @media (min-width:769px) and (max-width:1024px){
            .RadGrid {
                width: 770px;
            }
        }
        @media (min-width:1025px) and (max-width:1280px){
            .RadGrid {
                width: 955px;
            }
        }
        @media (min-width:1281px){
            .RadGrid {
                width: 955px;
            }
        }
    </style>

    Dear Telerik people, if you know a better way or better CSS element to use for RadGrid then please let me know.  Thanks!

    Sincerely,

    Keith Jackson

  8.
  9. Vinay
    Vinay avatar
    2 posts
    Member since:
    Sep 2016

    Posted 14 Sep 2016 Link to this post

    Can I set UseStaticHeaders="false" in the similar way??
  11. Vinay
    Vinay avatar
    2 posts
    Member since:
    Sep 2016

    Posted 14 Sep 2016 in reply to Kostadin Link to this post

    Can I set UseStaticHeaders="false" in the similar way??
  13. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 16 Sep 2016 Link to this post

    Hi Vinay,

    Could you please elaborates a little bit more when you need to disable the static header? Keep in mind you cannot do that by using a CSS rules.
    Regards the Keith response this is the correct way of setting a width of the grid by using a media query.

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