Showing posts with label content. Show all posts
Showing posts with label content. Show all posts

Wednesday, March 28, 2012

Accordian - Dynamic addition/subtraction of panels?

I want to create an accordian at page load and dynamically add a number of panels with varying content at that time..any thoughts and optimally psuedocode on how to do this?Hi Mike,

You can do it just like other controls. Here's a small example:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> /// <summary> /// Dynamically create our accordion panes /// </summary> protected override void OnLoad(EventArgs e) { base.OnLoad(e); AccordionPane pane1 = new AccordionPane(); pane1.HeaderContainer.Controls.Add(new LiteralControl("Pane 1")); pane1.ContentContainer.Controls.Add(new LiteralControl("Pane 2")); MyAccordion.Controls.Add(pane1); AccordionPane pane2 = new AccordionPane(); pane2.HeaderContainer.Controls.Add(new LiteralControl("Pane 2")); pane2.ContentContainer.Controls.Add(new LiteralControl("Content 2")); MyAccordion.Controls.Add(pane2); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Accordion Demo</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; } </style></head><body><form runat="server"><div> <atlas:ScriptManager ID="Scripts" runat="server" /> <atlasToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"> </atlasToolkit:Accordion></div></form></body></html>
Thanks,
Ted

I think the code to add AccordinePane to Accordin is changed. the previous code didnt work for me.

// import Atlas Controlkit.

using System.Web.UI.HtmlControls;
using AtlasControlToolkit;

//Create a Atlas Accordion instance.
Accordion aAccord = new Accordion();


// Create AccordionPane instance.

AccordionPane accordPane = new AccordionPane();

// create your Header panel( the title of each Pane). and your component to each pane container.
// add Header Panel and Container panel, the panel which which will collape and open.

accordPane.HeaderContainer.Controls.Add( headerPanel );
accordPane.ContentContainer.Controls.Add( collapsePanel );

// add accordPane to Accordin instance.
aAccord.Panes.Add(accordPane);


// you can add as many AccordPanes as you want.


// Add Accordin object to the Panel.
myPanel.Controls.Add( aAccord );

Kishore.


Hi Kishore,

Yes - in response to user feedback we've hidden theControls collection and replaced it with the easier to useAccordionPane-onlyPanes collection.

Thanks,
Ted

Is there a way to add an unknown number of AccordionPanes? I'm trying to do thing:

List<string> addresses =newList<string>();
addresses.Add("123 Main St, Phoenix, AZ, 85041");
addresses.Add("658 Alta Vista Rd, Phoenix, AZ, 85041");int name =1;
foreach (string sin addresses)
{
AccordionPane pane =newAccordionPane();
pane.HeaderContainer.Controls.Add(newLiteralControl(s));

pane.Width =

300;
pane.ID ="pane" + name;
Accordion1.Controls.Add(pane);//it doesn't add the right pane because it's named wrong. What should I change?
name++;
}

Thanks!


And I can add the code in VB:

This is in AJAX.aspx (for example):

<ajaxToolkit:AccordionID="aDynamicky"runat="server">

<Panes>

</Panes>

</

ajaxToolkit:Accordion>

And following is in code behind AJAX.aspx.vb:

Imports AjaxControlToolkit

Partial

Class AJAXInherits System.Web.UI.PageProtectedSub aDynamicky_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles aDynamicky.PreRenderDim panel1As AccordionPane =New AccordionPane

panel1.HeaderContainer.Controls.Add(

New LiteralControl("This is a header of 01."))

panel1.ContentContainer.Controls.Add(

New LiteralControl("And here is the content of 01."))

aDynamicky.Panes.Add(panel1)

Dim panel2As AccordionPane =New AccordionPane

panel2.HeaderContainer.Controls.Add(

New LiteralControl("This is a header of 02."))

panel2.ContentContainer.Controls.Add(

New LiteralControl("And here is the content of 02."))

aDynamicky.Panes.Add(panel2)

EndSub

End

Class

Of course, you can format your panels via CSS.

Accessing SelectedIndex of Datagrid inside a bound Accordion Control

I have a bound Accordion Control with its Content Template containing a gridview. Each Gridview is populated on the Accordion ItemDataBound.

The Gridview containes a set of bound checkboxes with autopostback set to true.

When a checkbox is clicked i need to find the selectedindex of the row in the gridview in question. I'm trying to retreive the selected index from within the form load event.

Any ideas?

Just to let you know, if you have your checkbox inside the GridView, you have to find the control within the GridView first and then see what is the selected value or index.

CheckBox myCheckBox = (CheckBox) GridView1.FindControl("myCheckBox1");

int i = myCheckBox.SelectedIndex;

Just one more thing, Enable Tracing for your page Trace="true" in the <%@.Page Language=... so you can see what is the name for your control. Because if you are using master page the names would be auto generated with a prefix.

Hope this would be any help to you.

Regards,
Mehdi


Just to let you know, if you have your checkbox inside the GridView, you have to find the control within the GridView first and then see what is the selected value or index.

