Slider control problem with Timer

Last post 09-25-2006 10:45 AM by rac12. 7 replies.

Sort Posts:

  • Slider control problem with Timer

    09-21-2006, 4:54 PM
    • Member
      172 point Member
    • rac12
    • Member since 11-13-2003, 6:05 PM
    • NJ
    • Posts 48

    I've used the Slider control with the combination of Timer. The code is as follows. The problem is whenever I slide to refresh the timer, the timer's inverval doesn't get changed. What am I missing here?

    I'm trying to update in OnInit of Page (just to see which would work) & also _TextChanged of Slider. None of them are working...so, initial interval of 5000 (5 seconds) remains even if I changed the slider to 60 seconds.

    Any clue? Thanks.

    .aspx code:

    <!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">
        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" EnableScriptComponents="True" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <p>Refresh data every 
                <span style="width:100%;">
                    <asp:Label ID="Slider1_BoundControl" runat="server"></asp:Label> seconds.  
                    <asp:TextBox ID="Slider1" runat="server" style="right:0px" OnTextChanged="Slider1_TextChanged"></asp:TextBox>
                </span>
                <cc1:SliderExtender ID="SliderExtender1" runat="server">
                    <cc1:SliderProperties Minimum="5" Maximum="60" Steps="12" Orientation="Horizontal" EnableHandleAnimation="true" TargetControlID="Slider1" BoundControlID="Slider1_BoundControl">
                    </cc1:SliderProperties>                
                </cc1:SliderExtender>            
            </p>
            <atlas:UpdatePanel ID="panelImportStatus" runat="server" Mode="conditional" >            
                <ContentTemplate>               
                    <div style="width:100%;overflow:scroll;">
                        <asp:Label ID="lblUpdate" runat="server" />
                        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="true"
                            AllowSorting="True" BackColor="White" BorderColor="#DEDFDE" 
                            BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableViewState="false"
                            DataSourceID="ObjectDataSource1" ForeColor="Black" GridLines="Vertical">
                            <FooterStyle BackColor="#CCCC99" />
                            <RowStyle BackColor="#F7F7DE" />
                            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                            <AlternatingRowStyle BackColor="White" />
                        </asp:GridView>
                        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
                            SelectMethod="GetStatus" 
                            TypeName="Bll.ImportStatus"
                            >            
                        </asp:ObjectDataSource>            
                    </div>                           
                </ContentTemplate>              
                <Triggers>
                </Triggers>      
            </atlas:UpdatePanel>
        </div>
        <atlas:TimerControl ID="Timer1" runat="server" Enabled="true" Interval="5000" OnTick="UpdateStatus" />
        </form>
    </body>
    </html>
     

    .aspx.cs code:

    protected void UpdateStatus(object sender, EventArgs e)
    {
     panelImportStatus.Update();
     lblUpdate.Text = "Last updated: " + System.DateTime.Now.ToString();
    }
    protected void Slider1_TextChanged(object sender, EventArgs e)
    {
     lblUpdate.Text = "Updating data...";
     Timer1.Interval = Convert.ToInt32(Slider1.Text.ToString()) * 1000;
     Timer1.DataBind();
     panelImportStatus.Update();
    }
    
    protected override void OnInit(EventArgs e)
    {
     base.OnInit(e);
     panelImportStatus.Triggers.Clear();
     ControlEventTrigger t = new ControlEventTrigger();
     t.ControlID = "Timer1";
     t.EventName = "Tick";
     if (Slider1.Text != "")
         Timer1.Interval = Convert.ToInt32(Slider1.Text.ToString()) * 1000;
     panelImportStatus.Triggers.Add(t);
    }    
    
    
     
  • Re: Slider control problem with Timer

    09-21-2006, 9:20 PM
    • Contributor
      4,346 point Contributor
    • sburke_msft
    • Member since 04-04-2006, 7:28 PM
    • Redmond, WA
    • Posts 770
    • AspNetTeam

    Two problems:

    1) Your TextChanged handler won't be called by the slider change

    2) The Timer is outside the UpdatePanel so it won't get updated when the UpdatePanel fires.

    For (1), the issue is that programatically changing the text in a textbox doesn't fire the "onchanged" event.  Slider is, of course, updating the text programatically.  We're going to address this in a future release of the Toolkit.

     You can fix this in the Toolkit by going into SliderBeahvior.js, and adding this code on line 655 after "this.control.set_text":

     

    if (document.createEvent) {

    var onchangeEvent = document.createEvent('HTMLEvents');

    onchangeEvent.initEvent('change', true, false);

    this.control.element.dispatchEvent(onchangeEvent);

    } else if( document.createEventObject ) {

    this.control.element.fireEvent('onchange');

    }

    SB 

    Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Slider control problem with Timer

    09-22-2006, 9:58 AM
    • Member
      172 point Member
    • rac12
    • Member since 11-13-2003, 6:05 PM
    • NJ
    • Posts 48

    Shawn,

    Thanks for your prompt reply. I tried your suggestion. I updated the .js file and recompile the toolkit probject, re-referenced to my project. Now, what do I need to change in my code, either in aspx or in aspx.cs? It doesn't seem to be working. Do I still need to keep OnInit event.

    This is the code I've changed and it's not working. Thanks for your help!

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    
        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" EnableScriptComponents="True" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <p>Refresh data every 
                <span style="width:100%;">
                    <asp:Label ID="Slider1_BoundControl" runat="server"></asp:Label> seconds.  
                    <asp:TextBox ID="Slider1" runat="server" style="right:0px" OnTextChanged="Slider1_TextChanged"></asp:TextBox>
                </span>
                <cc1:SliderExtender ID="SliderExtender1" runat="server">
                    <cc1:SliderProperties Minimum="5" Maximum="60" Steps="12" Orientation="Horizontal" EnableHandleAnimation="true" TargetControlID="Slider1" BoundControlID="Slider1_BoundControl">
                    </cc1:SliderProperties>                
                </cc1:SliderExtender>            
            </p>
            <atlas:UpdatePanel ID="panelImportStatus" runat="server" Mode="conditional" >            
                <ContentTemplate>               
                    <div>
                        <asp:Label ID="lblUpdate" runat="server" />
                        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="true"
                            AllowSorting="True" BackColor="White" BorderColor="#DEDFDE" 
                            BorderStyle="None" BorderWidth="1px" CellPadding="4" EnableViewState="false"
                            DataSourceID="ObjectDataSource1" ForeColor="Black" GridLines="Vertical">
                            <FooterStyle BackColor="#CCCC99" />
                            <RowStyle BackColor="#F7F7DE" />
                            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                            <AlternatingRowStyle BackColor="White" />
                        </asp:GridView>
                        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
                            SelectMethod="GetImportStatus" 
                            TypeName="Bll.ImportStatus"       
                            >            
                        </asp:ObjectDataSource>            
                    </div>                           
                    <atlas:TimerControl ID="Timer1" runat="server" Enabled="true" Interval="5000" OnTick="ImportStatus" />
                </ContentTemplate>              
                <Triggers>  
                    <atlas:ControlEventTrigger ControlID="Timer1" EventName="Tick" />                              
                </Triggers>      
            </atlas:UpdatePanel>        
        </div>    
        </form>
    </body>
    </html>

     

        protected void UpdateImportStatus(object sender, EventArgs e)
        {
            panelImportStatus.Update();
            lblUpdate.Text = "Last updated: " + System.DateTime.Now.ToString();
        }
    
        protected void Slider1_TextChanged(object sender, EventArgs e)
        {
            lblUpdate.Text = "Updating data...";
            Timer1.Interval = Convert.ToInt32(Slider1.Text.ToString()) * 1000;
            //Timer1.DataBind();
            panelImportStatus.Update();
        }
    
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            //panelImportStatus.Triggers.Clear();
            //ControlEventTrigger t = new ControlEventTrigger();
            //t.ControlID = "Timer1";
            //t.EventName = "Tick";
            //if (Slider1.Text != "")
            //    Timer1.Interval = Convert.ToInt32(Slider1.Text.ToString()) * 1000;
            //panelImportStatus.Triggers.Add(t);
        }
     
  • Re: Slider control problem with Timer

    09-22-2006, 2:55 PM
    • Contributor
      4,346 point Contributor
    • sburke_msft
    • Member since 04-04-2006, 7:28 PM
    • Redmond, WA
    • Posts 770
    • AspNetTeam
    You also need to set AutoPostBack=True on your TextBox
    Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Slider control problem with Timer

    09-22-2006, 3:18 PM
    • Member
      172 point Member
    • rac12
    • Member since 11-13-2003, 6:05 PM
    • NJ
    • Posts 48

    So, which code should I keep?

    1. The original code (in the first post) + your .js suggestion
    2. Code in the second post + AutoPostBack=True on the Textbox

    thanks,

    Rac

  • Re: Slider control problem with Timer

    09-22-2006, 6:43 PM
    • Contributor
      4,346 point Contributor
    • sburke_msft
    • Member since 04-04-2006, 7:28 PM
    • Redmond, WA
    • Posts 770
    • AspNetTeam

    you need both

    Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
  • Re: Slider control problem with Timer

    09-25-2006, 10:22 AM
    • Member
      172 point Member
    • rac12
    • Member since 11-13-2003, 6:05 PM
    • NJ
    • Posts 48

    Shawn,

    I'm afraid to say that the suggestions of yours is not working. May be I'm not following right! In OnInit (aspx.cs), there won't be any value for Slider1.Text ever as it's initializing, so the line Timer1.Interval never gets executed in OnInit of the page.

    Also, once you changed the Slider, it fires multiple events of UpdateImportStatus and it's hard to track which orders they fire. e.g the default invertal for Timer is 5 sec, now it you change to 15, it'll fire the UpdateImportStatus couple of times, not just every 15 seconds.

    Do you have any other working example (besides that one in ToolKit samples) that's similar to what I want to accomplish? This is getting out of my hands. ;)

    Thanks,

  • Re: Slider control problem with Timer

    09-25-2006, 10:45 AM
    • Member
      172 point Member
    • rac12
    • Member since 11-13-2003, 6:05 PM
    • NJ
    • Posts 48

    One more thing, if I enable the sqlCacheDependency, it's acting funky. I changed the ObjectDataSource to this:

    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
                                SelectMethod="GetImportStatus" 
                                TypeName="WebStats.Bll.ImportStatus"
                                EnableCaching="true"
                                SqlCacheDependency="Northwind:Customers"
                                CacheDuration="5000" CacheExpirationPolicy="Sliding"            
                                >            
                            </asp:ObjectDataSource>   

     Now, after 5-10 seconds, check the behavior. It's constantly firing up every second (even if you don't change either Slider or Timer intervals, default 5 sec). I don't know why.

    Any clue?

Page 1 of 1 (8 items)