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(&lt;%# 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>

Darin Dimitrov · Answer 1 · 2009-10-19T21:21:21.000

2

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 + ")" %>' />

edited Oct 19 '09 at 21:21

answered Oct 19 '09 at 21:08

Darin Dimitrov

1,023,142
271
3,287
2,928

@Darin: Thank you for the jQuery solution. Since I am just getting started with jQuery selector, I was not able to get the code working. I have posted the follow-up question to this here: http://stackoverflow.com/questions/1592149/cannot-select-grid-element-through-jquery I would appreicate it if you could take a look at what I could be doing wrong. Thanks. – dance2die Oct 20 '09 at 02:27

score 2 · Accepted Answer · answered Oct 19 '09 at 21:22

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(&lt;%# 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.

For now, this is the solution I went with. And I also found out that, using "DataBinder.Eval(..., format)" works the same way as well. — dance2die, Oct 20 '09 at 02:28

ASP.NET How to pass container value as javascript argument

2 Answers2

Linked