none
Seleccionar todos los CheckBoxes de un TemplateField a partir de un CheckBox en su cabecera RRS feed

  • Pregunta

  • Buenas, tengo un gridview en el que tengo una columna (TemplateField) formado por checkboxes

    <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false">
          <RowStyle BackColor="#EFF3FB" />
          <Columns>
            <asp:TemplateField HeaderText="Elegir">
              <HeaderTemplate>
                <asp:CheckBox ID="chkHeader" runat="server" />
              </HeaderTemplate>
              <ItemTemplate>
                <asp:CheckBox ID="chkItem" runat="server" CssClass="caja" />
              </ItemTemplate>
            </asp:TemplateField>       
          </Columns>      
    </asp:GridView>
    

    Para seleccionar y deseleccionar todos los checkboxes que contiene el gridview, basandome en un ckeckbox que se encuentra fuera(chkTododel gridview hago lo siguiente:

    $("#<%=chkTodo.ClientID%>").change(function(){
      var seleccionado = this;
      if (seleccionado.checked==true)
         $(".caja :checkbox").attr("checked",true);
      else 
         $(".caja :checkbox").attr("checked",false);
     }); 
    

    Si bien es cierto que el codigo de arriba funciona correctamente, cuando intento hacer lo mismo usando el checkbox  que he colocado en la cabecera del TemplateField (chkHeader) , tengo los siguientes problemas:

    1. Ya no se visualiza el HeaderText del TemplateField ( "Elegir")
    2. El mas importante, cuando intento ejecutar el mismo codigo jquery de arriba pero usando el chkHeader que se encuentra en la cabecera

            obtengo el siguiente error Mensaje de error del compilador: BC30451: No se ha declarado el nombre 'chkHeader'.  Como si no hubiera declaro el checkbox.

    El codigo fuente de la pagina es el siguiente: 

    <table id="Gridview1" style="color:#333333;border-collapse:collapse;">
      <tr>
    	<th scope="col">
           <input id="Gridview1_ctl01_chkHeader" type="checkbox" name="Gridview1$ctl01$chkHeader" />
        </th>   
      </tr>
      <tr>
    	<td>
          <span class="caja"><input id="Gridview1_ctl02_chkItem" type="checkbox" name="Gridview1$ctl02$chkItem" />
          </span>
         </td>
      </tr>
      <tr>
    	<td>
           <span class="caja"><input id="Gridview1_ctl03_chkItem" type="checkbox" name="Gridview1$ctl03$chkItem" />
           </span>
         </td>
      </tr>
    </table>
    
    

    Alguna idea porque no puedo hacer referencia el checkbox que se encuentra en la cabecera del TemplateField(chkHeader)???

    Gracias de antemano


     

     

     

     

    sábado, 11 de junio de 2011 23:20

Respuestas

  • 1-

    imagino que lo haces en el

    si es asi es logico que el HeaderText no se visualice porque tu lo redefines, deberias poner el texto que quieres visualizar directo en el tremplate

    <asp:templatefield>
    <headerstyle backcolor="Navy"
    forecolor="White"/>
    <itemtemplate>
    <%#Eval("au_fname")%>
    <%#Eval("au_lname")%>
    </itemtemplate>
    <headertemplate>
    <asp:checkbox id="ShowAllCheckBox"
    text="Show All"
    checked="True"
    autopostback="true"
    oncheckedchanged="SelectAllCheckBox_CheckedChanged"
    runat="server"/>
    <asp:Label runat="server" Text="Seleccionar Todos">
    </headertemplate>
    </asp:templatefield>

    como veras tu controlas el template del header

     



    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    • Marcado como respuesta alexander9641 domingo, 12 de junio de 2011 16:04
    domingo, 12 de junio de 2011 1:07
  • 2 -

    el tema es que el chek esta dentro del gridview, y esto ahce que no sea accesible de forma directa

    en este caso el evento deberias ponerlo directo en el control, o sino seleccionarlo por emdio de los selectores de jquery

    $("#<%=GridView1.ClientID%> tr:first :checkbox").change(function(){
      var seleccionado = this;
      if (seleccionado.checked==true)
         $(".caja :checkbox").attr("checked",true);
      else
         $(".caja :checkbox").attr("checked",false);
     });

    no probe la efectividad de este selector de jquery pero la idea es identificar el grid y de alli el priemr tr que seria el header y buscar el unico chekc que es el chkHeader para asignarle el evento

     

    lo que no estoy seguri si debe ir un espacio entre first o no

    $("#<%=GridView1.ClientID%> tr:first:checkbox")

    o sea de esta otra forma, pero buenoa la idea esta planteada solo es cuestio de ir probando

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    • Marcado como respuesta alexander9641 domingo, 12 de junio de 2011 16:04
    domingo, 12 de junio de 2011 1:19

Todas las respuestas

  • 1-

    imagino que lo haces en el

    si es asi es logico que el HeaderText no se visualice porque tu lo redefines, deberias poner el texto que quieres visualizar directo en el tremplate

    <asp:templatefield>
    <headerstyle backcolor="Navy"
    forecolor="White"/>
    <itemtemplate>
    <%#Eval("au_fname")%>
    <%#Eval("au_lname")%>
    </itemtemplate>
    <headertemplate>
    <asp:checkbox id="ShowAllCheckBox"
    text="Show All"
    checked="True"
    autopostback="true"
    oncheckedchanged="SelectAllCheckBox_CheckedChanged"
    runat="server"/>
    <asp:Label runat="server" Text="Seleccionar Todos">
    </headertemplate>
    </asp:templatefield>

    como veras tu controlas el template del header

     



    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    • Marcado como respuesta alexander9641 domingo, 12 de junio de 2011 16:04
    domingo, 12 de junio de 2011 1:07
  • 2 -

    el tema es que el chek esta dentro del gridview, y esto ahce que no sea accesible de forma directa

    en este caso el evento deberias ponerlo directo en el control, o sino seleccionarlo por emdio de los selectores de jquery

    $("#<%=GridView1.ClientID%> tr:first :checkbox").change(function(){
      var seleccionado = this;
      if (seleccionado.checked==true)
         $(".caja :checkbox").attr("checked",true);
      else
         $(".caja :checkbox").attr("checked",false);
     });

    no probe la efectividad de este selector de jquery pero la idea es identificar el grid y de alli el priemr tr que seria el header y buscar el unico chekc que es el chkHeader para asignarle el evento

     

    lo que no estoy seguri si debe ir un espacio entre first o no

    $("#<%=GridView1.ClientID%> tr:first:checkbox")

    o sea de esta otra forma, pero buenoa la idea esta planteada solo es cuestio de ir probando

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    • Marcado como respuesta alexander9641 domingo, 12 de junio de 2011 16:04
    domingo, 12 de junio de 2011 1:19
  • 2 -

    el tema es que el chek esta dentro del gridview, y esto ahce que no sea accesible de forma directa

    Supongo que más o menos es lo mismo que cuando se intenta acceder programáticamente a los controles definidos dentro de un Template, que primero tenemos que acceder a la Celda y luego a su colección de controles y también supongo que el futuro cuando pretenda acceder a un control contenido dentro de otro primero debo tratar de acceder al control contenedor, no es así??

    lo que no estoy seguri si debe ir un espacio entre first o no

    $("#<%=GridView1.ClientID%> tr:first:checkbox")

    o sea de esta otra forma, pero buenoa la idea esta planteada solo es cuestio de ir probando

    Así es como debe quedar, con espacio después de first

     $("#<%=Gridview1.ClientID%> tr:first :checkbox")
    

    Muchísimas gracias 

    domingo, 12 de junio de 2011 15:28
  •  

     también supongo que el futuro cuando pretenda acceder a un control contenido dentro de otro primero debo tratar de acceder al control contenedor, no es así??

    exacto, recuerda que desde .net para acceder al contro usas el FindControl() aplciado a la row que lanza el evento o la accion, o sea simrpe buscas el control dentro del row concreto, no se puede acceder directo por el nombre

     

    Así es como debe quedar, con espacio después de first

    excelante, si no esta 100% seguro


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina
    domingo, 12 de junio de 2011 16:00
  •  

     también supongo que el futuro cuando pretenda acceder a un control contenido dentro de otro primero debo tratar de acceder al control contenedor, no es así??

    exacto, recuerda que desde .net para acceder al contro usas el FindControl() aplciado a la row que lanza el evento o la accion, o sea simrpe buscas el control dentro del row concreto, no se puede acceder directo por el nombre

     

    Así es como debe quedar, con espacio después de first

    excelante, si no esta 100% seguro

    Entendido y otra vez muchísimas gracias :)
    domingo, 12 de junio de 2011 16:03