Add checkbox to ASP.NET grid view

Question

I am trying to enable bulk deleting in my web app. The data I am displaying is in a GridView and I want to add a column which would contain one checkbox (or any alternative) for every row. The user could mark rows to delete and then delete all of them at once.

When I add a CheckBoxField, it must be bound to a column which I, naturally, don't have in the DataTable. I tried adding a new column to the DataTable programatically, but it is rendered as read-only whatever I do.

The data is retrieved from the DB into a DataTable, which I add to a DataSet and bind to the GridView as its data source.

Is there a way I could achieve this?

How do you want to delete ? in a button click ? If so why do you need a column you can just check the grid for checked columns right? — Krishna
– Krishna, Commented Apr 28, 2017 at 14:01
@Krishna Yes, on a click of a button all selected should be deleted. But I don't know how to select the rows. CheckBox column is data bound, so I can't use that. Renders as read only. — dzenesiz
– dzenesiz, Commented Apr 28, 2017 at 14:05
That's what I am saying, there's no need for it to be data bound — Krishna
– Krishna, Commented Apr 28, 2017 at 14:06
But how to add an editable checkbox to every row which is not data bound? — dzenesiz
– dzenesiz, Commented Apr 28, 2017 at 14:08

VDWWD · Accepted Answer · 2017-04-29 09:45:41Z

7

You can add a TemplateField to your GridView with the CheckBox. You can even add one in the header for a "select all" checkbox. You will still need a separate delete button

<asp:GridView ID="GridView1" runat="server">
    <Columns>

        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" CssClass="headerCheckBox" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox2" runat="server" CssClass="rowCheckBox" />
            </ItemTemplate>
        </asp:TemplateField>

    </Columns>
</asp:GridView>

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= GridView1.ClientID %> .headerCheckBox").change(function (e) {
            $("#<%= GridView1.ClientID %> .rowCheckBox input").each(function () {
                $(this).prop("checked", $(e.target).prop("checked"));
            });
        });
    });
</script>

edited Apr 29, 2017 at 9:45

answered Apr 28, 2017 at 14:07

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VDWWD Over a year ago

I've added a javascript function that checks/unchecks all the checkboxes if the header is clicked.

Collectives™ on Stack Overflow

Add checkbox to ASP.NET grid view

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related