This is a migrated thread and some comments may be shown as answers.

Date-range slider

0 Answers 149 Views
Slider
This is a migrated thread and some comments may be shown as answers.
eyal
Top achievements
Rank 1
eyal asked on 13 Jul 2010, 11:04 AM
Hi,

I created a customized date-range slider (screenshot attached) in one of my projects that I would like to share and get feedback.

aspx markup:
<telerik:RadScriptBlock ID="radScriptBlock1" runat="server">
<script type="text/javascript">
function onClientValueChanging(sender, args)
    {
        if(!isSliding) return;
           //OADate origin is midnight, 30 December 1899                             
        var date = new Date('December 30,1899 00:00:00');
        date.setDate(date.getDate()+parseInt(args.get_newValue()));
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
        resetToolTipLocation(tooltip);
        var day  = date.getDate();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
        tooltip.set_text(day+'.'+month+'.'+year); // finnish-localized date format
    }
var isSliding = false;
function onClientSlideStart(sender, args)
    {
        isSliding = true;
 
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
        showRadToolTip(tooltip, sender);
    }
function onClientSlide(sender, args)
    {
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
        showRadToolTip(tooltip, sender);
    }
function onClientSlideEnd(sender, args)
    {
        isSliding = false;
 
        var tooltip = $find("<%= radToolTipSlider.ClientID %>");
        tooltip.hide();
    }
function showRadToolTip(tooltip, slider)
    {
        var activeHandle = slider.get_activeHandle();
        if(!activeHandle) return;
                    
        tooltip.set_targetControl(activeHandle);
        resetToolTipLocation(tooltip);
    }
function resetToolTipLocation(tooltip)
    {
        if (!tooltip.isVisible())
            tooltip.show();
        else
            tooltip.updateLocation();
    }
</script>
</telerik:RadScriptBlock>
<telerik:RadAjaxManager ID="radAjaxManager" runat="server">
<AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="radSliderDates">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="lblSliderStartDate" UpdatePanelRenderMode="Inline" />
            <telerik:AjaxUpdatedControl ControlID="lblSliderEndDate" UpdatePanelRenderMode="Inline" />
        </UpdatedControls>
    </telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel1" runat="server" />
<telerik:RadToolTip  ID="radToolTipSlider" runat="server" Position="TopCenter" OffsetY="3"
            ShowCallout="false" Height="20px" ShowEvent="FromCode" HideEvent="FromCode"></telerik:RadToolTip>
<div>
    <fieldset style="width:700px">
        <legend>Slider</legend>
        <table border="0" cellpadding="2" cellspacing="0">
            <tr>
                <td><asp:Label ID="lblSliderStartDate" runat="server" /></td>
                <td>
                    <telerik:RadSlider runat="server" ID="radSliderDates" IsSelectionRangeEnabled="true" Width="370"
                        AutoPostBack="true" ShowDecreaseHandle="false" ShowIncreaseHandle="false"
                         OnClientValueChanging="onClientValueChanging" OnClientSlideStart="onClientSlideStart" OnClientSlideEnd="onClientSlideEnd" OnClientSlide="onClientSlide" />
                </td>
                <td><asp:Label ID="lblSliderEndDate" runat="server" /></td>
            </tr>
        </table>
    </fieldset>
</div>

Code-behind (VB)
Private Sub InitDates()
        ' dtStart and dtEnd are fetched from db
        Dim dtStart As Date = CDate(getStartDate()).ToShortDateString
        Dim dtEnd As Date = CDate(getEndDate()).ToShortDateString
        lblSliderStartDate.Text = dtStart.ToShortDateString
        lblSliderEndDate.Text = dtEnd.ToShortDateString
        radSliderDates.MinimumValue = CInt(dtStart.ToOADate)
        radSliderDates.MaximumValue = CInt(dtEnd.ToOADate)
        radSliderDates.SelectionStart = CInt(dtStart.ToOADate)
        radSliderDates.SelectionEnd = CInt(dtEnd.ToOADate)
        radSliderDates.SmallChange = 1
    End Sub
 
Protected Sub radSliderDates_ValueChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles radSliderDates.ValueChanged
        Dim dtStart As Date = Date.FromOADate(radSliderDates.SelectionStart.ToString)
        Dim dtEnd As Date = Date.FromOADate(radSliderDates.SelectionEnd.ToString)
        lblSliderStartDate.Text = dtStart.ToShortDateString
        lblSliderEndDate.Text = dtEnd.ToShortDateString
    End Sub


In the project, the slider is used as a filter for ajaxified grid.
There might be some glitches in the code snippets due to the copy-paste-modify from the project. Sorry for that..

Telerik dll - 2010.1.309.35
Tested on FF 3.6.6, IE 8, Chrome 5, Safari 5

Comments are most welcome!

br,
eyal

No answers yet. Maybe you can help?

Tags
Slider
Asked by
eyal
Top achievements
Rank 1
Share this question
or