Showing posts with label created. Show all posts
Showing posts with label created. Show all posts

Wednesday, March 28, 2012

Dynamic created ModalPopup Window

Hi,

I am having a lot of modal popup windows on my page (20+).

When i click various buttons on my page, various modal popupwindows should apear. But I don't want to define all the windows in the aspx, because the windows are pretty large.

So I think it would be fine to place one Panel containing an UpdatePanel and one ModalPopupExtender on the page and on clicking a button on the page i create an composite control and place it inside the Updatepanel, update() and show the modal dialog from code behind. This works fine if the content of the modal popup doesn't contain any buttons. But when i use buttons inside the popup window, their events doesn't fire at all.

Here is some code:

The ASPX:

 <asp:panel id="pnlPopUp" runat="server" style="display: none">
<div style="background-color: LightGrey">
<asp:panel id="header" runat="server">
<asp:label id="lblHeader" runat="server" />
<asp:linkbutton id="lbClose" runat="server" text="X" onclientclick="$find('mpePopUp').hide(); return false;" />
</asp:panel>
<asp:updatepanel runat="server" id="updPopup" childrenastriggers="true" updatemode="conditional">
<contenttemplate>
<asp:panel id="pnlBody" runat="server" cssclass="body" />
</contenttemplate>
</asp:updatepanel>
</div>
</asp:panel>
<cc1:modalpopupextender id="mpePopUp" behaviorid="mpePopUp" popupcontrolid="pnlPopUp" runat="server" dropshadow="true"repositionmode="RepositionOnWindowResizeAndScroll" targetcontrolid="dummy" backgroundcssclass="modalBackground" />

CODE:

public partialclass _Default : System.Web.UI.Page
{
public MDMWindow2 w2 =null;

protected override void OnInit( EventArgs e )
{
base.OnInit( e );
w2 =new MDMWindow2( );
w2.Bubble +=new EventHandler( w2_Bubble );
}

void w2_Bubble(object sender, EventArgs e)
{
int x = 0;// This Point get NEVER hit}protected void ShowWindow2(object sender, EventArgs e )
{
w2.HeaderText ="WWW2";
updPopup.ContentTemplateContainer.Controls.Add( w2 );
updPopup.Update( );
mpePopUp.Show( );
}

and the code of the control:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

/// <summary>
/// Summary description for PopUpPanel
/// </summary>public class MDMWindow2 : CompositeControl
{
private Label headerLabel;
private Button button;

public String HeaderText
{
get{EnsureChildControls( );return headerLabel.Text;
}
set{EnsureChildControls( );headerLabel.Text =value;
}
}

public MDMWindow2( )
{
}

public event EventHandler Bubble;

protected override void OnLoad( EventArgs e )
{
base.OnLoad( e );
EnsureChildControls( );
}

protected override void CreateChildControls( )
{
EnsureChildControls( );
headerLabel =new Label( );
headerLabel.ForeColor = System.Drawing.Color.Red;
this.Controls.Add( headerLabel );

button =new Button( );
button.CommandName ="Click";
button.Text ="ClickMe";
Controls.Add( button );
button.Click +=new EventHandler( b_Click );

}

void b_Click(object sender, EventArgs e )
{
Bubble(this, e );// This Point get NEVER hit
}
}

Can anybody help? What is wrong with wiring the eventHandlers? Is the updatepanel the probl?em? Or can anybody show me an better way to create modal popups at serverside?

Thnx

I did something like this using user controls (.ascx files). The .aspx file has an UpdatePanel whose content is an asp:Panel with an asp:PlaceHolder in it and an asp:Button. The button is configured with an OnCommand handler and an initial CommandName of 'Inactive'. A LinkButton on the page triggers a partial postback which does 3 main things: a) does a LoadControl of a .ascx file into the Placeholder; b) changes the CommandName of the Button to "EntryForm" (or something logically associated with the .ascx); c) calls Show() on the modal popup.

After the partial rendering completes, the modal popup is shown. When the Button is pressed, the OnCommand is run, and it uses the CommandName to do the right thing for the particular .ascx that was loaded. It's important that in Page_Load, if it's a postback, that the loaded .ascx is re-loaded (using LoadControl) so that the viewstate is restored and the controls on the .ascx can get updated with the values entered on the modalpopup form. During OnCommand, if a different .ascx needs to be shown, it unloads the Placeholder's controls and uses LoadControl for the next .ascx. If the sequence is done, it sets the CommandName back to "Inactive" and hides the modalpopup.

