Showing posts with label panel. Show all posts
Showing posts with label panel. Show all posts

Wednesday, March 28, 2012

Accordian (indicators like collapsible panel)

I am sure this has come up - is there a way to add indicators on the accordian panel headers link we have on the collapse panel ?

Hi Codegalaxy,

Yes , as far as I know, we can do it by using Javascript. Here is my sample with shows how to hide a Panel when click on the Button.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> </script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Accordion</title> <style> .accordionHeader { border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; } .accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; } .accordionLink { background-color: #D3DEEF; color: white: } </style></head><body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" /> <div> <asp:RadioButton ID="RadioButton1" runat="server" GroupName="Acc" Text="Accord1" onclick="chageAccordion()"/><asp:RadioButton ID="RadioButton2" runat="server" GroupName="Acc" Text="Accord2" onclick="chageAccordion()"/> <ajaxToolkit:Accordion ID="MyAccordion" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" SuppressHeaderPostbacks="true" > <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" > <Header> Panel1</Header> <Content> PanelContent1</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server"> <Header> Panel2</Header> <Content> PanelContent2</Content> </ajaxToolkit:AccordionPane> <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server"> <Header> Panel3</Header> <Content> PanelContent3</Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> <input id="Button1" type="button" value="button" onclick="hidePanel()"/> <script type="text/javascript" language="javascript"> var accordion; function chageAccordion(){ if(accordion==null) accordion = $find('MyAccordion_AccordionExtender'); if($get("<%= RadioButton1.ClientID%>").checked){ accordion.set_SelectedIndex(0); } else{ accordion.set_SelectedIndex(1); } } function hidePanel(){$find('MyAccordion_AccordionExtender').get_Pane(0).header.style.display="none"; //add your HTML Code here. $find('MyAccordion_AccordionExtender').get_Pane(0).content.style.display="none"; $find('MyAccordion_AccordionExtender').set_SelectedIndex(1); } </script> </div> </form></body></html>

Please pay your attention to the Bold part. You can do some similar things here.

I hope this help.

Best regards,

Jonathan

accessing server-side objects from client

Hi wizards,

I'm writting this Ajax Extender Control to switch objects within a panel. It was supposed to work like this: you choose a data-type in a dropdown list (which is the extended object, by the way -- this.get_element()), and the content of a Panel (<div>) changes accordingly; i.e., if you choose "DateTime" in the dropdown the panel will show a Calendar, etc.

In order to perform that I have to fetch this object from server. So, my question is: how can I fetch a server-side object from client-side? How can I change its properties?

For example: an object with property Visible=false is not rendered and therefore does not appear on client; but what if I still want to set it to Visible=true? Can I grab the rendered portion of this client-code (HTML) and insert in the current page?

I'm not sure whether I made myself any clear; I'm confused, so the question may be obscure too. Let me know if you need more information.

thanks a lot in advance,

Do you know vb or C#? You will need to submit the page and do some code-behind.


rpack79:

Do you know vb or C#? You will need to submit the page and do some code-behind.

Well, yes, I think I know C# -- I'm not sure whether I know enough, though.

Sorry, I don't understand these terms; what is code-behind? What do you mean by "submit the page" -- which page?

That sounds kinda vague to me... :-|

thanks a lot for your post,



What is this web page for? Post the code you already have if any.


You may be better offtriggering a partial postback via __doPostBack(), to change the Visible property on your controls at the server.

Another option would be to style the controls with CSS to hide them. Using "display: none;" instead of the Visible property. Then, the server controls still render their HTML, but are hidden on the client. Take a look atmy post about inline label editing for an example of how to do that.


Your blog is awesome!!! I'll try the __doPostBack approach. Thanks a lot for your prompt reply and congratulations for the great work! :-)

my best regards,

Accessing objects outside update panel

I am trying to access the label or div which is outside the update panel after its post back occurs.

here is code...

how can I make that alert work in Button1_Click method?

thanks in advance...

protected void Page_Load(object sender, EventArgs e) { Label1.Text ="Standard Page Load: " + DateTime.Now.ToLongTimeString(); Label2.Text ="Standard Page Load: " + DateTime.Now.ToLongTimeString(); }protected void Button1_Click(object sender, EventArgs e) { lt.Text ="alert(document.getElementById('" + Label1.ClientID +"').value);"; Label2.Text ="Ajax Page Load: " + DateTime.Now.ToLongTimeString() + lt.Text; }

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> <br /> <br /> <script language="javascript"> <asp:Literal id="lt" runat="server" /> </script> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

Try this:

protected void Button1_Click(object sender, EventArgs e)
{
string script = "alert($get('" + Label1.ClientID + "').innerText)";

ScriptManager.RegisterStartupScript(this, this.GetType(), "alert", script, true);

Label2.Text ="Ajax Page Load: " + DateTime.Now.ToLongTimeString();

}


thanks Rashid... that was helpful.


Accessing Controls outside Update Panel.

Hello,

I am having a webapplication in which i am having two pages. w1.aspx and popup.aspx,

On w1.aspx I am having a Menu control and a UpdatePanel control (Ajax Control) and then under Update panel i am having a link named SigIN and a button named refresh,On the click of SignIN l;ink the popup.aspx opens which provides functionality to signin , On that popup window i am logging user in using ajax so there is no refresh in that popup when user signing in.

Now after user signin succefully from the popup.aspx page that is a popup window i am displaying a messge to the user there that "You are SignIN succesfully and now close this window"

When user close the popup window then user comes on the w1.aspx , Now i want when user press the Button Refresh that is present on the w1.aspx under updatepanel control.. then the text of first menu item in the menu control that is present on the page w1.aspx but not under updatepanel will be changed from SignIN to SignOUT, and the link label that is present on this page under updatepanel will be hidden after the click of this refresh button,

But the problem is on the click of this refresh button the link will be hidden but the text of the menu item is not changing. That is i am not able to acces the controls that are present outside the updatepanel control.

WHY??

is it possible to acces the control properties present outside the UpdatePanel control on the click of a button that is present under UpdatePanel control.

????????

Hi, you must to place any control that an another control on UpdatePanel changes on another UpdatePanel. Controls on UpdatePanel can′t to change controls outside UpdatePanel (Don′t happens an error, just don′t works). Don′t need to be the same UpdatePanel. Can be another one, but must be inside of UpdatePanel.


Hi mgodoy_desenv,

Can u please provide me a sample code for the same.

Thanks in Advance...


My codes are very big, so I will to try show. I don′t speak English so much, so excusive for my way of writing:

In code below, you have a control inside UpdatePanel and another one outside:

<html>
...
<asp: Textbox ID="Textbox1" runat="server"/>
...
<asp: UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server"/>
</ContentTemplate>
</asp: UpdatePanel>
</html
To Button1 to change the Text property of Textbox1, Textbox1 must to be placed inside of an UpdatePanel. You not will have an error if that don′t to happen. Just don′t works.

To work, the Textbox1 must be a place inside of an UpdatePanel. The good news is that it don′t need be inside of same UpdatePanel. It can be placed inside another one.

The code below corrects the problem:

<html>
...
<asp: UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>

<asp: Textbox ID="Textbox1" runat="server"/>
</ContentTemplate>
</asp: UpdatePanel>

...
<asp: UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server"/>
</ContentTemplate>
</asp: UpdatePanel>
</html>


Hi,

Your idea is working for a single page but when i am working with master page and menu then i think its not working properly.

Wht i am doing is,

I am having a webpage w1.aspx which is using the master page m1.master, Now my master page having a menu. I want to update the value of that page from the w1.aspx on the click of a button that is present under an updatepanel on w1.aspx.

Now as you said take the control inside the update panel whose value you wann update, so i have taken the menu control under the update panel and then by taking the refrence of menu control on the page w1.aspx i am updating the value of the menu items. But after updatiing the values when i am moving the mouse over the menu items then it gives me the error. some javascript error. I d't know why this ?

If u can then try to do the same thing as i said... with master page..and menu contriol

....


There are many problems with use of UpdatePanel. We must be carefully with it, cause asynchronous post back uses many JavaScript. I haved, for example, many problems with Server.Transfer and UpdatePanel.

Your case isn′t diferent. UpdatePanel can has updated the menu control in a wrong way. Try do this:

1. Use a DataSource to menu. Create a method to populate it with a DataTable, or Xml.
2. When you to want to change items of menu control, change the DataSource (DataTable, or Xml) and call DataBind method of menu.

I don′t speak English so much. So, excuse me for my way of writing.


The Menu control is one of the few ASP.NET controls that isnot compatible with async postbacks. Seehttp://asp.net/AJAX/Documentation/Live/overview/UpdatePanelOverview.aspx#UpdatePanelCompatibleControls for reference.

I would think you should leave the Menu controloutside of the UpdatePanel, but make it a trigger for the UpdatePanel you want to update with <asp:UpdatePanel ...><Triggers><asp:AsyncPostBackTrigger ControlID="MyMenu" /></Triggers>...</asp:UpdatePanel>.


Actually, rereading the question, I may have missed the point here... I was assuming the Menu control was the one triggering the update, but that some other control on the page was being updated.

If the Menu control is the one you want to update, I think you're out of luck, since the Menu can't live inside an UpdatePanel.

Accessing controls inside an updatepanel in onPreInit event

I have an update panel inside a user control that is initialized during the page's PreInit event. However, as soon as I put an updatepanel inside this user control I can no longer access the controls inside this updatepanel during the PreInit event. The controls are all just "null". Am I doing something wrong, or does the updatepanel somehow change my ability to access these controls?Thanks,Jon

Set a breakpoint in PreInit and step through the PageLifeCycle then you see in what Event the UpdatePanel get initialized.


I was just wondering why putting an updatepanel in would break my existing code? Shouldn't it get initialized at the same time as the other controls?
Please have a look at Wally'sPodcast about the clientside lifecycle. I think he's awnsering youre questions.

Accessing Controls embedded in panel within hoverMenuExtender

I have a Panel with labels inside. I need to add more labls dynamically on run time depending what is returned from a database. This panel is referenced by the hoverMenuExtender. The problem is, is that I cant access any of the panels ID's in the code behind. You can see from the code below in lines 23-42. I need to add more labels there dynmically depending on what is returned from the database on Page_Load.
  
1 <asp:DataList ID="DataList1" runat="server" AlternatingItemStyle-BackColor="ivory"2 CellPadding="5" RepeatColumns="5" Width="92%">3 <HeaderTemplate>4<!-- <table id="RepeaterTable1" border="0">5 <tr>6 <th>ID</th>-->7 <b>8 <asp:Label ID="lblTime2" runat="server"></asp:Label></b>9<!--<th>IP</th>-->10 </tr>11 </HeaderTemplate>12 <ItemTemplate>13<!-- <tr>14 <td><%#Container.DataItem("ID")%></td>-->15 <asp:Panel runat="server" ID="panelMain">16 <asp:Image ID="Image1" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("imgName")%>'17 Width="21px" />18    19<%#Container.DataItem("ServerName")%>20 </asp:Panel>2122 <asp:Panel ID="hovPanel" runat="server" BackColor="black" Width="300px" ForeColor="white">23 <asp:Image ID="hovImage" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("hovIconPing")%>'24 Width="21px" />  <asp:Label runat="server" ID="hovDisk" text='<%#Container.DataItem("hovPing")%>' />25 <br />26 <asp:Image ID="Image3" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("hovIconPhy")%>'27 Width="21px" />  <asp:Label runat="server" ID="Label2" text='<%#Container.DataItem("hovPhy")%>' />   <asp:Label runat="server" ID="Label3" text='<%#Container.DataItem("hovPerPhy")%>' />28 <br />29 <asp:Image ID="Image4" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("hovIconVirt")%>'30 Width="21px" />  <asp:Label runat="server" ID="Label4" text='<%#Container.DataItem("hovVirt")%>' />   <asp:Label runat="server" ID="Label5" text='<%#Container.DataItem("hovPerVirt")%>' />31 <br />32 <asp:Image ID="Image2" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("hovIconDiskOne")%>'33 Width="21px" />  <asp:Label runat="server" ID="Label1" text='<%#Container.DataItem("hovDiskOne")%>' />   <asp:Label runat="server" ID="Label10" text='<%#Container.DataItem("hovPerOne")%>' />34 <br />35 <asp:Image ID="Image5" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("hovIconDiskTwo")%>'36 Width="21px" />  <asp:Label runat="server" ID="Label6" text='<%#Container.DataItem("hovDiskTwo")%>' />   <asp:Label runat="server" ID="Label9" text='<%#Container.DataItem("hovPerTwo")%>' />37 <br />38 <asp:Image ID="Image6" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("hovIconDiskThree")%>'39 Width="21px" />  <asp:Label runat="server" ID="Label7" text='<%#Container.DataItem("hovDiskThree")%>' />   <asp:Label runat="server" ID="Label8" text='<%#Container.DataItem("hovPerThree")%>' />40 <br />41 <asp:Image ID="Image7" runat="server" Height="21px" ImageUrl='<%#Container.DataItem("hovIconCPU")%>'42 Width="21px" />  <asp:Label runat="server" ID="Label11" text='<%#Container.DataItem("hovCPU")%>' />   <asp:Label runat="server" ID="Label12" text='<%#Container.DataItem("CPUPer")%>' />4344 </asp:Panel>45 <ajaxToolkit:RoundedCornersExtender ID="rnd" runat="server" TargetControlID="hovPanel" Radius="6" />46 <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="hovPanel" TargetControlID="PanelMain" OffsetX="0" OffsetY="0" PopDelay="50" PopupPosition="bottom">47 </ajaxToolkit:HoverMenuExtender>4849 </ItemTemplate>50 <FooterTemplate>51<!--</table>-->52 </FooterTemplate>53 </asp:DataList>

And you say that you *can* reference the panel Id's when you're not using an UpdatePanel?I've frequently had trouble finding controls when they're part of a collection inside another control, even previous to ajax extensions work.

Typically, I've resorted to iterating over the items collection of the datalist to do it, using the syntax DataList1.Items[i].FindControl("controlId") to hook into it as you iterate.


But I ned to "Add" a control (label) to the datalist item template. how do I do this? I can do a DataList1.Items[i].FindControl("controlId"), but how do I add items to the list? Thanks for the reply by the way. I am on a short time table here. :)

