How to: Implement a Custom Row Edit Form
- 3 minutes to read
In this application, the grid is bound to a collection of orders. Each data row in the grid represents an individual order and displays the following information:
- Ordered product name (the Product column)
- Product unit price (the Price column)
- Number of ordered product units (the Quantity column)
- Order total value (the Total column)
- A value indicating whether an order is shipped (the Shipped column)
The default row edit form in this grid looks like the following.
This example demonstrates how to create a custom form to add new data rows and another form to edit existing rows.
Add New Order Form
This form is invoked on tapping New Item Row in the grid and allows an end user to add a new data row (create a new order). On this form, an end user can select a product name via a Picker control, and set the number of ordered product units via a Slider control. A unit price is automatically shown for the selected product, and the order total value is automatically calculated.
Edit Order Form
This form is invoked on double-tapping a cell or selecting Edit Cell from the popup menu. It allows an end user to modify existing data rows. On this form, product name and unit price are shown in Lable controls and cannot be changed. An end user can change the number of ordered product units via a Slider control and use the Switch control to set whether the order is shipped.
To create a custom row edit form and show it instead of the default form, execute the steps below.
Specify a custom form view. In this example, it is a ContentView descendant with a set of labels and editors inside (see the CustomFormEditorContent.cs file). This view's BindingContext is an EditValuesContainer object. Labels and editors are bound to data fields via the EditValuesContainer.GetBindingPath method with data field names passed as parameters.
The EditValuesContainer.IsNewRow property identifies whether a from is invoked for a new or existing row.
Custom form captions are implemented by using the mechanism of localization.
- Create a DataTemplate instance for your custom form view and assign this template to the GridControl.EditFormContent property (see the MainPage.xaml.cs file).
- Set the GridControl.RowEditMode property to RowEditMode.Popup to show a form instead of an in-place row editor.