Hope that helps,

Donnie

This sounds good. But in my Dialogs I will have more various controls like dropdownllist or textboxes wich will have to be bound to an eventhandler too. They have to be in the controls.

It would be perfect, if I can handle the events, which are triggered by my control, inside the page.



Sounds like, then, after you use LoadControl, the page just needs to add event handlers in its code-behind to the controls in the .ascx that was dynamically loaded.

Dynamic controls in Ajax UpdatePanel

I created a dynamic button and want to add the button click event as update panel trigger.
But does not work. Any idea ?
Thanks

String clientID;

protectedvoid Page_Init(object sender,EventArgs e)

{

Button btn =newButton();

btn.Text ="Write Hello";

btn.Click +=newEventHandler(Button1_Click);

Page.Form.Controls.Add(btn);

clientID = btn.ClientID;

}

protectedvoid Button1_Click(object sender,EventArgs e)

{

Label1.Text ="hello";

}

protectedvoid Page_PreRender(object sender,EventArgs e)

{

AsyncPostBackTrigger trigger =newAsyncPostBackTrigger();

trigger.ControlID = clientID;

trigger.EventName ="Click";

UpdatePanel1.Triggers.Add(trigger);

}

Try this instead of your code.

protected void Page_Load(object sender, EventArgs e)
{

Button btn = new Button();
btn.Text = "Write Hello";
btn.ID = "Button1";
btn.Click += new EventHandler(Button1_Click);
UpdatePanel1.ContentTemplateContainer.Controls.Add(btn);
//Page.Form.Controls.Add(btn);
// clientID = btn.ClientID;

AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = "Button1";
trigger.EventName = "Click";
UpdatePanel1.Triggers.Add(trigger);

}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "hello";

}


This works. But actually what I want is : when click on the Button1, the the UpdatePanel1 will be hide and a UpdateProgress (with a loading image) will show until the loading complete. And the UpdatePanel1 will show again with some updated info.


Try this code. I dont think its a perfect way. I am using some hack mentioned in

http://dotnetslackers.com/community/blogs/simoneb/archive/2006/09/02/481.aspx

<%@. 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">
protected void Page_Load(object sender, EventArgs e)
{

Button btn = new Button();
btn.Text = "Write Hello";
btn.ID = "Button1";
btn.Click += new EventHandler(Button1_Click);
UpdatePanel1.ContentTemplateContainer.Controls.Add(btn);
//Page.Form.Controls.Add(btn);
// clientID = btn.ClientID;

AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = "Button1";
trigger.EventName = "Click";
UpdatePanel1.Triggers.Add(trigger);
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "hello";
System.Threading.Thread.Sleep(4000);
}
</script
<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=sc1 runat=server ScriptPath="ScriptLibrary"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgressrunat=server AssociatedUpdatePanelID=Updatepanel1 ID=up1DynamicLayout=true DisplayAfter=4 >
<ProgressTemplate>
<table>
<tr>
<td>
Loading......
</td>
</tr>
<tr>
<td>
<img src="http://pics.10026.com/?src=" alt="image" />
</td>
</tr>
</table>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
<script language=javascript>
Sys.Application.add_load(ApplicationLoadHandler)
function ApplicationLoadHandler(sender, args)
{
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(HidePanel);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(ShowPanel);
}
function HidePanel(sender, args)
{
for (var j = sender._updatePanelIDs.length - 1; j >= 0; j--)
{
varupdatePanel =document.getElementById(sender._uniqueIDToClientID(sender._updatePanelIDs[j]));
var postbackElement = args.get_postBackElement();
if(updatePanel && updatePanel.contains(postbackElement)) {
updatePanel.style.visibility='hidden';
}
}
}
function ShowPanel(sender, args)
{
var updatedPanels = args.get_panelsUpdating();
for (var j = updatedPanels.length - 1; j >= 0; j--)
{
updatedPanels[j].style.visibility='visible';
}
}
</script>


Is it posible to put the button outside the UpdatePanel ?

UpdatePanel1.ContentTemplateContainer.Controls.Add(btn);

Because I would not want the button to be hide while 'Ajax'.

Thanks

Dynamic controls and Updatepanel

Hi,

First time poster here. (waves)

