EditForm Mode

 
New buttonTaskStart DateDue DatePriorityProgress
Simplify & Clarify Product Messaging
4/3/20184/14/2018Low
Create Action Plan to Improve Customer Engagement
8/8/20174/8/2018Medium
Increase Average Subscription Price
8/9/20179/13/2017Low
Reduce Churn to Less than 1% Monthly
2/12/20185/1/2018Low
Finalize the Content Strategy
3/10/20184/11/2018High
Grow Subscriber Base by 5% per Week
7/24/20172/10/2018Low
Increase the CTR% to Above Industry Average 3.5%
7/11/20174/15/2018Low
Close the Final Budget
6/5/20176/18/2017Low
Achieve Record Metrics in All Areas
4/24/20172/3/2018Low
Begin Content Review
4/27/20172/25/2018Medium
Produce Online Survey
10/14/20173/25/2018Low
Improve Our Content and Its Distribution
4/29/201711/9/2017High
Update Old Content
2/2/20184/2/2018Medium
Map and Analyze Marketing Channels
7/5/20174/19/2018Low
Research and Improve Customer Satisfaction
10/27/20174/30/2018Medium
Present an Action Plan for Next Quarter
6/6/20175/11/2018High
Achieve Record Revenues While Increasing Profitability
10/21/20172/28/2018Low
Hit Quarterly Revenue of Over $1000000
8/30/20171/7/2018Low
Start Sales in 2 New Countries
9/26/201710/4/2017Low
Increase Gross Profit Margin from 54% to 63%
7/14/201710/25/2017Low
Data grid with 37 rows and 6 columns
0 rows are selected

The DevExpress Blazor TreeList supports multiple data edit modes. In EditForm mode, the TreeList displays an edit form instead of the edited data row. In PopupEditForm mode, the TreeList displays an edit form inside a pop-up window.

To edit Blazor TreeList data, you must:

  1. Declare a DxTreeListCommandColumn object in the Columns template. This column displays predefined New, Edit, and Delete command buttons.
  2. Set the EditMode property to EditForm or PopupEditForm.
  3. Our default edit form displays only Save and Cancel buttons. Use the EditFormTemplate to populate your edit form with individual editors. You can add custom editors or call the GetEditor method to automatically obtain column editors (generated by the TreeList component).
  4. Handle the CustomizeEditModel event to initialize an edit model for new data rows (set predefined cell values and link new nodes to their parent).
  5. Handle the following events to make final data modifications, check access permissions, post changes to the underlying data source, and reload TreeList data:
    • EditModelSaving — Fires when a user submits the edit form and validation passes.
    • DataItemDeleting — Fires when a user confirms the delete operation in the delete confirmation dialog.
  6. Specify the KeyFieldName property. If not set, the TreeList uses standard .NET value equality comparison to identify data items.

In this demo, the checkbox displayed within the TreeList toolbar allows you to switch to PopupEditForm mode.