Solved

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

Posted on 2008-10-20
12
1,106 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
  • 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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 500 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this 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 …
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now