Question

I have GridView with CheckBox in it’s header and another one in each row:

<asp:GridView runat="server">
<Columns>
<asp:TemplateField>
    <HeaderTemplate>
        <input type="checkbox" onclick="checkAll(this.checked)" />
    </HeaderTemplate>
    <ItemTemplate>
        <input name="checkSelect" type="checkbox" value='<%# Eval("ID") %>' />
    </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

I want master checkbox to (un)check all others.

So I have JavaScript function:

function checkAll(checked) {
    var grid = document.getElementById("<%= gridViewStatement.ClientID %>");
    for (i = 1; grid.rows.length - 1; i++) {
        grid.rows[i].getElementsByTagName("input")[0].checked = checked;
    }
}

If I put it inside <script> tag, its works

<script type="text/javascript" language="javascript">       
</script>

If I put function in file

<script type="text/javascript" language="javascript" src="scripts.js"></script>

it stops working! File in in the root, names written correctly.

What am I doing wrong??

P.S. Is there anything I can improve my function?

P.P.S. I use HtmlCheckBox instead of asp:CheckBox because I bind each to column ‘ID’ and get list of IDs in Request.Form. Am I right?

Answer 1

What kills your script, IMHO, is the line:

var grid = document.getElementById("<%= gridViewStatement.ClientID %>");

You are mixing server-side and client-side code. Since the server-side code is rendered first, if that line is present inside the ASPX page, then the value of <%= gridViewStatement.ClientID %> gets evaluated in time for it to be used by the JavaScript. By putting it in a file that gets included later, you’re ensuring that the value does not get interpreted.

Here’s a short solution:
At the top of your ASPX include the following lines:

<script type="text/javascript" language="javascript">
    var gridID = "<%= gridViewStatement.ClientID %>";
</script>
<script type="text/javascript" language="javascript" src="scripts.js"></script>

And change the first line in your function to:

var grid = document.getElementById(gridID);