Showing posts with label view. Show all posts
Showing posts with label view. Show all posts

Wednesday, March 28, 2012

How do I show postback search results on a Modal Popup?

My goal is to show the serach results in a grid view on a model popup after the user enters the search criteria on a page and presses the search button. The OnClick event handler needs to collect the search criteria, get the dataset after querying the database and bind the data to the gridview before displaying the modal popup.

My problem is that the search button's id can't be assigned to the TargetControlID of the ModalPopupProperties as it will not let the OnClick event be fired and process the postback.

Please suggest the solution/workaround.

Thanks much

Display the ModalPopup via script instead?

David,

Do you have an example or a sample of the script that I can take a look at?

The other option would be to dynamically create the popup, after I process my search funcationility. But the question is, how do I invoke the display of the popup after associating the TargetID of the search button to the dynamically created ModelPopup?

Thanks for looking into it.

Vijay


I believe the following post outlines how to display the ModalPopup with script:http://forums.asp.net/thread/1280980.aspx

How do I scroll to the top of a page to view a ValidationSummary if there is a validation

Hi All,

So, I'm starting a new post that is related to my initial post from approximately 7 months ago (http://forums.asp.net/t/1040392.aspx). My hope is to finally find a solution to this problem... here is the issue:

A couple of our Ajax enabled pages have a lot of form fields, thus a user has to scroll to the bottom of the page to view the Submit button. When a control's RequireFieldValidator's EnableClientScript property is set to"true", upon a validation error the page will scroll up to the ValidationSummary. This is the functionality that I desire. But, when a control's RequireFieldValidator's EnableClientScript property is set to"false", upon a validation error the page does NOT scroll up to the ValidationSummary. Why not?

Here is a quick code sample to illustrate the problem:

<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="ValidationTest.aspx.cs"Inherits="Register_Playground_Shamus_ValidationTest" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Validation Test</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="asmScriptManager"EnablePartialRendering="true"runat="server"/>
<asp:UpdatePanelID="udpUpdatePanel"runat="server">
<ContentTemplate>
<asp:ValidationSummaryID="valSummary"runat="server"/>
<!-- Lots of space to induce scrolling upon a validation error. -->
<p>Scroll Down</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<asp:TextBoxID="TextBox1"runat="server"/><asp:RequiredFieldValidatorID="RequiredFieldValidator1"EnableClientScript="true"ControlToValidate="TextBox1"runat="server"ErrorMessage="* TextBox1"/><br/>
<asp:TextBoxID="TextBox2"runat="server"/><asp:RequiredFieldValidatorID="RequiredFieldValidator2"EnableClientScript="false"ControlToValidate="TextBox2"runat="server"ErrorMessage="* TextBox2"/><br/>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

And, the codebehind... 
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass Register_Playground_Shamus_ValidationTest : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) { }}

The only difference between TextBox1 and TextBox2 is their RequiredFieldValidator's EnableClientScript property (TextBox1 is true and TextBox2 is false). To reproduce the issue:

    Load the page, scroll to the bottom and click the "Button" without entering any text into the text boxes.The page will scroll to the top and you will see the validation summary (good!).Scroll back down to the bottom of the page and put some text into the first textbox. Click the "Button".The page will NOT scroll to the top (bad!).

All I want is for the page to scroll to the top in both scenarios.

Thanks,
-Shamus

So, I fixed the problem with a hack... here is the new codebehind code:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partialclass Register_Playground_Shamus_ValidationTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
Page.Validate();
if (!Page.IsValid)
{
ScriptManager.RegisterStartupScript(this,this.GetType(),"ReturnToTop","setTimeout(\"window.scrollTo(0,0)\",1);",true);
}
}
}
}

By adding a 1 millisecond timeout before calling window.scrollTo() it now works. If you remove the timeout, then when there is a validation error on Textbox2 the page will not scroll to the top. Personally, I hate hacks like this... I would still love to understand why the client vs. server-side validators behave so differently.