Here is my problem: Dynamically created LinkButtons within an Updatepanel don't seem to fire their Commands.
I have a few LinkButtons that are dynamically created within an UpdatePanel based on the contents of a TextBox. Everything renders as it should, only when I click on one of the LinkButtons, nothing happens. When I Debug, it the function the LinkButtons refer to (trough Command) never fires up. I suspect that this has something to do with the fact that CommandEventHandler is never actually registered because of the partial update. Is this correct? What are my options in this situation?

hello.

can you show us the code?


This is the code that is being used to generate the buttons:
foreach (XmlNode rowin rows){ LinkButton klantLink =new LinkButton(); klantLink.Text = row["NAME"].InnerText +", " + row["FIRSTNAME"].InnerText; klantLink.CommandArgument = row["K_CONTACT"].InnerText; klantLink.Command +=new CommandEventHandler(gezochteKlant_Click); searchDiv.Controls.Add(klantLink); searchDiv.Controls.Add(new LiteralControl("<br />") );}
searchDiv.Visible = true;
searchPanel.Update();
And this is the location in the html where the content is added:
<atlas:UpdatePanel ID="searchPanel" runat="server" Mode="Conditional"> <ContentTemplate> <div runat="server" id="searchDiv" visible="false"> </div> </ContentTemplate></atlas:UpdatePanel>

hello again.

question: where are you adding the controls, ie, in which event?


They are added trough the OnTextChanged of a textbox.

hello.

hum, not sure about what's happening.

i've built a small sample that adds a button during the load event and this works ok:

<%@. 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">
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);

LinkButton klantLink = new LinkButton();
klantLink.Text = "hello";
klantLink.CommandArgument = "test";
klantLink.Command += new CommandEventHandler(gezochteKlant_Click);

searchDiv.Controls.Add(klantLink);
searchDiv.Controls.Add(new LiteralControl("<br />"));

}

void gezochteKlant_Click(object sender, EventArgs args)
{
txt.Text = DateTime.Now.ToString();
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager runat="server" ID="manager" EnablePartialRendering="true" />

<atlas:UpdatePanel runat="server" id="panel">
<ContentTemplate>
<div runat="server" id="searchDiv" />
<asp:TextBox runat="server" id="txt" />
</ContentTemplate>
</atlas:UpdatePanel>
<hr />
<%= DateTime.Now.ToString() %>
</div>
</form>
</body>
</html>

maybe the problem is that you're only creating the button during the textchanged event; a click will fire another postback, but you won't the buttons won't be created since the text didn't change and this will not fire your event.


Thanks for the reply. I think the problem is that I create the controls directly in the function linked to the ontextchanged event.

hello.

that's what i was trynig to say. since you add them on the textchanged event, you must also add them on future postbacks or else the button will not exist. so, what i suggest is adding some sort of flag that will let you add the buttons during the load event of a postback operation.


Hi,

I am very badly stuck up at something.

I am also dynamically loading my user control in the Update panel. My User Control act as a ModalPopUp Extender. So what i am doing is , on the click on the button on my page I am showing a Modal PopUp which is a User Control with some buttons and a grid. Which is being loaded on some values passed from the Page. So what I have done is I am adding Dynamically that user Control on the Click event of the button on my Page.But when I click any button my User Control , the event associated with that button does not get fired. It just unloades the usecontrol and event related to the buttons on the User control are getting fired.. Please help and look into this matter..

The Code:

protectedvoid btnAddContent_Click(object sender,EventArgs e)

{

//AddContent1 is my User Control with ProposalID and SectionID are the Properties.. Place Holder is on my Page where I am placing my control.

AddContent

AddContent1 = (AddContent)Page.LoadControl("AddContent.ascx");

AddContent1.ProposalID = 44;

AddContent1.SectionID = 1;

PlaceHolderTest.Controls.Add(AddContent1);

Label lblAdd = (Label)(AddContent1.FindControl("lblAdd"));

lblAdd.Text =

"Add Content";Label lblSecQues = (Label)(AddContent1.FindControl("lblSecQues"));

lblSecQues.Text =

"Section:";

mpeAddContent.Show();

}

Thanks in Avance

Abhishek

Dynamic Collapsible Panels - Flicker and slow load

Hello,

I have a User Control that dynamically creates several collapsible panels depending on records read from sql db. The panels are created okay, but the page loads slow and flickers several times. It partially loads, displays first panel very quickly and goes blank until all other panels are created and data is loaded. It looks awfull!!

Is there a way to improve the UI?, so the page shows all panels when loaded. It would be good also showing a "wait for a moment" message when creating many panels. What is the best way to do it?

Thank you,

Carlos Lozano

Any one?

Any comments would be helpfull. Thank you.Carlos


I can't help with your issues, but could you show me how you create dynamic panels based on SQL data? Once I get it working, I will discuss with others around here to determine if there is a solution.


Mine works without the flickering. I don't use a code behind in the control that buildds it.


Try to set in web.config <compilation debug="false">

It will improve some performance.


Below is the main code that creates the panel.

Notes:

1) CustomPanel is a customization of Panel class.

