Wijmo FlexGrid Screen (Editing)

FlexGrid has built-in support for fast, in-cell editing like Excel. Users can start editing by typing into any cell without having to add extra columns with Edit buttons. This puts the cell in quick-edit mode, wherein pressing Enter key finishes the editing and moves the selection to a different cell.

Data is automatically coerced to the proper type when editing finishes. If the user enters invalid data, the edit is cancelled and the original data remains in place. To disable editing at the row, column or grid levels, use the isReadOnly property.

This section describes how to use Wijmo FlexGrid Screen (Editing) screen template and add data.
This topic comprises of three steps:

Step 1: Add a Screen

Step 2: Add Data to Screen

Step 3: Build and Run the Project

The following image shows how the FlexGrid appears after completing the steps above:

Step 1: Add a Screen

In the Solution Explorer, right click the client folder of your application (for example: Application1.HTMLClient) and click 'Add Screen...'.
The Add New Screen dialog appears, select the Wijmo FlexGrid Screen (Editing) screen template for your application.
Under Provide screen information, enter "FlexGridEditing" in the Screen Name text box.

Step 2: Add Data to Screen

The example uses demo data from http://lsdemo.componentone.com/DataServices/Demo.svc.

Under the Screen Data of the Add New Screen dialog, click the drop-down arrow.
A list of tables appears, select DemoServiceData.Products.
Click OK. The screen, FlexGridEditing.Isml is added to your application
FlexGridEditing.Isml page is added to the project under Screens folder, and the screen appears as shown in the image below:

Step 3:Build and Run the Project

Click Build | Build Solution to build the project.
Press F5 to run the project.