Controlling width of RadGrid with media queries

[Keith]

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

[Kostadin]

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

[Keith]

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

[Keith]

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

[Vinay]

Can I set UseStaticHeaders="false" in the similar way??

[Vinay]

Can I set UseStaticHeaders="false" in the similar way??

[Kostadin]

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