Right, well, my point is that you're trying (I thought) to add a new label to that one panel that's got a bunch of labels on it, right? to do that, you need to first get an instance of the Panel (iterating over the control tree and returning the one you want). Then, you'd add it to that panel's control collection just like you normally would add a dynamic control, e.g. myPanel.Controls.Add(someLabelYouJustCreated);

Can I ask, though, what's the lifespan of these labels? Because, if they only last as long as the page is in view to the user, it might be easier to add them as clientside objects rather than serverside ones. Just soemthing to think about.


Thanks for the fast reply. You are right that I am trying to add labels dynamically to the panel inside the datalist. I get the intellisense for the datalist, but in the code behind it did not register (intellisense see) the panel. I cant do it on client side because the labels I am filling is coming from a database. So when I type hovPanel.xxx.xxx it says that hovpanel is not declared. thats where my problem is coming from.

I guess I need to get an instance of the panel, but I cant. I tried creating a new one in the code behind with the same name and it runs fine, but nothing gets added to the panel

i.e.

Dim hovpanel as panel = new panel (Although there is already a panel in the .aspx with the ID of "hovpanel"


Right, that's my whole point about the FindControl method. I don't do VB very well, so let me speak in abstract terms. you should say Dim hovPanel as Panel = findPanel("hovPanel") (or some such). findPanel() is a method you define which loops through the items of datalist1 to look for one with the id matching the above; I previously described this.

http://samples.gotdotnet.com/quickstart/aspplus/doc/webdatalist.aspx

That's a good example as well.


Ahh, I see where you are going. Thanks. I am going to give it a try.

Thanks Paul. I did this and it worked...

Dim lbl1As Label =New Label lbl1.Text ="PRINT ME"Dim yAs Integer For y = 0To DataList1.Items.Count - 1Dim hovpanelAs Panel = DataList1.Items(y).FindControl("hovpanel") hovpanel.Controls.Add(lbl1)Next
Now within the "FOR" loop and can run tests to see how many labels are there and how many to add and what not. Thanks a Million !!! :)


