New Item Row

  
TaskStart DateDue DatePriorityProgress
Click here to add a new row
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
Reach Monthly Recurring Revenue ($ MRR) Of $250000
11/13/201712/3/2017Low
Increase Recurring Revenues
5/1/20172/20/2018High
Achieve Trial to % Paid Ratio of Over 50%
9/10/201712/13/2017Low
Implement New Product Planning Process
1/17/20184/28/2018Low
Redesign and Launch Our New Landing Page
2/6/20183/2/2018Medium
Design New Version of Our Site Structure, Navigation and All Pages
5/24/20172/16/2018Low
Support Marketing and Sales with Design Deliverables
10/14/201711/4/2017Low
Promote Our Design Team as the Best Place to Work
8/2/20172/4/2018Low
Improve Annual Budgeting and Business Planning
2/2/20184/8/2018Medium
Receive Business Line Budget Proposals
1/13/20184/7/2018Low
Finish Raising New Capital for Growth Needs
10/28/20174/24/2018Low
Improve Internal Document Management
10/31/20174/25/2018Low
Choose and Launch New Document Sharing Platform
4/22/201712/25/2017High
Increase End-User Satisfaction Rating from 4.0 To 4.5
5/11/201712/31/2017Low
Implement a Better System for Tracking Incoming Requests
4/10/201710/16/2017Low
Collect More Accurate Sales Lead Data
1/5/20181/31/2018Low
Train Sales Staff
10/9/201712/21/2017Low
Data grid with 37 rows and 5 columns
0 rows are selected

Our Blazor TreeList New Item Row allows users to add new items to the root level of the TreeList component. Use the EditNewRootRowPosition property to specify visibility and location of the new root nodes:

  • Top — The New Item Row is hidden. Once a user clicks the New button or you call the StartEditNewRowAsync method, the TreeList displays an edit form, edit row, or cell editors at the top of the current page.
  • Bottom — The New Item Row is hidden. Once a user clicks the New button or you call the StartEditNewRowAsync method, the TreeList displays an edit form, edit row, or cell editors at the bottom of the current page.
  • FixedOnTop — The TreeList displays the New Item Row above data records and keeps it visible during vertical scrolling and paging operations.
  • LastRow — The TreeList displays the New Item Row after the last data record.

The combo box in the TreeList's toolbar specifies the New Item Row's position.

You can enable row reordering to allow users to move newly added items in the node hierarchy. In this demo, you can drag a row to change its position/parent.

In EditCell mode, users can press Tab or Shift+Tab keys to navigate between data cells in the New Item Row. When leaving the last/first cell, focus moves back to this row's first/last data cell, and the TreeList validates row values. Based on validation results, the component executes one of the following actions:

  • If validation fails, the component displays error icons.
  • If validation passes, the component saves changes and starts editing a new row.

In this demo, validation is disabled. Once focus leaves the New Item Row, our Blazor TreeList adds the row to the data source. The EditOnKeyPress property is enabled and row editing starts once you begin typing.