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 21 Panathinaikos Panathinaikos 9742318337610464

Panathinaikos Panathinaikos

Common
Games
Goals
Edit Edit 22 Bayer Leverkusen Bayer Leverkusen 86725132910012063
Edit Edit 23 Deportivo La Coruna Deportivo La Coruna 558231520747961
Edit Edit 24 Benfica Benfica 960221622646760
Edit Edit 25 Paris Saint-Germain Paris Saint-Germain 64624913785457
12
 Item 21 to 25 of 25
Page:
of 2 GoPage 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