Glad I could help.

Monday, March 26, 2012

Access HiddenField when using Update Panel

Hello,

I have a page that using update panel. I register hiddenfield using ScriptManager.Registerhiddenfield. I want to get the value, but it always failed.

This is the code :

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = this.Request.Form["__vsKey"];
}

protected void Button1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterHiddenField(this, "__vsKey", "myValue");
}

When I don't use update panel, it's working properly. Do anyone know how to access the value?

Thanks before

What kind of error you are getting ?

To register a hidden field for a control that is inside anUpdatePanel control so that the field is registered only when the panel is updated, use theRegisterHiddenField(Control, String, String) overload of this method. If you are registering a hidden field that does not pertain to partial-page updates and you want to register a hidden field only one time during initial page rendering, use theRegisterHiddenField(String, String) method of theClientScriptManager class.


The problem is I don't get the value from this hiddenfield when using UpdatePanel. It always return null value.

I'm using a button to register the hiddenfield

protected void Button1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterHiddenField(this, "__vsKey", "myValue");
}

And when the page load, a label display the hiddenfield value

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = this.Request.Form["__vsKey"];
}

But, the label display nothing when I use UpdatePanel.

Saturday, March 24, 2012

about file upload2

Hi,

I have a fileupload control inside update panel however I don't need to upload any file I just need the file path and filename etc...

eventhough I can see it pastes the path inside the fileupload text part, I can't read it programmatically..

Thankss.

Why do you need the path to a file on the client computer? You can't read a file from the client computer anyway. What are you trying to achieve?


Dim instance As FileUploadDim value As Stringvalue = instance.FileName
.....................
 FileUpload.FileName:Gets the name of a file on a client to upload using theFileUpload control.

gridview:

Dim instance As FileUploadDim value As Stringvalue = instance.FileName
.....................
 FileUpload.FileName:Gets the name of a file on a client to upload using theFileUpload control.

Note that the original posted wanted the filename AND the path..


alexdresko:

Why do you need the path to a file on the client computer? You can't read a file from the client computer anyway. What are you trying to achieve?

This question reminded me how dumb I am :) thanks..

Well I'm coding a webmail interface and my mail server COM API asks for the path but this path is my server's path not the clients :D ok..

But if I know the path somehow; couldn't I upload the file programmatically? without fileupload control, I mean ok it ease the life but if it doesn't work inside an update panel how can I come up with?

Thanks for the reply..


No, you have to use the fileupload control. When the page posts back, you can save the file they uploaded to your server and from THAT you can determine the path to pass to your COM API.

Make sense?


Yes got it;

Thanks..

So is there anyway to do it with updatepanel?


No. You have to wrap your fileupload control within another updatepanel and set EnablePartialRendering = False. Supposedly there are other workarounds, and I know there is at least one third party AJAX enabled upload control, but the built-in fileupload control doesnt work with ajax..


Thanks for the reply;

Do you mean EnableViewState=False?? cause I couldn't find such property (EnablePartialRendering=False)

Wednesday, March 21, 2012

A Question about Atlas Update Panel

I have a questio about atlas update panel!

I upload files with ms FileUpload control in the Atlas UpdatePanel, but always failed. I donnot know why. It's weird, when I set the ScriptManager EnablePartialRendering = false, everything is OK! what's wrong with my UpdatePanel?


Thanks for your help?

Many thanks!

Chinese boy!

Unfortunatelly you cannot use fileupload control within updatepanel.

I am pretty sure it was discussed here a time ago, try to find it here, there is more description why it is not possible

Nice day

Milo


oh..My!!

Thanks for your reminding! anyway it's a big flaw of MS atlas. could you tell me where the discuss post was? I want to know more about this bug!

Thank you again!


HI liuguoping

some note in documentation can be found here:http://atlas.asp.net/docs/Server/Microsoft.Web.UI/UpdatePanel/DeclarativeSyntax.aspx

and some threads in forum dealing with it are i.e. here:

http://forums.asp.net/thread/1301989.aspx
http://forums.asp.net/thread/1321664.aspx
http://forums.asp.net/thread/1361452.aspx

You will be able to find more, try to put "uploadfile updatepanel" into top right search textbox on this page.

Nice day,

Milo


Thanks a lot!

A problom about updatepanel

If I put a gridview into the panel, the gridview's paging and sorting become useless.

Why? Is there a good point to instead ?

useless? what exactly are you asking? is something not working?
Hi,
It is not a problem about the update panel. You have to write a code for it.
For example:
<cc1:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridViewID="GridView1" runat="server" Style="z-index: 102; ">
</asp:GridView>
</ContentTemplate>
<Triggers>
<cc1:ControlEventTrigger ControlID="GridView1"EventName="PageIndexChanging" />
</Triggers>
</cc1:UpdatePanel
Bind a datagrid with a suitable data in page behind code.
Add a code in code behind like this.
Protected Sub GridView1_PageIndexChanging(ByValsender As Object, ByVal e AsSystem.Web.UI.WebControls.GridViewPageEventArgs) HandlesGridView1.PageIndexChanging
GridView1.PageIndex = e.NewPageIndex
End Sub
You wil get it work.
Enjoy programming.
Smile
Hi,
Make sure another thing ..
Check that EnablePartialRendering=true property in script manager.
If you didnt add this property to script manager everything works as usual with postback.
Regards,
Enjoy programming,
Muthu Kumaran.D
(Unknown is Ocean)
This is incorrect. If the gridview is inside the update panel, why do you need the trigger? I've set mine up normally (with full postbacks), then added 4 lines, open and close <atlas:UpdatePanel> and <ContentTemplate> and that was all it took.
hi rchern13,
I agree that I am wrong. But I should inform you that this method also working correctly.

A problem with the ajax TabContainer

Hi, I have got a few questions about the tabcontainer;

* how can I change the tabpanel's background accept draging a panel and making the height and the width 100%? Because when I try the backcolor it doesn't work...

* on the designer, how can I move the tabcontainer, it is stuck in its place , although I made its position absolute. It's so annoying .

* Is when I want to set a css class to the header template It seems like missing something - like the header isn't bold or circuled in a rectangle when it is clicked, i guess i haven't typed the css class so well, but I don't know which properties the tabpanel header has so how can I get the list of the header template prop?

* And one last thing: I fI want all the headers to be in the middle of the container - and not in the left side of the container, how can I set it?

Thank you for any help, it is really important to me.

** To center the headers:

put the tabcontainer in a table or tablecell with horizontalalign="center"

** To style the tabs, you have to use css:

http://forums.asp.net/t/1163303.aspx , hope it helps..

** To change the backcolor:

Same, use css, you can override the default backgrounds by specifying path to images:

Example:

.MyTabs .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(images/Tabs/tab.gif) repeat-x; }

(PS: you cannot set a height to 100%, it may display correctly for you on internet explorer, but other browsers will not make a height 100%)

** For the design view question, I have no clue as I never use design view..


Hi , thanks for the link,

but I have overrided the css class but it still doesn't work.

I have put it in the ajaxControlToolkit/Tabs folder but it still doesn't work - when i set the cssClass-"MyTabs" it doesn't show anything...

Any idea why it doesn't work?


Put the css code in acss file you ref. in your page head section; example:<link rel="stylesheet" href="http://links.10026.com/?link=~/Main.css" />

Main.css example:

/* tabs */
.MyTabs.ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px; color:Black; font-weight:normal;
background:url(QD_images/Tabs/tab-line.gif) repeat-x bottom;
}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block;}

.MyTabs.ajax__tab_outer
{
padding-right:0px;
background:url(QD_images/Tabs/tab-right.gif) no-repeat right;
height:22px;
}
.MyTabs.ajax__tab_inner
{
padding-left:3px;
background:url(QD_images/Tabs/tab-left.gif) no-repeat;
}
.MyTabs.ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(QD_images/Tabs/tab.gif) repeat-x;
}
.MyTabs.ajax__tab_hover .ajax__tab_outer
{
background:url(QD_images/Tabs/tab-hover-right.gif) no-repeat right;
}
.MyTabs.ajax__tab_hover .ajax__tab_inner
{
background:url(QD_images/Tabs/tab-hover-left.gif) no-repeat;
}
.MyTabs.ajax__tab_hover .ajax__tab_tab
{
background:url(QD_images/Tabs/tab-hover.gif) repeat-x;
}
.MyTabs.ajax__tab_active .ajax__tab_outer
{
background:url(QD_images/Tabs/tab-active-right.gif) no-repeat right;
}
.MyTabs.ajax__tab_active .ajax__tab_inner
{
background:url(QD_images/Tabs/tab-active-left.gif) no-repeat;
}
.MyTabs.ajax__tab_active .ajax__tab_tab
{
background:url(QD_images/Tabs/tab-active.gif) repeat-x;
}
.MyTabs.ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:0px;
background-color:#cccccc;
}

And on your tabcontainer:

<ajaxToolkit:TabContainer runat="server" ID="myTabContainer"CssClass="MyTabs">


Oh man it works great!!! Thaaaaaaaaaaaaaaaaankkkkss!!

Just one more quetion, if you know how or where can I get nice and pretty pics for the headers?

Such as in this site or you know... I don't howe to create one... I guess it's not so easy, but maybe you know any site where I can find some pics for the headers- like the ajax__tab_outer ,.ajax__tab_header ,ajax__tab_hover , etc...

Thank you for your help, it was really important for me to make these tabs fine.


Not that I know of.. If you want entirly new tabs, I recommend:

- photoshop + editting existings tab pictures, keep size...

- photoshop, editting css file (trickier)


Looks like I'm gonna stay with the standarts...since I don't have any idea how to use photo shop. Thanks Anyway :-)

Oh and I have a little problem, concerning the tabcontrol - I have a master page - mp.master, and a page - default, which has the mp as a master. In that page(default) I have a tab control. There I want to add the line that you wrote: <link rel=stylesheet href=TabControlTabs.css> but there is no head in the default page - there is a content - because of the master. So where should I add the line?