I hope this hack helps somebody else...

-Shamus


Yes sure, it will help for othersSmile

Monday, March 26, 2012

How do I dynamically create TabPanels in codebehind?

I have tried creating TabPanels dynamically in Page_Init but they aren't showing up even though I do see them when doing View Source on the resulting page. When I add them statically with the designer, they do show up. I am using 10618 version of the toolkit.

Here is a code snippet:

protected void Page_Init(object sender, EventArgs e){ AjaxControlToolkit.TabPanel tp =new AjaxControlToolkit.TabPanel(); tp.ID ="DynamicTab1"; tp.HeaderText ="DynamicTab1" Label tabContents =new Label(); tabContents.Text = tp.HeaderText; tp.Controls.Add(tabContents); ExistingTabContainer.Tabs.Add(tp);}

Hi,

I'd do this dynamic tab panel creation this way (it also works in the Page_Load event handler):

protected override void OnInit(EventArgs e){base.OnInit(e);// Create the tab panel's content container Control tabContent =new Control(); TabPanel tab =new TabPanel(); tab.ID ="tabPanel1"; tab.HeaderText ="Dynamic Panel"; Label label =new Label(); label.Text ="This is a dynamic tab panel"; tabContent.Controls.Add(label); tab.Controls.Add(tabContent);this.tabContainer1.Tabs.Add(tab);}

This pice of code works for me perfect. The tabContainer1 control is of type AjaxControlToolkit.TabContainer and is declared on the page this way:

<ajaxcc:TabContainer ID="tabContainer1" runat="server"></ajaxcc:TabContainer>

Kind regards,

sbogus.



sbogus, I got it to work using your sample code. I really appreciate your help.

Cheers!

Ron

Wednesday, March 21, 2012

How can i stop my client side list view from disappearing every time i poll a web service?

I've written a page that displays some live information that is provided by a web service and then bound to a client side list view (the binding follows this example:http://atlas.asp.net/docs/Walkthroughs/GetStarted/databind.aspx). This page is updated with a client side timer that ticks every 3 seconds. The idea is that the page updates seamlessly as the web service is polled every few seconds.

This almost works, but there seems to be a delay whilst the web service is fetching the information, during which no list view is rendered. This means that every 3 seconds the table disappears momentarily, and then the new information is shown correctly. This leads to the screen looking "flickery".

My question is how can i prevent this flickering from appearing whilst the data is retrieved from the web service?

Many thanks

-Matt

Bonus Information:

Here are some code examples to make this a bit clearer. This is the code that updates the page and retrives the information from the webservice:

function PageRefreshTick() { LotItemDataService.GetInProgressLots(inProgressCallComplete); }function inProgressCallComplete(result) { document.getElementById("InProgressLotsItemListView").control.set_data(result); }
 And here are the relevant parts of the markup: 
<asp:Content ID="Content2" ContentPlaceHolderID="Zone1Content" runat="server"> <timer id="PageRefreshTimer" interval="3000" enabled="true" tick="PageRefreshTick" /> <atlas:ScriptManagerProxy id="ScriptManagerProxy" runat="server"> <services> <atlas:ServiceReference Path="LotItemDataService.asmx" /> </services> </atlas:ScriptManagerProxy><div class="ListView"> <div id="InProgressLotsItemListView"> </div> <div style="display: none;"> <div id="InProgressLotsItemListView_layoutTemplate"> <div id="InProgressLotsItemListView_layoutTemplate_templateItem"> <table border="0"> <tbody id="InProgressLotsItemListView_layoutTemplate_LotItemParent"> <tr id="InProgressLotItem" style="height: 28px; width: 599px;"> <td style="height: 28px;"> <table cellpadding="0" cellspacing="0"> <tr> <td style="width: 16px;"> <img id="InProgressIsTracked" alt="Tracked" src="../App_Themes/BCADirect/images/icons/icontracker.gif" /> </td> <td style="width: 40px;"> <a id="InProgressLotId" class="BidSessionLink"></a> </td> <td style="width: 10px;">   </td> <td style="width: 40px;"> <img id="VehicleImage" alt="VehicleImage" /> </td> <td style="width: 10px">   </td> <td style="width: 250px;"> <table> <tr> <td> <a id="InProgressCompleteDescription" class="BidSessionLink" /> </td> </tr> <tr> <td> <label id="InProgressRegistration" class="BidSessionLabel" /> </td> </tr> </table> </td> <td style="width: 10px;"> </td> <td style="width: 300px;"> <table> <tr> <td> <label id="InProgressHighestBidder" class="BidSessionLabel" /> </td> </tr> <tr> <td> <label class="BidSessionLabel">Current price: </label> <label id="InProgressCurrentPrice" class="BidSessionLabel" /> </td> </tr> </table> </td> <td style="width: 10px;">   </td> <td> <label class="BidSessionLabel" id="PlaceBidLabel">Test</label> </td> <td style="width: 100px; height: 100px;"> <label id="InProgressTimeRemaining" class="BidSessionLabel" /> </td> </tr> </table> </td> </tr> </tbody> </table> <a id="InProgress_layoutTemplate_HyperLink1" href="http://www.google.com" class="BidSessionLink"> </a> </div> </div> </div></div> <listView id="InProgressLotsItemListView" itemTemplateParentElementId="InProgressLotsItemListView_layoutTemplate_LotItemParent"> <layoutTemplate> <template layoutElement="InProgressLotsItemListView_layoutTemplate" /> </layoutTemplate> <bindings> <binding dataContext="waitingLotsItemDataSource" dataPath="data" property="data" /> </bindings> <itemTemplate> <template layoutElement="InProgressLotItem"> <image id="InProgressIsTracked"> <bindings dataPath="IsTracked" property="visible" /> </image> <hyperLink id="InProgressLotId"> <bindings> <binding dataPath="Id" property="text" /> <binding dataPath="VehicleDetailsUrl" property="navigateURL" /> </bindings> </hyperLink> <hyperLink id="InProgressCompleteDescription"> <bindings> <binding dataPath="CompleteDescription" property="text" /> <binding dataPath="VehicleDetailsUrl" property="navigateURL" /> </bindings> </hyperLink> <label id="InProgressRegistration"> <bindings> <binding dataPath="Registration" property="text" /> </bindings> </label> <label id="InProgressTimeRemaining"> <bindings> <binding dataPath="TimeRemaining" property="text" /> </bindings> </label> <label id="InProgressHighestBidder"> <bindings> <binding dataPath="HighestBidUserName" property="text" /> </bindings> </label> <label id="InProgressCurrentPrice"> <bindings> <binding dataPath="CurrentPrice" property="text" /> </bindings> </label> <label id="PlaceBidLabel"> <bindings> <binding dataPath="BidNowText" property="text" /> </bindings> </label> </template> </itemTemplate> </listView></asp:Content>

Although i didn't receive any replies through this board, I received a number of emails from my companies .net community, including this one:

The problem with the list view is a known issue with the Atlas team (not that they seem to be actively trying to fix it). I am currently working n a custom list view to try and reduce the flickering.

So there are couple of options open that you could try :-

1.Buffer your data and only redraw the list view when there is a delta in your data reducing the flicker.

2.Use the XML script data binding but draw the list view manually using atlas client side JavaScript (Here at HMV I manually create the list view using divs or a table due to the flickering issues).

3.If you are not bound to a Atlas then try http://www.telerik.com/ who has some awesome ajaxable controls that you can use.

I tried rendering the output myself with JavaScript to the innerHTML of a div tag, and this indeed fixed the problem. However this in turn introduces its own set of problems further down the line as I wanted to use animations, and using this method I have no components in the xml portion of the markup.

I guess until the underlying listview big is fixed, there is no way to move forward with this?

-Matt