Question 226660 in Html Question posted in
Some basic documentation can be found here.

Div inside a html table not showing when visibility is changed in code behind

I hope someone could help me. I am trying to do something which sounds simple and I am sure I have done this in the past but I am struggling to get this working. Any help will be appreciated.

I have a html table with the rows (tr) as a runat server so I can decide whether to show them or not, but this is all dependent on if there is anything to show in the cells for a given row. For example if the first row does not have any data in either of the two cells (td) then there is no reason to show row 1, and so on for the next row. This is all in ASP.NET

Initially I tried the following

<table>
  <tr id="row1" runat="server" visible="false">
    <td id="col1Row1" runat="server" visible="false">
      * SOME STUFF HERE EG CONTROLS, DATA ETC
    </td>
    <td id="col2Row1" runat="server" visible="false">
      * SOME STUFF HERE EG CONTROLS, DATA ETC
    </td>
  </tr>
  <tr id="row2" runat="server" visible="false">
    <td id="col1Row2" runat="server" visible="false">
      * SOME STUFF HERE EG CONTROLS, DATA ETC
    </td>
    <td id="col2Row2" runat="server" visible="false">
      * SOME STUFF HERE EG CONTROLS, DATA ETC
    </td>
  </tr>
</table>

Now in the code behind using VB.NET I have routines to show data from a data base, and depending on the data will determine whether to show anything in the td. So lets say for example the following code, I have one td which is visible and the other not.

col1Row1.Visible = False
col2Row1.Visible = True

row1.visible = (col1Row1.Visible OR col2Row1.Visible)

This shows that the rows visibility is dependent on if their cells is visible (which in turn will be dependent on the data). This did not seem to work, so I thought as this is a table maybe it won’t allow me to change the .Visible property for it, so instead I changed my code to looks like the following

<table>
      <tr id="row1" runat="server" visible="false">
        <td id="col1Row1">
          <div id="Col1Data1" runat="server" visible="false">
            * SOME STUFF HERE EG CONTROLS, DATA ETC
          </div>
        </td>
        <td id="col2Row1">
          <div id="Col2Data1" runat="server" visible="false">
            * SOME STUFF HERE EG CONTROLS, DATA ETC
          </div>
        </td>
      </tr>
      <tr id="row2" runat="server" visible="false">
        <td id="col1Row2">
          <div id="Col1Data2" runat="server" visible="false">
            * SOME STUFF HERE EG CONTROLS, DATA ETC
          </div>
        </td>
        <td id="col2Row2">
          <div id="Col2Data2" runat="server" visible="false">
            * SOME STUFF HERE EG CONTROLS, DATA ETC
          </div>
        </td>
      </tr>
    </table>

As you can see I changed the html/asp.net to include a division and instead to make then visible/invisible. My code behind VB.net looks like

Col1Data1.Visible = False
Col2Data1.Visible = True
    
row1.visible = (Col1Data1.Visible OR Col2Data1.Visible)

So from here we would be setting the visibility of the div depending on the data, for example I have quickly just set them up (obviously I chose to show one and not to show one, but it could be any number of permutations). However this still does not work, and debugging seems to suggest that the division in is not changing it’s visibility status.

Col1Data1.Visible = False
Col2Data1.Visible = True

I know the visibility of the division can be changed like this as I have done it throughout this same screen I am working on, but this does not seem to work when it is inside a table. Anyone know what I am doing wrong and how to get this working. Bare in mind that this is a very simple form of code of what I am doing as I end up passing the div objects through to different places as it gets data from different places which determines its visibility, however during my investigation I can see this is not changing it regardless when in a table.

Thanks for any help

Tags:

2

Answers


  1. 0

    You can use javascript to change visibility of rows.

    <script>
var dataCol= document.getElementById('Col1Data1');

       if(dataCol)){
         dataCol.show();
        }
</script>
    Login or Signup to reply.
  2. 0

    What you have works, it just that you MUST turn on a whole row before any change of the columns can occur.

    So, this markup:

        <table >
      <tr id="row1" runat="server" visible="false">
        <td id="col1Row1" runat="server" visible="false">
          my col1 row 1
        </td>
        <td id="col2Row1" runat="server" visible="false">
          my col2 row 1
        </td>
      </tr>
      <tr id="row2" runat="server" visible="false">
        <td id="col1Row2" runat="server" visible="false">
          my col1 row 2
        </td>
        <td id="col2Row2" runat="server" visible="false">
          my col2 row 2
        </td>
      </tr>
    </table>
    <br />
        <asp:Button ID="Button1" runat="server" Text="test"
            OnClick="Button1_Click"
            />

    And for the button, then this:

    Protected Sub Button1_Click(sender As Object, e As EventArgs)

    row1.Visible = True  ' must turn on row, to show colums
    col1Row1.Visible = True


End Sub

    And the result is this:

    enter image description here

    So, if the whole row is hidden, then of course trying to show/hide columns will not work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search