Change TimerControl Interval property without postback

Hi,

I have a "Live monitor" scenario, where data in UpdatePanel is being updated on TimerControl tick.

I want to give user an ability to change interval. It works fine, but postback is needed to do so.

Any way to do it without a postback?

(I'm new to atlas, so please excuse me if it's obvious.)

hello.

well, if you're ready to build your own timer, then it's possible to do that in the client side. currently, the problem is that the timercontrol generates a client behavior but doesn't generateou an id. due to this, you cannot get a reference to the behavior in the client side and do need to do a postback to refresh that interval.

Change Accordian SelectedIndex in the client

How do I changed the SelectedIndex of an Accordian control at runtime from the client in JavaScript. The SelectedIndex property doesn't appear to be there nor can I find a comparable in the attributes.Hi Vegivore,

You can just callmyAccordion.set_SelectedIndex(i);. If you're not seeing this property, you should try getting the latest version of the Toolkit.

Thanks,
Ted

I tried this a few different ways - but I always get "Object doesn't support this property or method"

I downloaded the latest (i think) - no difference.

Microsoft.Web.Atlas.dll - 9/19/06

AtlasControlToolkit.dll - 9/15/06

Microsoft.AtlasControlExtender.dll - 9/19/06

Do I have the right builds?

Here's the relevant code:

aspx file:

<atlasToolkit:Accordion

ID="accHost"

...

javascript file:

var accHost = document.getElementById('accHost');

accHost.set_SelectedIndex(i);

Hi Vegivore,

Okay - I see your problem now. You should usevar accHost = $object('accHost_AccordionProperties');. You need to get the "Atlas" behavior instance instead of the DOM element.

Also - I don't think you should have the Microsoft.AtlasControlExtender.dll anymore... we merged that in with the rest of the Toolkit's AtlasControlToolkit.dll.

Thanks,
Ted

Perfect! Works great.

Thanks Ted

Are old threads still checked? If so, how would one access the Accordion, client side, when it is embedded in a <UpdatePane>...<Multiview>...<View><Atlas:Accordion...

