ASP.NET How to pass container value as javascript argument
I am using oBout Grid control with a template in a textbox.
I would like to pass a javascript argument, the current grid row index when the user clicks on it.
But the result
onClick='setGridInEditMode(<%# Container.RecordIndex %>);' />
appears as
onClick="setGridInEditMode(<%# Container.RecordIndex %>);"
Is there a way to pass the value of the container 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>
source to share
I would call Darin for using unobtrusive JavaScript. However, this does not answer your question as to why ASP.NET is doing this.
The reason you get
onClick="setGridInEditMode(<%# Container.RecordIndex %>);"
is that data binding to server control properties requires you to bind directly to the property with no intermediate text. This means it is only allowed Property="<%# ... %>"
.
So, in your case, you will need to say what you want in a circular fashion (although I personally find it a little clearer and more convenient):
onClick='<%# String.Format("setGridInEditMode({0});", Container.RecordIndex) %>'
(See your single and double quotes!)
This limitation only applies to server controls and their properties. This does not apply to the nested literal server control (such as templates or panels), nor to regular HTML files that are used elsewhere. This is probably why you never noticed it.
source to share
Instead of polluting your HTML with javascript functions, how about an unobtrusive solution with jQuery:
$(function() {
$('#_TrustGrid input[id*=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
setGridInEditMode(index);
});
});
});
If you prefer the simpler ASP.NET solution, you can always do this:
<asp:TextBox
ID="trustDocIDTextBox"
runat="server"
Visible="true"
Text='<%# Container.Value %>'
onclick='<%# "setGridInEditMode(" + Container.RecordIndex + ")" %>' />
source to share