locked
MultiHandleSliderExtender RRS feed

  • Question

  • User-1291972735 posted

    Where I'm missing....

    I have two MultiHandleSliderExtender in a page. I want these date labels with the handles of each respectively.

     <table>
            <tr>
                <td style="vertical-align: bottom; width: 100px;">
                    <asp:TextBox ID="txtMultiHandle1_1_BoundControl" runat="server" Width="30" Text="0"
                        AutoPostBack="True" Style="display: none;" />
                </td>
                <td style="vertical-align: middle;"><br /><br /><br /><br /><br /><br />
                    <asp:TextBox ID="sliderOne" runat="server" Style="display: none;" AutoPostBack="true" />
                    <cc1:MultiHandleSliderExtender ID="multiHandleSliderExtenderOne" runat="server" BehaviorID="multiHandleSliderExtenderOne"
                        TargetControlID="sliderOne" Orientation="Horizontal" EnableHandleAnimation="true"
                        EnableKeyboard="true" EnableMouseWheel="true" ShowHandleDragStyle="true" ShowHandleHoverStyle="true"
                        Minimum="0" Length="365" EnableInnerRangeDrag="true" ShowInnerRail="true" HandleAnimationDuration="0.0001"
                        RaiseChangeOnlyOnMouseUp="true" >
                        <MultiHandleSliderTargets>
                            <cc1:MultiHandleSliderTarget ControlID="txtMultiHandle1_1_BoundControl" />
                            <cc1:MultiHandleSliderTarget ControlID="txtMultiHandle1_2_BoundControl" />
                        </MultiHandleSliderTargets>
                    </cc1:MultiHandleSliderExtender>
                </td>
                <td style="vertical-align: bottom; width: 100px;">
                    <asp:TextBox ID="txtMultiHandle1_2_BoundControl" runat="server" Width="30" Text="40"
                        AutoPostBack="True" Style="display: none;" />
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td style="vertical-align: bottom; width: 100px;">
                    <asp:TextBox ID="txtMultiHandle2_1_BoundControl" runat="server" Width="30" Text="0"
                        AutoPostBack="True" Style="display: none;" />
                </td>
                <td style="vertical-align: middle;"><br /><br /><br /><br /><br /><br />
                    <asp:TextBox ID="sliderTwo" runat="server" Style="display: none;" AutoPostBack="true" />
                    <cc1:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" BehaviorID="multiHandleSliderExtenderTwo"
                        TargetControlID="sliderTwo" Orientation="Horizontal" EnableHandleAnimation="true"
                        EnableKeyboard="true" EnableMouseWheel="true" ShowHandleDragStyle="true" ShowHandleHoverStyle="true"
                        Minimum="0" Length="365" EnableInnerRangeDrag="true" ShowInnerRail="true" HandleAnimationDuration="0.0001"
                        RaiseChangeOnlyOnMouseUp="true" >
                        <MultiHandleSliderTargets>
                            <cc1:MultiHandleSliderTarget ControlID="txtMultiHandle2_1_BoundControl" />
                            <cc1:MultiHandleSliderTarget ControlID="txtMultiHandle2_2_BoundControl" />
                        </MultiHandleSliderTargets>
                    </cc1:MultiHandleSliderExtender>
                </td>
                <td style="vertical-align: bottom; width: 100px;">
                    <asp:TextBox ID="txtMultiHandle2_2_BoundControl" runat="server" Width="30" Text="40"
                        AutoPostBack="True" Style="display: none;" />
                </td>
            </tr>
        </table>
    Private Sub WebForm1_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
            multiHandleSliderExtenderOne.OnClientDrag = "ValueChangedHandler_" & multiHandleSliderExtenderOne.ClientID
            multiHandleSliderExtenderOne.OnClientDrag = "ValueChangedHandler_" & multiHandleSliderExtenderTwo.ClientID
            initScriptForMultiHandleSliderExtender(Me)
            SetDate(Me, multiHandleSliderExtenderOne, txtMultiHandle1_1_BoundControl.ClientID, txtMultiHandle1_2_BoundControl.ClientID, "01-Aug-2015", "31-Dec-2015", "hi")
            SetDate(Me, multiHandleSliderExtenderTwo, txtMultiHandle2_1_BoundControl.ClientID, txtMultiHandle2_2_BoundControl.ClientID, "01-Jan-2014", "31-Jan-2015", "hi")
        End Sub
        Sub SetDate(ByVal thisPage As Control, ByRef mhse As MultiHandleSliderExtender, ByVal LeftTextBox As String, ByVal RightTextBox As String, ByVal StartDate As String, ByVal EndDate As String, ByVal Lang As String)
            Dim _StartDate As Date = CDate(StartDate)
            Dim _EndDate As Date = CDate(EndDate)
            mhse.Length = DateDiff(DateInterval.Day, _StartDate, _EndDate)
            mhse.Maximum = DateDiff(DateInterval.Day, _StartDate, _EndDate)
            Dim strStartDate As String = MonthName(_StartDate.Month) & " " & _StartDate.Day & ", " & _StartDate.Year
            Dim strEndDate As String = MonthName(_EndDate.Month) & " " & _EndDate.Day & ", " & _EndDate.Year
            Dim sb As New StringBuilder()
            sb.Append("<script type='text/javascript'>")
    
            sb.Append("function ValueChangedHandler_" & mhse.ClientID & "(sender, args) {")
            sb.Append("setDateValues('" & LeftTextBox & "','" & RightTextBox & "','" & strStartDate & "','" & strEndDate & "','" & Lang & "');")
            sb.Append("}")
    
            sb.Append("          setDateValues('" & LeftTextBox & "','" & RightTextBox & "','" & strStartDate & "','" & strEndDate & "','" & Lang & "');")
    
            sb.Append("    </script>")
            ScriptManager.RegisterStartupScript(thisPage, thisPage.GetType(), "drsScript" & mhse.ClientID, sb.ToString(), False)
    
        End Sub
        Private Sub initScriptForMultiHandleSliderExtender(ByVal thisPage As Control)
            Dim sb As New StringBuilder()
            sb.Append("<script type='text/javascript'>")
            sb.Append("Date.prototype.getWeekdayName = function(lang) {   ")
            sb.Append("lang = lang && (lang in Date.localeWeekdayName) ? lang : 'en';    ")
            sb.Append("return Date.localeWeekdayName[lang].weekday_names[this.getDay()];")
            sb.Append("};")
            sb.Append("Date.prototype.getWeekdayNameShort = function(lang) {   ")
            sb.Append("lang = lang && (lang in Date.localeWeekdayName) ? lang : 'en';    ")
            sb.Append("return Date.localeWeekdayName[lang].weekday_names_short[this.getDay()];")
            sb.Append("};")
            sb.Append("Date.prototype.getMonthName = function(lang) {   ")
            sb.Append("lang = lang && (lang in Date.localeMonth) ? lang : 'en';    ")
            sb.Append("return Date.localeMonth[lang].month_names[this.getMonth()];")
            sb.Append("};")
            sb.Append("Date.prototype.getMonthNameShort = function(lang) {   ")
            sb.Append("lang = lang && (lang in Date.localeMonth) ? lang : 'en'; ")
            sb.Append("return Date.localeMonth[lang].month_names_short[this.getMonth()];")
            sb.Append("};")
            sb.Append("Date.localeWeekdayName={en:{  weekday_names: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thrusday', 'Friday', 'Saturday'], 	weekday_names_short: ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat']}};")
            sb.Append("Date.localeWeekdayName.hi= {  weekday_names: ['रविवार', 'सोमवार', 'मंगलवार', 'बुधवार', 'गुरूवार', 'शुक्रवार', 'शनिवार'],    weekday_names_short: ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरू', 'शुक्र', 'शनि'] };")
            sb.Append("Date.localeMonth={en:{  month_names: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 	month_names_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}};")
            sb.Append("Date.localeMonth.hi= {  month_names: ['जनवरी', 'फरवरी', 'मार्च', 'अप्रेल', 'मई', 'जून', 'जुलाई', 'अगस्त', 'सितम्बर', 'अक्तूबर', 'नवम्बर', 'दिसम्बर'],    month_names_short: ['जन', 'फर', 'मार्च', 'अप्रेल', 'मई', 'जून', 'जुलाई', 'अग', 'सित', 'अक्तू', 'नव', 'दिस'] };")
    
            sb.Append("            function setDateValues(leftbox,rightbox,_startDate,_endDate,_lang) {")
            sb.Append("var startDate = new Date((_startDate));")
            sb.Append("var endDate = new Date((_endDate));")
            sb.Append("var date = [];")
            sb.Append("while (startDate <= endDate) ")
            sb.Append("{           ")
            sb.Append(" var weekdayName = startDate.getWeekdayNameShort(_lang);  ")
            sb.Append(" var month = startDate.getMonthName(_lang);  ")
            sb.Append(" var day = startDate.getDate();           ")
            sb.Append(" var year = startDate.getFullYear();          ")
            sb.Append(" var dateString = weekdayName+', '+('0' +day).slice(-2) + '-' + month + '-' + year;           ")
            sb.Append(" date.push(dateString);           ")
            sb.Append(" startDate = new Date(startDate.setDate(startDate.getDate() + 1))    ")
            sb.Append("};")
            sb.Append("var iDivL = document.createElement('div');")
            sb.Append("iDivL.id = 'divmin_'+leftbox;")
            sb.Append("iDivL.style.position = 'relative';")
            sb.Append("document.getElementsByTagName('body')[0].appendChild(iDivL);")
            sb.Append("var iDivR = document.createElement('div');")
            sb.Append("iDivR.id = 'divmax_'+rightbox;")
            sb.Append("iDivR.style.position = 'relative';")
            sb.Append("document.getElementsByTagName('body')[0].appendChild(iDivR);")
            sb.Append("                var min = document.getElementById(leftbox).value;")
            sb.Append("                var max = document.getElementById(rightbox).value;")
            sb.Append("                document.getElementById('divmin_'+leftbox).innerHTML = date[min];")
            sb.Append("                document.getElementById('divmax_'+rightbox).innerHTML = date[max];")
    
            sb.Append("                document.getElementById('divmin_'+leftbox).style.left = (35 + parseInt(min)) + 'px';")
            sb.Append("                document.getElementById('divmin_'+leftbox).style.top = (-25) + 'px';")
            sb.Append("                document.getElementById('divmax_'+rightbox).style.left = (45 + parseInt(max)) + 'px';")
            sb.Append("                document.getElementById('divmax_'+rightbox).style.top = (5) + 'px';")
            sb.Append("            };")
    
            sb.Append("    </script>")
            ScriptManager.RegisterClientScriptBlock(thisPage, thisPage.GetType(), "drsScript", sb.ToString(), False)
        End Sub



    Sunday, August 31, 2014 8:45 AM