Using the code above I get 'undefined'. (Obviously I've changed accHost for my own control name)

var myAcc = $object('results_AccordionProperties');

myAcc is always undefined.

Angel

Hi Angel,

When responding to an old thread it bumps it to the top of the list. The three Microsoft team members had been neglecting the forums to get our last release out the door but we'll always try to answer each post eventually.

I'm guessing that yourAccordion'sClientID is something more complicated than justresults (because it's probably in a naming container). You should replace results with whatever itsClientID is to get it working. If that's not the issue, please keep posting.

Thanks,
Ted

Ted,

I'm having an issue also doing this. I've read your various posts around the forum and this is what my code currently boils down to:

"theAccordion"
 runat="Server"
 SelectedIndex="0"
 HeaderCssClass="orderHeader"
 ContentCssClass="orderContent"
 AutoSize="None"
 Width="500"
 FadeTransitions="true"
 TransitionDuration="250"
 FramesPerSecond="40"
 BehaviorID="theAccordion"
 ClientID="theAccordion"
 "orderHeader"
 ContentCssClass="orderContent"
 ID="AP1">
 Choose your template:
 Step 1 Content
"server" ID="step1next" Text="Next >"
 "orderHeader"
 ContentCssClass="orderContent"
 ID="AP2">
 Select Output Options:
 Step 2 Content
 "server" ID="step2prev" Text="< Prev">
 "server" ID="step2next" Text="Next >"
 "orderHeader"
 ContentCssClass="orderContent">
 Enter Details:
 Step 3 Content
 "server" ID="step3prev" Text="< Prev">
 "server" ID="step3next" Text="Next >"
 "orderHeader"
 ContentCssClass="orderContent">
 Preview Order:
 Step 4 Content
 "server" ID="step4prev" Text="< Prev">
 "server" ID="step4next" Text="Next >"
 "orderHeader"
 ContentCssClass="orderContent">
 Submit Order:
 Step 5 Content
 "server" ID="step5prev" Text="< Prev">
 "server" ID="step5next" Text="Finish"
 "javascript" type="text/javascript"> function GoNext() { var accordion = $find('theAccordion_AccordionBehavior'); accordion.set_SelectedIndex(1); }

I get a JS error of "accordion has no properties" on the "accordion.set_SelectedIndex(1);" line.

Help!

The code-paster botched my code - here it is sans-highlight:

<%@. Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" validateRequest="false" CodeFile="Order.aspx.cs" Inherits="_Default" Title="Order" EnableEventValidation="false" EnableViewState="false"%
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageTitle" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="JavaScript" Runat="Server">
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="SectionName" runat="server">Place/Edit Order</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" Runat="Server"
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:SqlDataSource runat="server" ConnectionString="<%$ ConnectionStrings: CappSql %>" ID="DSTemplateList" SelectCommand="SELECT TemplateID,TemplateName FROM (SELECT TemplateID,TemplateName FROM Templates UNION SELECT 0 as TemplateID, '' as TemplateName FROM Templates) A ORDER BY TemplateID"></asp:SqlDataSource>
<table width="85%">
<tr>
<td valign="top">
<asp:Wizard ID="Wizard1" runat="server" Width="100%" Height="100%" Visible="false" SideBarStyle-VerticalAlign="Top">
<HeaderStyle VerticalAlign="Top" />
<SideBarStyle Wrap="False" />
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Choose a Template" StepType="Start">
Choose your template:
<asp:DropDownList ID="TemplateList" runat="server" AutoPostBack="True" DataSourceID="DSTemplateList" DataTextField="TemplateName" DataValueField="TemplateID"></asp:DropDownList>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" Title="Select Output Options">
Output Type:<br />
<asp:RadioButtonList ID="OutputType" runat="server" AutoPostBack="True">
<asp:ListItem Enabled="False" Value="pdf" Text="PDF"></asp:ListItem>
<asp:ListItem Enabled="False" Value="html" Text="HTML"></asp:ListItem>
</asp:RadioButtonList>
<asp:CheckBox ID="Printing" runat="server" Value="Printing" Text="Printing" Enabled="false" AutoPostBack="True"/>
<asp:Panel ID="PrintingDetails" runat="server" Visible="false">
Print details here
</asp:Panel>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" Title="Enter Details">
<table border="0" cellpadding="0" cellspacing="0">
<asp:Panel ID="DetailsPanel" runat="server" EnableViewState="true"></asp:Panel>
</table>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep4" runat="server" Title="Preview Order">
<asp:HyperLink ID="PreviewOrder" runat="server" Target="_blank">Preview Order</asp:HyperLink>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep5" runat="server" Title="Submit Order" StepType="Complete">
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
<asp:HiddenField ID="OrderID" runat="server" />
</td>
<td valign="top" width="300">
<asp:Label ID="Label1" runat="server" Text="Current Template" Visible="false" Font-Bold="true"></asp:Label><br />
<asp:Image ID="pdfImage" runat="server" Visible="false" Width="272" Height="352" BorderWidth="1" style="position:fixed"/>
</td>
</tr>
</table>
<table><tr><td><asp:Label ID="lblStateInformation" runat="server"></asp:Label></td></tr></table>
<div style="margin-left:auto; margin-right:auto;">
<cc1:Accordion
ID="theAccordion"
runat="Server"
SelectedIndex="0"
HeaderCssClass="orderHeader"
ContentCssClass="orderContent"
AutoSize="None"
Width="500"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
BehaviorID="theAccordion"
ClientID="theAccordion">
<Panes>
<cc1:AccordionPane
HeaderCssClass="orderHeader"
ContentCssClass="orderContent"
ID="AP1">
<Header>Choose your template:</Header>
<Content> Step 1 Content <br /><asp:Button runat="server" ID="step1next" Text="Next >"></asp:Button></Content>
</cc1:AccordionPane>
<cc1:AccordionPane
HeaderCssClass="orderHeader"
ContentCssClass="orderContent"
ID="AP2">
<Header>Select Output Options:</Header>
<Content> Step 2 Content
<asp:Button runat="server" ID="step2prev" Text="< Prev"></asp:Button>
<asp:Button runat="server" ID="step2next" Text="Next >"></asp:Button>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane
HeaderCssClass="orderHeader"
ContentCssClass="orderContent">
<Header>Enter Details:</Header>
<Content> Step 3 Content
<asp:Button runat="server" ID="step3prev" Text="< Prev"></asp:Button>
<asp:Button runat="server" ID="step3next" Text="Next >"></asp:Button>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane
HeaderCssClass="orderHeader"
ContentCssClass="orderContent">
<Header>Preview Order:</Header>
<Content> Step 4 Content
<asp:Button runat="server" ID="step4prev" Text="< Prev"></asp:Button>
<asp:Button runat="server" ID="step4next" Text="Next >"></asp:Button>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane
HeaderCssClass="orderHeader"
ContentCssClass="orderContent">
<Header>Submit Order:</Header>
<Content> Step 5 Content
<asp:Button runat="server" ID="step5prev" Text="< Prev"></asp:Button>
<asp:Button runat="server" ID="step5next" Text="Finish"></asp:Button>
</Content>
</cc1:AccordionPane>
</Panes>
<HeaderTemplate></HeaderTemplate>
<ContentTemplate></ContentTemplate>
</cc1:Accordion>
</div>
<script language="javascript" type="text/javascript">
function GoNext()
{
// Find the behavior instance
//alert(MyAccordion.SelectedIndex);
//MyAccordion.set_SelectedIndex(MyAccordion.SelectedIndex + 1);
var accordion = $find('theAccordion_AccordionBehavior');
accordion.set_SelectedIndex(1);
//alert(accordion);
/*if (!behavior) continue;

// Open or close the panel
if (open)
{
behavior._doOpen();
}
else
{
behavior._doClose();
}*/
}
</script>
</ContentTemplate>
</asp:UpdatePanel>

</asp:Content

Hello, did you ever find out of your problem? i have the same problem. I am using the tab controll and when i change tabs i need to open the right accordian pane.

var accordion = $find('accEquityModels_AccordionBehavior');

accordion.set_SelectedIndex(2);

I'm hoping to get an answer on this question "how to change the index from javascript"

I've got and accordion with the id "Accordion1" inside a Content Page of a Master Page, and the full client ID of it is: "Master_MainContent_Accordion1" (That's according to the ".ClientID" property in code)

that ID is all through the generated HTML as is "Master_ctl04_Accordion1" (i have no idea what that is looking at, there for sure is only one ajaxToolKit:Accordion declared)

in my javascript, both

var accordion = $find('Master_MainContent_Accordion1_AccordionBehavior');
var accordion = $find('Master_ctl04_Accordion1_AccordionBehavior');

return "null"

any ideas?

Found my own answer: http://blog.benhall.me.uk/2007/01/aspnet-ajax-accordion-control-change.html

Hope that helps others down the road

Change a textbox style property on failed validation

Can someone point me in the right direction for implementing a textbox that has it's border changed when a RequiredFieldValidator fails? Ideally this would be using either an extender or the control toolkit.

Thanks.

Hi,

The easiest way would be using CustomerValidator control, then add javascript function to change the style if validation fails.
Hope this helps.

Thanks, I ended up using a validator extender that styles the textbox if the validation fails.

Thats nice...

CascadingDropDownProperties - Setting SelectedValue dynamically

I have an application where I am using the CascadingDropDown Lists. I have incorporated a set of them into a control.

I want to add a property to my CascadingDropDownProperties that will set an initial "filter" for my list.

For example, if I were using the sample CDD provided on the website that gives Make, Model, Color in my application, I may want to tell my control to only select foreign or domestic makes. At this point, the control can continue on to do what it needs to.

My web method is calling a MS-SQL stored procedure, and it has an input parameter of foreign/domestic (CarClass) for selecting the available Makes.

My questions on this are as follows:

How do I set up my CascadingdropDownProperties to add the Foreign/Domestic (CarClass) value?

How do I set this value in the code-behind?

(I will omit my actual DropDownLists from my code.)

Here is my CascadingDropDown definition:

1 <atlasToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server">
2 <atlasToolkit:CascadingDropDownProperties
3 Category="CarClass"
4 ServicePath="~/wsSelectCar_Data.asmx" />
5
6 <atlasToolkit:CascadingDropDownProperties
7 TargetControlID="ddlMake"
8 Category="Make"
9 PromptText="Please select a Make"
10 ServiceMethod="GetMakes"
11 ServicePath="~/wsSelectCar_Data.asmx" />
12
13 <atlasToolkit:CascadingDropDownProperties
14 TargetControlID="ddlModel"
15 ParentControlID="ddlMake"
16 Category="Model"
17 PromptText="Please select a Model"
18 ServiceMethod="GetModel"
19 ServicePath="~/wsSelectCar_Data.asmx" />
20
21 <atlasToolkit:CascadingDropDownProperties
22 TargetControlID="ddlColor"
23 ParentControlID="ddlMake"
24 Category="Color"
25 PromptText="Please select a Color"
26 ServiceMethod="GetColor"
27 ServicePath="~/wsSelectCar_Data.asmx" />
28 </atlasToolkit:CascadingDropDown>

As you can see, I tried to create a property with the Category "CarClass". My Code-behind has the following to try to set the value:

1 int intCarClass =int.Parse(Session["CarClass"].ToString());
2 this.CascadingDropDown1.TargetProperties[0].SelectedValue = intCarClass.ToString();

This does not seem to work.

Thanks,
Bryan

Hi Bryan,

I'd recommend you switch to a page method and then just check whether or not you should apply the additional filter however you want.

Thanks,
Ted

Can you provide sample code for doing this?

I am not familiar with the "Page" methods.

Thanks.

CascadingDropDownProperties - Creating an extra Category/Value through code

I need to add an initial "filter" to my CascadingDropDown Lists.

How do I create a Property, and assign a value and category to it through code?

Thank you,

Bryan

I'm afraid I don't understand - could you please rephrase the question?

CascadingDropDown without PromptText - possible?

I put together a simple demo with two lists, and everything works fine when they both have the PromptText property set. When I leave the PromptText property empty on the parent list, it doesn't work - the parent list is disabled, and the user can't change the selection.

Since I always have a default selection for the parent list, I don't want the PromptText property to be set. Am I missing something?

Hi tomers,

In your case , if you set PromptText property to be empty, please set LoadingText property to be empty too. Just like below:

<cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="dlState"
Category="State" ServicePath="../WebService/CityServiceOledb.asmx" ServiceMethod="GetStates">

Here is the source code section of CascadingDropDown(from line 170 to 272),which indicates why it is disabled:

_setOptions : function(list, inInit, gettingList) {
/// <summary>
/// Set the contents of the DropDownList to the specified list
/// </summary>
/// <param name="list" mayBeNull="true" elementType="Object">
/// Array of options (where each option has name and value properties)
/// </param>
/// <param name="inInit" type="Boolean" optional="true">
/// Whether this is being called from the initialize method
/// </param>
/// <param name="gettingList" type="Boolean" optional="true">
/// Whether we are fetching the list of options from the web service
/// </param>
/// <returns />

if (!this.get_isInitialized()) {
return;
}

var e = this.get_element();
// Remove existing contents
this._clearItems();

// Populate prompt text (if available)
var headerText;
if (gettingList && this._loadingText) {
headerText = this._loadingText;
} else if (this._promptText) {
headerText = this._promptText;
}
if (headerText) {
var optionElement = new Option(headerText, "");
e.options[e.options.length] = optionElement;
}

// Add each item to the DropDownList, selecting the previously selected item
var selectedValueOption = null;
var defaultIndex = -1;

if (list) {
for (i = 0 ; i < list.length ; i++) {
var listItemName = list[i].name;
var listItemValue = list[i].value;

if (list[i].isDefaultValue) {
defaultIndex = i;
if (this._promptText) {
// bump the index if there's a prompt item in the list.
//
defaultIndex++;
}
}

var optionElement = new Option(listItemName, listItemValue);
if (listItemValue == this._selectedValue) {
selectedValueOption = optionElement;
}

e.options[e.options.length] = optionElement;
}
if (selectedValueOption) {
selectedValueOption.selected = true;
}
}

// if we didn't match the selected value, and we found a default
// item, select that one.
//
if (selectedValueOption) {
// Call set_SelectedValue to store the text as well
this.set_SelectedValue(e.options[e.selectedIndex].value, e.options[e.selectedIndex].text);
} else if (!selectedValueOption && defaultIndex != -1) {
e.options[defaultIndex].selected = true;
this.set_SelectedValue(e.options[defaultIndex].value, e.options[defaultIndex].text);
} else if (!inInit && !selectedValueOption && !gettingList) {
this.set_SelectedValue('', '');
}

if (e.childDropDown && !gettingList) {
for(i = 0; i < e.childDropDown.length; i++) {
e.childDropDown[i]._onParentChange();
}
}
else {
if (list && (Sys.Browser.agent !== Sys.Browser.Safari) && (Sys.Browser.agent !== Sys.Browser.Opera)) {
// Fire the onchange event for the control to notify any listeners of the change
if (document.createEvent) {
var onchangeEvent = document.createEvent('HTMLEvents');
onchangeEvent.initEvent('change', true, false);
this.get_element().dispatchEvent(onchangeEvent);
} else if( document.createEventObject ) {
this.get_element().fireEvent('onchange');
}
}
}

// Disable the control if prompt text is present and an empty list was populated
if (headerText) {
e.disabled = !list || (0 == list.length);
}

this.raisePopulated(Sys.EventArgs.Empty);
},

For more details , you can press F11(by default) to debug your application step-by-step or add break points by using ScriptExplorer.

Hope it helps. If I misunderstood you , please let me know.

I'll chec that out. Is there any reason for this limitation? Why can't I have a LoadingText without a PromptText?

Thanks!

Hi tomers,

Has your problem been resovled yet?

tomers:

Is there any reason for this limitation? Why can't I have a LoadingText without a PromptText?

So far I haven't find any documents to explain this issue.Based on my research, I think the reason is that PromptText property is recommended not to set to empty by design pattern. We emptied the LoadingText and PromptText properties, it will made DropDownList.disable = false.

For more details, we can add break points into the source code and debug it step-by-step.

CascadingDropDown PromptText -- CSS?

Is there any way to assign a CSS-property to the PromptText property of the CascadingDropDown?

I have attempted modifying the Toolkit (CascadingDropDownBehavior.js):

_setOptions :function(list, inInit, gettingList)

// code omitted

if (headerText) {

var optionElement =new Option(headerText,"");

optionElement.className = "PromptText";

e.options[e.options.length] = optionElement;

}

But this didn't work Any ideas?

Thanks in advance.

Well, I found a workaround... Forgot to post here. For those interested, I wrote about this in my blog:

http://haltenberg.blogspot.com/2007/02/cascadingdropdown-passing-additional.html