ASP.NET How to pass container value as javascript argument

Question

I am using an oBout Grid control with a template on a textbox.

I would like to pass an argument to a javascript, the current row index of a grid when a user clicks on it.

But the result of

    onClick='setGridInEditMode(<%# Container.RecordIndex %>);' />

comes out as

     onClick="setGridInEditMode(<%# Container.RecordIndex %>);"

Is there a way to pass container value to javascript?

Here is the markup in question.

<cc1:Grid ID="_TrustGrid" runat="server"
        FolderStyle="Styles/style_7"
        AllowAddingRecords="False" 
        AllowSorting="false"
        AllowPageSizeSelection="False"
        AllowPaging="False"
        AllowMultiRecordEditing="true"
        AutoGenerateColumns="False" 
        OnUpdatecommand="_TrustGrid_UpdateCommand"
        OnRebind="_TrustGrid_Rebind">
    <Columns>
        <cc1:Column AllowEdit="true" AllowDelete="false" HeaderText="Edit" Width="130" runat="server" />
        <cc1:Column DataField="TrustDocID" HeaderText="TrustDocID" Width="125" ReadOnly="false" AllowDelete="false" TemplateId="trustDocIDGridTemplate" />
    </Columns>
    <Templates>
        <cc1:GridTemplate ID="trustDocIDGridTemplate" ControlID="tb1" runat="server">
            <Template>
                <asp:TextBox ID="trustDocIDTextBox" runat="server" 
                    Visible="true"
                    Text='<%# Container.Value %>'
                    onClick= 'setGridInEditMode(<%# Container.RecordIndex %>);' />
            </Template>
        </cc1:GridTemplate>
    </Templates>
</cc1:Grid>

Answer 1

Instead of polluting your HTML with javascript functions how about an unobtrusive solution using jQuery:

$(function() {
    $('#_TrustGrid input[id*=trustDocIDTextBox]').each(function(index) {
        $(this).click(function() {
            setGridInEditMode(index);
        });
    });
});

If you prefer instead the more ASP.NETish solution you could always do this:

<asp:TextBox 
    ID="trustDocIDTextBox" 
    runat="server" 
    Visible="true"
    Text='<%# Container.Value %>'
    onclick='<%# "setGridInEditMode(" + Container.RecordIndex + ")" %>' />

Answer 2

I'd second Darin's call for using unobtrusive JavaScript. However, that doesn't answer your question on why ASP.NET is doing this.

The reason you get

onClick="setGridInEditMode(<%# Container.RecordIndex %>);"

is because databinding to server control properties requires you to bind directly to the property without intervening text. That means, only Property="<%# ... %>" is allowed.

So in your case, you'll need to say what you want in a roundabout fashion (although I personally think this is a little clearer and more maintainable):

onClick='<%# String.Format("setGridInEditMode({0});", Container.RecordIndex) %>'

(Watch your single and double quotes though!)

This limitation applies only to server controls and their properties. It does not apply to a server control's nested literal content (such as bodies of templates or panels) nor to plain HTML used elsewhere, which is probably why you've never noticed this before.