CheckBox myCheckBox = (CheckBox) GridView1.FindControl("myCheckBox1");

int i = myCheckBox.SelectedIndex;

Just one more thing, Enable Tracing for your page Trace="true" in the <%@.Page Language=... so you can see what is the name for your control. Because if you are using master page the names would be auto generated with a prefix.

Hope this would be any help to you.

Regards,
Mehdi


Thanks for the reply.

It doesn't realy help as firstly I need to find the gridview within the accordion control, then find the datakey of the row (checkbox) that's been clicked on.

I'm not sure how to index the accordion control as it's bound and doesn't use the panes collection?

Accessing controls in a tab control using javascript

Hi ,

Im my project im using tab control.I wat to access the controls inside the content template using javascript.

How is this done?

Anyone please help.

Thanks n regards

Prathibha

prathibhaa:

Im my project im using tab control.I wat to access the controls inside the content template using javascript.

You need to know the client id of the control you want to access. You can get the client id of the control using the ClientID property.

Then in javascript you do this

document.getElementById(<id of control>) to get reference to the control


i tried it.

I have a textbox "txtEmpCode" placed in the content template of tab control.then i tried to access it as follows

document.getElementById("txtEmpCode")

But im getting null value


prathibhaa:

I have a textbox "txtEmpCode" placed in the content template of tab control.then i tried to access it as follows

document.getElementById("txtEmpCode")

Because the text box is in the tab control it may get a different client ID. Best way to check is to view the HTML source on the rendered page and look for the exact ID.

Alternatively you can go textbox.ClientID to get the client rendered ID of the text box control.


i tried this code

document.getElementById("<%=txtEmpCode.ClientID%>")

But I am getting an exception

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Description:Anunhandled exception occurred during the execution of the current webrequest. Please review the stack trace for more information about theerror and where it originated in the code.

Exception Details:System.Web.HttpException:The Controls collection cannot be modified because the control containscode blocks (i.e. <% ... %>).

Source Error:

An unhandled exception was generated during the execution of thecurrent web request. Information regarding the origin and location ofthe exception can be identified using the exception stack trace below.


Stack Trace:

[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]
System.Web.UI.ControlCollection.Add(Control child) +127
AjaxControlToolkit.ScriptObjectBuilder.RegisterCssReferences(Control control) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ScriptObjectBuilder.cs:293
AjaxControlToolkit.ScriptControlBase.OnLoad(EventArgs e) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\ExtenderBase\ScriptControlBase.cs:260
System.Web.UI.Control.LoadRecursive() +74
System.Web.UI.Control.LoadRecursive() +158
System.Web.UI.Control.LoadRecursive() +158
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3036

Please help

Thanks and regards

prathibha


prathibhaa:

i tried this code

document.getElementById("<%=txtEmpCode.ClientID%>")

But I am getting an exception

Where are you adding that code to?

You can always just inject the javascript doing this

StringBuilder sb =new StringBuilder();sb.Append("function getTextBox()");sb.Append("{");sb.Append("var textbox;");sb.Append("textbox = document.getElementById();");sb.Append("return textbox;");sb.Append("}");ClientScript.RegisterClientScriptBlock(this.GetType(),"mytextboxscript", sb.ToString());//now you have a javascript function that returns the textbox




Hi Prathibha,

prathibhaa:

document.getElementById("<%=txtEmpCode.ClientID%>")

But I am getting an exception

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Description:An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

That's because you put the document.getElementById("<%=txtEmpCode.ClientID%>") in the wrong position. For example,

<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function getName(){

var labelValue = "<%=Label1.ClientID %>";
}
</script>
</head>

<body>
You will get the same error. So you should put it at the end of your form(or other proper position). By the way, you can use$get instead of document.getElementById() if you have added a ScriptManager before. They are the same but is much terser.

Best regards,

Jonathan


hi Jonathan,

Thank you.

can u please tell me where i have to give the javascript and how?

i got the javascript correctly when i gave the client id directly.

regards

Prathibha

Monday, March 26, 2012

Access to ScriptManager from into webcontrol

Hi, I've a UpdatePanel into my personal webcontrol, and one scriptmanager what can be into webform, into master page, or into content page.
I need have access to ScriptManager from a method of my personal web control. Is it possible?

Hi,

yes it is. You can call System.Web.UI.ScriptManager.GetCurrent(this.Page) to retrieve a reference to the ScriptManager control.


Thank you Garbin!!!!!, it's wonderful!!!!!

Greetings, Diego

Access control on MasterPage from within content page

Hi all,

I have a MasterPage with invisible Label.

In content page I have a few controls and any Button.

When user clicks the Button, the Label on MasterPage appears.

So far - so good.

If I use an UpdatePanel inside the content page, the Label stay invisibleSad.

I know, that it's right behavior for Ajax enabled application, but...

What is the solution?

MasterPage:

<%@dotnet.itags.org. Master Language="C#" AutoEventWireup="true" CodeFile="TestMasterPage.master.cs" Inherits="TestMasterPage" %><!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"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> <asp:Label ID="Label1" runat="server" Text="Error!" Visible="False"/> </form></body></html>