2) sNewEndingID is a counter to identify each panel and its controls.

3) TableUtil.AddTableRow function basically adds the <tr><td>controls here</td></tr> to the panel to organize the panel presentation.

4) oOptions.getOptionData("Inspection") Pulls data from SQL DB to populate some of the control options (ie. DropdownList, etc).

-- Code --

public void createInspectorPanel(ref CustomPanel oParentPanel, string sNewEndingID)
{
OptionsObject oOptions = new OptionsObject();
//oParentPanel.Visible = false;

AjaxControlToolkit.CollapsiblePanelExtender oExPanel = new AjaxControlToolkit.CollapsiblePanelExtender();
CustomPanel oPanel = new CustomPanel();
oPanel.ID = "InspectorItem" + sNewEndingID;
if (oParentPanel.Controls.IndexOf(oPanel) == -1)
{
oExPanel.ID = "InspectorPanelExtender" + sNewEndingID;
oExPanel.TargetControlID = "InspectorPanel" + sNewEndingID;
oExPanel.ExpandControlID = "InspectorPanelHeader" + sNewEndingID;
oExPanel.CollapseControlID = "InspectorPanelHeader" + sNewEndingID;
oExPanel.Collapsed = true;
oExPanel.TextLabelID = "lblInspectorControlText" + sNewEndingID;
oExPanel.CollapsedText = sNewEndingID + ") - Click to view details ";
oExPanel.ExpandedText = sNewEndingID + ") - Click to hide details ";
oExPanel.SuppressPostBack = false;
oPanel.Controls.Add(oExPanel);

CustomPanel oPanelHeader = new CustomPanel();
oPanelHeader.ID = "InspectorPanelHeader" + sNewEndingID;
oPanelHeader.CssClass = "collapsePanelHeader";
//oPanelHeader.Width = 300;
oPanelHeader.Width = Unit.Percentage(98);

Label oCounterLabel = new Label();
oCounterLabel.ID = "lblInspectorCounter" + sNewEndingID;
oPanelHeader.Controls.Add(oCounterLabel);

Label oControlLabel = new Label();
oControlLabel.ID = "lblInspectorControlText" + sNewEndingID;
oControlLabel.CssClass = "BTextClass";
oPanelHeader.Controls.Add(oControlLabel);
oPanel.Controls.Add(oPanelHeader);

CustomPanel oDetailPanel = new CustomPanel();
oDetailPanel.ID = "InspectorPanel" + sNewEndingID;
oDetailPanel.Height = 50;
//oDetailPanel.Width = 350;
oDetailPanel.Width = Unit.Percentage(98);

HtmlTable oTable = new HtmlTable();
TableUtil.AddTableRow(ref oTable, 1, "InspectorName", "Name: ", 1, sNewEndingID);
TableUtil.AddTableRow(ref oTable, 2, "CompanyName", "Company: ", 1, sNewEndingID);
DropDownList MPICertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref MPICertLevel, ";1;2;3", "MPICertLevel", "MPI Cert. Level: ", sNewEndingID);
DropDownList LPCertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref LPCertLevel, ";1;2;3", "LPCertLevel", "LP Cert. Level: ", sNewEndingID);
DropDownList EMICertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref EMICertLevel, ";1;2;3", "EMICertLevel", "EMI Cert. Level: ", sNewEndingID);
DropDownList UTCertLevel = new DropDownList();
TableUtil.AddTableRow(ref oTable, ref UTCertLevel, ";1;2;3", "UTCertLevel", "UT Cert. Level: ", sNewEndingID);
//DropDownList Inspection = new DropDownList();
ListBox Inspection = new ListBox();
Inspection.DataTextField = "Description";
Inspection.DataValueField = "Id";
Inspection.DataSource = oOptions.getOptionData("Inspection");
Inspection.Rows = 6;
Inspection.SelectionMode = ListSelectionMode.Multiple;
Inspection.DataBind();
TableUtil.AddTableRow(ref oTable, ref Inspection, "Inspection", "Inspections Done: ", sNewEndingID);
DropDownList TxtPerformance = new DropDownList();
TxtPerformance.DataTextField = "Description";
TxtPerformance.DataValueField = "Id";
TxtPerformance.DataSource = oOptions.getOptionData("InspPerformance");
TxtPerformance.DataBind();
TableUtil.AddTableRow(ref oTable, ref TxtPerformance, "Performance", "Performance: ", sNewEndingID);
TableUtil.AddTableRow(ref oTable, 9, "InspDiscrepancies", "Discrepancies: ", 2, sNewEndingID, 40);

