How do I update text in a panel using ajax and a timer?

This is a pretty basic question, I just need to update a textbox every few minutes without using a postback. The text is pulled from a sql query. Is there a example for how to do this somewhere? (simialar to how gmail updates, etc...)

Take a look at this: http://encosia.com/index.php/2007/07/25/display-data-updates-in-real-time-with-ajax/

If you're only updating a simple text label, you could skip the UpdatePanel in my example andupdate that text on the client side, using a web method.

A combination of those two examples should give you what you're after.

Thanks for providing links.

How can we access a control outside the update panel with an control inside the update pan

Take a very simple example, i have a button inside the update panel along with other controls and i have a textbox on the page.What i want is that when i click the button inside the update panel,it should update the textbox which is present outside the update panel.How can i do this?

To my knowledge you cannot update any control outside of the update panel. If you want to update the control move it inside the update panel.

Do you want to modify the text box with server-side code? If so, put it in its own UpdatePanel. Set the UpdateMode on the panel to Conditional. Then you can either add the button in the other UpdatePanel as an AsyncPostBackTrigger to the new UpdatePanel or invoke the Update method on the new UpdatePanel in your button's Click event handler.

If you want to modify the text box on the client, you're going to have to write JavaScript.

Can you please tell me what javascript should i write for the sition i mentioned in the above example.

I am not getting the idea using javascript for a control inside the update panel.

Are you sure you need to write JavaScript? I gave you the steps to modify the text box using purely server-side code by using a second UpdatePanel control. I highly recommend you read theUpdatePanel tutorials and then re-read what I suggested. This path doesn't require JavaScript, but does require a round-trip to the server which is where your code will be executing.

If you do need to use JavaScript, you're going to need to handle the button's click event, modify the other control, and then prevent the default action for clicking the button from occurring (if necessary). This would all be done on the client so wouldn't require a round-trip to the server, but involves learning JavaScript and the DOM API (which you should want to learn as a web developer, anyways).

i have read it but still i feel i need javascript.Can u help me?

How can I utilize AjaxControlToolkit:CalendarExtender inside my Gridview during edit mode?

Hello guys,

I have a Gridview control that has StartDate, EndDate field columns. In edit mode, when I clicked the StartDate or EndDate textbox to change the date, I need the calendarExtender popup, so I can select any particular date.

I tried this code in my ASPX page code behind, but still didn't work. Here is the code snippet:

...
TextBox txtStartDate = (TextBox)row.FindControl("txtStartDate");
AjaxControlToolkit.CalendarExtender calExtender =new AjaxControlToolkit.CalendarExtender();
calExtender.Format ="MM/d/yyyy";
calExtender.CssClass ="ajax__calendar";
calExtender.TargetControlID ="txtStartDate";
calExtender.DataBind();

TextBox txtEndDate = (TextBox)row.FindControl("txtEndDate");
AjaxControlToolkit.CalendarExtender calExtender2 =new AjaxControlToolkit.CalendarExtender();
calExtender2.Format ="MM/d/yyyy";
calExtender2.CssClass ="ajax__calendar";
calExtender2.TargetControlID ="txtEndDate";
calExtender2.DataBind();
...

Is there any step procedures, source code, or reference example, etc. I can use to accomplish this task? I greatly appreciate for any help to solve this problem. Thanks.

Why not convert your bound column to a item template column and drop the CalendarExtender Control directly inside the GridView?

or just use something similar toGreg Benoit's resusable calendar solution

I use this all over my site and i only have 1 calendar extender in the entire app. You can easily attach the extender on-the-fly using his example

I'll try to implement it on my Gridview control. Thanks for your suggestion.

how can i use a textbox with an update panel during textchange

the case is, everytime the textbox will be change it will trigger a process wherin it will look for the data in the databse, after that it will display the data to a grid. the textbox & grid are place inside the update panel. It's just I only want that portion to be refreshed.

When an update panel posts the page back - your entire page is reloaded on the server. The client however only redraws the portions you've specified inside the update panel.

To accomplish this, and fire off the ontextchanged event you're looking for - set your textbox like this

<asp:textbox id="txtSearch" runat="server" autopostback="true" />

Now keep in mind, that this will only fire when the textbox looses focus.

How can I update a detailsview from a gridview in Atlas?

Hi, I have a gridview and a detailsview. The gridview takes a value from a textbox and retrieves rows. It has been atlas enabled and works fine. Now I want to take a value from the gridview and populate the detailsview. I have an asp:commandfield in my gridview for select, but everytime I click it is causes a postback. I don't want a postback (that's the whole reason for atlas). I don't believe I doing this correctly, my design. Also, all my detailsview "stuff" is in an updatepanel for atlas.

Any help is appreciated on how I can populate a detailsview based upon a gridview in atlas. Thanks.

Isn't this a common practice in non-atlas applications? Clicking a row in a gridview and populating a detailsview or formsview?

You need to set the Datakey on the gridview to the ID field of your datatable (hopefully you have one). Then set the datasource on the details view and configure the input parameter to be a control and pickup the Datakey from your gridview. This is a standard master detail setup, you can find good documentation on this in the VS 2005 documentation.(ms-help://MS.VSCC.v80/MS.MSDN.v80/MS.VisualStudio.v80.en/dv_vwdcon/html/e3ab20ae-44c3-43f0-91f3-0f95fff47b48.htm).

I'm guessing the Atlas part of this is the fact your page is doing postbacks. So you need to put an updatepanel around the gridview and another around the detailsview? Then put a trigger on the detailsview updatepanel to point at the griview and the "SelectedIndexChanged" event.

Hope this helps

I am doubtful that the server side UpdatePanel control will provide what you are looking for. However, Atlas provides two client side controls ListView and ItemView which are exactly designed for your scenario.

Xiyuan Shen:

I am doubtful that the server side UpdatePanel control will provide what you are looking for. However, Atlas provides two client side controls ListView and ItemView which are exactly designed for your scenario.

Thank you. I will try it. But this does kind of get rid of my nice drag and drop abilities doesnt it?

you can bind a dragDropList behavior to the ListView and a dataSourceDropTarget to the ItemView to achive the DND

Xiyuan Shen:

you can bind a dragDropList behavior to the ListView and a dataSourceDropTarget to the ItemView to achive the DND

Sorry, I should have been clearer. I was referring to the drag and drop controls of Visual Studio 2005. I paid $800 for it. I don't like not being able to use it like the other controls. Hopefully, there will be a way to add drag and drop Atlas controls in the IDE's toolbox one day.

Checkout Scott Guthrie's video athttp://atlas.asp.net/Default.aspx?tabid=47

It's an excellent tutorial on getting started with Atlas. It combines GridView and Details View, with some filtering. You can also download for offline viewing.

petehbourne:

Checkout Scott Guthrie's video athttp://atlas.asp.net/Default.aspx?tabid=47

It's an excellent tutorial on getting started with Atlas. It combines GridView and Details View, with some filtering. You can also download for offline viewing.

I have watched it, but could not see where he selected a value in the gridview and populated a detailsview. He did it the other way around it looks like.

Hopehttp://forums.asp.net/thread/1247115.aspx can provide you some help

How can I implement PopupControlExtender with Calendar in EditItemTemplate in GridView?

Hello,

I've to provide the user in my company with an editable gridview. When clicking on "edit" button there should be available a textbox with the ability to enter a date. This datevalue should come from a calendar.

I would like to have the calendar popuped at the bottom of the textbox.

I looked to the SampleWebsite of AtlasControlToolkit and had success to build a new aspx page with a textbox, a calendar and a PopupControlExtender.

For my question I also searched a lot in the internet and in this forum, but I didn't find the solution which works in my WebApplication.

I develop in VB with Visual Studio .NET 2005, SQL 2005 and have the newest Version of Atlas, AtlasControlTookit and AtlasControlExtender installed.

Could anybody help me?

Thanks a lot.

Paul
I'm not sure I understand your question, but generally you just put the Textbox and PopupControlExtender into the EditTemplate, and I think you can put the calendar control outside of the GridView and just reference it.
Hi, thanks for your advise.

Does this work equally well with a calender control in the footer? My code is as follows.

<asp:GridView ID="gvMisc" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="odsTrans" EmptyDataText="No data" ShowFooter="True" OnRowCommand="gvMisc_RowCommand" OnRowDataBound="gvMisc_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="From" SortExpression="dtFrom">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("dtFrom") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label33" runat="server" Text='<%# Bind("dtFrom", "{0:dd MMM yyyy}") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtFrom" runat="server" CausesValidation="True" ValidationGroup="Validation_Footer"></asp:TextBox>
<atlas:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<atlasToolkit:PopupControlExtender ID="PopupControlExtenderFromDate" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="txtFrom" PopupControlID="calFrom" Position="Right" />
</atlasToolkit:PopupControlExtender>
</ContentTemplate>
</atlas:UpdatePanel>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Calendar ID="calFrom" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" OnSelectionChanged="calFrom_SelectionChanged" Width="160px">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>

and on the server

protected void calFrom_SelectionChanged(object sender, EventArgs e)
{
PopupControlExtender pce = (PopupControlExtender)gvMisc.FooterRow.FindControl("PopupControlExtenderFromDate");
pce.Commit(calFrom.SelectedDate.ToString("dd MMM yyyy"));
}

How Can i Get the new Values from the PopupWindow in Atlas ModalPopupWindow with samples

if i change the textbox values in Popupwindow and if i click the ok button (ServerSide code) I cant get the new values from the popup window in modalpopupExtender.Anyone Please help me how can i get the new values from the popupwindow in atlas modalpopupExtender.Explain with simple example.

Thanks

Hi,

Try this:

<%@. Page Language="VB" %>

<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TextBox1.Text = DateTime.Now.ToString()
End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">
<ContentTemplate>
<asp:Panel ID="Panel1" onscroll="javascript:saveScroll();" runat="server" Height="50px" Width="125px" Style="position: static;
overflow: scroll; height: 350px; border: solid 1px blue; background-color: White;
display: none;">
<table border="0" cellpadding="0" cellspacing="0" width="480px">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="Update" OnClick="Button1_Click" />
<asp:Button ID="Button3" runat="server" Text="Close" />
<asp:Button ID="Button4" runat="server" Text="OK" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
<asp:Button ID="Button2" runat="server" Text="Show" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" OkControlID="Button4"
CancelControlID="Button3" TargetControlID="Button2">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

<script type='text/javascript'>
var scrollLeft = 0;
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args) {
document.getElementById('Button2').click();
setScroll();
}

function setScroll()
{
document.getElementById('<%= Panel1.ClientID %>').scrollLeft = scrollLeft;
}

function saveScroll()
{
scrollLeft = document.getElementById('<%= Panel1.ClientID %>').scrollLeft;
}
</script>

</body>
</html>

Get the value in javascript via "document.getElementById('TextBox1').value".

Best Regards