how to check status of checkboxes in gridview columns on click of button

Question

Hi, T have used checkbox column in gridview. On click of a linkbutton, it should be checked that checkboxes in gridview are checked or not. If none check box is checked then it should display alert("Check at leat one check box").

Answer 1

I havnt used the checkbox in grid view but would you not do a for loop around the columns in gridview and check the state? Myabe add a count and if 0 then alert.

Answer 2

var grid = document.getElementById("gridId");  //Retrieve the grid    
    var inputs = grid.getElementsByTagName("input"); //Retrieve all the input elements from the grid
    var isValid = false;
    for (var i=0; i < inputs.length; i += 1) { //Iterate over every input element retrieved
        if (inputs[i].type === "checkbox") { //If the current element's type is checkbox, then it is wat we need
            if(inputs[i].checked === true) { //If the current checkbox is true, then atleast one checkbox is ticked, so break the loop
                isValid = true;
       break;
            }
        }
    }
    if(!isValid) {
     alert('Check at least one checkbox');
    }

Answer 3

You will have to add some custom Javascript to your page for the client-side alert to show. Here's a method that I've written that works with a GridView called 'GridView1' (this should be the default name if you've just dragged the control onto your ASPX page):

<script type="text/javascript">
    function ClientCheck() {
        var valid = false;
        var gv = document.getElementById("GridView1");

        for (var i = 0; i < gv.all.length; i++) {
            var node = gv.all[i];
            if (node != null && node.type == "checkbox" && node.checked) {
                valid = true;
                break;
            }
        }
        if (!valid) {
            alert("Invalid. Please select a checkbox to continue.");
        }

        return valid;
    }
</script>

You can see that it sets a variable to the GridView control to start with, then iterates through all the children in a for loop. If the child is a checkbox and it is checked, then we set the valid variable to true. If we get to the end of the iteration and no checked checkboxes are found, then valid remains false and we execute the alert.

To link this into your GridView on your ASPX page, first make the button column a TemplateField and surround the LinkButton with your client-side code. If you've used the designer to set up your columns, you can use the "Convert this field into a TemplateField" link in the column editor). Here's an example of the source you'll end up with:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Button Field" ShowHeader="False">
            <ItemTemplate>
                <span onclick="return ClientCheck();">
                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="IDClick" Text='<%# Eval("YourDataSourceItem") %>'></asp:LinkButton>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
        // ...your remaining columns...

Using the TemplateField lets us add any client-side code we like. Here we're adding a span and using onclick to call our ClientCheck method.

If you aren't bothered about the alert, you could achieve your aims by using a CustomValidator control, which executes on the server-side.

I hope this helps.

Answer 4

Hi.. I found the answer. and its working...

function checkBoxselectedornot() {

       var frm=document.forms['aspnetForm'];
       var flag=false;
       for(var i=0;i<document.forms[0].length;i++)
       {
           if(document.forms[0].elements[i].id.indexOf('chkDownloadSelectedEvent')!=-1)
           {
                 if(document.forms[0].elements[i].checked)
                 {
                      flag=true
                 }  
           }
       } 
      if (flag==true)
      {
        return true
      }else
      {
        alert('Please select at least one Event.')
        return false
      }

}

and girdview code is...

            <asp:BoundField ItemStyle-Width ="100px" DataField ="EventStartDate" DataFormatString ="{0:g}" HeaderText ="<%$ Resources:stringsRes, ctl_EventList_StartDate %>" SortExpression ="EventStartDate" HtmlEncode ="true" ItemStyle-Wrap ="false" />
            <asp:BoundField ItemStyle-Width="100px" DataField="EventDate" DataFormatString="{0:g}" HeaderText="<%$ Resources:stringsRes, ctl_EventList_Date %>"  SortExpression="EventDate" HtmlEncode="true" ItemStyle-Wrap="false" />
            <asp:ButtonField ItemStyle-Width="150px" ButtonType="Link" DataTextField="EventName" HeaderText="<%$ Resources:stringsRes, ctl_EventList_Event %>"  SortExpression="EventName" CommandName="show_details" CausesValidation="false" />
            <asp:BoundField DataField="EventLocation" HeaderText="<%$ Resources:stringsRes, ctl_EventList_Location %>" SortExpression="EventLocation" />
            <asp:TemplateField HeaderText ="Select">
            <ItemTemplate >
                <asp:CheckBox ID="chkDownloadSelectedEvent" runat ="server" AutoPostBack ="false" Onclick="eachCheck();"/>                   

            </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <RowStyle Height="25px" />
        <HeaderStyle Height="30px"/>
    </asp:GridView>

and there is a link button ....

Answer 5

THANK YOU SO MUCH ... i have been looking for this solution since almost 3-4 days and couldnt find something that suited my scenario :) thanks i m going to tag u on my blog :)