<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Filtering.FilterTemplates.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>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadGrid2">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<div class="demo-container no-bg">
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" Width="100%" DataSourceID="SqlDataSource1" AllowFilteringByColumn="True"
AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
OnPreRender="RadGrid1_PreRender" ShowStatusBar="true" EnableLinqExpressions="false">
<MasterTableView DataKeyNames="CustomerID" TableLayout="Fixed">
<Columns>
<telerik:GridBoundColumn UniqueName="ContactName" DataField="ContactName" HeaderText="Contact name"
AllowFiltering="false" HeaderStyle-Width="200px" />
<telerik:GridBoundColumn UniqueName="ContactTitle" DataField="ContactTitle" HeaderText="Contact title"
HeaderStyle-Width="200px">
<FilterTemplate>
<telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBoxTitle" DataSourceID="SqlDataSource2" DataTextField="ContactTitle"
DataValueField="ContactTitle" Width="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ContactTitle").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="TitleIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function TitleIndexChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("ContactTitle", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="City" DataField="City" HeaderText="City" HeaderStyle-Width="200px">
<FilterTemplate>
<telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBoxCity" DataSourceID="SqlDataSource3" DataTextField="City"
DataValueField="City" Width="100px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("City").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="CityIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
<script type="text/javascript">
function CityIndexChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("City", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="Country" HeaderText="Country" UniqueName="Country"
HeaderStyle-Width="200px" SortExpression="Country">
<FilterTemplate>
<telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBoxCountry" DataSourceID="SqlDataSource4" DataTextField="Country"
DataValueField="Country" Width="100px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Country").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="CountryIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="All" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
<script type="text/javascript">
function CountryIndexChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("Country", args.get_item().get_value(), "EqualTo");
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
<ItemTemplate>
<img src='Img/<%# Eval("Country") %>.gif' alt="" style="vertical-align: middle; margin-right: 7px;" /><%# Eval("Country") %>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridCheckBoxColumn DataField="Bool" DataType="System.Boolean" DefaultInsertValue=""
HeaderText="Is Promoted" SortExpression="Bool" UniqueName="Bool">
<HeaderStyle Width="150px" />
<FilterTemplate>
<telerik:RadComboBox RenderMode="Lightweight" ID="ImportedFilter" runat="server" OnClientSelectedIndexChanged="ImportedFilterSelectedIndexChanged"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Bool").CurrentFilterValue %>'
Width="100px" DataSourceID="SqlDataSource6" AppendDataBoundItems="true" OnItemDataBound="ImportedFilter_ItemDataBound">
<Items>
<telerik:RadComboBoxItem Text="NoFilter" Value="" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlock12" runat="server">
<script type="text/javascript">
function ImportedFilterSelectedIndexChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var filterVal = args.get_item().get_value();
if (filterVal == "") {
tableView.filter("Bool", filterVal, "NoFilter");
}
else if (filterVal == "1") {
tableView.filter("Bool", "1", "EqualTo");
}
else if (filterVal == "0") {
tableView.filter("Bool", "0", "IsNull");
}
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<br />
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" Width="100%" DataSourceID="SqlDataSource5" AllowFilteringByColumn="True"
AllowSorting="True" AllowPaging="True" PageSize="7" runat="server" AutoGenerateColumns="False"
EnableLinqExpressions="false" OnItemCommand="RadGrid2_ItemCommand" ShowStatusBar="true">
<MasterTableView DataKeyNames="OrderID" TableLayout="Fixed">
<Columns>
<telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID"
HeaderStyle-Width="110px">
<FilterTemplate>
Clear filters
<asp:ImageButton ID="btnShowAll" runat="server" ImageUrl="Img/filterCancel.gif" AlternateText="Show All"
ToolTip="Show All" OnClick="btnShowAll_Click" Style="vertical-align: middle" />
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="OrderDate" DataField="OrderDate" HeaderText="Order date"
DataFormatString="{0:D}" HeaderStyle-Width="330px">
<FilterTemplate>
<telerik:RadLabel runat="server" AssociatedControlID="FromOrderDatePicker" Text="From"></telerik:RadLabel>
<telerik:RadDatePicker RenderMode="Lightweight" ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected"
MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
<telerik:RadLabel runat="server" AssociatedControlID="ToOrderDatePicker" Text="to" Style="padding-left: 5px;"></telerik:RadLabel>
<telerik:RadDatePicker RenderMode="Lightweight" ID="ToOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="ToDateSelected"
MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function FromDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderDatePicker").ClientID %>');
var fromDate = FormatSelectedDate(sender);
var toDate = FormatSelectedDate(ToPicker);
tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
}
function ToDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromOrderDatePicker").ClientID %>');
var fromDate = FormatSelectedDate(FromPicker);
var toDate = FormatSelectedDate(sender);
tableView.filter("OrderDate", fromDate + " " + toDate, "Between");
}
function FormatSelectedDate(picker) {
var date = picker.get_selectedDate();
var dateInput = picker.get_dateInput();
var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
return formattedDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn UniqueName="ShippedDate" DataField="ShippedDate" HeaderText="Shipped date"
DataFormatString="{0:d}" HeaderStyle-Width="100px">
<FilterTemplate>
<telerik:RadDatePicker RenderMode="Lightweight" ID="ShippedDatePicker" runat="server" Width="100px" MinDate="07-04-1996"
MaxDate="05-06-1998" FocusedDate="07-04-1996" ClientEvents-OnDateSelected="DateSelected"
DbSelectedDate='<%# SetShippedDate(Container) %>' />
<telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
<script type="text/javascript">
function DateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var date = FormatSelectedDate(sender);
tableView.filter("ShippedDate", date, "EqualTo");
}
function FormatSelectedDate(picker) {
var date = picker.get_selectedDate();
var dateInput = picker.get_dateInput();
var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
return formattedDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Freight" HeaderText="Freight" UniqueName="Freight"
HeaderStyle-Width="250px" SortExpression="Freight" DataFormatString="{0:C}">
<FilterTemplate>
<div class="sliderLabelLeft">
$0
</div>
<telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
Style="float: left" MinimumValue="0" MaximumValue="1010" SmallChange="5" ShowDecreaseHandle="false"
ShowIncreaseHandle="false" Width="135px" SelectionStart='<%# startSlider %>'
SelectionEnd='<%# endSlider %>' OnClientValueChanged="ClientValueChanged" OnClientSlideStart="ClientSlideStart"
OnClientSlideEnd="FreightRangeChanged" />
<div class="sliderLabelRight">
$1010
</div>
<div style="clear: both; padding-top: 5px;">
<asp:Literal ID="Literal1" runat="server" Text='<%# "Showing range between: $" + startSlider + " and $" + endSlider %>' />
</div>
<telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
<script type="text/javascript">
function FreightRangeChanged(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var startValue = sender.get_selectionStart();
var endValue = sender.get_selectionEnd();
tableView.filter("Freight", startValue + " " + endValue, "Between");
}
function ClientValueChanged(sender, args) {
var tooltip = $find("<%= RadToolTip1.ClientID %>");
if (!tooltip.isVisible()) {
var activeHandle = sender.get_activeHandle();
if (!activeHandle) return;
tooltip.set_targetControl(activeHandle);
tooltip.show();
}
else {
tooltip.updateLocation();
}
tooltip.set_text(args.get_newValue());
}
function ClientSlideStart(sender, args) {
var tooltip = $find("<%= RadToolTip1.ClientID %>");
tooltip.hide();
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</div>
<telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" OffsetY="10" Position="TopCenter"
ShowCallout="false" ShowEvent="fromcode" />
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, ContactName, ContactTitle, City, Country, Bool FROM Customers"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT ContactTitle FROM Customers"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT City FROM Customers"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT Country FROM Customers"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource5" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT OrderID, OrderDate, ShippedDate, Freight FROM Orders"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource6" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT DISTINCT Bool FROM Customers"
runat="server"></asp:SqlDataSource>
</form>
</body>
</html>