accordion and modal popup extender : The Official Microsoft ASP.NET Forums

Reply

lineika

Member

4 Points

7 Posts

accordion and modal popup extender

May 29, 2007 08:29 AM|LINK

Hello guys,

I am new to atlas and ajax. Any help would be greatly appreciated.

I dynamically create accordion panes, panel and modal popup extenders.

First I tried to declare all the panels that will be targets to modalpopuextenders, and modal popupextenders outside of accordion pane.

The linkbuttons that call modalpopup are inside accordion panes. I am getting errors like link button with the following name could not be found.

I also tried putting the panels and modalpopup extenders into the panes but that caused the accordion not to display properly. What should I do?

Thanks alot

Here is my code:

the aspx page looks like this:

<asp:ScriptManager runat="server" ID="scriptManager" EnablePartialRendering="true">

<asp:ServiceReference path="assetService.asmx" />

</Services>

</asp:ScriptManager>

<div>

<asp:UpdatePanel runat=Server ID="assetListPanel" UpdateMode="Always">

<ajaxToolkit:Accordion ID="newAccordion" runat="server" EnableViewState=true SelectedIndex="0"

HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"

FadeTransitions="false" FramesPerSecond="60" TransitionDuration="75"

AutoSize="Limit" RequireOpenedPane="false" SuppressHeaderPostbacks="true" Width="250" Height="525">

</ajaxToolkit:Accordion>

codebehind looks like this:

void Page_Load(Object sender, EventArgs E)

{

testLbl.Text = DateTime.Now.ToString();

// Load connections and strings

connectionString = ConfigurationManager.AppSettings["db_connection_string"];pSpon = new ProcSponsorship(connectionString);

dtCategories = pSpon.GetAssetCategories();

LoadNewAssetPane();

}

/* void Page_Load(Object sender, EventArgs E)

{

}*/

void LoadNewAssetPane()