oDetailPanel.Controls.Add(oTable);
oPanel.Controls.Add(oDetailPanel);
oParentPanel.Controls.Add(oPanel);
//oParentPanel.Visible = true;
}
}


Did you set your Content Panel's height to 0px. I'm not sure if I'm reading this correctly but I seeoDetailPanel.Height = 50;Maybe try setting that to 0 and see if that helps with the flickering.

Monday, March 26, 2012

Dynamic Accordion with Paging

hi there; using asp.net 2.0 (vb) i've just created a page that, in the page load event, retreives a number of records from the database.

as each record is read into a dataset, a new accordon panel is created. the panel header displays the fldName and the panel content displays the fldContent from the table.

this all works great. the issue i'm having is that it currently displays all the records (approx 200) and i only want 10 records displayed at a time.

my question is, is there somehow a way to implement paging? i found the following article:

http://rolf-cerff.de/blogs/dotnet/archive/2007/03/08/ajax-control-toolkit-paging-with-databound-accordion-control.aspx

but i'm not familiar enough with C# to understand.

also, any idea if paging for the accordion is in the works?

thanks all.

You can use a paged data source...

Basically, create a datatable from your recordset, and then...
Dim pds As New PagedDataSource
pds.DataSource = (whatever then dataset is called).Tables(0).DefaultView
pds.AllowPaging = True
pds.PageSize = 10
pds.CurrentPageIndex = curpage (passed into the databind sub, optional value that = 0 at first)
CurrentPage (see below) = pds.CurrentPageIndex + 1

What I do is to create a viewstate item called CurrentPage to keep track of the pages...
Public Property CurrentPage() As Integer
Get
Dim o As Object = Me.ViewState.Item("_CurrentPage")
If o Is Nothing Then
Return 0
Else
Return o
End If
End Get
Set(ByVal value As Integer)
Me.ViewState.Item("_CurrentPage") = value
End Set
End Property

You can then have linkbuttons to guide through pages... Just rebind using your sub and pass in CurrentPage as the curpage to advance or CurrentPage - 1 to go back.

Dyanmically created linkbuttons, within UpdatePanel, is not working

Hello Folks,

I am updating a placeholder, to create some form controls, from my code behind.

I am successful. Now, I want to create a linkbutton, next to each form control i create, that when clicked on, go to the same generic event and read the control's ID (passed by the linkbutton somehow) and then I will do the logic to remove the control from the placeholder. Right now it creates the linkbuttons, but to ensure i don't have duplicate ID's, I add a unique int.tostring on the end of the ID of the linkbuttons. And I added the handler that should send all clicks, from all the linkbuttons to the same event. But I put a breakpoint in that event and when I click any of the linkbuttons, it just refreshes and no change to the page and the breakpoint in the event is never reached. Please let me know if you have any ideas, questions.. a portion of my code, with notes, below...

I am able to create all form elements except buttons, link buttons, etc.

I think the link button creation should be as simple as:

victorylinkBTN.ID ="victorylinkBTN" & VictoryReplicantCount.ToString

AddHandler victorylinkBTN.Click,AddressOf victorylinkBTN_Click

DCP.Controls.Add(victorylinkBTN)

victorylinkBTN.Text ="Del"

Dim vicEventAsNew System.EventArgs()

Is that right? It does create the linkbuttons, but the click fails. It submits, but nothing happens, it just refreshes with nothing changed, and doesn't land on my breakpoint, in the sub below.