In the master page I guess..

(You can have several css files..)


Here is a simple way to put images as tab headers:

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="tabs_test.aspx.vb" Inherits="tabs_test" %
<!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>
<link rel="stylesheet" href="http://links.10026.com/?link=~/Main.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager>
<div>
<ajaxToolkit:TabContainer runat="server" ID="testingTab" CssClass="MyTabs2">
<ajaxToolkit:TabPanel runat="server" ID="test1">
<HeaderTemplate>
<asp:Image runat="server" ID="erf" ImageUrl="~/Image2.png" Width="38" Height="37" style="overflow:visible;" />
</HeaderTemplate>
<ContentTemplate>
test1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1">
<HeaderTemplate>
<asp:Image runat="server" ID="Image1" ImageUrl="~/Image1.gif" Width="38" Height="37" style="overflow:visible;" />
</HeaderTemplate>
<ContentTemplate>
test2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2">
<HeaderTemplate
</HeaderTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>

css file:

/* tabs */
.MyTabs2 .ajax__tab_header
{
height:40px;
font-family:verdana,tahoma,helvetica;
font-size:11px; color:Black; font-weight:normal;
background:url(appImages/Tabs/tab-line.gif) repeat-x bottom;
}
.MyTabs2 .ajax__tab_outer
{
height:40px;
padding-right:0px;
}
.MyTabs2 .ajax__tab_inner
{
height:40px;
padding-left:3px;
}
.MyTabs2 .ajax__tab_tab
{
height:40px;
padding:4px;
margin:0;
}
.MyTabs2 .ajax__tab_hover .ajax__tab_outer
{
height:40px;
}
.MyTabs2 .ajax__tab_hover .ajax__tab_inner
{
}
.MyTabs2 .ajax__tab_hover .ajax__tab_tab
{
height:40px;
}
.MyTabs2 .ajax__tab_active .ajax__tab_outer
{
height:40px;
}
.MyTabs2 .ajax__tab_active .ajax__tab_inner
{
height:40px;
}
.MyTabs2 .ajax__tab_active .ajax__tab_tab
{
height:40px;
}
.MyTabs2 .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:0px;
background-color:#cccccc;
}


ok It works.

Thank you very very very much!!!


No problem..! This forum helped me a lot to get started with the toolkit, feeding it back how I can..!

Just in case you didn't notice,

.MyTabs2 .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:0px;
background-color:#cccccc;
}

This is where you can set the styles for the tab contents (like background color mentioned in first post)


fantastic!!.

I have a qstn:

Can I move freely the position of the tab control? The <div align=center> just put the headers in the center right? However, I'm interested in changing the left and the top as I wish. I'he tried it in the div but it didn't work.

When I change the width the left is automatically been changed - but I can't control it.

Any ideas how to change the left and the top of the tab control as I wish?


You mean the postition of the whole tabcontrol? Not sure I understood..

<ajaxToolkit:TabContainer runat="server" ID="testingTab" CssClass="MyTabs2"style="position:absolute; left:100px;top:0px;">

Is that what you mean? If so, I can't say I recommend absolute positionning, but that's a personal preference, hehe.. I put everything in tables to align stuff..


Got it . Yeah that's what I meant. Thanks! :-)


Good evening,

I want to set an <hr> through the code behind.

I use the Literal and set in its text the <hr>, however I want to change the tag's top and align - that's the style right?

So my qstns are: Can I do it somehow?(through the code behind)

If so, how can I do it --> when I set the literal's text: l.Text="<hr style="........">"; It gives errors because of the quataition marks, and if I set the ' ' instead of " " it gives an error of too many literals bla bla bla... So how can I set the <hr> style via the code behind only (because it is created during the runtime)?

oh and I almost forgot, I also want to set its color some how - how can I do it? and I want it to be visible - sometimes it is always with its default color unless I change its height , but I want it to stay witht he default height.

Thanks for any help.

A postback via update panel resets TabIndex?

I have a few controls inside an update panel. One of them is a dropdownlist with autopostback = true. After it postbacks (you know in Ajax style, no full page postback) the the tab indexes of the controls seem to get ignored or reset. I end up back at the first control in the tab index or else sometimes no control is focused when hitting the tab key.

Anyone find the same issue?

There's a workaround I found, just in case you're using ASP.NET Ajax.

In my example, I have a FormView and two DropDownLists, the first is called "ddlCountries", with AutoPostBack=True. The second is called "ddlStates".

In my case, my page is using an ScriptManager. And my FormView is inside an UpdatePanel.


Just create an event for the "ddlCountries" as follows:

protected void ddlCountries_SelectedIndexChanged(object sender, EventArgs e){DropDownList ddlStates = (DropDownList)FormView1.FindControl("ddlStates");ScriptManager1.SetFocus(ddlStates);}

And voi-là!!


Thanks I found that solution too, its a pity the tabindex settings are ignored with partial postacks in ASP.net Ajax.

A form, a treeview, a update panel, and required field validator.

Ok. Lets see if I can explain this. I have a treeview in a uppdate panel. It has an "Add User" node and some "Users" nodes uder it(Siblings). I have a "Add/Edit User" form in the page, inside a panel inside a update panel. This form has a submit command button and the fields have required field validators. These validators are in a ValidationGroup with the submit button. It''s set up so that when a user clicks the "Add User" node, the form panel is made visible so that a new user can be added. When you click on a particular users node, the users information is loaded into the fields and the panel is set to visible so you can edit the users information.


Here's the issue:

When you select the "Add User" node on the tree the blank fields load and all is good. If after that you click on a users node, the users info is loaded into the fields as it should, and that update panel is updated, but all the validators fire. So, selecting a node in the treeview causes the validation to fire even though they are grouped with the Submit button. I expected the validation grouping would solve the issue, but it didn't. Now I'm stumped. Just staring at it.?Any ideas? Anyone?


Thanks,

CL

One issue could be that treeviews aren't supported in updatepanels... We have noticed some strange issues when we were trying to get one work. You may also want to make sure that everything else has causes validation set to false.
Thanks for your reply. I'll look into the causes validation thing and see if that works.
mdenn, you're a dang genius. That worked. Thanks a bunch.

A control with ID ImageButton5 could not be found for the trigger in UpdatePanel up1.

I have 20 ImageButtons on my page and UpdatePanel . In Update Panel Triggers i've added all this buttons

<asp:AsyncPostBackTriggerControlID="IB1"/>

<asp:AsyncPostBackTriggerControlID="ImageButton1"/>

<asp:AsyncPostBackTriggerControlID="ImageButton2"/>

