ASP.Net CollapsiblePanelextender Control - asp.net

Afternoon All,
I am wonding if i can configure and use a collapsiblePanelextender in ASP.net within a table. I would likt this to be used for a minutes of meeting system that i am creating. I have the following code and thought that if i added pnlPresenter and pnlTime to the CollapseControlID along with pnlHeader i would be able to get this to work but i cant.
Has anyone got any other suggestions?
<table width="100%">
<tr>
<td class="style3">Topic</td>
<td class="style2">Presenter</td>
<td>Time Alloted</td>
</tr>
<tr >
<td class="style1" colspan="3">
<asp:Panel ID="pnlHeader" runat="server" CssClass="cpHeader" Width="228%" Height="18px">
1. Agenda Item 1
<asp:Image ID="ImgToggle" runat="server" ImageUrl="~/Images/collapse.jpg" ImageAlign="Middle" />
</asp:Panel>
</td>
</tr>
<tr>
<td class="style3">
<asp:Panel ID="pnlInfo" runat="server" CssClass="cpBody" >
The Agenda topic details goes within here, The Agenda topic details goes within here,
The Agenda topic details goes within here, The Agenda topic details goes within here,.
</asp:Panel>
</td>
<td class="style2">
<asp:Panel ID="pnlPresenter" runat="server" CssClass="cpBody" Width="107px">
Presenters Name
</asp:Panel>
</td>
<td class="style2">
<asp:Panel ID="pnlTime" runat="server" CssClass="cpBody" Width="107px">
Time
</asp:Panel>
</td>
</tr>
</table>
Many Thanks in advance
Regards
Betty

It's not entirely clear what you want to achieve here, especially as there's no CollapsiblePanelExtender in the markup you've posted, so I'm writing this on the assumption that you want to display a page for a meeting where each agenda item is expandable/collapsible.
I suggest you build your table using a Repeater instead of hard-coding it into your page, then for each agenda item the Repeater can render a new row for you. Inside the row that's rendered by the Repeater, you can then have the agenda topic as a header, and the agenda item details as a panel that's expanded/collapsed using the extender:
<asp:Repeater runat="server" ID="AgendaRepeater" DataSourceID="AgendaDataSource">
<HeaderTemplate>
<table border="1">
<tr>
<td>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label runat="server" ID="AgendaTopicLabel" Text='<%# Eval("Topic") %>' />
<asp:ImageButton runat="server" ID="PanelExpandContractImageButton" ImageUrl="~/images/zoom_in_16x16.gif" />
<asp:Panel runat="server" ID="AgendaItemDetailsPanel" Height="0px">
<asp:Label runat="server" ID="TopicDetailsLabel" Text='<%# Eval("Details") %>' /><br />
<asp:Label runat="server" ID="PresenterLabel" Text='<%# Eval("Presenter") %>' /><br />
<asp:Label runat="server" ID="TimeLabel" Text='<%# Eval("Time") %>' />
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender runat="server" TargetControlID="AgendaItemDetailsPanel"
Collapsed="true" ExpandControlID="PanelExpandContractImageButton" CollapseControlID="PanelExpandContractImageButton"
ImageControlID="PanelExpandContractImageButton" CollapsedImage="~/images/zoom_in_16x16.gif"
ExpandedImage="~/images/zoom_out_16x16.gif" ExpandedSize="100" ExpandDirection="Vertical"
ScrollContents="true" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>

Related

Why my "<asp:ListView" isn't showing on the screen?

This is part of my code that isn't working. I have looked for somethings, but i cannot search what my asp:ListView isn't showing, if someone knows about it, Help me !
<asp:ListView ItemPlaceholderID="PlaceHolder1" runat="server" ID="ListViewUser">
<LayoutTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"/>
<table id="Table1" class="TableListView" runat="server">
<tr id="Tr1" class="TableHeader" runat="server">
<td id="td1" runat="server">Nível</td>
<td id="td2" runat="server">Descrição</td>
<td id="td3" runat="server">Quantidade de Problema ?</td>
<td id="td4" runat="server">Selecionar</td>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr class="ItemsCSS">
<td>
<asp:Label runat="server"
ID="Label1"
Text="Problema" >
</asp:Label>
</td>
<td>
<asp:Label runat="server"
ID="Label2"
Text="Problema" >
</asp:Label>
</td>
<td>
<asp:Label runat="server"
ID="Label3"
Text="Problema" >
</asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Your ListView lacks bindings. You can add a DataSourceID property to the top level control and point to a DataSource control or programmatically bind to the DataSource property and then invoke DataBind(). But the control will not display anything without first binding it.

Dynamic TabPanels with nested listviews (having dynamic items) asp.net

