|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
Code: HTML/ASPX
<eo:MaskedEdit ID="MaskedEdit1" runat="server" PromptChar="" TextBoxStyle-CssText="text-align: right;" RightToLeft="False">
<eo:MaskedEditSegment SegmentType="Mask" MinValue="-999999999"
Mask="-##########" MaxValue="99999999999" />
<eo:MaskedEditSegment Text="." />
<eo:MaskedEditSegment Mask="##" SegmentType="Mask" />
</eo:MaskedEdit>
This pretty much operates the way I want it. Right justifies in field. No PromptChar. Allows negative values and allows user to press decimal key. But how do I get one number in and out of it? When I use a single segment with SegmentType="Number", it won't allow negative numbers and I can't seem to use space characters as the PromptChar. It accepts but ignores the Mask. When I use a single segment with SegmentType="Mask" and mask="-######.##", it ignore pressing the decimal key. Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Using three segments should be the best solution. You will get a single string from the MaskedEdit's Text property; you can then parse that value into a number.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
OK. Prior to my taking the time to create a full test page, can you see my error in the following? When I click on the cell to invoke on_begin-edit, the three-segment texbox doesn't populate with the number in the grid. It's blank. BUT, if I fill in the textbox, from that point on, the edit works properly. The problem seems to be in these two lines: var maskededit = eo_GetObject("MaskedEdit1"); maskededit.setText(v); But only the first time they invoke.
Code: JavaScript
function on_begin_edit(cell) {
var v = cell.getValue();
var rowIndex = cell.getItemIndex()
switch (rowIndex) {
...
case 6: //Amount
document.getElementById("div_MaskedEdit").style.display = "";
document.getElementById("div_DatePicker2").style.display = "none";
document.getElementById("div_DatePicker1").style.display = "none";
document.getElementById("div_TextBox1").style.display = "none";
document.getElementById("div_TextBox2").style.display = "none";
document.getElementById("div_DropDown").style.display = "none";
var maskededit = eo_GetObject("MaskedEdit1");
maskededit.setText(v);
break;
}
}
Code: HTML/ASPX
<eo:CustomColumn DataField="FieldValue" ClientSideBeginEdit="on_begin_edit" ClientSideEndEdit="on_end_edit" ClientSideGetText="on_column_gettext">
<EditorTemplate>
<div id="div_TextBox1" style="display:none">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div>
<div id="div_TextBox2" style="display:none">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </div>
<div id="div_DatePicker1" style="display:none">
<eo:DatePicker ID="DatePicker1" runat="server">
</eo:DatePicker></div>
<div id="div_DatePicker2" style="display:none">
<eo:DatePicker ID="DatePicker2" runat="server">
</eo:DatePicker></div>
<div id="div_DropDown" style="display:none">
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2"
DataTextField="DocType" DataValueField="RecType"></asp:DropDownList></div>
<div id="div_MaskedEdit" style="display:none">
<eo:MaskedEdit ID="MaskedEdit1" runat="server" PromptChar="" TextBoxStyle-CssText="text-align: right;" RightToLeft="False">
<eo:MaskedEditSegment SegmentType="Mask" MinValue="-999999999"
Mask="-##########" MaxValue="99999999999" />
<eo:MaskedEditSegment Text="." />
<eo:MaskedEditSegment Mask="##" SegmentType="Mask" />
</eo:MaskedEdit></div>
</EditorTemplate>
</eo:CustomColumn>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Check the value you passed to setText. It won't take it if it does not match the mask format. So if that's the case, you need to pre-format it so that it matches the mask.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
Please, can you tell me how to pre-format it so it matches the mask that is in my posted code?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
pghcpa wrote:Please, can you tell me how to pre-format it so it matches the mask that is in my posted code? There is no whatever support on the MaskedEdit for that. You will need to do it by yourself.
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
Pleaes, can you just give me a hint what you mean by "preformat it so it matches the mask". I'm happy to program whatever, just need a small hint as to what you mean.
I have a mask with three segments (integer, decimal literal, integer-2 places).
Grid contains a dollar amount like 125.01.
In on_begin_edit I have
var v = cell.getValue();
Then later
var maskededit = eo_GetObject("MaskedEdit1");
maskededit.setText(v);
On execution of on_begin_edit code v = 125.01.
Do I need to parse the 125 and assign it to the first segment, then parse the 01 and assign it to the third? If so, what is the code for assigning values directly to the segments in Javascript. I tried to find it -- and I see it for codebehind -- couldn't immediately find it for Javascript.
Am I pointed in the right direction?
One other question -- I might rather use a signle segment numeric. Can you confirm that in the EOMaskedEdit numeric type, it will not accept negative numbers?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
For example, "123" will not match "####" because the number is 3 digts and the mask is 4 digts/space. In order to make it match, you will need to change "123" to "123_" or "_123" ("_" for space). Likewise, "123.45" will not match "####.#" even though they have the same length because the position of the decimal point is different. You will need to change it "_1234.5" in order to match it. And obviously, "ABC" will not match "###" because "ABC" are letters and "###" only takes space or numbers. In any case, the MaskedEdit will simply ingore the value you give to it without attempting to convert it at all (because it doesn't know how, for example, converting "123.45" to "_123.4" loses value and it may not be what you wanted)
So you must format your value to a string that matches the mask before you pass it to the MaskedEdit. This is what "preformat it so it matches the mask" means. You just need to give the MaskedEdit the right string, you do not need to deal with individual segments.
Numeric segment will not accept negative numbers. We will probably add that support in a future version though.
Hope this clears up.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
I solved it this way. Works well. You almost never see a right-aligned, decimal-assumed, numeric-required textbox out there on the Web -- I've wanted to do this for years because this is how it's done on desktop accounting software. For future reference, please, I would still like to know how to have a mask character of space rather than underscore, if this is easy for you to answer.
Code: JavaScript
var maskededit = eo_GetObject("MaskedEdit1");
maskededit.setText(space(13 - v.length) + v);
Code: JavaScript
function space(cnt) {
return (new Array(cnt + 1)).join(' ');
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
pghcpa wrote:For future reference, please, I would still like to know how to have a mask character of space rather than underscore, if this is easy for you to answer. I think you would just set PromptChar to ' '. Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
When you set PromptChar to ' ', it puts in the actual characters 32 where you would have previously seen the underscores. Unrelated to above, I am having one last problem with my DetailsView where I really need your help because I'm 99% complete except for this: Custom Column. Editor Template is a DatePicker. If I set focus to it, then ENTER key no longer completes the edit. When I press ENTER while in the datepicker field, nothing happens. If I don't set focus to it, then the user cannot go down the column using just the keyboard. I want KeyboardNavigation=True. When I use a datetime format for a column, I don't have this problem, only in the custom column. Please see snippets below.
Code: HTML/ASPX
<div id="div_DatePicker1" style="display:none">
<eo:DatePicker ID="DatePicker1" runat="server"
ControlSkinID="None" DayCellHeight="16" DayCellWidth="19"
DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" DisableTextBox="False">
<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" />
</eo:DatePicker>
</div>
Code: JavaScript
function on_begin_edit(cell) {
var v = cell.getValue();
var rowIndex = cell.getItemIndex()
switch (rowIndex) {
case 4: //TxnDate
document.getElementById("div_DatePicker1").style.display = "";
document.getElementById("div_DatePicker2").style.display = "none";
document.getElementById("div_TextBox1").style.display = "none";
document.getElementById("div_TextBox2").style.display = "none";
document.getElementById("div_TextBox3").style.display = "none";
document.getElementById("div_DropDown").style.display = "none";
document.getElementById("div_MaskedEdit").style.display = "none";
var datepicker = eo_GetObject("DatePicker1");
datepicker.setSelectedDate(eo_StringToDate(v));
setTimeout(function() { datepicker.focus(); }, 100);
break;
}
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Please provide full test pages for the first issue. We tested setting PromptChar as ' ' and it works fine.
I believe the second issue is by desgin. Grid does not handle any key event (arrow, enter, esc, etc) for CustomColumn. You will need to handle those key events yourself and if you see an enter key, you call Grid's client side JavaScript API to do whatever you want it to do. For example, you can cancel edit, or move to next cell, or post back the page, etc. It's totally up to you.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
Thanks.
How do I handle key events in the grid?
My user is in a custom column cell, editing a datepicker control. When they press ENTER I want it to end the edit. At that point, how do I detect what key they have pressed?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
pghcpa wrote:How do I handle key events in the grid? You missed the point. You are not handling key events in the Grid or with the Grid. You are handling key events in your own EditorTemplate, which is completely yours and has nothing to do with Grid. You would do it whatever way you handle key press event with regular HTML/JavaScript code. The point of CustomColumn is the Grid provides you a cell, everything else is up to you and pretty much has nothing to do with the Grid.
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
I figured out how to trap the keys, but I can't close the datepicker unless I click in it first (or click elsewhere). (I will look into any HTML/Javascript options to accomplish this on my own.)
Can you tell me if there is an EO function like colorpicker.accept() for the datepicker or that will accomplish the same thing? I looked through all the client side API functions and can find functions to cancel, but not to accept.
It is difficult for me to determine if this question is out of scope for this forum, so if it is, just say so. No problem. I only intend to ask an EO question here. Thx.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
Didn't work, but thanks anyway for the suggestion. One thing I have noticed is that when I open the datepicker with mouse or Enter and set focus to it, one of the sub-fields highlights (year). If I click anywhere, one time, inside the control, then ENTER will close it, in case that gives any clues. I also tried the following, but no luck. It actually does select the cell, but doesn't close the datepicker (which sort of seems obvious now). But I can access EO functions here if I need them.
Code: JavaScript
grid = eo_GetObject("Grid1");
grid.selectCell(6,1);
Meanwhile, I have posted on some javascript sites to find out how to close a control of this nature in code A couple of hours of Google searching gave me a few ideas, but none of them worked. Trapping for the keys was really easy to find; what to do then is a mystery I will have to work on.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
I don't know what you mean by "open" or "close". If you meant open or close the DatePicker drop down (the same as clicking on the icon next to the textbox), then eo_HideAllPopups should work for you. If you are looking for anything else, then most likely you are on your own. :)
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/26/2009
Posts: 64
|
Fair enough.
What I mean by "close" is to have the same behavior as in a datetime column. That works perfectly. You press enter to get a datapicker box. You can type in the date (or use the dropdown). Then, when you press ENTER the datapicker closes and you're back to the grid (i.e., edit complete).
I can easily trap the ENTER key to activate a javascript, but so far, anything I try in that event handler leaves the user in the datepicker and mouse is required to get out.
With keyboard navigation = true this allows me to go from my DetailsView, down the column, field-by-field without touching the mouse for fast data entry. As far as I know, only EO grid offers this -- no update button! It's incredible -- like it was a windows desktop application, lightening fast and a user can key or correct a record very quicly.
Works perfectly on all columns of a grid, but on the custom column I get stuck on the datepicker editor template control -- ENTER key doesn't "close" the datepicker and go back to the grid. Since I'm only editing one record, I need a details view, which means custom column -- going across instead of down wouldn't be intuitive.
I'll keep hunting for an answer and post it if I come across it. I've posted the question a few places.
Thanks anyway.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
I see what you meant. You will need to call this function to bring the cell out of edit mode: http://doc.essentialobjects.com/library/1/jsdoc.public.grid.editcell.aspxIt will be something like this: grid.editCell(-1, -1, true); Thanks
|
|