ansaurus

Question

Cant seem to hide TableRow on AJAX postback

Answer 1

A:

Here's the solution: ASPX page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">

<asp:ScriptManager ID="scriptMgr" runat="server" />


<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
  <asp:CheckBox runat="server" ID="cbViewPages" Checked="true" OnCheckedChanged="OnViewPages"  AutoPostBack="true"/>


<asp:Table runat="server">

<asp:TableRow>
<asp:TableCell>123</asp:TableCell>
</asp:TableRow>

<asp:TableRow runat="server" ID="PagesRow">
<asp:TableCell>Row To Hide</asp:TableCell>
</asp:TableRow>
</asp:Table>

</ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="cbViewPages" EventName="CheckedChanged"/>
  </Triggers>
</asp:UpdatePanel>


</form>
</body>
</html>

Code behind page:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Net;
using System.IO;

public partial class index : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
  }

  protected void OnViewPages(object sender, EventArgs e)
  {
    if(cbViewPages.Checked)
    {
      PagesRow.Visible = true;
    }
    else
    {
      PagesRow.Visible = false;
    }
  }
}

Petras 2010-01-22 00:56:09

Answer 2

+1 A:

A couple of options. You could put the update panel around the entire table (this is what Petras is suggesting). You could also use JavaScript to do this. In the event that fires when your checkbox is checked/unchecked, just call

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "setRowVisibility", "setRowVisibility(" & IIf(cbViewPages.Checked, "true", "false") & ");", True)

This will call a JavaScript function you can define on your page like this:

function setRowVisiblity(visible) {
  var row = document.getElementById('<%=PagesRow.ClientID %>');
  if (visible) {
    row.style.display = 'table-row';
  } else {
    row.style.display = 'none';
  }
}

This is MUCH more efficient than using and Update Panel, but it's a little more work. I prefer efficiency, but that's just me. :)

Brandon Montgomery 2010-01-22 04:14:56

ansaurus

tags:

views:

answers:

Cant seem to hide TableRow on AJAX postback

related questions