I have TabControl(AjaxToolKit) having 2 Nested ListViews.
code:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TabContainer ID="tcQuestions" runat="server" ActiveTabIndex="0" OnDemand="true" AutoPostBack="false" TabStripPlacement="Top" ScrollBars="None" UseVerticalStripPlacement="false">
<asp:TabPanel ID="tpFirst" runat="server" HeaderText="Page 1" Enabled="true" ScrollBars="Auto"
OnDemandMode="Once">
<ContentTemplate>
<asp:Panel ID="pnlNoData" runat="server">
<asp:LinkButton ID="lbQuestionsAdd" Text="Add Question" runat="server" />
</asp:Panel>
<asp:Panel ID="pnlListView" runat="server">
<asp:ListView ID="lsvQuestions" runat="server" ItemPlaceholderID="phItemPlaceHoler">
<EmptyDataTemplate>
<em>NO RECORD WAS FOUND</em>
</EmptyDataTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblQuestionID" Text='<%#Eval("intQuesId") %>' Visible="false" runat="server" />
<asp:Label ID="lblQuestionTitle" Text='<%#Eval("strQuesTitle") %>' runat="server" />
<%--1.Are you doing job?--%>
</td>
</tr>
<%--Inner Listview--%>
<asp:ListView ID="lsvAnswers" runat="server" ItemPlaceholderID="phItemPlaceHolerAnswers">
<LayoutTemplate>
<table runat="server" id="table1">
<tr runat="server" id="phItemPlaceHolerAnswers">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:PlaceHolder ID="plControl" runat="server" />
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<em>NO RECORD WAS FOUND</em>
</EmptyDataTemplate>
</asp:ListView>
</ItemTemplate>
<LayoutTemplate>
<table class="tblAll">
<tbody>
<tr>
<td style="width: 125px">
<asp:LinkButton ID="lbtnAddQuestions" runat="server">Add Questions</asp:LinkButton>
</td>
<td style="width: 316px">
<asp:LinkButton ID="lbtnDesignTools" runat="server">Design Tools</asp:LinkButton>
</td>
<td class="formTopLinks">
<img class="imgicons" src="../Layout/images/edit.png" />
<asp:LinkButton ID="lbEditProperties" runat="server" CssClass="lnkbuttonText">Edit Properties</asp:LinkButton>
</td>
<td class="formTopLinks">
<img class="imgicons" src="../Layout/images/Delete.png" />
<asp:LinkButton ID="lbCopyPage" runat="server" CssClass="lnkbuttonText">Copy Page</asp:LinkButton>
</td>
<td class="formTopLinks">
<img class="imgicons" src="../Layout/images/Copy.png" />
<asp:LinkButton ID="lbDeletePage" runat="server" CssClass="lnkbuttonText">Delete Page</asp:LinkButton>
</td>
<td style="width: 20px;">
<img class="imgicons" src="../Layout/images/left.png" />
</td>
<td style="width: 64px;">
<asp:Label ID="Label1" runat="server" CssClass="lnkbuttonText" Text="Move Page" />
</td>
<td style="width: 20px;">
<img class="imgicons" src="../Layout/images/right.png" />
</td>
<td>
 
</td>
</tr>
</tbody>
</table>
<br />
<table class="tblAll">
<tbody>
<asp:PlaceHolder ID="phItemPlaceHoler" runat="server"></asp:PlaceHolder>
</tbody>
</table>
</LayoutTemplate>
</asp:ListView>
</asp:Panel>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
Where, I am getting Question from Table "Question", and its answers from another table "Answers". Each Question is linked with a PageNumber.
so, i have to create TabPanels according to PageNumber from Question, Then Bind Question Label with that Question, and fill 2nd ListView with Answers of that Question.
These answers are dynamic controls based on db entries e.g textbox, checkboxlists, radiobutton lists and may vary for every question.
Now what i am doing is copying tabPanel 1 to new TabPanel and adding question and answers according to db values, but when i am creating 2nd TabPanel, it give me error that
Cannot unregister UpdatePanel with ID 'ContentPlaceHolder1_tcQuestions_tpFirst_updatePanel' since it was not registered with the ScriptManager. This might occur if the UpdatePanel was removed from the control tree and later added again, which is not supported.
What is the best approach to handle this scenerio.
something like SurverMonkey except i am using tabs for new page.

Ajax UpdatePanel not working in IE9