Answers

  • User61956409 posted

    Hi VishRam,

    Based on your requirement, you could modify your code below to adjust labels positions via changing top and left property.

    VishRam

    sb.Append("                document.getElementById('divmin_'+leftbox).style.left = (35 + parseInt(min)) + 'px';")
            sb.Append("                document.getElementById('divmin_'+leftbox).style.top = (-25) + 'px';")
            sb.Append("                document.getElementById('divmax_'+rightbox).style.left = (45 + parseInt(max)) + 'px';")
            sb.Append("                document.getElementById('divmax_'+rightbox).style.top = (5) + 'px';")

    I make some changes as below according to your code, and it works fine in IE11.

    sb.Append("document.getElementById('divmin_'+leftbox).style.left = (35 + parseInt(min)) + 'px';")
            sb.Append("document.getElementById('divmin_'+leftbox).style.top = (-25) + 'px';")
            sb.Append("document.getElementById('divmax_'+rightbox).style.left = (125 + parseInt(max)) + 'px';")
    sb.Append("document.getElementById('divmax_'+rightbox).style.top = (-40) + 'px';")
    

    If you have any question about this issue, please post back freely.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 3, 2014 6:44 AM

All replies

  • User61956409 posted

    Sub SetDate(ByVal thisPage As Control, ByRef mhse As MultiHandleSliderExtender, ByVal LeftTextBox As String, ByVal RightTextBox As String, ByVal StartDate As String, ByVal EndDate As String, ByVal Lang As String)
    

    Hi VishRam,

    Thanks for your post.

    I have created a demo to test your code, and I get four errors. One of these errors is as below.

    Value of type ‘AjaxControlToolkit.MultiHandleSliderExtender’ cannot be converted to ‘VBDotNET. MultiHandleSliderExtender’

    In this situation, you could refer to the code below to modify your code.

    Sub SetDate(ByVal thisPage As Control, ByRef mhse As AjaxControlToolkit.MultiHandleSliderExtender, ByVal LeftTextBox As String, ByVal RightTextBox As String, ByVal StartDate As String, ByVal EndDate As String, ByVal Lang As String)

    If you have any question about my reply, please let me know freely.

    Best Regards,

    Fei Han

    Monday, September 1, 2014 6:07 AM
  • User-1291972735 posted

    I'm Concerning about labels positions and javascript valuechangehandler onClientDrag. Any one can help me on this

    Monday, September 1, 2014 11:46 PM
  • User61956409 posted

    Hi VishRam,

    Based on your requirement, you could modify your code below to adjust labels positions via changing top and left property.

    VishRam

    sb.Append("                document.getElementById('divmin_'+leftbox).style.left = (35 + parseInt(min)) + 'px';")
            sb.Append("                document.getElementById('divmin_'+leftbox).style.top = (-25) + 'px';")
            sb.Append("                document.getElementById('divmax_'+rightbox).style.left = (45 + parseInt(max)) + 'px';")
            sb.Append("                document.getElementById('divmax_'+rightbox).style.top = (5) + 'px';")

    I make some changes as below according to your code, and it works fine in IE11.

    sb.Append("document.getElementById('divmin_'+leftbox).style.left = (35 + parseInt(min)) + 'px';")
            sb.Append("document.getElementById('divmin_'+leftbox).style.top = (-25) + 'px';")
            sb.Append("document.getElementById('divmax_'+rightbox).style.left = (125 + parseInt(max)) + 'px';")
    sb.Append("document.getElementById('divmax_'+rightbox).style.top = (-40) + 'px';")
    

    If you have any question about this issue, please post back freely.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 3, 2014 6:44 AM