Calling Clinet Function from Code Behind (Inside Ajax Update panel)

Hi,

Can anyone please provide information on how I can do this:

I have a GridView control inside an Ajax Update panel and have wired the Selected IndexChanged action to call a Client side Javascript function (ViewReceipt()). Unfortunately it doesn't seem to work except if I take the control outside the update panel.

Have posted my code below..

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("ViewReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
}

Regards..

Peter.

Hi,

Found some posts on this and tried to add the recommended code but still getting a syntax error, hope someone can help out..

code behind:

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("EditReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
//this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
//ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ClientSideCall", sbScript.ToString(), true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), true);

}

Javascript Function:

function EditReceipt()
{
var manager = GetRadWindowManager();
var rwEntry = manager.GetWindowByName("rwReceipt");
}

Regards..

Peter.

Hi Peter,

The problem with your code is that you should specify the last parameter to false in RegisterStartupScript method.

This parameter indicates that <script> tag will be added automatically to wrap the sbScript. Since you've done that manually, so false should be used.

Like this:

ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), false);

Hope this helps.

Hi Peter,

Give full definition of EditScript() function then only I can help to you.

Regards,

Aru

Raymond,

Thanks for the information, I have already implemented a work around by moving the grid outside of the update panel. I'm using a telerik grid which has inbuilt AJAX and there are some clientside events which can be hooked into that has given me the functionality I require, anyway thanks for the information I can use it else where later.

Regards..

Peter

Callbacks in association with Update panel

I've got a Gridview that I've customized with buttons that do callbacks to get context menus and insert stuff in the main Gridview table.

If I put the entire Gridview in an update panel, what is the likelihood that these little custom callbacks will still work? Rephrased: is it a known feature of update panels that they will interfere with, override, or otherwise mess up such callbacks? Or do update panels just respond to submits, or have some other property, that would indicate that they would not interfere with such callbacks?

Any guidance on this would be appreciated ( I hope to have better luck testing this for myself soon.)

Thanks!

hello.

if i'm not mistaken, the scriptmanager intercepts form submission only...

Thanks for the post. That's good news. I'll keep my fingers crossed for the test.

Agradecimento!

Calender Extenders cssClass problem in Gridview

hi all

i have an HTML table in one of gridview's cell which is always hidden at startup. there is one textbox and one calander extender in that HTML table. In the same cell there is Link Button. On click event of that LinkButton i make that hidden table visible.(this process is done on server side). Problem is that when i perform this operation then after that Calander Extender's css class disturbs and does not show the appropriate design.

i dont know why this problem occured. and now this problem is solved automatically. I havn't done any thing for it.. this is really strange

CalendarExtender positioning problem in wide gridview

Hey all, I place a textbox and a calendarextender within an edititemtemplate of a gridview. Everything works fine, but the calendar popup always appears in the same place regardless of the column. In other words, I have 23 columns in a gridview. If I have calendar extenders in there for columns 3, 9, and 23 the popups always appear at the same place instead of right next to their associated textbox. I can't figure out how to get them to stay put. There's no funky CSS issues here. I'm not absolute positioning anything. Thoughts?

Behold an example:

<asp:TemplateFieldHeaderText="Offload"SortExpression="OFFLOAD"HeaderStyle-BackColor="#87CEEB">

ItemTemplate>

<asp:LabelID="lblOFFLOAD"runat="server"Text='<%#Bind("OFFLOAD","{0:d}")%>'Width="70px"/></ItemTemplate><EditItemTemplate><asp:TextBoxID="txtOFFLOAD"runat="server"Text='<%#Bind("OFFLOAD","{0:d}")%>' /><cc1:CalendarExtenderID="CalOFFLOAD"runat="server"TargetControlID="txtOFFLOAD"/></EditItemTemplate></asp:TemplateField>Anyone? Help!
Anyone? Help! Please? :)

It seems I'm having the same problem you are. I guess we are the only ones with this problem because I can't seem to find an answer anywhere and no one has a solution. If you can find out anything please post a reply with the solution and I will do the same.

Thanks,

Mike

CalendarExtender Pops up underneath Fixed Grid Header

Hi, i've used CalendarExtender in my page. There is a gridview, whos header is Fixed by style, by setting GridHeader position: "relative" & top: "auto".

Now when I click the calendar image the popup goes underneath the GridHeader. Have anyone encountered this, Or may give a solution?

thanks in advance.

Hi,

Can you show a small self-sufficient sample?

Sure I can, Test this & help me with a solution, Plz.

using System;using System.Data;using System.Collections.Generic;using System.Configuration;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 _Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) BindData(); }private void BindData() { List<string> data =new List<string>();for (int i = 0; i < 500; i++) data.Add("Data " + i.ToString()); GridView1.DataSource = data; GridView1.DataBind(); }}

Here's the aspx

 
1<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>23<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">5<html xmlns="http://www.w3.org/1999/xhtml">6<head runat="server">7 <title>Untitled Page</title>8 <style type="text/css">9 table th10 {11 position: relative;12 top: expression(this.parentNode.parentNode.13 parentNode.scrollTop-1);14 }15</style>16</head>17<body>18 <form id="form1" runat="server">19 <asp:ScriptManager ID="ScriptManager1" runat="server" />20 <div>21 <table>22 <tr>23 <td>24 <asp:TextBox ID="txtFromDate" runat="server" Width="60px"></asp:TextBox>25 <asp:ImageButton runat="Server" ID="imgFromDate"26 AlternateText="Click to show calendar" CausesValidation="false" />27 </td>28 </tr>29 <tr>30 <td align="center">31 <div style="overflow: auto; height: 100px;">32 <asp:GridView ID="GridView1" runat="server">33 <HeaderStyle BackColor="AliceBlue" />34 </asp:GridView>35 </div>36 </td>37 </tr>38 <tr>39 <td>40 <ajaxToolkit:CalendarExtender ID="cbeFromDate" runat="server" PopupButtonID="imgFromDate"41 TargetControlID="txtFromDate" Format="dd/MM/yyyy">42 </ajaxToolkit:CalendarExtender>43 </td>44 </tr>45 </table>46 </div>47 </form>48</body>49</html>
 

 Thanks for the reply. I thought I'd never get a response.

I found that my calendars were going all over the place until I made the positioning absolute. I just made my whole form absolute so you can try that just to see if it works, that might not be pratical for you so you can try changing only the container for your calendar controls to absolute and maybe that will help.

CalendarExtender obscured by Panel control encapsulating GridView

Often, it is desirable to encase a GridView within a Panel control to delimit the grids size and provide scroll bars, thus, allowing a more WinForm like UI experience. The problem I am running into is that a CalendarExtender included therein, becomes hidden if its associated textbox is close to the lower or right boarder of the panel. One could extend the size of the Panel, but that's not a very aesthetically appropriate solution. Ideally, the z-index should be configurable for the CalendarExtender control so as to be able to force visibility under any circumstances. There are several other posts having to do with a similar problem and Dropdowns. See: http://forums.asp.net/thread/1554180.aspx for more information. Alternatively, it would be great to have the ability to set the visibility persistence so as to force the CalendarExtendar to stay visible until X'ed out. This would at least allow the user to scroll down the grid to see the rest of the Calendar. A third option might be to provide the ability to drag the Control anywhere on the page. Lastly, properties should be provided to set the Controls position relative to the Browser window itself. Ideally, all of these should be included to provide a truly robust and flexible mechanism.

I completely soooo agree with you!, Unfortunatly microsoft leaves things half undone and starts working on something else...

This...until people will ditch MICROSOFT!

CalendarExtender not maintaining position in gridview within scrollable div

Hi,

I posted a few months ago on a similar problem with the popupextenderhttp://forums.asp.net/t/1160340.aspx

I am now trying to do the same thing with a calendarextender however my solution in the above post does not work. Does anyone know how to get the calendarextender to appear correctly when attached to a textbox in an edititemtemplate in a gridview surrounded by a scrollable div?

I have tried to attach the same principles in the above post to the ClientOnShown event but to no avail.

Any help greatly appreciated.

Thanks

Craig

Hi Sonnyikea,

Here is the sample and I have tested on IE7 and Firefox. Please compare it with yours.

<%@. 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">

</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="div-datagrid" style="width: 100%; height: 100px; overflow: auto;" align="center">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1" AllowPaging="True" >
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" OnClientShown="onCEShown">
</ajaxToolkit:CalendarExtender>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
</Columns>
</asp:GridView><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"></asp:SqlDataSource>
</div>
<script type="text/javascript" language="javascript">
function onCEShown(){
alert(1);
}
</script>
</form>
</body>
</html>
If it doesn't work , please feel free to let me know with a tiny and workable sample. Thanks

Best regards,

Jonathan

Thanks Jonathan, I got it working