Develop Reference

Change a Control in Header of an Accordion from a nested Accordion

I am using the AjaxControlToolKit.
I have an Accordion with an Image inside the Header-Template.
Inside the Content-Template there is a nested Accordion.
These two Accordions are each inside an UserControl. So the parent Accordion has an UserControl inside the Content.
If I am changing a specific control inside the nested Accordion, the nested UserControl calles a public Method of the parent UserControl which changes the source of the Image I have mentioned.
I'm doing this this way because I want to avoid a DataBind because it's very heavy loaded.
While debugging it seems to work because the new value is set to the source and will be stored to the next Postback. But the responsed site does not show the new values.
Is there a way to change the values and show it on response?
Edit - Here some striped code...
Structure:
#Site
#DocumentationPanel-UserControl (OuterAccordion)
#InnerDocumentAccordion-UserControl (InnerAccordion)
#/DocumentationPanel
#/Site
Striped Code:
<table><tr><td>
<ajaxtoolkit:accordion id="accordionGrid" runat="server" style="overflow: visible;">
<%-- Header --%>
<headertemplate>
<img id="imgUserExamState1" runat="server" title="" alt="" src="" />
</headertemplate>
<%-- Contenter --%>
<contenttemplate>
<ajaxtoolkit:accordion id="accordionGridExaminations" runat="server">
<%-- Header --%>
<headertemplate>
<img id="imgUserExamState2" runat="server" title="" alt="" src="" />
</headertemplate>
<%-- Contenter --%>
<contenttemplate>
...
</contenttemplate>
</ajaxtoolkit:accordion>
</contenttemplate>
</ajaxtoolkit:accordion>
</td></tr></table>
Now I am calling from inside the InnerDocumentAccordion the Parent, casting it to DocumentationPanel and using the public Property that links to the outer Accordion.
The InnerDocumentAccordion-Control knows the PaneIndex of the outer Accordion it is in, so I can call the wanted Pane directly and find the image (imgUserExamState1) in the header.
That looks like this:
AccordionContentPanel acp = ((DocumentationPanel)this.ParentControl).AccordionGrid.Panes[this.ParentAccordionIndex].HeaderContainer;
HtmlImage image = ((HtmlImage)(acp.FindControl("imgUserExamState")));
image.Src = "funny.png";
I can change it but there are no changes about the image in the responsed site. I tried to call a public function of DocumentationPanel, so the changes where made inside the same class the outer Accordion is in, but as expected - no success
I have tried to Rebind the outer Accordion but it says that no modification can be done while init, load, prerender etc. But it was only a try from the start.

How to get selected items of Listbox control?

I am developing an application in ASP.NET & c#. I have a Grid view in my page. In that I have a Listbox control and by default Enabled property set by false. I am trying to enable & disable that control from javascript / jQuery on Checkbox control.
My ASP Code:
<asp:GridView ID="gvWhom" runat="server" AutoGenerateColumns="False" DataSourceID="odsWhom"
GridLines="None" Width="100%" OnRowDataBound="gvWhom_RowDataBound">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr style="height: 25px;">
<td width="20%">
<asp:CheckBox ID="chkCriteria" runat="server" Text='<%#Eval("TargetType") %>' />
</td>
<td width="80%">
<asp:ListBox ID="lbCriteria" runat="server" CssClass="ddl" Width="150px" Height="50px"
Enabled="false" SelectionMode="Multiple"></asp:ListBox>
</td>
</table>
</ItemTemplate>
<HeaderStyle Height="2px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Javascript Code:
function disableDropDown(chkCriteria, lbCriteria) {
if (document.getElementById(chkCriteria).checked) {
document.getElementById(lbCriteria).removeAttribute('disabled');
}else{
document.getElementById(lbCriteria).value = -1;
document.getElementById(lbCriteria).disabled = true;
}
return true;
}
C# Code:
protected void gvWhom_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
ListBox lbCriteria = (ListBox)e.Row.FindControl("lbCriteria");
CheckBox chkCriteria = (CheckBox)e.Row.FindControl("chkCriteria");
chkCriteria.Attributes.Add("onchange", "javascript:return disableDropDown('" + chkCriteria.ClientID + "', '" + lbCriteria.ClientID + "')");
}
}
Using above code I am able to enable / disable the Listbox control. But when I enable the control and select multiple items and submitting the form I am not able to find selected items of Listbox.
How can I fetch selected items of Listbox? or Is there any other way to enable - disable the listbox control and get the selected items in c# code?

