Edit Cell

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

In EditCell mode, the DevExpress Blazor TreeList displays an in-place editor when a user clicks a data cell. Users can then edit the current cell value and activate editors for other cells within the same row. When focus moves to a different row, the control validates user input and saves changes.

To enable cell editing, you must:

  1. Set the EditMode property to EditCell.
  2. Specify the KeyFieldName property. If not set, the TreeList uses standard .NET value equality comparison to identify data items.
  3. Handle the CustomizeEditModel event to initialize an edit model for new data rows (set predefined cell values and link new nodes to their parent).
  4. Handle the following events to make final data changes, check access permissions, post changes to the underlying data source, and reload TreeList data:
    • EditModelSaving — Fires when a user saves the edited row and validation passes.
    • DataItemDeleting — Fires when a user confirms the delete operation in the delete confirmation dialog. To enable delete operations, proceed to step 5.
  5. (Optional) Declare a DxTreeListCommandColumn object in the Columns template to create and delete data rows. In addition to predefined New and Delete buttons, this column displays Edit, Save, and Cancel command buttons that are not used in EditCell mode. Disable EditButtonVisible, CancelButtonVisible, and SaveButtonVisible properties to hide these buttons.

To display an editor in a data cell, users can focus the cell and press Enter. When the editor is visible, the following keyboard shortcuts are available:

  • Enter — Validates the cell value and hides the editor.
  • Esc — Hides the editor and discards changes made in this cell. Pressing Esc when the editor is hidden discards all changes made in the row and cancels row editing.
  • Tab/Shift+Tab — Hides the editor, focuses the next/previous data cell, and displays an editor in the newly focused cell.