Mostrar/Ocultar TRs con Javascript

Hay una manera rápida y sencilla de ocultar o mostrar TR con Javascript, es bastante simple.
En este caso voy a mostrar un simple ejemplo que consta de 2 radiobutton que van a mostrar u ocultar determinados TR y por ende determinados filtros (textbox, combos, listas, etc.).

Primero los Script que se pueden poner en la página:

<script language="javascript">
   1:
   2: function opt1_OnClick()
   3: {
   4: trDatos1.style['display'] = display;
   5: }
   6: function opt2_OnClick()
   7: {
   8: trDatos2.style['display'] = display;
   9: }
  10: function OcultarTodos()
  11: {
  12: trDatos1.style['display'] = 'none';
  13: trDatos2.style['display'] = 'none';
  14: }
  15: function Mostrar()
  16: {
  17: var rdo1=window.document.Form1.opt1.checked;
  18: var rdo2=window.document.Form1.opt2.checked;
  19: OcultarTodos();
  20: if (rdo1==true){opt1_OnClick(); return true;}
  21: if (rdo2==true){opt2_OnClick(); return true;}
  22: }

</script>

La función Mostrar se encarga de mostrar uno u otro TR dependiendo de que RadioButton se ha seleccionado y llamará a la función correspondiente, previamente ocultado Todos los TR.
En el Body de la pagina hay que colocar (en el evento OnLoad) la función Mostrar() de esta manera:

<body onload="Mostrar()">

Luego hay que crear los TR donde van a ir los controles de esta manera:

<TR id="trDatos1" runat="server">
<TD><asp:label id="lblUF">Dato 1</asp:label></TD>
<TD><asp:textbox id="TextBox1" ></asp:textbox></TD>
</TR>
<TR id="trDatos2" runat="server">
<TD><asp:label id="lbldatos2">Datos 2</asp:label></TD>
<TD><asp:textbox id="txt2"></asp:textbox></TD>
<TD><asp:button id="Button1" Text="Boton" runat="server"></asp:button></TD>
<TD><asp:dropdownlist id="cbo2"></asp:dropdownlist></TD>
</TR>

A los 2 TR es importante ponerle un ID para poder llamarlos mas fácilmente, de hecho sino es casi imposible, y que sean runat=Server.
En este ejemplo hice 2 TR con algunas cosas simples pero ahí va lo que se necesite.
Para iniciar la página yo decidí que estén los 2 TR ocultos, de esta manera, poniendo esto en el Page_Load:

trDatos1.Style("display") = "none"
trDatos2.Style("display") = "none"

Ventajas:
Es rápido y con poco código se soluciona, para mostrar u ocultar Textbox es ideal.

Desventaja:
Al esta todo del lado del Cliente, justamente esa es la desventaja viaja todo, si el cliente nunca entra en la opción 2 estaríamos llevándole los datos del a opción 2 de todas maneras.

Este es el primer resultado:

Resultado1

Este el segundo:
Resultado2

 

Saludos.

 

 

Anuncios

Div con Scroll Horizontal/Vertical

Hace poco tuve que agregar unas columnas a una grilla existente en un sistema y me encontré con que se excedía de la pantalla y aparecía una barra de scroll en el explorador para poder ver la grilla, por supuesto que el cliente no quería que aparezca un scroll en el explorador y buscando encontré esta solución para poder ver un scroll tanto vertical como horizontal en un Div, esto esta testeado tanto para IE como para Firefox y es muy sencillo.

<div style=” OVERFLOW: auto; WIDTH: 536px; TOP: 48px; HEIGHT: 232px>
 <!--Inserte Grilla Aqui -->
</div>

Saludos.