This is mostly a guess, but it's worth a try...
You're disabling the control on the server-side here:
<asp:ListBox ID="lbCriteria" runat="server" CssClass="ddl" Width="150px" Height="50px"
Enabled="false" SelectionMode="Multiple"></asp:ListBox>
That Enabled="false" may be indicating to ASP.NET that it doesn't need to track this control, that changes won't be made to it. That might be why it's not getting the data back when you post back to the server.
Let's try keeping the control enabled from the server's (ASP.NET's) perspective, and maintaining the enabling/disabling in the UI entirely on the client's (JavaScript's) side. Essentially removing ASP.NET's built-in framework from making decisions for you regarding what data to track.
Start by enabling the control in the server-side control markup:
<asp:ListBox ID="lbCriteria" runat="server" CssClass="ddl" Width="150px" Height="50px"
SelectionMode="Multiple"></asp:ListBox>
The rest is handled by JavaScript. You already have some JavaScript code which you say enables/disabled the control on the client-side for you, correct? So all you need to do now is call that same JavaScript for every instance of the control when the page first loads in the browser to disable the controls client-side. This is the part you want:
document.getElementById(lbCriteria).value = -1;
document.getElementById(lbCriteria).disabled = true;
Now, it looks like you're binding your JavaScript events from the server-side code, which is where I won't be able to help as much because that method isn't particularly intuitive to me. (It's mixing JavaScript and C#, which feels a bit backwards.) So I'm not entirely sure the approach you'd take there.
Essentially you want to invoke those two lines of JavaScript for every instance of the control, and you want it to happen as soon as the page loads in the browser.
In jQuery I'd do something like this:
$(function () {
$('select.ddl').attr('disabled', 'disabled');
});
This would run when the DOM is loaded and would add the disabled attribute (with a value of "disabled" to every select with the class ddl.

Repeater, Linkbutton and ModalPopupExtender without postback

Here's my problem.
I have a repeater. Inside it has lots of textboxes. In the right most column, there is a linkbutton. This link button when clicked will show a modalpopupextender which will display the detail record of the selected row.
I have made it work just fine but its slow because when you click the linkbutton, it will refresh the whole page.
I don't want to reload the repeater because this is the part that is very slow.
I tried adding an updatePanel (repeater inside updatePanel) but ofcourse since the repeater is inside the updatePanel it will still reload the repeater.
So the question is, how do I do it so when the linkbutton is clicked, it wont reload the repeater...
Any ideas would be greatly appreciated.
By the way, I'm developing it with .net 2.0, c#

Try this one.
<asp1:UpdatePanel ID="updatepanel4" runat="server" >
<ContentTemplate>
<table id="AssignedRequest" class="tablecont" runat="server" style="width: 900px;" >
<tr>
<td>
<div style=" display:block; width:900px; height:350px;overflow:scroll; ">
<asp:Repeater runat="server" ID="RepeaterRequest">
<HeaderTemplate >
<table class="list_table" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th>Name</th>
<th></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("NAME")%></td>
<td><a onclick="window.open(this.href,this.target,'directories=no,
menubar=no,resizable=no,scrollbars=1,
status=no,toolbar=no,addressbar=no,fullscreen=yes');
return false;" href="View.aspx?name=<%#Eval("NAME")%>">View</a></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp1:UpdatePanel>

Register in the code behind, this code you add it after your bind, for example in your Page_Load, (You can also use ItemDataBound or ItemCreated delegate).
rpt.DataBind();
foreach (RepeaterItem ri in rpt.Items)
{
if (ri.ItemType == ListItemType.Item || ri.ItemType == ListItemType.AlternatingItem)
{
LinkButton lnkButton1 = (LinkButton)ri.FindControl("lnkButton1");
ScriptManager1.RegisterAsyncPostBackControl(lnkButton1);
}
}

Why not go for something like a master-child relationship. Do you require further interaction with the child data you are showing to the user? Please specify the nature if so.
Assuming that the child data that you are going to show is simple data meant to simply convey related data to user, you can go for a combination jQuery, and repeaters to accomplish your objective.
The first repeater you show your master data. Against each row in your repeater you show a show button here. You do not need a linkbutton here; just a simple anchor will do. You'd have to write js in it to toggle the correct child data.
All the child data should also be repeated. But not shown to the user at first. Only that particular child item should be shown - this is suitably triggered by the show anchor which is clicked on the master repeater. Rest is all js/css.
Below is a link to a sample project which demonstrates the concept.
http://www.coderun.com/ide/?w=2ObqOpjZz0qt7OrXYmmxwA

Telerik RadAjaxManager loads controls slow the first time

So I have a RadPanelBar, and within that a RadTreeView. On a node click event I want so update some control.. for now I am just trying to update a textbox. It works fine except that the first time I click on a child node it takes a very long time to update the control.. Just a simple text change. I set a break point in my function and I noticed that it is taking long to fire the OnNodeClick event.. If I click a parent node in the tree view it loads fine on the first click. Also, after the first time I've clicked it.. it loads quickly.. If I refresh the page, it is slow on the first click again.. Is there something I am missing.. Is the structure of my HTML inappropriate for these AJAX calls? I feel like this is a really simple example that should work..
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="IncidentReportPanel">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="IRViewPanel" LoadingPanelID="LoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Style="width: 320px;
padding-top: 125px;" Skin="Vista">
</telerik:RadAjaxLoadingPanel>
<table width="100%">
<tr style="height: 25px">
<td>
</td>
<td>
</td>
</tr>
<tr style="height: 100%">
<td style="width: 250px">
<telerik:RadPanelBar ID="IncidentReportPanel" runat="server" Height="450px" CssClass="IRPanel">
<Items>
<telerik:RadPanelItem runat="server" Text="Incident Reports" ImageUrl="./Images/folder.gif"
Value="IncidentReports">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadTreeView ID="IncidentReportsTreeView" runat="server" OnNodeExpand="LoadTreeNodes"
OnNodeClick="PopulateIRData">
<Nodes>
<telerik:RadTreeNode Text="Pending" ExpandMode="ServerSideCallBack" ImageUrl="./Images/completed.gif">
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Completed" ExpandMode="ServerSideCallBack" ImageUrl="./Images/completed.gif">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
<telerik:RadPanelItem runat="server" Text="Calendar" ImageUrl="./Images/calendar.gif"
Value="Calendar">
<Items>
<telerik:RadPanelItem>
<ItemTemplate>
<telerik:RadCalendar runat="server" ID="IRCalendar" Width="100%" />
</ItemTemplate>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</td>
<td>
<asp:Panel ID="IRViewPanel" runat="server">
<telerik:RadTextBox ID="RadText" runat="server">
</telerik:RadTextBox>
</asp:Panel>
</td>
</tr>
</table>
protected void PopulateIRData(object sender, RadTreeNodeEventArgs e)
{
RadText.Text = "Hello, World!";
}
EDIT: I updated my code according to this article, http://www.telerik.com/help/aspnet-ajax/ajax-client-side-performance.html , and the problem persisted... again it only happens the first time..
EDIT: Just to clarify, by updating according to that article, I mean that I removed all the tables and relative widths and replaced them with css positioning and fixed widths.. the problem only happens the first time.. and it only happens sometimes.. quite a few times i thought i solved the problem as it would start responding quickly.. but then after I change my .aspx and change it back (even to the exact same thing when it was working quickly).. I get the same problem..
EDIT: So, I removed the AJAX component.. and setup the control so that it does a PostBack.. and it still takes long to hit my break point.. so it seems that its not an AJAX issue... but for some reason my events are taking long to fire..
EDIT:
So I followed the advice on this post and I used the webservices to do my binding and handle everything from the client side code.. All seemed to be ok until I decided that I wanted to return nodes from my webservice that could also be expanded.. So in my webservice I set the ExpandMode of my RadTreeNodeData object to Webservice.. and it renders the data correctly when I expand the child nodes.. However now I see the same problem from before where some calls take 20-30 seconds.. It takes 20-30 seconds to even hit the break point in my webservice.. Should I use the OnClientNodeExpand event instead? I don't understand why this is so slow!! Any help is greatly appreciated!

I recommend using OnClientNodeClicked and then you can update the controls client side. If you need more data from the server you can call a web service from the client code. Otherwise, to speed this up I would probably have to see your whole page and look at what requests are being sent back and forth. Perhaps you have a lot of viewstate that is getting serialized or something.

IMO, the fastest solution is to use a web service for binding. The standard AJAX functionality will still send ViewState and other flotsome across the wire that isn't necessary. You can find more here TreeView / Load on Demand Modes . So, your tree view would look something like the following where you would create an ASMX or WCF service that retrieves the nodes (in this case the LoadNodes method on the service at Default.asmx).
<telerik:RadTreeView ID="IncidentReportsTreeView" runat="server" >
<WebServiceSettings Path="Default.asmx" Method="LoadNodes" />
</telerik>

Have you tried putting the content in an UpdatePanel to see if the EnablePartialRendering makes any difference? Not sure if the RadAjaxLoadingPanel makes a difference
How many elements are in the tree?

Asp:Label is not shown when visible is set to true?

I have a simple web form which has a couple list boxes and a search button. When the button is clicked, it returns a DataSet. If the dataset contains records, I set the asp:label which is initially set to false to true, but this is not happening. If the dataset has records and the visible property is set to true, the label still does not show up.
I have also tried putting the label and a couple other controls in an html table and setting a runat="server" attribute on the table and changing the visibility on that, but it does not show either.
Here is aspx code:
<table>
<tr>
<td>
<asp:Label ID="lblSortBy" runat="server" Text="Sort By:" Visible="false">
</asp:Label>
<asp:DropDownList
ID="ddlSortBy"
runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="ddlSortBy_SelectedIndexChanged">
<asp:ListItem Value="Gross">Gross</asp:ListItem>
<asp:ListItem Value="Population">Population</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
Here is simplified code behind when a button is clicked:
public void GetData()
{
DataView dv = GetReportData().DefaultView;
if(dv.ToTable().Rows.Count > 0)
{
lblSortBy.Visible = true;
}
else
{
lblSortBy.Visible = false;
}
}
I have a couple Update Panels around some ListBoxes and a GridView, but not the Label and Dropdown. Would this cause an issue?
I did a test, I set a label that was in an update panel to false if records were found and the label disappeared, so it is working if it is in an update panel.

If I'm not mistaken, your label should exist on an updatepanel, because as far as the static HTML page is concerned, the one and only time that your current label exists, it's set to be not visible. You would have to reload the whole page to make it visible again.

If the button is inside an UpdatePanel, then the Table, Label, etc. also have to be inside an UpdatePanel to get updated. Otherwise only the contents of the UpdatePanel get updated when clicking the button (this is what's called partial page-rendering).
So if the button is in an UpdatePanel, you have two possibilities to solve the problem:
put the table, Label, DropDownList etc. into the same UpdatePanel
or put them in another UpdatePanel and set the UpdateMode of that property to Always, so that it gets updated, even if a Postback was initiated by a control within another UpdatePanel.
See this page in MSDN for details.

You just need runat="server" on the label itself; though Visible should default to True.
Make sure you add a ForeColor to avoid mixing it in w/ background.
Debug to ensure your label has content and it's not in another control whose Visible=False.

If the table is changing visible and is the parent container of the label I don't believe it is necessary to change the label's visibility at all as it should always be set to visible.

I am assuming that you are gonna hide the ddl as well if there is no data. Have you tried putting a panel around both of them and setting its visibility to true
if you are returning rows and your button is in an updatepanel, then is your label and ddl in that updatepanel as well

thanks its really useful, put Lable in a update panel.
<ContentTemplate>
<table>
<tr>
<td>
<asp:LinkButton ID="LinkNM" runat="server" Text="Learn>" BackColor="Transparent" style=" color: #6699FF;text-decoration-color:none;border:none;font-size:x-large" OnClick="LinkNM_Click"/>
<asp:Label ID="lblChapterName" runat="server" BackColor="Transparent" style=" color: #6699FF;text-decoration-color:none;border:none;font-size:x-large" ></asp:Label>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnFileUpload" />
</Triggers>
</asp:UpdatePanel>