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

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?
LVL 3
Abdu_AllahAsked:
Who is Participating?
 
AmarIs26Connect With a Mentor Commented:
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
 
AmarIs26Commented:
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
 
Abdu_AllahAuthor Commented:
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
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
AmarIs26Commented:
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
 
Abdu_AllahAuthor Commented:
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
 
AmarIs26Commented:
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
 
Abdu_AllahAuthor Commented:
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
 
AmarIs26Commented:
Also you dont need the code in the OnLoad event. All that can go. :)
0
 
Abdu_AllahAuthor Commented:
Actually I want to retreive the arguments data in the Onload function how can I do that?
0
 
AmarIs26Commented:
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
 
Abdu_AllahAuthor Commented:
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
 
Abdu_AllahAuthor Commented:
Thank you man.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.