Sub victorylinkBTN_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)

Dim linkbutAs LinkButton =CType(sender, LinkButton)

Dim linkbutIDAsString = linkbut.ID.ToString

'do more work……

EndSub

If you have any idea what I am doing wrong, please let me know.

Also, if you have experience with update panels, if I make the update panel conditional, then how would I set each of these linkbuttons to have trigger rights to the related update panel?

Again, thanks for any help ...

Folks,

I have found a cheesy way to do this, by adding javascript on each linkButton created that inserts the linkButton ID into a hidden field's value on the page and then on that linkButton submit, in pageLoad, I read the value of the hidden field to decide to perform the action.

This works, and would take some serious time to explain. Please feel free to email me via the forum contact ability, if you want details.

I am leaving this open, hoping someone in the asp.net team will have a better solution.


Since you dynamically add thelink buttons, you should add it to the PlaceHolder in the Page_Load event every time instead of adding it just the page first load. Because when you only add it the first time the page load, after post back, thelink buttonswill disappear. And itdoesn't land on your breakpoint invictorylinkBTN_Click,There is non victorylinkBTN when your postback.

Try this:

publicpartialclassDefault2 : System.Web.UI.Page

{

protectedvoid Page_Load(object sender,EventArgs e)

{

AddControl(PlaceHolder_ContentRight,"~/WebUserControl.ascx",true);

}

privatevoid AddControl(PlaceHolder PlaceHolder,string ControlPath,bool Clear)

{

Control Control_ToAdd;

Control_ToAdd = LoadControl(ControlPath);

if (Clear)

{

PlaceHolder.Controls.Clear();

}

PlaceHolder.Controls.Add(Control_ToAdd);

}

}

If this help you,don't forget mark it as a answer.Thanks!

Best Regards

Jin-Yu Yin

Saturday, March 24, 2012

DropDownList, UpdatePanel, ControlEventTrigger and TimerControl affecting other UpdatePane

I've run across a problem so I've created some sample code below that replicates what I'm seeing.

I've got an UpdatePanel(up_Test) that has a control in it. I've got a TimerControl that fires every 2 seconds and my UpdatePanel has a Trigger to refresh on my TimerControl's Tick event.

I've got a DropDownList on the page(ddl_Test), with an AutoPostBack="true", I've got another UpdatePanel on the page that has a Trigger to refresh on my DropDownList's SelectedIndexChanged event. In this UpdatePanel I've got another DropDownList that gets its SelectedIndex set to the SelectedIndex of the first DropDownList.

