| 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 |
| |
In this demo, the DevExpress Blazor TreeList displays an in-place editor when a user clicks a data cell. Users can edit the current cell and activate editors for other cells within the same row. When focus moves to a different row, the component validates user input and saves changes.
To enable cell editing:
- Set the EditMode property to
EditCell. - Specify the KeyFieldName property. If not set, the TreeList uses standard .NET value equality comparison to identify data items.
- Handle the CustomizeEditModel event to initialize an edit model for new data rows (set predefined cell values and link new nodes to their parent).
- (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 commands that are redundant in cell editing mode. Disable EditButtonVisible, CancelButtonVisible, and SaveButtonVisible properties to hide these buttons.
- 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.
You can use the following keyboard shortcuts in cell editing mode:
Enter / Shift+Enter
Opens an in-place editor for the focused cell (if not already open).
If an in-place editor is already open, Enter applies changes and closes the editor. Focus can then move to the next/previous cell depending on the EnterKeyDirection property. If the EditNextCellOnEnter option is enabled, the TreeList component opens an in-place editor in the next cell. Use checkboxes above the component to try these options.
Note: Shift+Enter moves focus in the opposite direction.
Esc
Hides the in-place editor and discards changes made in that cell.
If the in-place 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.
Start typing in a focused cell
When the EditOnKeyPress property is enabled, users can start editing a cell by entering a value within it. The editor opens automatically and accepts entered characters. Select the Edit on Key Press option to try it out.
In this demo, you can open a context menu to test edit cell mode in combination with other TreeList features.
For additional information on how you can enable data editing and use edit-related options, refer to the following help topic: Edit Cell.