{

AccordionPane ap;

foreach (DataRow dRow in dtCategories.Rows)

{

int curCat = (int)dRow["AssetItemCategoryId"];

dtAssetItems = pSpon.GetAssetItems(curCat);

string CatDescr = dtAssetItems.Rows[0]["CatDescr"].ToString();

string CatDescrLong = dtAssetItems.Rows[0]["CatLongDescr"].ToString();

ap = new AccordionPane();

ap.ID = "AssetItemCat_" + curCat;

ap.HeaderContainer.Controls.Add(new LiteralControl("<span onmouseover=\"return escape('" + CatDescrLong + "')\"><a class=accordionLink>" + CatDescr + "</a></span>"));for (int i = 0; i < dtAssetItems.Rows.Count; i++)

{

//ap.ContentContainer.Controls.Add(new LiteralControl("<span onmouseover=\"return escape('" + dtAssetItems.Rows[i]["LongDescr"] + "')\"><a href=http://forums.asp.net/AddPost.aspx?ForumID=15# class=accordionLink>" + dtAssetItems.Rows[i]["DisplayDescr"] + "</a></span><BR>"));

LinkButton lb = new LinkButton();

lb.ID = "AssetItemId_" + dtAssetItems.Rows[i]["AssetItemId"];

lb.Text = (dtAssetItems.Rows[i]["DisplayDescr"]).ToString() + "<br/>";

ap.ContentContainer.Controls.Add(lb);

Panel np = new Panel();

np.ID = "AssetItemId_Panel_" + dtAssetItems.Rows[i]["AssetItemId"];

np.Style.Value = "display: none;";

//np.Style = "display: none";

np.CssClass = "add_task_panel";

np.Controls.Add(new LiteralControl("<div><h2><strong>Add new Asset</strong></h2></div>"));

np.Controls.Add(new LiteralControl("<div style=\"margin:10px;line-height:150%;\">"));

np.Controls.Add(new LiteralControl("Asset title :"));

np.Controls.Add(new LiteralControl("<div style=\"margin:8px 0px;\">"));

TextBox tb1 = new TextBox();

tb1.ID = "AssetItemId_Panel_TextBox" + dtAssetItems.Rows[i]["AssetItemId"];

tb1.TextMode = TextBoxMode.MultiLine;

tb1.Rows = 2;

np.Controls.Add(tb1);

np.Controls.Add(new LiteralControl("<div>"));

Button bt1 = new Button();

bt1.ID = "AssetItemId_Panel_ButtonSave" + dtAssetItems.Rows[i]["AssetItemId"];bt1.Text = "Save";

np.Controls.Add(bt1);

Button bt2 = new Button();

bt2.ID = "AssetItemId_Panel_ButtonCancel" + dtAssetItems.Rows[i]["AssetItemId"];bt2.Text = "Cancel";

np.Controls.Add(bt2);

np.Controls.Add(new LiteralControl("<div>"));

ModalPopupExtender modal = new ModalPopupExtender();

modal.ID = "AssetItemId_Modal" + dtAssetItems.Rows[i]["AssetItemId"];

modal.OnOkScript = "AddAsset();";

modal.CancelControlID = "AssetItemId_Panel_ButtonCancel" + dtAssetItems.Rows[i]["AssetItemId"];

modal.OkControlID = "AssetItemId_Panel_ButtonSave" + dtAssetItems.Rows[i]["AssetItemId"];

modal.BackgroundCssClass = "modal_bg";

string s = "AssetItemId_" + dtAssetItems.Rows[i]["AssetItemId"];

//LinkButton b = (LinkButton)(ap.ContentContainer.Controls[2 + i]);

modal.TargetControlID = "AssetItemId_" + dtAssetItems.Rows[i]["AssetItemId"];modal.PopupControlID = "AssetItemId_Panel_" + dtAssetItems.Rows[i]["AssetItemId"];

//ap.ContentContainer.Controls.Add(modal);

assetListPanel.ContentTemplateContainer.Controls.Add(np);

//ap.ContentContainer.Controls.Add(modal);

assetListPanel.ContentTemplateContainer.Controls.Add(modal);

}

newAccordion.Panes.Add(ap);

}

Moved by Fredrik N on May 29, 2007 10:11 AM

Reply

Jin-Yu Yin -...

All-Star

21280 Points

1824 Posts

Re: accordion and modal popup extender

Jun 04, 2007 09:21 AM|LINK

Hi,lineika

Your can fix your problem like this:

<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>Untitled Page</title>
    <link href="StyleSheet.css" mce_href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var styleToSelect;
        function onOk() {
            $get('Paragraph1').className = styleToSelect;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <p id="Paragraph1">
                GetContentFillerTextGetContentFillerTextGetContentFillerTextGetContentFillerText</p>
            <br />
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="grey" FadeTransitions="false"
                FramesPerSecond="25" TransitionDuration="250" HeaderCssClass="dimgreen" EnableViewState="true">
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server" ID="PaneOne">
                        <Header>
                            AccordionPane0
                        </Header>
                        <Content>
                            <a href="javascript:return false" onclick="javascript: LinkButton1.click()">Click here to change
                                the paragraph style</a>
                        </Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
            <div style="visibility: hidden">
                <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" /></div>
            <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
                <asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
                    border: solid 1px Gray; color: Black">
                    <div>
                        <p>
                            Choose the paragraph style you would like:</p>
                    </div>
                </asp:Panel>
                <div>
                    <p>
                        <input type="radio" name="Radio" id="RadioA" checked="checked" onclick="styleToSelect = 'sampleStyleA';" />
                        <label for="RadioA" class="sampleStyleA" style="padding: 3px;">
                            Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" />
                        <label for="RadioB" class="sampleStyleB" style="padding: 3px;">
                            Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" />
                        <label for="RadioC" class="sampleStyleC" style="padding: 3px;">
                            Sample paragraph text</label>
                    </p>
                    <p>
                        <input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" />
                        <label for="RadioD" class="sampleStyleD" style="padding: 3px;">
                            Sample paragraph text</label>
                    </p>
                    <p style="text-align: center;">
                        <asp:Button ID="OkButton" runat="server" Text="OK" />
                        <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
                    </p>
                </div>
            </asp:Panel>
            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1"
                PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton"
                OnOkScript="onOk()" CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
        </div>
    </form>
</body>
</html>

Now you don't get errors like link button with the following name could not be found. :)

Hope this helps,

Let me know if you need more info.

Sincerely,
Jin-Yu Yin
Microsoft Online Community Support

Edited by Jin-Yu Yin - MSFT on Jun 04, 2007 09:22 AM
Edited by Jin-Yu Yin - MSFT on Jun 04, 2007 09:40 AM
Edited by Jin-Yu Yin - MSFT on Jun 04, 2007 09:42 AM
Marked as answer by Jin-Yu Yin - MSFT on Jun 04, 2007 09:44 AM

Reply

lineika

Member

4 Points

7 Posts

Re: accordion and modal popup extender

Jun 06, 2007 06:03 PM|LINK

Jin-Yu Yin,

Thanks a lot for the response. This looks like it will work. I will try it immediately.

Thanks again

Alex

Reply

lineika

Member

4 Points

7 Posts

Re: accordion and modal popup extender

Jun 08, 2007 06:46 PM|LINK

So unfortunately, that did not quiet fix my problem. I feel like the problem might be with the modal popup extender. Here is what happens:

When I dynamically generate those links and have a list of them only the first works. The second link does not open a modal window, BUT when I go back to click on the first link that works both of the windows open up and it is weird, because they are on top of each other. Anybody had anything like this happen?

Thanks

Alex