Everything works as expected, except when I test it with IE6, when the TimerControl fires, the DropDownList in the second UpdatePanel gets refreshed. It doesn't seem to happen(or at least isn't noticable) with IE7(which is on the machine I'd been writing this on).

Basically, I wrote this big page that has a ton of different updatepanel's on it each with triggers to specific controls and that whole section worked great, but then on my masterpage, when I put a gridview with a timercontrol, suddenly, the page practically became unusable as all of the updatepanels suddenly trigger when the TimerControl fires. Is there some work-around I can do, or do I just need to drop the TimerControl and scrap the whole layout?

<

atlas:TimerControlID="tc_Test"runat="server"Interval="2000"Enabled="true"OnTick="tc_Test_Tick"/><atlas:UpdatePanelID="up_Test"runat="server"><ContentTemplate><asp:DropDownListID="ddl_Test"runat="server"></asp:DropDownList></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="tc_Test"EventName="Tick"/></Triggers></atlas:UpdatePanel><asp:DropDownListID="ddl_Test1"runat="server"AutoPostBack="true"OnSelectedIndexChanged="ddl_Test1_SelectedIndexChanged"/><atlas:UpdatePanelID="up_Test2"runat="server"><ContentTemplate><asp:DropDownListID="ddl_Test2"runat="server"></asp:DropDownList></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="ddl_Test1"EventName="SelectedIndexChanged"/></Triggers></atlas:UpdatePanel>

protected

void Page_Load(object sender,EventArgs e)

{

if (!Page.IsPostBack)

{

for (int i = 0; i < 10; i++)

{

string itemtext ="This is a long string to make it noticable " + i.ToString();

ddl_Test.Items.Add(itemtext);

ddl_Test1.Items.Add(itemtext);

ddl_Test2.Items.Add(itemtext);

}

}

}

protectedvoid ddl_Test1_SelectedIndexChanged(object sender,EventArgs e)

{

ddl_Test2.SelectedIndex = ddl_Test1.SelectedIndex;

}

protectedvoid tc_Test_Tick(object sender,EventArgs e)

{

Random r=newRandom();

ddl_Test.SelectedIndex = r.Next(9);

}

Mode="Conditional" on the update panels fixes the problem. I guess I just assumed putting in the <trigger> lines caused it to use the triggers but you have to change the updatepanel's mode too.

Wednesday, March 21, 2012

Dropdownlist doesnt refresh in Updatepanel

Hi all,

I'm just taking my first steps in the altlas world here, so i guess the problem below will be due to myself:

i created an .aspx page containing some dropdowns, and coded the functionality using postbacks. Up until there it all works. Then i tried to refresh one of the dropdowns using Atlas - triggered by another dropdown control.

Now when i change the selected value in the "trigger" control, the code filling the other dropdown is executed but the controls content isn't refreshed when the execution is completed.

Here's the code on the aspx page...

...

<atlas:ScriptManager ID="s" EnablePartialRendering="true" runat="server"></atlas:ScriptManager>

...

SalesCompany:<asp:DropDownList ID="ddlSalesCompany" runat="server" OnSelectedIndexChanged="ddlSalesCompany_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList><br/>
Series:<asp:DropDownList ID="ddlSeries" runat="server" OnSelectedIndexChanged="ddlSeries_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList><br/>
<atlas:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
Model:<asp:DropDownList ID="ddlModel" runat="server" OnSelectedIndexChanged="ddlModel_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList><br/>
</ContentTemplate>
<Triggers>
<atlas:ControlValueTrigger ControlID="ddlSeries" PropertyName="SelectedIndex" />
</Triggers>
</atlas:UpdatePanel>

in my "code behind" page i have:

protected void ddlSeries_SelectedIndexChanged(object sender, EventArgs e)
{
FillModels();
}

private void FillModels()
{
if (ddlSeries.SelectedValue != "0")
{
Proxy.Pricing.Model.ModelService ModelSVC = new Proxy.Pricing.Model.ModelService();
DKSerie dkSerie = new DKSerie(ddlSeries.SelectedValue.ToString());

List<Model> myModels = ModelSVC.GetModels(dkSerie, null);

ddlModel.DataSource = myModels;
ddlModel.DataTextField = "Name";
ddlModel.DataValueField = "OID";
ddlModel.DataBind();

ddlModel.Items.Insert(0, new ListItem("Select a model", "0"));
}
else
{
ddlModel.Items.Clear();
ddlModel.Items.Insert(0, new ListItem("Select a series", "0"));
}
}

Can somebody help me on this one?

Thanks in advance,

Wesley Van den Eede

The thing that triggers the UpdatePanel is the Triggers Collection of the Update Panel. I noticed in your Triggers Collection you have the property of the trigger to be "SelectedIndex" where it probably should be "SelectedIndexChanged" (at least it is in mine).

Mike


Hi Mike,

Thanks for the reply, but...

Isn't that in case i use a ControlEventTrigger instead of a ControlValueTrigger?

I watched Scott's presentation athttp://atlas.asp.net/ and he uses SelectedIndex.

Wesley


Sorry for the double post...

The thing is that, i don't think it is related to the trigger... because when i debug and put a breakpoint on the FillModels() function, the debugger really steps in. It looks like the actual rendering of the control isn't refreshed?

Wesley


Can you monitor the network traffic using Fiddler or Nikhil's browser helper and tell us what you see?

Hi,

Sorry for the late reply (working on another project :))

Today i tried to use fiddler a bit, but then i found out that it doesn't work with IE7?, I'll try to send the fiddler output this afternoon anyway.

On the other hand i did some more investigation and found out that it is probably related to two other controls i use further in the page: Infragistics.WebUI.WebDateChooser.v1.2

When i remove the controls it all works, so i guess it's now a case of making them work together (or replacing the WebDateChooser controls) ... any suggestions?

Kind regards,

Wesley Van den Eede


Yes, we know of a few problems with the Infragistics controls which are quite heavily using JavaScript.

I just updated our datepicker controls to the latest trial version of the netadvantage suite (2006 Vol. 1) ... now it works perfectly...

Thanks for the responses.