New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Skin

All-time top 25 UEFA Champions League table

 GamesGoals
RankTeamYearsPlayedWinsDrawsLosesForAgainstPoints
  
Edit Edit 1 Barcelona Barcelona 11111111

Barcelona Barcelona

Common
Games
Goals
Edit Edit 2 Manchester United Manchester United 5451921035039500181256
Edit Edit 3 Real Madrid Real Madrid 15001891254242-252420695
Edit Edit 4 Bayern Munich Bayern Munich 17177904341307183229
Edit Edit 5 Milan Milan 17159734739225147193
Edit Edit 6 Arsenal Arsenal 1614769374121212121156175
Edit Edit 7 Juventus Juventus 14132623733209136161
Edit Edit 8 Chelsea Chelsea 12122613526200109157
Edit Edit 9 Porto Porto 18142593548173159153
Edit Edit 10 Inter Inter 11105502629148118126
Edit Edit 11 Lyon Lyon 12106502531177123125
Edit Edit 12 Valencia Valencia 99241282314190110
Edit Edit 13 Liverpool Liverpool 88239241912473102
Edit Edit 14 Ajax Ajax 34349236253111710297
Edit Edit 15 Borussia Dortmund Borussia Dortmund 97435182110910288
Edit Edit 16 PSV Eindhoven PSV Eindhoven 1290111111111131
Edit Edit 17 Olympiacos Olympiacos 159229194410914877
Edit Edit 18 Dynamo Kyiv Dynamo Kyiv 149626224811815074
Edit Edit 19 Galatasaray Galatasaray 12862422409013770
Edit Edit 20 Roma Roma 766241824798566
12
 Item 1 to 20 of 25
Page:
of 2 Page size:
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom
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). In this example is used the MetroTouch skin.
  • Replace all occurrences of "_MetroTouch" 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 BODY section of your page.
  • Set Skin="MyCustomSkin" and EnableEmbeddedSkins="false" for RadGrid.
Important:
RadGrid may create other Telerik controls as part of its elements (combobox, filtering menu, etc.) and you will need to perform the same steps for these controls as well!
  • DefaultVB.aspx
  • TeamsEditFormVB.ascx
  • DefaultVB.aspx.vb
    • DefaultVB.aspx.vb
    • TeamsEditFormVB.ascx.vb
  • Ajax.MyCustomSkin.css
    • Ajax.MyCustomSkin.css
    • ComboBox.MyCustomSkin.css
<%@ Page Language="vb" AutoEventWireup="false"  CodeFile="DefaultVB.aspx.vb" Inherits="Grid_Examples_Styles_Custom_Skin_DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <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/Menu.MyCustomSkin.css" rel="stylesheet" type="text/css" />
    <link href="MyCustomSkin/ComboBox.MyCustomSkin.css" rel="stylesheet" />
    <link href="MyCustomSkin/Ajax.MyCustomSkin.css" rel="stylesheet" />
    <link href="MyCustomSkin/Button.MyCustomSkin.css" rel="stylesheet" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <h3 style="color: #333333; font-size: 16px; font-weight: normal; margin: 0 0 15px;">All-time top 25 UEFA Champions League table</h3>
    <div class="demo-container no-bg">
    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="false" Skin="MyCustomSkin" EnableEmbeddedSkins="false"
        DataSourceID="SqlDataSource1"
        Height="600px"
        OnPreRender="RadGrid1_PreRender"
        OnUpdateCommand="RadGrid1_UpdateCommand"
        AllowSorting="True" PageSize="20" AllowPaging="True">
        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
        <MasterTableView AllowFilteringByColumn="True" DataKeyNames="TeamNames" TableLayout="Fixed">
            <ColumnGroups>
                <telerik:GridColumnGroup HeaderText="Games" Name="Games"></telerik:GridColumnGroup>
                <telerik:GridColumnGroup HeaderText="Goals" Name="Goals"></telerik:GridColumnGroup>
                <telerik:GridColumnGroup Name="TeamRank"></telerik:GridColumnGroup>
                <telerik:GridColumnGroup Name="GameData"></telerik:GridColumnGroup>
                <telerik:GridColumnGroup Name="Years"></telerik:GridColumnGroup>
            </ColumnGroups>
            <Columns>
                <telerik:GridTemplateColumn AllowFiltering="false">
                    <ItemTemplate>
                        <asp:Image runat="server" ID="edit1" ImageUrl="MyCustomSkin/Grid/Edit.png" AlternateText="Edit" Width="12px" Height="12px" />
                        <asp:LinkButton runat="server" ID="linkbuttonedit1" Text="Edit" CommandName="Edit"></asp:LinkButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Rank" ColumnGroupName="TeamRank" AllowFiltering="false" HeaderText="Rank">
                    <HeaderStyle Width="60px" />
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="TeamNames" UniqueName="TeamNames" HeaderText="Team" ColumnGroupName="TeamRank">
                    <HeaderStyle Width="200px" />
                    <ItemStyle CssClass="teamNames" />
                    <ItemTemplate>
                        <img src='images/<%# Eval("TeamNames").ToString().Replace(" ", "_") %>.png' alt="<%# Eval("TeamNames") %>" />
                        <%# Eval("TeamNames") %>
                    </ItemTemplate>
                    <FilterTemplate>
                        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Skin="MyCustomSkin" EnableEmbeddedSkins="false"
                            DataSourceID="SqlDataSource1" DataValueField="TeamNames" DataTextField="TeamNames" AppendDataBoundItems="true"
                            SelectedValue='<%# TryCast(Container,GridItem).OwnerTableView.GetColumn("TeamNames").CurrentFilterValue %>'
                            OnClientSelectedIndexChanged="TitleIndexChanged" OnClientDropDownClosed="TitleIndexChanged">
                            <Items>
                                <telerik:RadComboBoxItem Text="All" Selected="true" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                            <script type="text/javascript">
                                function TitleIndexChanged(sender, args) {
                                    var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");

                                        tableView.filter("TeamNames", args.get_item().get_value(), "EqualTo");
                                    }
                            </script>
                        </telerik:RadScriptBlock>
                    </FilterTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Years" HeaderText="Years" ColumnGroupName="Years"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Played" HeaderText="Played" ColumnGroupName="Games"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Wins" HeaderText="Wins" ColumnGroupName="Games"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Draws" HeaderText="Draws" ColumnGroupName="Games"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Loses" HeaderText="Loses" ColumnGroupName="Games"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="GoalsFor" HeaderText="For" ColumnGroupName="Goals"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="GoalsAgainst" HeaderText="Against" ColumnGroupName="Goals"></telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Points" HeaderText="Points" ColumnGroupName="GameData"></telerik:GridBoundColumn>
            </Columns>
            <EditFormSettings UserControlName="TeamsEditFormVB.ascx" EditFormType="WebUserControl">
            </EditFormSettings>
        </MasterTableView>
        <ClientSettings EnableRowHoverStyle="true">
            <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" />
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
    </telerik:RadGrid>
        </div>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT Rank,TeamNames,Years,Played,Wins,Draws,Loses,GoalsFor,GoalsAgainst,Points FROM ChampionLeague"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance