?
Solved

How to refresh updatepanel content when user click on table row within that control?

Posted on 2008-10-20
12
Medium Priority
?
1,157 Views
Last Modified: 2008-10-21
Hi, I have updatepanel control which contains a table, I want to execute a serverside function and then refresh that update control once user double click on a table row, how can I do that?
0
Comment
Question by:Abdu_Allah
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 6

Expert Comment

by:AmarIs26
ID: 22756614
If your Table is inside the update panel and your Table is initiating the postback to the server then the updatepanel will automatically update providing the UpdateMode is not set or is not set to Confitional.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Table... />
</ContentTemplate>
</asp:UpdatePanel>
If it is set to Conditional then in your server side method you must update the updatepanel by calling the method.
UpdatePanel1.Update();
If your table is outside the updatepanel and you still want to update, then you must set the UpdateMode="Conditional" and then register the Table control for Asyncpostback using the scriptmanager. (Note: that if your updatepanel's updatemode is not set or is set to always then you dont need to register for asyncpostback).

ScriptManager.RegisterAsyncPostBackControl(Table...
 
0
 
LVL 3

Author Comment

by:Abdu_Allah
ID: 22756651
My table is inside the updatepanel. I want to refresh the content of updatepanel once user double click on a row in that table.
0
 
LVL 6

Expert Comment

by:AmarIs26
ID: 22756774
Sorry the above solution assumed you already are calling the server side function and your updatepanel is not updating. If you just want to know how to call the server side function from row double click then...

Also you can call the following code in javascript from the doubleclick event of the html row and then add this javascript to your page.
<script language="javascript" type="text/javascript">
function CallServerFunction(rowID,arg)
{
  __doPostBack(postBackDataID,arg)
}
</script>
So imagine your table is like this. Because it is a htmltable we need to add runat="server" and the id property

<table style="width: 100%;" runat="server" id="testTable">
<tr>
<td>
asdsadasd
</td>
</tr>
</table>
in the serverside code behind. This is basically trying to see if a row has been double clicked, if so call our ServerFunction.

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

string eventTarget = Request.Form["__EVENTTARGET"];
if (!string.IsNullOrEmpty(eventTarget) && eventTarget== "ServerFunction")
{
//Call Server Function
}
}
 Finally, Ensure that we attach double click event handlers to each table row. This will call the javascript function passing the serverside function name to execute.

protected override void OnPreRender(EventArgs e)
{
foreach (HtmlTableRow row in testTable.Rows)
{
row.Attributes.Add("ondblclick" , "javascript:CallServerFunction('ServerFunction','row1');");
}
base.OnPreRender(e);
}
 
 
 
 
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 3

Author Comment

by:Abdu_Allah
ID: 22756973
Thank you for that code but I noticed that the postback refresh the entire page not only Updatepanel content, how to make it just refresh just updatepanel content only. Something else how can I get the arg that I sent from via CallServerFunction function.
0
 
LVL 6

Expert Comment

by:AmarIs26
ID: 22757141
Sorry the previous javascript had an error. here is the code that works fully with args being passed. Basically you need to add a hiddenfield in the update panel which will hold your arg and server name

<asp:HiddenField ID="HiddenField1" runat="server" OnValueChanged="HiddenField1_ValueChanged" />
Then when you call the CallServerFunction (javascript one) it will populate the hidden field with the server function id (not recommended use some sort of key name) + arg. This can be retrieved on teh server side in the ValueChanged event of the hidden field.

<script language="javascript" type="text/javascript">
function CallServerFunction(rowID,arg)
{
var hiddenID = '<%= HiddenField1.ClientID %>';
var hiddenField = document.getElementById(hiddenID);
hiddenField.value = rowID + ","+arg;
__doPostBack(hiddenID,arg)
}
</script>
 So all you  need to do is
HiddenField1.Value
and split that with "," to separate the function name and arg.
 
 
0
 
LVL 3

Author Comment

by:Abdu_Allah
ID: 22757145
ooops I forgot the runat server property for the updatepanel, it works fine but how can I get the arguments I sent via __doPostBack(postBackDataID,arg)  in the Onload function that ?
0
 
LVL 6

Expert Comment

by:AmarIs26
ID: 22757162
Also you dont need the code in the OnLoad event. All that can go. :)
0
 
LVL 3

Author Comment

by:Abdu_Allah
ID: 22757180
Actually I want to retreive the arguments data in the Onload function how can I do that?
0
 
LVL 6

Expert Comment

by:AmarIs26
ID: 22757201
then you could use the piece of code i asked you to remve
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);

string eventTarget = Request.Form["__EVENTTARGET"];
if (!string.IsNullOrEmpty(eventTarget) && eventTarget== "HiddenField1")
{
      string value = HiddenField1.Value;
//     value.Split(new string[]{","});
}
}  
0
 
LVL 3

Author Comment

by:Abdu_Allah
ID: 22757390
AmarIs26, if I place an asp:button inside the updatepanel and then click it the postback event fired successfully and only the updatepanel area is refreshed but if I double click on the table row the postback event fired successfully but the entire page is refreshed!
0
 
LVL 6

Accepted Solution

by:
AmarIs26 earned 2000 total points
ID: 22757508
Here is the full solution as described in the posts. It works on my machine fine without the page refresh.

<script language="javascript" type="text/javascript">
function CallServerFunction(rowID,arg)
{
var hiddenID = '<%= HiddenField1.ClientID %>';
var hiddenField = document.getElementById(hiddenID);
hiddenField.value = rowID + ","+arg;
__doPostBack(hiddenID,arg)
}
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:HiddenField ID="HiddenField1" runat="server" OnValueChanged="HiddenField1_ValueChanged" />
<table style="width: 100%;" runat="server" id="testTable">
<tr>
<td>
asdsadasd
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
 
-------------------Code behind ----------------
 

protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!string.IsNullOrEmpty(HiddenField1.Value))
{
//Call Server Function
string [] args = HiddenField1.Value.Split(new string[] { "," },StringSplitOptions.None);
string functionName = args[0];
string arg = args[1];
if (functionName == "Function1")
{
// Call Function 1
}
}
}

protected override void OnPreRender(EventArgs e)
{
foreach (HtmlTableRow row in testTable.Rows)
{
row.Attributes.Add("ondblclick" , "javascript:CallServerFunction('ServerFunction','row1');");
}
base.OnPreRender(e);
}

protected void HiddenField1_ValueChanged(object sender , EventArgs e)
{
// Reset the value so next time change event occurs.
HiddenField1.Value = string.Empty;
}
 
0
 
LVL 3

Author Comment

by:Abdu_Allah
ID: 22765310
Thank you man.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question