Agregar CheckBox en GridView de ASP.NET C#

Es posible Agregar CheckBox en GridView de ASP.NET C# a cada una de las filas que la componen, mediante un TemplateField en las columnas.

Hay ocasiones en las que necesitamos colocar checkbox en un GridView para la selección de elementos cargados, esta tarea es un poco diferente al control CheckBoxList.

Para realizar esta tarea utilizare el siguiente GridView, simplemente agregando el código necesario para el tema:

<asp:GridView ID="gvTablaUno" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Numero" HeaderText="Numero" />
        <asp:BoundField DataField="Mes" HeaderText="Mes" />
    </Columns>
</asp:GridView>

Podría interesarte Cargar datos en GridView a partir de un DataTable en ASP.Net C#  

Agregar CheckBox al GridView

Todas las modificaciones para agregar los check se realiza a la página aspx del proyecto WebForm, sin depender la forma de cargar los datos.

Podemos agregar los check mediante el control TemplateField y dentro de este agregar el control check.

<asp:TemplateField>
    <ItemTemplate>
        <asp:CheckBox ID="chbItem" runat="server" />
    </ItemTemplate>
</asp:TemplateField>
  • La propiedad ID es funcional al momento de trabajar desde el servidor, junto con la propiedad runat.
  • Mediante la propiedad Text (nos esta agregado) se puede agregar una descripción junto al checkbox.

Por lo tanto, el código completo quedara de la siguiente manera:

<asp:GridView ID="gvTablaUno" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chbItem" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Numero" HeaderText="Numero" />
        <asp:BoundField DataField="Mes" HeaderText="Mes" />
    </Columns>
</asp:GridView>
Agregar CheckBox en GridView de ASP

En el ejemplo solo se están agregando checkbox a las filas cargadas, en el encabezado no se está agregando un checkbox ni texto.

Podría interesarte Modificar contenido de GridView en tiempo de ejecución en ASP.Net C#  

Para agregar un texto al encabezado mediante la propiedad HeaderText en el control TemplateField.

<asp:TemplateField HeaderText="Checks">
</asp:TemplateField>
GridView checks texto encabezado

Así también podemos agregar un checkbox en el encabezado del grid mediante la etiqueta HeaderTemplate en el control TemplateField.

<HeaderTemplate>
    <asp:CheckBox ID="chbTodos" runat="server" />
</HeaderTemplate>
Check en encabezado Gridview

Sin embargo, cuando se agrega un check en el encabezado el texto agregado en el TemplateField se elimina.

Para agregar el texto nuevamente al encabezado junto al check, se debe agregar la propiedad Text en la etiqueta CheckBox.

<asp: Checkbox ID="chbTodos" runat="server" Text="Checks" />
Check con texto encabezado grid

Podría interesarte Llenar un control CheckBoxList en ASP.Net C#  

Por último, les dejo el código completo, para mostrar la imagen anterior:

<asp:GridView ID="gvTablaUno" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chbTodos" runat="server" Text="Checks" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chbItem" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Numero" HeaderText="Numero" />
        <asp:BoundField DataField="Mes" HeaderText="Mes" />
    </Columns>
</asp:GridView>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *