<%@ Page Language="c#" Inherits="Telerik.Web.Examples.Slider.RangeSlider.DefaultCS"CodeFile="DefaultCS.aspx.cs" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<script src="scripts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container size-medium">
<div><span class="title">Use the RadSlider to filter the RadGrid.</span></div>
<br />
<table>
<tr>
<td>$0</td>
<td>
<telerik:RadSlider RenderMode="Lightweight" runat="server" ID="RadSlider1" IsSelectionRangeEnabled="true"
MinimumValue="0" MaximumValue="300" SmallChange="1" SelectionStart="0" SelectionEnd="300"
OnValueChanged="RadSlider1_ValueChanged"
OnClientValueChanging="demo.sliderClientValueChanging"
OnClientSlideStart="demo.sliderClientSlideStart"
OnClientSlideEnd="demo.sliderClientSlideEnd"
AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false">
</telerik:RadSlider>
</td>
<td>$300</td>
</tr>
</table>
SelectionStart: $<asp:Label ID="lblSelectionStart" runat="server" Text="0"></asp:Label><br />
SelectionEnd: $<asp:Label ID="lblSelectionEnd" runat="server" Text="300"></asp:Label>
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" Width="600px"
AllowPaging="True" PageSize="30" Height="300px" GridLines="None">
<GroupPanel ID="GroupPanel" Style="width: 100%;"></GroupPanel>
<MasterTableView AutoGenerateColumns="False" DataKeyNames="ProductID" DataSourceID="SqlDataSource1"
TableLayout="Fixed">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>
<ExpandCollapseColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="ProductName" HeaderText="Product" SortExpression="ProductName"
UniqueName="ProductName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CategoryName" HeaderText="Category" SortExpression="CategoryName"
UniqueName="CategoryName">
<HeaderStyle Width="100px"></HeaderStyle>
<ItemStyle Width="100px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity per unit"
SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="Unit price"
SortExpression="UnitPrice" UniqueName="UnitPrice" DataFormatString="{0:C}">
<HeaderStyle Width="70px"></HeaderStyle>
<ItemStyle Width="70px"></ItemStyle>
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="UnitsInStock" DataType="System.Int16" HeaderText="Units in stock"
SortExpression="UnitsInStock" UniqueName="UnitsInStock">
<HeaderStyle Width="90px"></HeaderStyle>
<ItemStyle Width="90px"></ItemStyle>
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<FilterMenu EnableTheming="True">
<CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
</FilterMenu>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>
</ClientSettings>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductName], [ProductID], [CategoryName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Alphabetical list of products] WHERE (UnitPrice > @MinimumPrice AND UnitPrice < @MaximumPrice)">
<SelectParameters>
<asp:ControlParameter ControlID="RadSlider1" PropertyName="SelectionStart" Name="MinimumPrice"></asp:ControlParameter>
<asp:ControlParameter ControlID="RadSlider1" PropertyName="SelectionEnd" Name="MaximumPrice"></asp:ControlParameter>
</SelectParameters>
</asp:SqlDataSource>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadSlider1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="lblSelectionStart" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
<telerik:AjaxUpdatedControl ControlID="lblSelectionEnd" UpdatePanelRenderMode="Inline"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadToolTip RenderMode="Lightweight" ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter"
ShowCallout="false" Height="20px" ShowEvent="fromcode" HideEvent="FromCode">
</telerik:RadToolTip>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function getToolTip() {
return $find("<%= RadToolTip1.ClientID %>");
}
</script>
</telerik:RadCodeBlock>
</div>
</form>
</body>
</html>