Infragistics(R) NetAdvantage(R) LightSwitch
Getting Started with Infragistics Masked Editor
Send Feedback

Glossary Item Box

This topic demonstrates, as a way to get you started with the Infragistics Masked Editor, how to create a format mask for phone number input.

Preview

Following is a preview of the final result.

Figure 1: Final result of the getting started project showing the formatted phone number.

Requirements

Overview

Following is a conceptual overview of the process:

  1. Adding the Infragistics LightSwitch Extensions
  2. Configuring the data source
  3. Creating the screen
  4. Integrating the Infragistics Masked Editor

Steps

  1. Add the Infragistics LightSwitch Extensions.
    1. Double-click on the Properties in the Solution Explorer to bring up the project properties.
    2. Click the Extensions tab, and check the box next to Infragistics LightSwitch Extensions.
  2. Configure the data source.
    1. Right-click on the Data Sources folder and select Add Data Source.
    2. Click on the Database item and click the Next button.
    3. In the Server name text box type, .\sqlexpress, and then on the Select or enter a database name drop-down, click the drop-down to select Northwind.
    4. Click the Test Connection button and make sure the connection was successful. Afterwards, click the OK button.
    5. Expand the Tables item and click the check box next to the Employees table. Afterwards, click the Finish button.
    6. The data binding has been added to the LightSwitch solution and you are now ready to create screens using this table.
  3. Create the screen.
    1. Click the Screen button that is on the toolbar above the table to open the Add New Screen dialog.
    2. Select the screen template titled List and Details Screen and then drop-down the Screen Data combo box to select our Employees table as shown in the image, then click OK.
  4. Integrate the Infragistics Masked Editor.
    1. Click the drop-down next to Home Phone and select Infragistics Masked Editor from the menu.
    2. In the Properties pane, enter (###) ###-#### into the Mask property text box. You’ll also notice a few other properties available for customizing the masked editor. For information about properties, refer to the Infragistics Masked Editor Properties topic.
    3. Click the drop-down for Display Mode and select MaskMode.IncludeLiterals.
    4. Press F5 to save and run the application.
    5. After the application opens you’ll notice the proper string formatting on the Home Phone field.
    6. The Infragistics Masked Editor will automatically validate entered numbers on-the-fly with the Validation Mode set to ValidationMode.Always. To see the validation in action, change the last digit “7” to the letter “a”. With the Mask property set to allow only numeric values, the letter “a” will not appear.

Related Topics

©2012. All Rights Reserved.