Grid - Custom Skin

All-time top 25 UEFA Champions League table

 GamesGoals
RankTeamYearsPlayedWinsDrawsLosesForAgainstPoints
  
Edit Edit 1 Barcelona Barcelona 181851044833364186256

Barcelona Barcelona

Common
Games
Goals
Edit Edit 2 Manchester United Manchester United 191921035039331181256
Edit Edit 3 Real Madrid Real Madrid 181891073844384213252
Edit Edit 4 Bayern Munich Bayern Munich 17177934341307183229
Edit Edit 5 Milan Milan 17159734739225147193
Edit Edit 6 Arsenal Arsenal 16147693741225156175
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 99241282314189110
Edit Edit 13 Liverpool Liverpool 88239241912473102
Edit Edit 14 Ajax Ajax 129236253111710297
Edit Edit 15 Borussia Dortmund Borussia Dortmund 9743518211098288
Edit Edit 16 PSV Eindhoven PSV Eindhoven 13903018429012978
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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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!
  • DefaultCS.aspx
  • TeamsEditFormCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • TeamsEditFormCS.ascx.cs
  • Ajax.MyCustomSkin.css
    • Ajax.MyCustomSkin.css
    • ComboBox.MyCustomSkin.css
<%@ Page Language="c#"  CodeFile="DefaultCS.aspx.cs" Inherits="Grid_Examples_Styles_Custom_Skin_DefaultCS"%>

<%@ 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">
    <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" EnableAJAX="true">
        <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="MyCustomSkin" EnableEmbeddedSkins="false">
    </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>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AutoGenerateColumns="false" Skin="MyCustomSkin" EnableEmbeddedSkins="false" 
            OnPreRender="RadGrid1_PreRender"
            OnUpdateCommand="RadGrid1_UpdateCommand"
            DataSourceID="SqlDataSource1"
            Height="600px" 
            AllowSorting="True" PageSize="20" AllowPaging="True">
            <PagerStyle Mode="NextPrevNumericAndAdvanced" />
            <MasterTableView AllowFilteringByColumn="True" DataKeyNames="TeamNames" TableLayout="Fixed" EditMode="EditForms">
                <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" runat="server" Skin="MyCustomSkin" EnableEmbeddedSkins="false"
                                DataSourceID="SqlDataSource1" DataValueField="TeamNames" DataTextField="TeamNames" AppendDataBoundItems="true"
                                SelectedValue='<%# ((GridItem)Container).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("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        if (args.get_item && args.get_item().get_value())
                                            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="TeamsEditFormCS.ascx" EditFormType="WebUserControl">
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings EnableRowHoverStyle="true">
                <Scrolling AllowScroll="true" SaveScrollPosition="true" UseStaticHeaders="true" />
                <Selecting AllowRowSelect="true" />
            </ClientSettings>
        </telerik:RadGrid>
    <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>

Find Assistance

Help Us Improve

Was this example helpful?