Controlling RadGrid column width and visibility with @media

It is almost mandatory these days to design for multiple device widths. 

Telerik as it's RapPageLayout... but honestly, it's pretty simple to use @media to control things. For example, make this site wider and narrower and watch the side columns disappear and reappear. 

Below we show you this technique for the ASP.NET RadGrid

Related Articles

... and you 'll find more on the Telerik ASPNET Grid Menu

RadGrid with columns that disappear at 900 pixels

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" CssClass="RadGrid900"  RenderMode="Lightweight" AllowPaging="false"  Width="600px" OnItemCommand="RadGrid1_ItemCommand" OnNeedDataSource="RadGrid1_NeedDataSource">
        <MasterTableView DataKeyNames="VendorID, vendname"  ShowFooter="false" >
            <Columns>
                <telerik:GridButtonColumn ButtonType="LinkButton"  HeaderText ="Vendor Name" DataTextField="vendname" CommandName="" ></telerik:GridButtonColumn>
                <telerik:GridBoundColumn HeaderText ="Email" HeaderStyle-CssClass="RadGrid900Col" ItemStyle-CssClass="RadGrid900Col" DataField="EmailToAddress"></telerik:GridBoundColumn>
                <telerik:GridCheckBoxColumn HeaderText="Phone" HeaderStyle-CssClass="RadGrid900Col" ItemStyle-CssClass="RadGrid900Col" DataField="HasPhone"></telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn HeaderText="Bank Name" HeaderStyle-CssClass="RadGrid900Col" ItemStyle-CssClass="RadGrid900Col" DataField="HasBankName"></telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn HeaderText="Bank Acct" HeaderStyle-CssClass="RadGrid900Col" ItemStyle-CssClass="RadGrid900Col" DataField="HasBankAcct"></telerik:GridCheckBoxColumn>
                <telerik:GridCheckBoxColumn HeaderText="Routing" HeaderStyle-CssClass="RadGrid900Col" ItemStyle-CssClass="RadGrid900Col" DataField="HasRoute"></telerik:GridCheckBoxColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

CSS to make this work

@media (min-width:1px) and (max-width:640px) {
    .RadGrid900Col {
        display: none !important;
    }
}

 

 

 

RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences