Edit/MaskEdit

EditBox

Edit Basic

Edit is used to enter value by user
Edit is used to show output data
Edit can be used for password type string and we can fix the length of the edit field
Edit can bind to dataset

EditBox_Basic_01

Way to bind Edit box to Grid

Edit can be bind to DataSet by binding property 
Edit can be bind to DataSet column to edit box.
When selected row of the grid is changed, input box value will also changed

Binding edit component to dataset

♦ Work Flow
1) Select the exit box which you want to bind
2) Right click on the mouse, choose bind dataset option and choose the dataset to bind.
3) After selecting dataset, open Bind Item window and map the property of Column ID to dataset property


After following all the above steps, we can see DataSet binding result.

autoselect

autoselect property is automatically selected the input/output values when we focus on it. autoselect property having field’s input/output values color becomes highlighted blue color when we focus the edit field. When mouse is clicked on the Edit field value of the field becomes highlight.

Highlighting color can be defined in theme files.

autoskip

autoskip is used to move focus automatically to next component following tab order  when we enter the value up to maximum length. 

The order of the autoskip field based on the tab order of the component.

password

password field is used to show the input and output values as “*” format
The default password property is false
After setting password type property true the password format, then password format will be expressed.
All characters is shown string format with ‘*” like “*****”

Can we hide the values of Edit component?

maxlength

maxlength is used to set maximum size that is able to enter in the
edit component.

lengthunit

This property is used for maxlength unit to check the length of the
string. Different languages characters have different size depending on
lengthunit.
Example
utf16: Every single character has 1 byte
utf8: Every single character of English has 1 byte remaining others can have 2~5 bytes 
ascii: Every single character of English has 1 byte and Korean language characters has 2 bytes

padding(Left Margin)

This attribute is used to set position arguments of the Edit Components.
This attribute has four position arguments top, right, bottom and left.
Default value of attribute position is 0.

Source Location

Sample\Edit\np_Edit_Basic.xfdl

Edit value apply immediately to the DataSet

After binding the component with the DataSet, when we change focus from the component, the value is reflected to dataset immediately.
By using updateToDataset method the changed value will be applied immediately to DataSet without changing the focus.

Edit_Edit_Update_0

The main source content

this.Comp_Edit_Edit_Update_onkeyup = function(obj:Form, e:nexacro.KeyEventInfo)
{
 if (e.shiftKey == true && e.keycode == 83)
 {    
  var objFocus = this.getFocus();
  if (objFocus.name == 'edt_input')
  {
   this.edt_input.updateToDataset();
  } 
 } 
}
Example) As above source, if we edit the value in input component using shiftkey+s, the value will be immediately reflected in the DataSet. This way is applied to all components.

Reference Details

updateToDataset

If you have bind Dataset with edit component, modified value will be reflected  to dataset immediately. It is available in most of components.

Is there any way to reflect the input values to DataSet immediately without changing focus ?

updateToDataset

Source Location

Sample\Edit\np_Edit_Edit_Update.xfdl

Selecting Data using PopupDiv

Edit_PopupChose_0

We can input data by keyboard to the edit box, but we can also input data by Popup. After selecting code from popup, the value of the code and value will be inserted.

Main Source Code

this.popup_div = function(obj)
{
 var nX = system.screenToClientX(this, system.clientToScreenX(obj,16)) - this.PopupDiv01.width/2;
 var nY = system.screenToClientY(this, system.clientToScreenY(obj, 30));  
  this.PopupDiv01.trackPopup(nX, nY, null, null, "popup_call_back");
}

Popup screen location can be adjusted depending on customer development environment.

I want to know the way to enter data in Edit Box by popup.

Source Location

Sample\Edit\np_Edit_PopupChose.xfdl

MaskEdit

MaskEdit Basic

This mask edit is used to show input and output values in fixed standard format. 
We can use the MaskEdit property to show Social Security Number, Telephone Number and other useful information as regular expression format. This format does not show original output values
rather it shows values as expressed format like “AA--”.

MaskEdit_Basic_0

Ways to bind the mask edit field to the Grid

MaskEdit can be bind to the grid by bind property of dataset

There are the following steps to bind a edit field to dataset

♦ Work Flow
1) Select the MaskEdit component for binding
2) Right click on the mouse, open the dataset options and select dataset for binding
3) Open bind item window, map MaskEdit component property Column ID to desired column
When we finished the above settings we can see the result.

Use of MaskEdit Property

This property is used to specify input and output into defined expression format.
After choosing MaskEdit from property window, mask expression set format.

Mask Expression

Mask property can be expressed in several of formats. 
Expression example
“AA-###” in this example the expression is used to show first two values as characters then hyphen and remaining as number.

Source Location

Sample\MaskEdit\np_MaskEdit_Basic.xfdl

Processing input values in MaskEdit without - (Negative) values

Using MaskEdit we can protect to enter Negative (-) values.

MaskEdit_NoNegative_0

Setting mask

MaskEdit_NoNegative_1

Related Properties

mask

This property specifies the type of the receiving input in the MaskEdit.
According to different type specifying the format is different according to type property, in case of positive number Type '+' is used , and in case of negative values we can use '-'. Symbol.
+: This symbol is used for positive values only
-: This symbol is used for negative values only

mask, positive, negative

Source Location

Sample\MaskEdit\np_MaskEdit_NoNegative.xfdl

Using MaskEdit processing social security number in password format

Using MaskEdit we can process the last 7 digits of Social Security Number into password type.

MaskEdit_Password_0

mask

MaskEdit_Password_1

mask attribute '{}' means

Using the MaskEdit if we want to convert character into * format we put the characters inside {}. 
All characters inside '{}' will be changed into '*' format using MaskEdit property.

MaskEdit, mask

Source Location

Sample\MaskEdit\np_MaskEdit_Password.xfdl