<asp:AsyncPostBackTriggerControlID="ImageButton3"/>

<asp:AsyncPostBackTriggerControlID="ImageButton4"/>

<asp:AsyncPostBackTriggerControlID="ImageButton5"/> Here I am Getting this Message

A control with ID 'ImageButton5' could not be found for the trigger in UpdatePanel 'up1'.

4 first Image Buttons update panel can find but after 5th no ..... What can be the problem ??

Please post your source code so we can see it in the context of the entire page.


Post some more code details, So it will be more helpful


<asp:UpdatePanelID="up1"UpdateMode="Conditional"runat="server"ChildrenAsTriggers="True">

<Triggers>

<asp:AsyncPostBackTriggerControlID="IB1"/>

<asp:AsyncPostBackTriggerControlID="ImageButton1"/>

<asp:AsyncPostBackTriggerControlID="ImageButton2"/>

<asp:AsyncPostBackTriggerControlID="ImageButton3"/>

<asp:AsyncPostBackTriggerControlID="ImageButton4"/>

<asp:AsyncPostBackTriggerControlID="ImageButton5"/>

</Triggers>

<ContentTemplate>

This is Update Panel code :

and there are just 20 ImageButtons on form ... thats all code


Seeing the rest of the page would really help.


Hi,

Thank you for your post!

Where is yourImageButton5? Is it in anothernaming container?

You cann't set button that is in a different naming container with the updatepanle as a trigger. That is the answer.

If you really want it to be a trigger, this is the workaround:

Programmatically addingAsyncPostBackTrigger controls is not supported. Find out the control viafindcontrol method, then use theRegisterAsyncPostBackControl(Control) method of theScriptManager control to programmatically register a postback control, and then call theUpdate() method of theUpdatePanel when the control posts back.

If you have further questions,let me know!

Best Regards,


Thanks a lot for your reply ...

I am sorry for my dummy knowlege but what does it meananothernaming container ?

my button is on the same page in same <table> but in different <tr> , this could be a problem ?


Hi,

Thank you for your feedback!

Seehttp://msdn2.microsoft.com/en-us/library/system.web.ui.inamingcontainer.aspx.

INamingContainer Interface

Identifies a container control that creates a new ID namespace within aPage object's control hierarchy. This is a marker interface only.

Naming container is a container contorl which implemented the INamingContainer Interface, contorls in Naming container 2 have different ID namespace with contorls in Naming container 1, so ....

If you have further questions, let me know.

Best Regards,

A ContentTemplate must be specified for UpdatePanel

Why has the Update Panel been changed in the new release so that a ContentTemplate must be specified. In my project i'd like to dynamically add controls to the panel in a user control.

Is this something that that is permanent?

Do not confuse the ASP.NET Panel control with the ASP.NET "Atlas"UpdatePanel.The ASP.NET "Atlas"UpdatePanel is a new control able to do partial rendering

In typical ASP.NET 2.0 applications, when a postback occurs, the page is re-rendered. This causes the page to flash in the browser. On the server, during postback, the page lifecycle executes. This ultimately raises the control event that caused the postback and runs the event handler (for example, a Button control's Click handler).

The ASP.NET "Atlas"UpdatePanel control eliminates the full page refresh. TheUpdatePanel control is used to mark a region in the page that will be updated when a postback occurs, but without the traditional postback behavior in the client. On the server, the page still handles the postback and runs normally, such as raising event handlers. But during the final rendering of the page, only the regions defined byUpdatePanel controls are created. This is referred to aspartial rendering.

Hope this helps

Irinel


I have a webpart server control class that i have extended. i'd like to add a update panel around the contents of the webpart so i can derive from this new class which has all the functionaly of webpart but its contents is with in an update panel.

I'd this like to add webparts derived from this extended class and add them dynamically to page via database.

I was having problems with the fact that u can not directly add controls to an update panel by adding controls i've solved this problem by deriving a class from ITemplate and then adding the template to the content template of the update panel.

I now have the problem the following problem

"The UpdatePanel 'Update' was not present when the page's InitComplete event was raised. This is usually caused when an UpdatePanel is placed inside a template. "

which i'm not saw how to resolve.

I've had success with a update panels dynamically around dynamically added webpartzones with in the onpreint event.

Any help would be appreciated.

Thanks

Paul

A bug? None-Stop Timer~~Need Help!

I placed a timer in an update panel, and add a trigger to the update panel. when a button clicked the trigger raised and the timer enabled, once again clicked the button, the timer have should be stopped, but it still works. click again! It seems there's a new timer and the old timer works, too~~~~

It is a bug? the following is the code.

=========================================

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
</atlas:ScriptManager>
<div>
<atlas:UpdatePanel ID="upTimer" runat="server" EnableViewState="True" Mode="Conditional">
<ContentTemplate>
<atlas:TimerControl ID="timerProgress" runat="server" Enabled="false" EnableViewState="False" Interval="1000" OnTick="timerProgress_Tick">
</atlas:TimerControl>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="cmdStart" EventName="Click" />
<atlas:ControlEventTrigger ControlID="cmdCancel" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
<atlas:UpdatePanel ID="upProgress" runat="server" EnableViewState="True" Mode="Conditional">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="timerProgress" EventName="Tick" />
<atlas:ControlValueTrigger ControlID="timerProgress" PropertyName="Interval" />
</Triggers>
</atlas:UpdatePanel>
<atlas:UpdatePanel ID="upButtons" runat="server" Mode="Conditional">
<ContentTemplate>
<asp:Button ID="cmdStart" runat="server" EnableViewState="False" OnClick="cmdStart_Click"
Text="开始上传" />
<asp:Button ID="cmdCancel" runat="server" OnClick="cmdCancel_Click" Text="取消上传" Visible="False" />
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="cmdStart" EventName="Click" />
<atlas:ControlEventTrigger ControlID="cmdCancel" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>

</div>
</form>
</body>
</html>
=========================================

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void cmdStart_Click(object sender, EventArgs e)
{
cmdStart.Visible = false;
cmdCancel.Visible = true;
timerProgress.Enabled = true;
}
protected void cmdCancel_Click(object sender, EventArgs e)
{
cmdStart.Visible = true;
cmdCancel.Visible = false;
timerProgress.Enabled = false;

}
protected void timerProgress_Tick(object sender, EventArgs e)
{
CheckBox1.Checked = !CheckBox1.Checked;
}
}

I am having the same problem. The timer cannot be turned off - even if the timer itself is placed inside the updatepanel. Often what you wanna do is have the update panel update every x seconds while some task is running, and then be turned off.

Any suggjestions on how to disable the timer? - (or is this a bug) ?


