<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body style="margin: 0px;">
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="btnClearFilters">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                            <telerik:AjaxUpdatedControl ControlID="btnClearFilters" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
                Transparency="25" Width="75px">
                <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                    style="border: 0px;" />
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadGrid ID="RadGrid1" AllowPaging="True" AutoGenerateColumns="False" AllowFilteringByColumn="True"
                runat="server" Width="400px" Skin="WebBlue" ShowStatusBar="true">
                <MasterTableView Width="100%" AdditionalDataFieldNames="Country, City">
                    <Columns>
                        <telerik:GridTemplateColumn HeaderText="Country/City" UniqueName="MyCustomTemplateColumn">
                            <HeaderTemplate>
                                <table id="Table1" cellspacing="1" cellpadding="1" width="100%" border="1">
                                    <tr>
                                        <td colspan="2" align="center">
                                            <b>Address</b></td>
                                    </tr>
                                    <tr>
                                        <td style="width: 50%">
                                            <asp:LinkButton ID="btnSortByCountry" Text="Country" ToolTip="Sort by Country" CommandName='Sort'
                                                CommandArgument='Country' runat="server" Width="100%" /></td>
                                        <td style="width: 50%">
                                            <asp:LinkButton ID="btnSortByCity" Text="City" ToolTip="Sort by City" CommandName='Sort'
                                                CommandArgument='City' runat="server" Width="100%" /></td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <table id="Table2" cellspacing="1" cellpadding="1" width="100%" border="1">
                                    <tr>
                                        <td style="width: 50%">
                                            <%# Eval("Country") %>
                                        </td>
                                        <td style="width: 50%">
                                            <%# Eval("City") %>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <PagerStyle Mode="NumericPages" />
            </telerik:RadGrid>&nbsp;
            <asp:Button ID="btnClearFilters" runat="server" Text="Clear filters" />
        </div>
    </form>
</body>
</html>
