The controls work but I cannot view them in designer I get an error:
Error 1 Content1:Type 'System.Web.UI.UserControl' does not have a public property named 'Title'. D:\asp.net\Atlas\SampleWebSite\ModalPopup\ModalPopup.aspx D:\...\SampleWebSite\
I saw another post that said to rebuild, but I tried that and it didn't work.
thanks!
Nevermind... found the answer to remove the collapible panels. Wait until next release.
'System.Web.UI.UpdatePanel' does not have a public property named 'UpdatePanelAnimationExtender'.
I have nothing but problems with ASP.Net AJAX. Could somebody tell me what is going on?
Newbie
The updatepanel doesn't have a public property named that - you have to use the AjaxToolkit to get that animation feature...
http://www.codeplex.com/AtlasControlToolkit
and from the sample website this is the code:
<%@.Page
Language="C#"
MasterPageFile="~/DefaultMaster.master"
AutoEventWireup="true"
CodeFile="UpdatePanelAnimation.aspx.cs"
Inherits="UpdatePanelAnimation_UpdatePanelAnimation"
Title="UpdatePanelAnimation Sample" %>
<%@.Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<asp:ContentContentPlaceHolderID="SampleContent"Runat="Server">
<asp:ScriptManagerrunat="server"EnablePartialRendering="true"/>
<divclass="demoarea">
<divclass="demoheading">UpdatePanelAnimation Demonstration</div>
<divstyle="margin-bottom: 10px;">
<divstyle="border: dashed 1px #222222;">
<divid="up_container"style="background-color: #40669A;">
<asp:UpdatePanelID="update"runat="server">
<ContentTemplate>
<divid="background"style="text-align: center; vertical-align: middle; line-height: 44px; padding: 12px; height: 44px; color: #FFFFFF;">
<asp:LabelID="lblUpdate"runat="server"Style="padding: 5px; font-size: 14px; font-weight: bold;">
4/28/1906 12:00:00 AM
</asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="btnUpdate"EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
Choose the effects, then press 'Update':<br/>
<inputtype="checkbox"id="effect_fade"checked="checked"/><labelfor="effect_fade">Fade</label><br/>
<inputtype="checkbox"id="effect_collapse"checked="checked"/><labelfor="effect_collapse">Collapse</label><br/>
<inputtype="checkbox"id="effect_color"checked="checked"/><labelfor="effect_color">Color Background</label><br/>
<asp:ButtonID="btnUpdate"runat="server"Text="Update"OnClick="btnUpdate_Click"/>
<ajaxToolkit:UpdatePanelAnimationExtenderID="upae"BehaviorID="animation"runat="server"TargetControlID="update">
<Animations>
<OnUpdating>
<Sequence>
<%-- Store the original height of the panel --%>
<ScriptActionScript="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;"/>
<%-- Disable all the controls --%>
<Parallelduration="0">
<EnableActionAnimationTarget="ctl00_SampleContent_btnUpdate"Enabled="false"/>
<EnableActionAnimationTarget="effect_color"Enabled="false"/>
<EnableActionAnimationTarget="effect_collapse"Enabled="false"/>
<EnableActionAnimationTarget="effect_fade"Enabled="false"/>
</Parallel>
<StyleActionAttribute="overflow"Value="hidden"/>
<%-- Do each of the selected effects --%>
<Parallelduration=".25"Fps="30">
<ConditionConditionScript="$get('effect_fade').checked">
<FadeOutAnimationTarget="up_container"minimumOpacity=".2"/>
</Condition>
<ConditionConditionScript="$get('effect_collapse').checked">
<ResizeHeight="0"/>
</Condition>
<ConditionConditionScript="$get('effect_color').checked">
<ColorAnimationTarget="up_container"PropertyKey="backgroundColor"
EndValue="#FF0000"StartValue="#40669A"/>
</Condition>
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<%-- Do each of the selected effects --%>
<Parallelduration=".25"Fps="30">
<ConditionConditionScript="$get('effect_fade').checked">
<FadeInAnimationTarget="up_container"minimumOpacity=".2"/>
</Condition>
<ConditionConditionScript="$get('effect_collapse').checked">
<%-- Get the stored height --%>
<ResizeHeightScript="$find('animation')._originalHeight"/>
</Condition>
<ConditionConditionScript="$get('effect_color').checked">
<ColorAnimationTarget="up_container"PropertyKey="backgroundColor"
StartValue="#FF0000"EndValue="#40669A"/>
</Condition>
</Parallel>
<%-- Enable all the controls --%>
<Parallelduration="0">
<EnableActionAnimationTarget="effect_fade"Enabled="true"/>
<EnableActionAnimationTarget="effect_collapse"Enabled="true"/>
<EnableActionAnimationTarget="effect_color"Enabled="true"/>
<EnableActionAnimationTarget="ctl00_SampleContent_btnUpdate"Enabled="true"/>
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
</div>
<divclass="demobottom"></div>
Has anyone successfully set the Interval property in a System.Web.UI.Timer control using client side scripting of any language?
var timer = $find('<%= Timer1.ClientID %>');
timer.set_interval(5000);
FYI, some other methods are:
timer.get_interval();
timer._startTimer();
timer._stopTimer();
timer.set_enabled(true/false);
If this works I owe you a pretend steak dinner. Spent all day yesterday trying to track this down.
Okay so at first it didn't work. So I started experimenting.
It works when there's no master page, and just one single page, and the script is inside the page, call this TestSingle.aspx.
So I moved it to the child page, the timer resides on the child page, and put the script inside the child page and it works, call this Child.aspx.
So then I moved the script to the outside file that is loaded by the master page into every page and the function fails to find Timer1.
So then I used TestSingle.aspx again, and this time loaded the function from an outside .js file, and it failed to find Timer1.
Long story short, it works, but if it's trying to access Timer1 via script in an outside file, it fails to find Timer1. Is there some qualifier I need now?
Can you post the contents of your .js file as well as the source code where you reference it in the master page?
The only thing I put in the .js file was:
function StopTimer()
{
alert(1);
var timer = $find('<%= Timer1.ClientID %>');
alert(timer);
//timer.set_interval(5000);
alert(timer.get_interval());
//timer._stopTimer();
}
<%@. Page Language="C#" AutoEventWireup="true" CodeBehind="TestSingle.aspx.cs" Inherits="Website.TestSingle" %><!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"> <title>Untitled Page</title><script src="./script/Test.js" type="text/javascript"></script> </head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Timer ID="Timer1" runat="server"> </asp:Timer> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="StopTimer()" /> </form></body></html>
That setup fails to find Timer1, not even using a master child setup.
Take out the <script src="./script/Test.js" type="text/javascript"></script> and reference it via your script manager control.
<asp:ScriptManagerID="ScriptManager1"runat="server">
<Scripts>
<asp:ScriptReferencePath="./script/Test.js"/>
</Scripts>
</asp:ScriptManager>
Nope didnt work.
Sorry I didn't catch it the first time around...
In the .js file you can't use the <%= %> notation. That is strictly an ASP.NET thing. The only thing that can be in the .js file is pure javascript. So you want it to look like:
var timer = $find('Timer1');
$find() does take a second, optional parameter that allows you to specify the parent of the component you're looking for. That basically serves the same purpose as requiring it to use the ClientID of the control. You can read more about that here: http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys/ApplicationClass/SysApplicationFindComponentMethod.aspx
You can't use inline server script in your JavaScript include files. So, $find('<%= Timer1.ClientID %>') is literally looking for a control with the client ID of<%= Timer1.ClientID %>.
I'd set a JavaScript variable in pageLoad() with the Timer's ClientID and then reference that in the included script.
So how does one access the Client ID from javascript? <% ClientID %> ?
OnClientClick="StopTimer(<%= Timer1.ClientID %>)"
function StopTimer(args) {
var timer = $find(args);
timer.set_interval(5000);
}
Well yeah that achieves stopping it with a button. But in actuality what I'm going to do is "onfocus" on a TextBox/ComboBox/Etc. call StopTimer, and on a onblur turn it back on. This naturally has to happen within a millisecond, and be extremely easy to code into the project. ie StopTimer and StartTimer exists in a separate file and I just past "onfocus=StopTimer() onblue=StartTimer()" into the <input>'s, or in the pageload set attributes for windows controls.
So yeah, I could put that function you wrote in the outside .js file and just have the function take a parameter. But that's gonna make the HTML even bigger then it is already, although that should work.
And every child has TimerTicker added to it programmatically from the inherited root class every child page inherited. That way I dont have to manually add it to every child page someone makes, this solution is already at 30 child pages based off same master.
Yeah it's not finding hte control even with the args method you posted. It's acutally erroring out and giving syntax error. Adding ' ' to either side on StopTimer('<%= Timer1.ClientID %>') just sends the string to the method.
Hi,
(using April version of Atlas)
I have a web form with a script manager, a web part manager, a menu and a web part zone with a generic web part in it. An update panel is around the web part manager and the web part zone. When I click on the arrow for the popup web part menu and chose for example "minimize", everything works fine for the first time, until the web part is rendered: When I want to click once again on the arrow for the popup web part menu, nothing happens anymore (nothing = no popup of the menu). This is just because of the System.Web.UI.WebControls.Menu on the page. When I remove the System.Web.UI.WebControls.Menu, everything works normal.
I made a sample code, to reproduce the problem:
<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb"Inherits="_Default" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/> <div> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:WebPartManager ID="WebPartManager1" runat="server"> </asp:WebPartManager> </ContentTemplate> </atlas:UpdatePanel> <br /> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"> <Items> <asp:MenuItem Text="Neues Element" Value="Neues Element"> <asp:MenuItem Text="Neues Element" Value="Neues Element"> <asp:MenuItem Text="Neues Element" Value="Neues Element"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Neues Element" Value="Neues Element"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Neues Element" Value="Neues Element"> <asp:MenuItem Text="Neues Element" Value="Neues Element"></asp:MenuItem> </asp:MenuItem> </Items> </asp:Menu> <br /> </div> <atlas:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:WebPartZone ID="WebPartZone1" runat="server"> <ZoneTemplate> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </ZoneTemplate> </asp:WebPartZone> </ContentTemplate> </atlas:UpdatePanel> </form> </body></html>
ASH123,
I am having the same issue. I found that if you set WebPartVerbRenderMode to TitleBar, you are allowed to minimize/restore the webpart multiple times.
Did you ever find a solution that doesn't involve this work around?
Thanks
Hi all,
I have a reporting page created in Visual Web Dev 2005. It uses a calendar control to allow a user to select a starting and ending date which fills to separate gridviews that reside in two different tab panels. The datagrids in the panel further break down the data by allowing the user to click on a location (or problem depending on the tab clicked) opening a datagid in the panel and also opening the individual tickets in another datagrid not in the panel.
All works well until I click on the second tab to view the second set of results. It shows the info, but when I move the cursor down into the panel the tab panel disappears! If I click on the tab the info comes back but the same thing happens if I mouse over the second tab.
I'm stumped...
Anybody have any sugesstions?
Can you post your code?
------------------
When you ask a question, remember to click "mark as answered" when you get a reply which answers your question.
In which event do you use the code you provided?
Are you creating any of the objects dinamically?
Oh, yes. One more question... What version of Visual Studio are you using?
What version of the toolkit are you using?
Try just setting your header to a fixed string to eliminate the complexity, e.g. TabConainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";
You also should be able to do something like HeaderText="<%$Resources:myResources, Welcome %>" in the ASPX. Seehttp://www.codeproject.com/useritems/localization.asp for more information.
-Damien
Hi Guys,
I am using ASP.NET 2.0 AJAX Extensions toolkit and I had already tried both ways few days back, but this was not working, that's why I have droped a forum here :-)
Please let me know whether this is a bug, or how can i fix this?
Thanks & Regards,
Arnold.
When you set a static string (e.g. TabContainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";), do you still have the issue?
Assuming you do, it sounds to me like something in your code is overwriting your dynamic assignment. This is not a bug with the Toolkit as I have done this with version 10920.
By the way, you are confusing two different technologies... "ASP.NET 2.0 AJAX Extensions toolkit" isn't a version of the Toolkit. TheASP.NET AJAX 1.0 Extensions provide you with the UpdatePanel, ScriptManager, etc. while theAJAX Control Toolkit gives you all the extra controls like the Tabs, Accodion, etc. When I asked what version of the Toolkit you were using I was refering to the build number.
I suggest you try the 10920 build and see if you still are having the issue:http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941. If you are, all signs point to a bug in your code. In that case, step through your program putting a watch on the TabPanel1.HeaderText seeing where it ends up being changed.
-Damien
Ok, with 10920, I know for a fact it works. There is a problem somewhere in your code, something must be overwriting your tab's header. Do a search for "HeaderText" in your app to see if in fact it is being set somewhere else.
-Damien
When attributes likeHightorWidthare modified declaratively, some elements like: <system.web.ui.control runat="server"> __designer:dtid="562949953421335" are added to the markup code, showing a the following message:system.web.ui.control is not supported.
How can I avoid this?
Thanks!
Same question here.
And how could you change the CssClass for the TabContainer. By default it is ajax__tab_xp. Are there alternatives and where are they stored?
I'm having trouble understanding the first question, could you provide more step by step details as to how to reproduce the error?
As to the second question, by setting the CssClass property on the Extender you can supply your own style. I have a task outstanding to put together more information on the css style guidelines for Calendar and Tabs. You can get a quick start by copying the .ajax__tab_xp style from the Tabs.css file in the sources and renaming it in your own stylesheet.
I also have the same problem as JavierH. Here's an exemple. This is what looks like one of my tab in the source code:
<ajax:TabPanel ID="Tab_BD" runat="server" ScrollBars="Vertical">
<HeaderTemplate>
Database
</HeaderTemplate>
<ContentTemplate>
<asp:UpdatePanel ID="UPBaseDeDonnees" runat="server">
<ContentTemplate>
<table cellpadding="0" cellspacing="0" Width="500px" height="300">
<tr>
<td>
<asp:CheckBoxList ID="chkListeBD" runat="server">
</asp:CheckBoxList>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlUtilisateur" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="btnEnregistrer" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</ajax:TabPanel>
Now in desing mode i put 500px as the width for the tab. Right after that if i look the code in the source it looks like this:
<ajax:TabPanel ID="Tab_BD" runat="server" ScrollBars="Vertical">
<system.web.ui.control runat="server">
Accès base de données
</system.web.ui.control>
<system.web.ui.control runat="server">
<asp:UpdatePanel runat="server" ID="UPBaseDeDonnees" __designer:dtid="281474976710764"><ContentTemplate __designer:dtid="281474976710765">
<table __designer:dtid="281474976710766" cellpadding="0" cellspacing="0" Width="500px" height="300">
<tr __designer:dtid="281474976710767">
<td __designer:dtid="281474976710768">
<asp:CheckBoxList __designer:dtid="281474976710769" ID="chkListeBD" runat="server">
</asp:CheckBoxList>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers __designer:dtid="281474976710770">
<asp:AsyncPostBackTrigger ControlID="ddlUtilisateur" EventName="SelectedIndexChanged" __designer:dtid="281474976710771"></asp:AsyncPostBackTrigger>
<asp:AsyncPostBackTrigger ControlID="btnEnregistrer" EventName="Click" __designer:dtid="281474976710772"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel
</system.web.ui.control>
</ajax:TabPanel>
Right now i'm using HTML table inside the tab control to set the Width and the height.
For the CSSClass. I have the same problem. If i tried to change the name of the CSSClass name all my code is modified with all those weird references.
Hey Ron,
WhatSianspheric has submitted is exactly what I got if I change almost any attribute declaratively, not to mention CssClass. So my question is how can I avoid having this extra code in my markup...?
Thanks!
More insite to the styling of the Tab Control will really be appreciated.
I have extracted the css file and acompaning images, modified them to my liking but still the Control will not use my styling.
Can anyne assist?
Well I have the same problem and I'm not even touching the CssClass. Here's how I can reproduce it every time.
Start a new website using the Ajax template. On the default web page add a ScriptManager control and a TabContainer control. Add 2 TabPanel controls inside the TabContainer seeting only their HeaderText properties. Add <ContentTemplate> tags inside of each tab panel and put some text in each. If you run the solution everything works fine and you get the 2 tabs showing up. Close the browser window and in design mode, select the TabContainer and chnage any property even just the width or height. Switch to source code view and the <ContentTemplate> tags have been replaced with
<system.web.ui.controlrunat="server">
</system.web.ui.control>Anyone got a clue what is causing this?
For what it's worth, I'm having exactly the same problems as the original poster(s) with the TabControl. I've also tried amending the CSS by following the instructions at the link below, but any changes made to the original values seem to just produce a complete mess. I'm not sure why this control seems so buggy, but I hope it gets fixed soon as it's a pretty basic requirement.
http://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx
Dont edit the design-mode attributes or it will mess up all the code...
Just change the attributes in the Source-mode...
I agree - do not use design mode!
In my case, I find that width = % is accepted but Height = % is not. What should that be?
Hi,
I'm using a couple of TabContainers on my web form. The main TabContainer hosts seven TabPanels, each of which hosts a different FormView control.
According to the Tab documentation, "the most recent tab should remain selected after a postback." However, whenever I change the mode on a FormView (e.g. changing to Edit a record), a postback occurs and a the first tab is selected again.
I tried setting the TabContainer's EnableViewState="True", but that didn't help.
What do I need to do to keep the same tab selected between postbacks?
Thanks,
Mark
Anyone else seeing this problem? Any idea how to keep the tab selected between postbacks?
Thanks,
Mark
Hi Mark,
According to my test, the active index is persisted between postbacks.
If it doesn't for you, please try the following workaround.
1. Add a hidden field on the form
2. On the client side active index changed event, save current index into the hidden field
3. On postback, set the activeIndex of the tabContainer to the value in hidden field( on Server Side )
Or set it via javascript in client side pageLoad event.
Hope this helps.
Thank you Raymond. Sorry for the late reply; I have been distracted with other tasks. I'll try this when I get back to working on the UI.
Mark
The TabContainer in the following code does NOT refresh my page. Can anybody tell me what's wrong, please?
[My web page works just fine when the TabContainer is removed from the code]
<%
@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true" %><%
@dotnet.itags.org.ImportNamespace="System.Data" %><%
@dotnet.itags.org.ImportNamespace="System.Data.SqlClient" %><%
@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit, Version=1.0.10123.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"Namespace="AjaxControlToolkit"TagPrefix="cc1" %><!
DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><
scriptrunat="server">
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TextBox2.text = TextBox1.Text
End Sub
</
script><
htmlxmlns="http://www.w3.org/1999/xhtml"><
headrunat="server"><title>Untitled Page</title></
head><
body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"/><div> </div><asp:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><cc1:TabContainerOnUnload="Button1_Click"ID="ManageVendorsTabContainer"runat="server"Style="position: absolute;left: 249px; top: 110px;">
<cc1:TabPanelID="TabPanelCreateVendorID"runat="server"><HeaderTemplate>Create Vendor
</HeaderTemplate><ContentTemplate> <asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><asp:TextBoxID="TextBox2"runat="server"></asp:TextBox><asp:ButtonID="Button1"OnClick="Button1_Click"runat="server"Text="Button"/></ContentTemplate></cc1:TabPanel></cc1:TabContainer></ContentTemplate></asp:UpdatePanel></form></
body></
html>Hi,
I tried you code, it works as expected.
Or can you be specific about the issue with you.
I am using a tabContainer on my web. My final product is a TabContainer nested inside of another TabContainer, but the latency is static between the two scenarios.
Here is a sample of my code:
<script type="text/javascript"> function ActiveTabChanged2(sender, e) { __doPostBack(sender.get_id(), sender.get_activeTab().get_headerText()); } </script>
Container =new TabContainer(); Container.ID ="Container"; Container.OnClientActiveTabChanged ="ActiveTabChanged2"; Container.ActiveTabChanged +=new EventHandler(ActiveTabChangedServer); Container.CssClass ="ajax__tab_gray";public void ActiveTabChangedServer(object sender, EventArgs e) {string ID =""; TabContainer tab = (TabContainer)TabContainer1.ActiveTab.FindControl("Container"); TabContainer BottomTab = (TabContainer)tab.ActiveTab.FindControl("Container2"); ID = BottomTab.ActiveTab.ID.Substring(4); UpdatePanel Upd = (UpdatePanel)BottomTab.ActiveTab.FindControl("upTab_List"); Upd.ContentTemplateContainer.Controls.Add(new LiteralControl("test")); }
Now, everything functions properly with my scriptmanager catching the postback and rerouting it to an async, etc.
The problem is, there is 2 seconds where the server and client is doing absolutely nothing before it will write "test" in my updatepanel.
No matter what scenario I use, everything loads fine, the async postback is rerouted, but then after that there is 2 seconds of nothing before the text is written, as if I were to do a thread.sleep
any help would be much appreciated as this is a main part of my corporate intranet site and I would love to keep ajax as a part of that site, but 2 seconds on top of every loadtime is leading people to beleive the resource is broken as they click from tab to tab quickly with a blank page underneath each.
Thanks,
Brandon Schoen
Netlist
Sr. .Net Architect
www.netlistinc.com
0 replies... does this mean I am the only person to experience this issue?
