The server tag is not well formed.(databinder.eval)

Question

I am trying to working the following code.

 <asp:DataGrid ID="Grid" runat="server"  DataKeyField="KeyID" CssClass="grid"
...
<asp:CheckBox runat="server"  ID="checkBox-<%#DataBinder.Eval(Container.DataItem,"KeyID")%>" AutoPostBack="false"></asp:CheckBox>

When I run the code,I have got the below error:

Error   25  The server tag is not well formed.

Note : This is working without runat="server". What is the remedy for this problem ?

Answer 1

You don't need to set the ID of the CheckBox to do what you want to do (change the background color). Your CheckBox should look like this (I added the KeyID as the text value if you want to display it... or you can just remove that if you only want the checkbox):

<asp:CheckBox runat="server" ID="checkbox" Text='<%# Eval("KeyID") %>' AutoPostBack="false"></asp:CheckBox>  

Now your checkbox will render something like this:

<input id="MainContent_Grid_checkbox_0" type="checkbox" name="ctl00$MainContent$Grid$ctl02$checkbox" /><label for="MainContent_Grid_checkbox_0">Value of KeyID</label> 

Since all the names end with "checkbox", you can apply a function on the change event for those elements whose name ends with "checkbox". You didn't specify that this was a JavaScript question or if you are using jQuery... this answer uses jQuery :

<script>
    $('input[name$="checkbox"]').change(function () {
        if ($(this).is(':checked')) {
            $(this).parent().css('background-color', 'yellow');
        }
        else {
            $(this).parent().css('background-color', 'white');
        }
    });
</script> 

That will determine if the checkbox is checked, and if so it will set the background-color of its parent (the <td> that it is in, inside the DataGrid rendered HTML), depending on the value.

Likewise, you can go up to the next parent() and highlight the entire row.

Resources: jQuery Selectors

OnCheckedChanged -- an event that you would process in the code behind, not in JavaScript.