Content page:

<%@dotnet.itags.org. Page Language="C#" MasterPageFile="~/TestMasterPage.master" AutoEventWireup="true" CodeFile="TestContentPage.aspx.cs" Inherits="TestContentPage" Title="Untitled Page" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:ListBox ID="ListBox1" runat="server"> <asp:ListItem Value="1">Item 1</asp:ListItem> <asp:ListItem Value="2">Item 2</asp:ListItem> <asp:ListItem Value="3">Item 3</asp:ListItem> <asp:ListItem Value="4">Item 4</asp:ListItem> </asp:ListBox> <br /> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </ContentTemplate> </asp:UpdatePanel></asp:Content>

Content page code behind:

protected void Button1_Click(object sender, EventArgs e) {//Do something... //... Label lbl = (Label)Page.Master.FindControl("Label1");if (lbl !=null) lbl.Visible =true; }

The solution: enclose the Label on the MasterPage by UpdatePanel:

<%@. Master Language="C#" AutoEventWireup="true" CodeFile="TestMasterPage.master.cs" Inherits="TestMasterPage" %><!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"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/> <asp:UpdatePanel ID="updatePanel2" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Error!" Visible="False"/> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

Saturday, March 24, 2012

A widget framework

I am currently embarking on a project to deliver content via a mini portal for students at a community college.

What I would like to do is build a framework which works the same way as iGoogle, PageFlakes, Live.com or any other site which allows you to mash up your own start page.

Are there any frameworks or projects underdevelopment which will demonstrate the patterns involved in creating "Widgets" that you can include on a page just by adding a <script src="http://pics.10026.com/?src=APPLICATIONSRC"></script>

I have a couple working models where I use the external script to write innerHTML to a div where the script tag is included, but there is much more work to do and I was wondering if anyone has any ideas on the best / most resuable way to accomplish this.

For all backend data we will be using standard web services decorated with the [ScriptMethod] and [ScriptService] attributes.

Here is the code i've got working so far:

 initWidgetContainer(); initWidget(); function initWidgetContainer() { var wc = $get("WidgetContainer_1");if (wc ==null) { document.write("<div id='WidgetContainer_1' class='widgetcontainer'>Add widgets here</div>"); } } function initWidget() { SunGard.Public.Services.ERP.InitWidget(initComplete); } function initComplete(result) { Render(result); } function LoadData(widgetObj) { SunGard.Public.Services.ERP.LoadProfile(widgetObj,"lucasstark", Render); } function Render(result) {//Write the contanier to push the data into. var wc = $get("WidgetContainer_1"); wc.innerHTML = wc.innerHTML + result.WidgetContainer;//Now that we have our container set up for us, lets write some content into it; $get(result.WidgetID).innerHTML = result.WidgetContent; }
 
//Here is the asmx service
//Partial listing:
 
 [WebMethod]public Widget InitWidget() { Widget w =new Widget(); w.WidgetID = Guid.NewGuid().ToString(); w.LoadWidgetData();return w; }

// and finally partial of the widget

/// <summary>/// Summary description for Widget/// </summary>public class Widget{private string _widgetID;private string _widgetContent;public string WidgetID {get {return _widgetID; }set { _widgetID =value; } }public string WidgetContent {get {return _widgetContent; }set { _widgetContent =value; } }public string WidgetContainer {get {return"<div id = '" + WidgetID +"' class=\"widgetdata\"></div>"; } }public Widget(){ }private void SetOutput(string innerData) {this._widgetContent = innerData; }public void LoadWidgetData() {#region Datastring data = @." <h2>Lucas Stark</h2> <table> <tr> <td> Full Name: </td> <td> Lucas Stark </td> <td> </td> </tr> <tr> <td> Email Address: </td> <td> <a href='mailto:lucasstark@.delta.edu'>lucassatrk@.delta.edu</a> </td> <td> </td> </tr> <tr> <td> Phone Number: </td> <td> 9541 </td> <td> </td> </tr> </table>";#endregion SetOutput(data); }


Checkout this articlehttp://www.codeproject.com/Ajax/MakingGoogleIG.asp


Thanks for the link.

I've played around with and reviewed the code for that applicaiton before, but it seems WAY overly complex. I thought there used to be a slimmed down version of that which wasn't using DLINQ or workflow to acomplish the same things, but I can't seem to locate it..

Wednesday, March 21, 2012

A question on UpdatePanel

Hi All,

What's the different between 1 & 2?

1. <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate> (Content) </ContentTemplate></asp:UpdatePanel>

2. <asp:UpdatePanel ID="UpdatePanel1" runat="server"> (Content) </asp:UpdatePanel>

Thanks,

Stard

1 is the correct syntax. UpdatePanels have only 2 controls which are allowed inside, <ConentTemplate> and <Triggers>. Add the updatepanel as you in example 1 and place your controls within the ContentTemplate

2 wouldn't work or compile as far as i know