Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Grid / Custom Skin

IDNameUnitPriceDateDiscontinued
Count : 100000 $4,720,689.45  
Page 1 of 10000
 Item 1 to 10 of 100000
0Maxilaku$23.257/31/2008 12:00:00 AM
1Zaanse koeken$32.001/19/2008 12:00:00 AM
2Zaanse koeken$14.007/31/2008 12:00:00 AM
3Singaporean Hokkien Fried Mee$9.005/12/2008 12:00:00 AM
4Boston Crab Meat$19.005/10/2007 12:00:00 AM
5Spegesild$32.001/19/2008 12:00:00 AM
6Zaanse koeken$9.002/22/2008 12:00:00 AM
7Spegesild$19.004/13/2007 12:00:00 AM
8Rogede sild$18.405/10/2007 12:00:00 AM
9Côte de Blaye$32.008/26/2008 12:00:00 AM

  • The easiest way to create your own skin for RadGrid is to copy one of our existing skins and modify its existing CSS settings.

    You can do this in five steps:
    • Copy one of our existing skins (CSS and images). For example the Default skin.
    • Replace all occurrences of "_Default" with your skin name (for example "_MyCustomSkin") in the CSS file.
    • Change the urls for the images referenced in the CSS file.
    • Register your CSS file in the HEAD section of your page.
    • Set Skin="MyCustomSkin" and EnableEmbeddedSkins="false" for RadGrid.

    Important:
    RadGrid may create other RadControls as part of its elements (slider pager, filtering menu, date pickers in GridDateTimeColumns, etc.) and you will need to perform the same steps for these controls as well!

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Styles.CustomSkin.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag2"></telerik:HeadTag>
        <link href="MyCustomSkin/Grid.MyCustomSkin.css" rel="stylesheet" type="text/css" />
        <link href="MyCustomSkin/Input.MyCustomSkin.css" rel="stylesheet" type="text/css" />
        <link href="MyCustomSkin/Slider.MyCustomSkin.css" rel="stylesheet" type="text/css" />
        <link href="MyCustomSkin/Calendar.MyCustomSkin.css" rel="stylesheet" type="text/css" />
        <link href="MyCustomSkin/Menu.MyCustomSkin.css" rel="stylesheet" type="text/css" />
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS" ShowSkinChooser="false">
        </telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadGrid ID="RadGrid1" Skin="MyCustomSkin" EnableEmbeddedSkins="false" DataSourceID="ObjectDataSource1"
            PageSize="10" runat="server" AllowFilteringByColumn="true" AllowPaging="True"
            AllowSorting="True" ShowFooter="True" ShowStatusBar="true" GridLines="None" AutoGenerateColumns="false">
            <MasterTableView OverrideDataSourceControlSorting="true">
                <Columns>
                    <telerik:GridNumericColumn Aggregate="Count" DataField="ID" HeaderText="ID" ReadOnly="true"
                        FilterControlWidth="80px" />
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name" />
                    <telerik:GridNumericColumn Aggregate="Sum" DataField="UnitPrice" HeaderText="UnitPrice"
                        DataFormatString="{0:c2}" FilterControlWidth="80px" />
                    <telerik:GridDateTimeColumn DataField="Date" HeaderText="Date" FilterControlWidth="100px" />
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" />
                </Columns>
            </MasterTableView>
            <PagerStyle Mode="Slider" />
            <ClientSettings>
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
        </telerik:RadGrid>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" EnablePaging="true" SelectCountMethod="SelectCount"
    SelectMethod="Select" TypeName="Telerik.Web.Examples.Grid.MyBusinessObjectCollection">
        </asp:ObjectDataSource>
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1" AdditionalCodeViewerFiles="~/Grid/Examples/Styles/CustomSkin/MyCustomSkin/Grid.MyCustomSkin.css,
        ~/Grid/Examples/Styles/CustomSkin/MyCustomSkin/Calendar.MyCustomSkin.css,
        ~/Grid/Examples/Styles/CustomSkin/MyCustomSkin/Input.MyCustomSkin.css,
        ~/Grid/Examples/Styles/CustomSkin/MyCustomSkin/Menu.MyCustomSkin.css,
        ~/Grid/Examples/Styles/CustomSkin/MyCustomSkin/Slider.MyCustomSkin.css">
        </telerik:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451