There are several issues with the TimerControl and partial rendering. I solved the problem by writing a custom control. Copy the code from this snippet to a file in your App_Code directory

using System;using Microsoft.Web.UI.Controls;namespace CustomControls{ /// /// Summary description for StoppableTimer /// public class StoppableTimer : TimerControl { public StoppableTimer() { } protected override void OnPreRender(EventArgs e) { base.OnPreRender(e); if (this.Page.IsPostBack) { this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "TimerStop", "Web.Application.findObject('" + this.ClientID + "').set_enabled(" + (this.Enabled ? "true" : "false") + ");" , true); } } protected override void RenderScript(Microsoft.Web.Script.ScriptTextWriter writer) { writer.WriteStartElement("timer"); writer.WriteAttributeString("id", this.UniqueID); writer.WriteAttributeString("interval", this.Interval.ToString(System.Globalization.CultureInfo.InvariantCulture)); writer.WriteAttributeString("enabled", this.Enabled.ToString()); writer.WriteStartElement("tick"); writer.WriteStartElement("postBack"); writer.WriteAttributeString("target", this.UniqueID); writer.WriteAttributeString("argument", string.Empty); writer.WriteEndElement(); writer.WriteEndElement(); writer.WriteEndElement(); } }}
Next register this custom control as a tag and use it.
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="TimerTest.aspx.cs" Inherits="Default2" %><%@. Register TagPrefix="AppCode" Assembly="App_Code" Namespace="CustomControls" %><!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></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> </atlas:ScriptManager> <div> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <span id="Span1" runat="server"></span> <AppCode:StoppableTimer runat="server" ID="Timer1" Interval="1000" Visible="true" OnTick="Timer1_Tick"> </AppCode:StoppableTimer> </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </atlas:UpdatePanel> </div> </form></body></html>

When the issues with Atlas timer control are fixed in a release you can simply replace AppCode:StoppableTimer with atlas:TimerControl.


how to use your custom control in an application like : to fetch the data without postback at a regular interval and depending upon some condition need to stop the timer so that we can stop data fetching operation?

Jaideep


Nice pice of code Rama Krishna.

I tried to modify your component to Marts CTP, but I cant get it to work. Writing the following:

writer.WriteAttributeString(

"id", UniqueID);

Will result in a assertion error from atlas - stating that the control is dublicate (it is not - looking at the source) - and the script (set_enabled part) will set the xml enabled = false - but the update continues. Im having a hard time - anyone got this to work?

Here is my (not functional) Marts CTP version of the control - what am I doing wrong here ?

public

classStoppableTimer :TimerControl {public StoppableTimer() {

}

protectedoverridevoid OnPreRender(EventArgs e) {base.OnPreRender(e);if (Page.IsPostBack) {

Page.ClientScript.RegisterStartupScript(Page.GetType(),

"TimerStop","Sys.Application.findObject('" + UniqueID +"').set_enabled(" + (Enabled ?"true" :"false") +");"

,

true);

}

}

protectedoverridevoid RenderScript(Microsoft.Web.Script.ScriptTextWriter writer) {

writer.WriteStartElement(

"timer");

writer.WriteAttributeString(

"id", UniqueID);

writer.WriteAttributeString(

"interval", Interval.ToString(System.Globalization.CultureInfo.InvariantCulture));

writer.WriteAttributeString(

"enabled", Enabled.ToString());

writer.WriteStartElement(

"tick");

writer.WriteStartElement(

"postBack");

writer.WriteAttributeString(

"target", UniqueID);

writer.WriteAttributeString(

"eventArgument",string.Empty);

writer.WriteEndElement();

writer.WriteEndElement();

writer.WriteEndElement();

}

}


This solved my problem of the timer not writing out an ID when its created on the server. Also I'm very happy there is a script writer.

protected override void RenderScript(Microsoft.Web.Script.ScriptTextWriter writer)

Thanks.


Thank you everyone who contributed in previous posts

I've got this workn with March CTP in internet explorer 6

Its mostly the same but my main goal was to create a timer on the server and be able to stop and start it on the client and there was no clientid there. Argh I already have vb in app_code so its now vb and it has a Namespace to match my other Atlas stuff.

Heres the prerender routine. First off I'm adding a script to use on the client to start and stop the timer. Since I check the result of the findobject I don't bother checking for postback and I use enabled.tostring.tolower instead of the inline if.

Imports

Microsoft.VisualBasic

Imports

Microsoft.Web.UI.Controls

Namespace

DWS.Web.AtlasProtectedOverridesSub OnPreRender(ByVal eAs System.EventArgs)IfNotMe.Page.ClientScript.IsClientScriptBlockRegistered(Me.GetType,"DWSTimerStartStop")ThenDim sbAsNew StringBuilder

sb.Append(

"function DWSTimerStartStop (clientid,boolstop){")

sb.Append(

"var s = Sys.Application.findObject(clientid);")

sb.Append(

"if (s) {s.set_enabled(boolstop)};")

sb.Append(

"}")

Page.ClientScript.RegisterClientScriptBlock(

Me.GetType,"DWSTimerStartStop", sb.ToString,True)EndIfIfNotMe.Page.ClientScript.IsStartupScriptRegistered(Me.GetType,"DWSTimerStartStop" &Me.ClientID)ThenDim sbAsNew StringBuilder

sb.Append(

"DWSTimerStartStop(""" &Me.ClientID &""",")

sb.Append(

Me.Enabled.ToString.ToLower)

sb.Append(

");")

Page.ClientScript.RegisterStartupScript(

Me.GetType,"DWSTimerStartStop" &Me.ClientID, sb.ToString,True)EndIfMyBase.OnPreRender(e)EndSub

I think everyone had the renderscript. I put a MS timercontrol on the page and checked the render xml-script side by side (view source on browser) so I could compare the groups control output with that of Atlas.

ProtectedOverridesSub RenderScript(ByVal writerAs Microsoft.Web.Script.ScriptTextWriter)

writer.WriteStartElement("timer")

writer.WriteAttributeString("id",Me.ClientID)

writer.WriteAttributeString("interval",Me.Interval.ToString(System.Globalization.CultureInfo.InvariantCulture))

writer.WriteAttributeString("enabled",Me.Enabled.ToString())

writer.WriteStartElement("tick")

writer.WriteStartElement("postBack")

writer.WriteAttributeString("target",Me.UniqueID)

writer.WriteAttributeString("eventArgument",String.Empty)

writer.WriteEndElement()

writer.WriteEndElement()

writer.WriteEndElement()

EndSub

EndClass

I was going for server so here's a server example

PartialClass C_photo

Inherits DWS.Web.WebParts.WebPartBasectrl

'here it is

PrivateWithEvents txAsNew DWS.Web.Atlas.TimerControl

ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.Load

'Set timer interval

tx.ID =

"dan1"

tx.Interval = 5000

Me.Controls.Add(tx)'Here are my two controls that operate on the client. They use the script generated in the control prerender.

Dim xAsNew HtmlButton

x.InnerText ="stop"

x.Attributes.Add(

"onclick","DWSTimerStartStop(""" & tx.ClientID &""",false)")Me.Controls.Add(x)Dim yAsNew HtmlButton

y.InnerText =

"start"

y.Attributes.Add(

"onclick","DWSTimerStartStop(""" & tx.ClientID &""",true)")Me.Controls.Add(y)EndSub

EndNamespace

And of course the group goal of having the enabled works too.

Protected

Sub Button1_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles Button1.ClickIf Button1.Text ="Stop"Then

Button1.Text =

"Play"

tx.Enabled =

FalseElse

Button1.Text =

"Stop"

tx_Tick(sender, e)

tx.Enabled =

TrueEndIfEndSub

Thank you to whoever started this thread.

Thank you to the scriptwriter example.

Thank you eventArgument fix.

DWS


I just started using Atlas with the April CTP. I'd really like to have the ability to cancel the timer. I can't seem to get this to work though. I converted the code in the previous post to C#. I think that went ok.

Should the Timer control be incuded in the UpdatePanel or should it be outside the panel?

Thanks,

Andy


hello.

i'd put it out...btw, there's another thread on this forum (it's huge, maybe 3 pages now) that shows another option to clear a timer from a page.


Rama Krishna, this was very helpful!

I modified the code a bit to work with the April CTP, and added a few client side APIs to pause, resume and toggle the timer. Here is the modified code:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.Controls;

namespace Yadda.Web.UI.WebControls {

/// <summary>
/// This is a workaround for an issue in the June CTP of Atlas - the provided TimerControl cannot be stopped or paused
/// by the client.
/// This is based on code from Rama Krishna, http://forums.asp.net/1222935/ShowPost.aspx
/// This one inherits from the provided TimerControl and fixes these issues.
/// Once this is fixed in Atlas this control should be removed and replaced with the standard one.
/// Client-side API:
/// TimerToggle(clientID) - toggles the timer between off and on state
/// TimerPause(clientID) - temporarily pause the timer; no events will be fired until TimerResume will be called.
/// TimerResume(clientID) - resumes a paused timer; Can be safely called multiple times.
/// </summary>public class TimerControlWithPause : TimerControl {
public TimerControlWithPause() {
//
// TODO: Add constructor logic here
//}protected override void OnPreRender(EventArgs e) {
base.OnPreRender(e);
// Render client-side APIs:this.Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(),"TimerToggle",
"function TimerToggle(clientId) {" +
"var timerObj = $object(clientId); " +
"if (!timerObj) return; " +
"if (timerObj.get_enabled()) TimerPause(clientId); else TimerResume(clientId); " +
"}" +
"function TimerPause(clientId) {" +
"var timerObj = $object(clientId); " +
"if (!timerObj) return; " +
"timerObj.set_enabled(false); " +
"}" +
"function TimerResume(clientId) {" +
"var timerObj = $object(clientId); " +
"if (!timerObj) return; " +
"timerObj.set_enabled(true); " +
"}",
true);// This will sync the client side state with the server state on postbacks:if (this.Page.IsPostBack) {
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(),"TimerStop",
(this.Enabled ?string.Format("TimerResume('{0}');",this.ClientID) :string.Format("TimerPause('{0}');",this.ClientID))
,true);
}
}

protected override void RenderScript(Microsoft.Web.Script.ScriptTextWriter writer) {
writer.WriteStartElement("timer");
writer.WriteAttributeString("id",this.ClientID);
writer.WriteAttributeString("interval",this.Interval.ToString(System.Globalization.CultureInfo.InvariantCulture));
writer.WriteAttributeString("enabled",this.Enabled.ToString());
writer.WriteStartElement("tick");
writer.WriteStartElement("postBack");
writer.WriteAttributeString("target",this.UniqueID);
writer.WriteAttributeString("eventArgument",string.Empty);
writer.WriteEndElement();
writer.WriteEndElement();
writer.WriteEndElement();
}
}
}


Nice solution yanivgolan. This is working great.


I'm still waiting for Visual Web Developer to finish installing- I have no experience with Atlas and very little ASP.net experience and this thread is a little old, but it sounds like the timer thing is a bug that will be fixed in future versions of Atlas, so a lot of these workarounds seem a little convoluted... wouldn't the following workaround be good enough for most applications until Atlas fixes itself??:

protected void timerProgress_Tick(object sender, EventArgs e)
{

If (timerProgress.Enabled )
CheckBox1.Checked = !CheckBox1.Checked;
}


When I use code similar to this... (I've actually tried it a few different ways now...) It compiles and runs fine under VS 2005's internal web... But when I try to publish it and run it from any other stand alone web server (including the IIS on the same box the VS 2005 is on) I get an error when I try to load the page:

Compilation Error

Description:An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message:CS0117: 'ASP.default_aspx' does not contain a definition for 'myTimer_Tick'

Source Error:


Line 16: </atlas:ScriptManager>
Line 17: <div>
Line 18: <AppCode:StopableTimer runat="server" ID="myNewTimer" Enabled="false" Interval="900" OnTick="myTimer_Tick">
Line 19: </AppCode:StopableTimer>


Does anyone have any sort of suggestion as to why this may be happening, and how I might fix it..?

Any thoughts or suggestions would be very much appreciated!

Thanks! ;)

- Andrew

hello.

according to the error message, it seems like the myTimer_Tick method isn't being found. where have you defined it?


Hello,

Thanks for the reply...

Of course... myTimer_Tick -has- to be defined, or it would not run under Visual Studio, right? ;)

But you're right in that it seems it isn't being found.. but why not..?

It is defined in the Default.aspx.cs file - referenced as the "CodeFile" at the top of the Default.aspx file. Here's the top two lines of my Default.aspx file:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@. Register TagPrefix="AppCode" Namespace="MyCustomControls" %
The Namespace is where the StoppableTimer is that's similar to the code a few posts above, which I got from:

http://runithomsen.blogspot.com/2006_03_01_runithomsen_archive.html

Do I need to define it some other way..? It still doesn't make sense (to me!) that it works under Visual Studio's internal web browser, but not when I publish it to an IIS server. :(

Any thoughts or suggestions would be appreciated! :)

Thanks!

Cheers

- Andrew