Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » EO controls blur event

EO controls blur event Options
Previous Topic · Next Topic
Camarate
Posted: Wednesday, September 23, 2015 9:46:05 AM
Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 120
Hi,

See the sample page below:

Quote:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="EOBlur._Default" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Essential Objects Test</title>
<script src="jquery-latest.min.js" type="text/javascript" ></script>
<script>

$(document).ready(function() {
$("#TextBoxControl").blur(function(){alert("Exit: " + this.id);})
$("#DropDownListControl").blur(function(){alert("Exit: " + this.id);})
$("#EOGridControl").blur(function(){alert("Exit: " + this.id);})
$("#EODatePickerControl").blur(function(){alert("Exit: " + this.id);})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="font-size: 11pt; color: #003399; font-family: Verdana, 'Times New Roman'">
&nbsp;<br />
<strong>TextboxControl: &nbsp; &nbsp; &nbsp; &nbsp; </strong>&nbsp;<asp:TextBox ID="TextBoxControl"
runat="server" Width="200px"></asp:TextBox><br />
<br />
<strong>DropDownListControl:</strong>
<asp:DropDownList ID="DropDownListControl" runat="server" Font-Names="Verdana" Font-Size="11pt"
ForeColor="#003399" Width="200px">
<asp:ListItem Value="1">First Option</asp:ListItem>
<asp:ListItem Value="2">Second Option</asp:ListItem>
<asp:ListItem Value="3">Third Option</asp:ListItem>
</asp:DropDownList><br />
<br />
<strong>EOGridControl:</strong><eo:Grid ID="EOGridControl" runat="server" BorderColor="#C7D1DF" BorderWidth="1px" ColumnHeaderAscImage="00050303"
ColumnHeaderDescImage="00050304" ColumnHeaderDividerImage="00050302" FixedColumnCount="1"
Font-Bold="False" Font-Italic="False" Font-Names="Verdana" Font-Overline="False"
Font-Size="9pt" Font-Strikeout="False" Font-Underline="False" GridLineColor="199, 209, 223"
GridLines="Both" Height="152px" ItemHeight="19" Width="384px" EnableKeyboardNavigation="True" FullRowMode="False">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ColumnTemplates>
<eo:TextBoxColumn>
<TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
</eo:TextBoxColumn>
<eo:DateTimeColumn>
<DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon">
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</DatePicker>
</eo:DateTimeColumn>
<eo:MaskedEditColumn>
<MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
</MaskedEdit>
</eo:MaskedEditColumn>
</ColumnTemplates>
<ColumnHeaderStyle CssText="background-image:url('00050301');padding-left:8px;padding-top:2px;font-weight: bold;color:white;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
<SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
<CellStyle CssText="padding-left:8px;padding-top:2px; color:#336699;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<Columns>
<eo:StaticColumn DataType="String" HeaderText="Name" Name="NAME" Width="200">
</eo:StaticColumn>
<eo:TextBoxColumn HeaderText="Position" Name="POSITION" Width="80">
</eo:TextBoxColumn>
</Columns>
</eo:Grid>
<br />
<strong>EODatePickerControl:</strong><eo:DatePicker ID="EODatePickerControl" runat="server" ControlSkinID="None" CssBlock='&#13;&#10;<style type="text/css">&#13;&#10; a.eo_calendar_style1_title_button &#13;&#10; { &#13;&#10; width: 21px;&#13;&#10; height: 17px;&#13;&#10; border-right: #f3f3f3 1px solid; &#13;&#10; border-top: #f3f3f3 1px solid; &#13;&#10; border-left: #f3f3f3 1px solid; &#13;&#10; border-bottom: #f3f3f3 1px solid; &#13;&#10; background-color: transparent; &#13;&#10; } &#13;&#10; &#13;&#10; a.eo_calendar_style1_title_button:hover &#13;&#10; { &#13;&#10; width: 21px;&#13;&#10; height: 17px;&#13;&#10; border-right: #0044ff 1px solid; &#13;&#10; border-top: #0044ff 1px solid; &#13;&#10; border-left: #0044ff 1px solid; &#13;&#10; border-bottom: #0044ff 1px solid; &#13;&#10; background-color: #aaaaff &#13;&#10; } &#13;&#10;</style>&#13;&#10;'
DayCellHeight="15" DayCellWidth="24" DayHeaderFormat="FirstLetter" DisabledDates=""
SelectedDates="" TabIndex="8" TitleLeftArrowImageUrl="" TitleRangeSeparator=""
VisibleDate="2010-09-01">
<TitleTemplate>
<table border="0" cellpadding="0" cellspacing="0" height="30px" style="background-color: #f3f3f3;
color: #003399; font-weight: bold; font-size: 12px; font-family: tahoma;" width="100%">
<tr>
<!-- Previous Year -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(-12);">
<img border="0" src="{img:00040302}" />
</a>
</td>
<!-- Previous Month -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(-1);">
<img border="0" src="{img:00040301}" />
</a>
</td>
<!-- Current Month -->
<td align="center" style="text-transform: uppercase;" width="99%">
{var:visible_date:MMM/yyyy}
</td>
<!-- Next Month -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(1);">
<img border="0" src="{img:00040303}" />
</a>
</td>
<!-- Next Year -->
<td>
<a class="eo_calendar_style1_title_button" href="javascript: void {var:this}.goTo(12);">
<img border="0" src="{img:00040304}" />
</a>
</td>
</tr>
</table>
</TitleTemplate>
<SelectedDayStyle CssText="BORDER-BOTTOM: #003399 1px solid; BORDER-LEFT: #003399 1px solid; BACKGROUND-COLOR: lightcyan; FONT-FAMILY: verdana; FONT-SIZE: 8pt; BORDER-TOP: #003399 1px solid; BORDER-RIGHT: #003399 1px solid" />
<DisabledDayStyle CssText="BORDER-BOTTOM-COLOR: #cfd9c0; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #cfd9c0; FONT-FAMILY: verdana; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; COLOR: gray; BORDER-RIGHT-COLOR: #cfd9c0; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #cfd9c0; BORDER-LEFT-WIDTH: 1px" />
<PickerStyle CssText="color:#003399;font-family:Verdana;font-size:9pt;" />
<CalendarStyle CssText="BORDER-BOTTOM: #555566 1px solid; BORDER-LEFT: #555566 1px solid; BACKGROUND-COLOR: #f2ffff; BORDER-TOP: #555566 1px solid; BORDER-RIGHT: #555566 1px solid" />
<DayHoverStyle CssText="BORDER-BOTTOM-COLOR: #bbbbbb; BORDER-RIGHT-WIDTH: 1px; BACKGROUND-COLOR: #ddeeff; BORDER-TOP-COLOR: #bbbbbb; FONT-FAMILY: verdana; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-RIGHT-COLOR: #bbbbbb; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #bbbbbb; BORDER-LEFT-WIDTH: 1px" />
<MonthStyle CssText="FONT-FAMILY: Verdana; COLOR: #003399; FONT-SIZE: 11pt; CURSOR: hand" />
<DayHeaderStyle CssText="CLIP: rect(auto auto auto auto); BORDER-BOTTOM: #555566 1px solid; PADDING-BOTTOM: 3px; TEXT-TRANSFORM: uppercase; BACKGROUND-COLOR: #003399; FONT-FAMILY: verdana; COLOR: white; FONT-SIZE: 11px; FONT-WEIGHT: bold; PADDING-TOP: 3px" />
<DayStyle CssText="BORDER-BOTTOM-COLOR: #cfd9c0; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #cfd9c0; FONT-FAMILY: verdana; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-RIGHT-COLOR: #cfd9c0; FONT-SIZE: 8pt; BORDER-LEFT-COLOR: #cfd9c0; BORDER-LEFT-WIDTH: 1px" />
</eo:DatePicker>

</div>
</form>
</body>
</html>


I'm using jQuery API blur event to display what field the cursor leaves. For ASP controls TextBox and DropDownList works well. But, for the EO controls Grid and Datepicker nothing happens.

In my application I need change some fields in the page as soon as the cursor leaves the EOGrid. How do I get it?

Thanks in advance,

Marcelo Camarate
Back to top
 
eo_support
Posted: Wednesday, September 23, 2015 2:08:33 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,229
Hi,

Neither the DatePicker nor the Grid is simple DHTML element, so you can not use JQuery onblur on them.

For DatePicker, you will need to set this property:

http://www.essentialobjects.com/doc/eo.web.datepicker.clientsideonblur.aspx

Unfortunately there is no way for you you detect whether the focus has left the Grid. The Grid is designed to support row/cell level editing, so the closed you can get is when a row or cell exiting edit mode. The corresponding property would be:

http://www.essentialobjects.com/doc/eo.web.grid.clientsideafteredititem.aspx

and

http://www.essentialobjects.com/doc/eo.web.gridcolumn.clientsideendedit.aspx

The first one is fired when FullRowMode is true, the second one is fired when FullRowMode is false.

Thanks
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.