I need to apply style and highlight the header coloumn which is sorted..
Sorting is handled in rptMyTable_ItemCommand event.. i cant use gridview as the layout of displaying data is not a regular table.
in javascript we have something like
document.getElementById('lbCol1Header').parentNode.style = 'sortedColumnCSS'
how to do this in codebehind?
<table border="0" cellpadding="5" cellspacing="0" width="100%" class="myCSS">
<asp:Repeater ID="rptMyTable" runat="server" OnItemCommand="rptMyTable_ItemCommand">
<HeaderTemplate>
<tr style="font-weight: bolder">
<td>
<asp:LinkButton ID="lbCol1Header" Text="Col1" runat="server" CommandName="sortCol1" />
</td>
<td>
<asp:LinkButton ID="lbCol2Header" Text="Col2" runat="server" CommandName="sortCol2" />
</td>
<td>
<asp:LinkButton ID="lbCol3Header" Text="Col3" runat="server" CommandName="sortCol3" />
</td>
<td>
<asp:LinkButton ID="lbCol4Header" Text="Col4" runat="server" CommandName="sortCol4" />
</td>
<td>
<asp:LinkButton ID="lbCol5Header" Text="Col5" runat="server" CommandName="sortCol5" />
</td>
<td>
<asp:LinkButton ID="lbCol6Header" Text="Col6" runat="server" CommandName="sortCol6" />
</td>
<td>
</td>
<td>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
//Table Data......with nested tables and divs
.
.
.
.
.
</ItemTemplate>
</asp:Repeater>
<tr style="font-weight: bolder">
// doing paging operations here...
</tr>
</table>
In Design Page:
<tr class='<%# StyleSheet(DataBinder.Eval(Container.DataItem, "Y"))%>'>
for Linkbutton :
<asp:LinkButton ID="lbCol1Header" Text="Col1" runat="server" CommandName="sortCol1" CssClass='<%# StyleSheet(DataBinder.Eval(Container.DataItem, "Y"))%>' />
In code Page:
public static string StyleSheet(object objText1)
{
string val = string.Empty;
if (objText1.ToString() == "Y")
{
val = "trbind";
}
return val;
}
This is one of the way to apply style the in tr tag while in runtime based on the data.Similar you can try for the label also.
write the style trbind in stylesheet.
You could use .CssClass property in the rptMyTable_ItemCommand event I guess.
lbCol1Header.CssClass = "sortedColumnCSS";
If you want to apply the css class to you should give ID and add runat="server".
<td ID="tdCol1Header" runat="server">
<asp:LinkButton ID="lbCol1Header" Text="Col1" runat="server" CommandName="sortCol1" />
</td>
And to add the css class from your code behind.
tdCol1Header.Attributes("class") = "CssClass";
Related
I am using this Gridview which have checkboxes and labels in it.Now I want when i click the checkbox the text of label must change.
<asp:GridView ID="grdData" runat="server" style="Text-align:center;">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="changeTextValue(this)"/>
</ItemTemplate>
<HeaderTemplate>
<%--<asp:CheckBox ID="CheckBox2" runat="server" OnClick="CheckAllEmp(this)"/>--%>
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<asp:Label ID="Status_Header" runat="server" Text="Status" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text=0 ClientIDMode="Static"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
First Question
Because the label rendered on html will be:
<span id="grdData_ctl02_Label1" ClientIDMode="Static">1</span>
So,you should use "span[id*='Label1']" to find it out:
function changeTextValue(chk) {
var currentTextID = $(chk).parents("tr").find("span[id*='Label1']");
if (chk.checked == true) {
currentTextID.html(1);
}
else {
currentTextID.html(0);
}
}
Second Question
Gridview
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="changeTextValue(this)" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" OnClick="CheckAllEmp(this)" />
</HeaderTemplate>
</asp:TemplateField>
Javascript
function CheckAllEmp(chk) {
var currentTextID = $(chk).parents("table").find("span[id*='Label1']");
var childCheckBoxID = $(chk).parents("table").find("input[id*='CheckBox1']");
if (chk.checked == true) {
currentTextID.html(1);
childCheckBoxID.prop("checked", true);
}
else {
currentTextID.html(0);
childCheckBoxID.prop("checked", false);
}
}
For what reason do you use ClientIDMode="Static"?
You have to create function CheckAllEmp(this) event in your_program_file.cs.
Code in that function would be smth like that:
CheckAllEmp(...){
Label1.Text="Something new";
}
When you want this kind of operations on GridView, it is always good to check the html source of your page. In this scenario, for example, you will have the following html code for your gridview:
<table cellspacing="0" rules="all" border="1" id="grdData" style="border-collapse:collapse;text-align: center;">
<tr>
<th scope="col"></th>
<th scope="col">
<span id="grdData_Status_Header">Status</span>
</th>
</tr>
<tr>
<td>
<input id="grdData_CheckBox1_0" type="checkbox" name="grdData$ctl02$CheckBox1" onclick="changeTextValue(this);" />
</td>
<td>
<span id="Label1">Unique Perspective</span>
</td>
</tr>
<tr>
<td>
<input id="grdData_CheckBox1_1" type="checkbox" name="grdData$ctl03$CheckBox1" onclick="changeTextValue(this);" />
</td>
<td>
<span id="Label1">Challenging</span>
</td>
</tr>
</table>
As you may see, checkbox and label controls are in adjacent table cells. You can use .parent().next() to access the cell containing the label control. Also, you may see that label was rendered as span. To get the label control, therefore, you can use: .parent().next().find('span'). One final note is that you can use .text property of a span to change its contents. See the whole script below:
function changeTextValue(chk) {
var currentTextID = $(chk).parent().next().find('span');
if (chk.checked == true)
currentTextID.text('1');
else currentTextID.text('0');
}
I have a List of Client Displayed in Repeater. I have a Details Button in Repeater which displays the Details of Client when Clicked. For Sample now just added 'ClientName' only. *When i Click on 'Details' LinkButton in Repeater it Displays the Details of Selected Row. But, this causes FullPage Post Back! Which i want to Prevent. Just i want to Update the Panel which displays the Details when row is selected from Repeater*.
In .aspx page:
<script>
function ShowPopUp() {
var listItemsRegion = document.getElementById('popup');
popup.style.display = "block";
}
function ClosePopup() {
var listItemsRegion = document.getElementById('popup');
popup.style.display = "none";
}
</script>
<asp:Repeater ID="RepDetails" runat="server" OnItemCommand="RepDetails_ItemCommand">
<HeaderTemplate>
<table class="tabl">
<tr style="background-color: #808080; color: White">
<td class="lblCenter">
<asp:Label ID="Label4" runat="server" Text="City" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:Label ID="Label3" runat="server" Text="Age" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:Label ID="Label1" runat="server" Text="Gender" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:Label ID="Label5" runat="server" Text="Details" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="<%# Container.ItemIndex % 2 == 0 ? "rowEven" : "rowOdd" %>">
<td class="lblCenter">
<asp:Label ID="lblCity" runat="server" Text='<%#Eval("City") %>' /></td>
<td class="lblCenter">
<asp:Label ID="lblAge" runat="server" Text='<%#Eval("Age") %>' /></td>
<td class="lblCenter">
<asp:Label ID="lblGen" runat="server" Text='<%#Eval("Gender") %>' CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:LinkButton ID="lblDetails" runat="server" CommandName="Display"
CommandArgument='<%#Eval("ID") %>'>Details</asp:LinkButton></td>
<asp:Label ID="rlblClientname" runat="server" Text='<%#Eval("Client") %>' Visible="false"></asp:Label>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<div id="popup" style="display: none">
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
<ContentTemplate>
<table width="80%" align="center">
<tr>
<td> </td>
<td width="30%"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Label ID="Label15" runat="server" CssClass="lbl" Text="Client Code"></asp:Label>
</td>
<td>
<asp:Label ID="lblClientName" runat="server" CssClass="lbl"></asp:Label>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<input id="Button2" type="button" value="Close" onclick="ClosePopup();" class="but" /> </td>
</tr>
</table>
</ContentTemplate>
<%-- <Triggers>
<asp:AsyncPostBackTrigger ControlID="RepDetails" EventName="RepDetails_ItemCommand" />
</Triggers>--%>
</asp:UpdatePanel>
</div>
In Repeater Item Command:
protected void RepDetails_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Display")
{
LinkButton lblDetails = (LinkButton)e.Item.FindControl("lblDetails");
Label rlblClientname = (Label)e.Item.FindControl("rlblClientname");
if (lblDetails != null && e.CommandArgument != null)
{
string val = e.CommandArgument.ToString();
if (rlblClientname != null && rlblClientname.Text != string.Empty)
{
lblClientName.Text = rlblClientname.Text;
}
string scrpt = "ShowPopUp();";
Page.ClientScript.RegisterStartupScript(this.GetType(), "s", scrpt, true);
}
}
}
This causes Full Page Post Back Which i want to Prevent.Onclick of Repeater row the details must be displayed with AsynPostBack. When adding Trigger Event to 'popup' div then it say control could not be found
Help Appreciated!
Thanks!
You have one of two Options:
1) Uncomment this code and change EventName="RepDetails_ItemCommand" to EventName="ItemCommand"
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RepDetails" EventName="ItemCommand" />
</Triggers>
2) Put the Repeater in the <ContentTemplate> of the UpdatePanel
I have a dynamic Listview which is bind to three different tables with one to many relations i.e. one table row may contain many rows in other table. When i run my application i get this output.
But i want to get Listview in this format although this image has been edited using Photshop.
Here is Listview HTML.
<asp:ListView runat="server" ID="LV_ViewQuestion" DataKeyNames="UID, Question_ID">
<EmptyDataTemplate>
<table id="Table1" runat="server" style="">
<tr>
<td>No Surveys.</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr style="">
<td>
<asp:Label ID="SURVEY_TYPELabel" runat="server" Text='<%# Eval("Survey_Type")%>' />
</td>
<td>
<asp:Label ID="SURVEY_TITLELabel" runat="server" Text='<%# Eval("Survey_Title") %>' />
</td>
<td>
<asp:Label ID="Question_TextLabel" runat="server" Text='<%# Eval("Question_Text")%>' />
</td>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Option_Text")%>' />
</td>
<td>
<asp:LinkButton runat="server" ID="lb_DelQuestion" Text="Delete" CommandArgument='<%# Eval("Question_ID")%>' CommandName="XDelQuestion" CssClass="GeneralInput" />
<asp:LinkButton runat="server" ID="lb_AddMoreQuest" Text="Add Question" CommandArgument='<%# Eval("UID")%>' CommandName="XAddAnotQuestion" CssClass="GeneralInput" />
<asp:LinkButton runat="server" ID="lb_Publish" Text="Publish" CommandArgument='<%# Eval("UID")%>' CommandName="XPublishSurvey" CssClass="GeneralInput" />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2" runat="server">
<tr id="Tr1" runat="server">
<td id="Td1" runat="server">
<table id="itemPlaceholderContainer" runat="server" class="nobordered" style="width: 580px;">
<tr id="Tr2" runat="server" style="">
<th id="Th1" runat="server">Type</th>
<th id="Th2" runat="server">Title</th>
<th id="Th6" runat="server">Question</th>
<th id="Th4" runat="server">Options</th>
<th id="Th3" runat="server" style="width: 200px;">Actions</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr id="Tr3" runat="server">
<td id="Td2" runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" ButtonCssClass="GeneralButton" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
You can accomplish this hiding the cells in the ItemDataBound event of the ListView. Your code should look like this:
first add three global properties in your page
string type = string.Empty;
string title = string.Empty;
string question = string.Empty;
Then add the OnItemDataBound event to your list view
protected void LV_ViewQuestion_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
Label SURVEY_TYPELabel = (Label)e.Item.FindControl("SURVEY_TYPELabel");
Label SURVEY_TITLELabel = (Label)e.Item.FindControl("SURVEY_TITLELabel");
Label Question_TextLabel = (Label)e.Item.FindControl("Question_TextLabel");
if (SURVEY_TYPELabel.Text == type && SURVEY_TITLELabel == title &&
Question_TextLabel == question)
{
SURVEY_TYPELabel.Visible = false;
SURVEY_TITLELabel.Visible = false;
Question_TextLabel.Visible = false;
// Do the same for all the other control in cells you need to hide
}
else
{
type = SURVEY_TYPELabel.Text;
title = SURVEY_TITLELabel.Text;
question = Question_TextLabel.Text;
}
}
}
I have a list view and i want to add a header row in it which will come when the listview has data or not. in each and every condition i want it there. I have used LayOut Template to do so but its showing the Header row only if the listview has data.Then i tried EmptydataTemplate, Its showing the header row but now the button in it is not working.
My code is
<asp:UpdatePanel ID="upViewSchedule" runat="server">
<ContentTemplate>
<asp:ListView ID="lstuser" runat="server" ItemPlaceholderID="trItem" DataKeyNames="id"
OnItemDataBound="lstuser_ItemDataBound">
<LayoutTemplate>
<table cellspacing="0">
<tr class="hdrRowColor1">
<td align="left">
name
</td>
<td align="left">
salary
</td>
<td align="left">
address
</td>
<td align="left" style="border-right: 1px solid #6398cc">
Actions
</td>
</tr>
<tr class="OddRowColor">
<td align="left">
<asp:DropDownList ID="drphdrname" runat="server" Width="120px">
</asp:DropDownList>
<ajaxCtrl:CascadingDropDown ID="csddrphdrName" runat="server" TargetControlID="drpname"
Category="Name" ServicePath="~/Resources/WebService.asmx" ServiceMethod="GetName">
</ajaxCtrl:CascadingDropDown>
</td>
<td>
<asp:TextBox ID="txtaddress" runat="server" Width="110px"></asp:TextBox>
</td>
<td width="50px" class="last">
<asp:ImageButton ID="imgBtnHdrAdd" runat="server" ImageUrl="~/App_Themes/ThemeNew/Images/add_new.png"
OnClick="imgBtnHdrAdd_Click" ToolTip="Add user." />
</td>
</tr>
<tr id="trItem" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr class='<%# Convert.ToBoolean(Container.DataItemIndex % 2) ? "OddRowColor" : "EvenRowColor" %>'>
<td align="left" width="138px">
<asp:DropDownList ID="drpname" runat="server" Width="120px">
</asp:DropDownList>
<asp:Label ID="lblCreatedBY" Text='<%# Eval("CreatedBy") %>' runat="server" Visible="false"></asp:Label>
<asp:Label ID="lblId" runat="server" Visible="false"></asp:Label>
<ajaxCtrl:CascadingDropDown ID="casddrpContacts" runat="server" TargetControlID="drpname"
Category="name" ServicePath="~/Resources/WebService.asmx" ServiceMethod="Getuser">
</ajaxCtrl:CascadingDropDown>
</td>
<td align="left" width="138px">
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("salary") %>' Width="110px"></asp:TextBox>
</td>
<td align="left" width="138px">
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Eval("address") %>' Width="110px"></asp:TextBox>
</td>
<td align="left" class="last">
<asp:ImageButton ID="imgBtnEdit" runat="server" ImageUrl="~/App_Themes/ThemeNew2/images/update.png"
CommandArgument='<%# Eval("id") %>' OnClick="imgBtnEdit_Click" ToolTip="Update user" />
<asp:ImageButton ID="imgBtnDelete" runat="server" ImageUrl="~/App_Themes/ThemeNew/Images/delete.png"
CommandArgument='<%# Eval("id") %>' OnClientClick="return confirm('Are you sure you want to delete this user ?');"
ToolTip="Delete user" OnClick="imgBtnDelete_OnClick" />
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<table cellspacing="0">
<tr class="hdrRowColor1">
<td align="left">
name
</td>
<td align="left">
salary
</td>
<td align="left">
address
</td>
<td align="left" style="border-right: 1px solid #6398cc">
Actions
</td>
</tr>
<tr class="OddRowColor">
<td align="left">
<asp:DropDownList ID="drphdrname" runat="server" Width="120px">
</asp:DropDownList>
<ajaxCtrl:CascadingDropDown ID="csddrphdrName" runat="server" TargetControlID="drpname"
Category="Name" ServicePath="~/Resources/WebService.asmx" ServiceMethod="GetName">
</ajaxCtrl:CascadingDropDown>
</td>
<td>
<asp:TextBox ID="txtaddress" runat="server" Width="110px"></asp:TextBox>
</td>
<td width="50px" class="last">
<asp:ImageButton ID="imgBtnHdrAdd" runat="server" ImageUrl="~/App_Themes/ThemeNew/Images/add_new.png"
OnClick="imgBtnHdrAdd_Click" ToolTip="Add user." />
</td>
</tr>
<tr id="trItem" runat="server">
</tr>
</table>
</EmptyDataTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
my Code behind code is
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BIndAddress();
// BindRoleDrop();
drpAddress.Items.Insert(0, new ListItem("Select Area", ""));
drpRoom.Items.Insert(0, new ListItem("Select Room", ""));
ViewState["sortCol"] = "tblUser.id";
ViewState["sortDir"] = "Desc";
ViewState["nmbr"] = 1;
BindData(ViewState["sortCol"].ToString(), ViewState["sortDir"].ToString(), Convert.ToInt32(ViewState["nmbr"]), 7999);
}
else
{
lblMessage.Visible = false;
}
}
And one thing more please let me know how can i apply validations on these.
I did some testing locally. I found that if I have a button in the EmptyDataTemplate it's OnClick event will fire as expected as long as you do not modify the state of the ListView before the event fires.
I'm guessing therefore that you have some code that modifies the state (re-binds it for instance) of the ListView which runs before the imgBtnHdrAdd_Click event handler for the button in question.
The Page_Load method would have been the primary suspect, but based on your code it is properly checking for !IsPostBack.
I'm assuming that it is the call to BindData that is used for setting databinding the ListView. Look for other places in you code behind where that method is called and verify that none of those places are being run before the event handler for the button.
In Nridubai website,i am using listview EditTemplate for editing purpose. In my EditTemplate, there are controls like..
<asp:TextBox ID="txtEditEventName" runat="server"
Text='<%# Bind("event_name") %>' />
And a few more controls like dropdownlist, calender controls. Now I want to validate using javascript on these controls, but its not working.
Eg.
var eventStatus=document.getElementById("<%=txtEditEventName.ClientID%>").value;
I am not using validation controls. Please help me how to use javascript for validation on EditTemplate Controls? My EditTemplate structure is like the following:
<EditItemTemplate>
<td class="command"><asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" />
<asp:LinkButton ID="LinkButton2" runat="server" Text="Update" CommandName="Update" />
</td>
<div class="header">View Details for '<%# Eval("event_name")%>'</div>
<tr>
<td class="edit" colspan="6" >
<div class="details">
<table class="detailview" cellpadding="0" cellspacing="0">
<tr>
<td>Event Name:</td>
<td>
<asp:TextBox ID="txtEditEventName" runat="server"
Text='<%# Bind("event_name") %>' />
</td>
<td>VenueAddress :</td>
<td>
<asp:TextBox ID="txtEditVenue" runat="server" Text='<%# Bind("venue") %>' />
</td>
</tr>
<tr>
<td>Country :</td>
<td>
<asp:DropDownList ID="lstEditCountry" runat="server"
Width="174" />
</td>
<td>Event Status:</td>
<td>
<asp:DropDownList ID="lstEditStatus" runat="server" Width="175px" >
<asp:ListItem value='0' Selected="True">-Select-</asp:ListItem>
<asp:ListItem >In-Progress</asp:ListItem>
<asp:ListItem >Completed</asp:ListItem>
<asp:ListItem >Aborted</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Category :</td>
<td>
<asp:DropDownList ID="lstEditCategory" runat="server"
Width="174" />
</td>
</tr>
<tr>
<td>Start Date:</td>
<td>
<asp:TextBox ID="txtEditStartDate" runat="server"
Text='<%# Bind("start_date", "{0:dd/MM/yyyy}") %>' />
</td>
<td>End Date:</td>
<td>
<asp:TextBox ID="txtEditEndDate" runat="server"
Text='<%# Bind("end_date","{0:dd/MM/yyyy}") %>' />
</td>
</tr>
</table>
<div class="footer command">
<asp:LinkButton ID="LinkButton1" runat="server" Text="Close" CommandName="Cancel" />
</div>
</div>
</td>
</tr>
</EditItemTemplate>
You can access the elements on ItemDataBound and emit their ClientIDs for your JavaScript to use:
ItemDataBound:
protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
{
StringBuilder vars= new StringBuilder();
if (ListView1.EditItem != null)
{
TextBox txtEditStartDate = ListView1.EditItem.FindControl("txtEditStartDate") as TextBox;
TextBox txtEditEndDate = ListView1.EditItem.FindControl("txtEditEndDate") as TextBox;
//example js, however I recommend passing the ClientIDs to functions
vars.Append(String.Format("var txtEditStartDate='{0}';" txtEditStartDate.ClientID);
vars.Append(String.Format("var txtEditStartDate='{0}';", txtEditEndDate.ClientID );
ClientScriptManager.RegisterStartUpScript(this.GetType(), "validationVars", vars.ToString(), true);
}
}
***Old Answer, the .NET way************
EditTemplate:
<asp:TextBox ID="txtEditEventName" runat="server"
Text='<%# Bind("event_name") %>' />
<asp:RequiredFieldValidator
id="rfvEditEventName"
ClientValidationFunction="txtEditEventNameClientValidate"
ControlToValidate="txtTitle"
runat="server"
Display="dynamic">*
</asp:RequiredFieldValidator>
JS:
function txtEditEventNameClientValidate(sender, args) {
if (args.Value == '') {
args.IsValid = false; // field is empty
//so something
}
else {
//do something
}
}
Put the validation javascript in the EditTemplate itself. This way, when it switches to edit-mode, the control will be in the context.