<%@ 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>
<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>
<div class="demo-container no-bg">
<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>
</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>