I am using updatepanel to avoid the postback and the code is working fine in IE8 and firefox but not in IE9. I also tried installing latest ajax toolkit from codeplex but it did not help me either.Please help me with this. My code is something like below/....
<table width="800px">
<tr>
<asp:UpdatePanel runat="server" ID="upCountry">
<ContentTemplate>
<td class="TextLabelForHeader" width="300px">
Country:
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ddlCountry"
ErrorMessage="*" InitialValue="Select.." ValidationGroup="VGHeader"></asp:RequiredFieldValidator>
</td>
<td align="left">
<asp:DropDownList ID="ddlCountry" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged"
AutoPostBack="true" OnDataBound="ddlCountry_DataBound" onchange="SelectCurrency(this);"
ValidationGroup="VGHeader">
</asp:DropDownList>
</td>
<td align="left">
</td>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
<tr>
<asp:UpdatePanel runat="server" ID="upCurrency">
<ContentTemplate>
<td class="TextLabelForHeader" width="300px">
Currency:
</td>
<td align="left">
<asp:DropDownList ID="ddlCurrency" runat="server" ValidationGroup="VGHeader">
</asp:DropDownList>
</td>
<td align="left">
</td>
</ContentTemplate>
</asp:UpdatePanel>
</tr>
<tr>
<td class="TextLabelForHeader" width="300px">
Client:
<%--<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="ddlClient" ErrorMessage="*" InitialValue="Select.."
ValidationGroup="VGHeader"></asp:RequiredFieldValidator>--%>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txtClient"
ErrorMessage="*" ValidationGroup="VGHeader"></asp:RequiredFieldValidator>
</td>
<td align="left">
<%-- <asp:DropDownList ID="ddlClient" runat="server" Height="16px" Width="143px" Enabled="false"
OnDataBound="ddlClient_DataBound" onchange="DisplayTextbox(this);" ValidationGroup="VGHeader">
</asp:DropDownList>--%>
<asp:TextBox ID="txtClient" runat="server" Width="143px" ReadOnly="true" ValidationGroup="VGHeader"></asp:TextBox>
<%--<div id="form_ProductContainer" style="display: none;">
<asp:TextBox ID="txtNewClientName" runat="server"></asp:TextBox>
</div>--%>
</td>
<td class="TextLabelForHeader" style="text-align: left;">
<asp:Button ID="btnContinue" runat="server" OnClick="btnContinue_Click" Text="Continue"
ValidationGroup="VGHeader" />
</td>
</tr>
</table>
Discussion: Is it vital that it uses IE9 as is? If it isn't then you could just force it to render as IE8 with the following code inserted in the head section of the page or master page.
Possible Solution:
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
Updated Response
Identified Issue: I had a look at your code and you have no update Panel inside the last TR element. I imagine now that the code originally worked in IE8 because you probably had another update panel that covered the entire table.

How is possible to have EditItemTemplate and ItemTemplate at same time on Formview?

I have the following inside a formview, I want to be able to show the information and if anyone makes changes I should update this information by clicking on update.I am fairly new to asp.net development , how can I do it? I keep having exception, saying frm1 is expecting editmode.
Thanks in advance
<<asp:Formview D="FormView1" runat="server" DataSourceID="SqlDesc" ID="frm1">
<ItemTemplate>
<table>
<tr>
<td>
Description:<br />
</td>
<td style="">
<asp:TextBox ID="DescTbox" runat="server" Width="450px" TextMode="MultiLine" Text='<%# Bind("Description") %>' Enabled="True" Rows="4"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update"> </asp:Button>
</td>
</tr>
</table>
</ItemTemplate>
<EditItemTemplate>
<table>
<tr>
<td>
Description:<br />
</td>
<td style="">
<asp:TextBox ID="DescTbox" runat="server" Width="450px" TextMode="MultiLine" Text='<%# Bind("Description") %>' Enabled="True" Rows="4"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update"> </asp:Button>
</td>
</tr>
</table>
</EditItemTemplate>
</asp:Formview>
Your <Itemtemplate> should provide a read only view of the data if possible, with the Update only being available in the <EditItemTemplate>. You then need to put the row into edit mode to be able to edit a row by setting the EditRowIndex on the table.
I had to add DefaultMode as Edit and use EditItemTemplate instead of ItemTemplate
<asp:Formview ID="FormView1" runat="server" DefaultMode="Edit" >
<EditItemTemplate> ...
</EditItemTemplate> <asp:Formview>
Thanks

defaultbutton is not working on my first panel, but works well with the rest of them?

I have a search panel in my master page, which seems to be getting called when typing in another panel and hitting enter, even though the panel has a different defaultButton. The weird thing is the second and third panels work well, which ever one I put at the top calls the search button.
My search panel in my master page
<asp:Panel runat="server" ID="pnlSearch" DefaultButton="btnSearch">
<asp:TextBox ID="txtSearch" CssClass="fld" runat="server" Width="160" Text="Search..."
onclick="this.value='';" CausesValidation="false"></asp:TextBox>
<asp:ImageButton ID="btnSearch" ImageUrl="~/Images/search_arrow.gif" runat="server"
OnClick="btnSearch_Click" CausesValidation="false" />
</asp:Panel>
and my other panels inside a control(only displaying two, the first one calls btnSearch, but the second one works fine.
<asp:Panel DefaultButton="btnViewPage" ID="pnlViewPage" runat="server" CssClass="floatLeft">
<table>
<tr class="adminRow">
<td class="adminLeftCol">
View Page:
</td>
<td>
<asp:TextBox ID="txtViewPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnViewPage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnViewPage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel DefaultButton="btnEditpage" ID="pn1Edit" runat="server" CssClass="floatLeft">
<table width="100%">
<tr class="adminRow">
<td class="adminLeftCol">
Edit Page:
</td>
<td>
<asp:TextBox ID="txtEditPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnEditpage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnEditpage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
I've seen cases where the panel had to be inside an actual TD (the defaultbutton had to be a direct inner element of the panel). Have you tried this / can you try this?

Resources