Using the List Grid View Web Part

The List Grid View web part displays Project Tasks (list type 171) grouped in sections, in a grid display. It supports task management capabilities like: quick add, edit, drag and drop, and right-click actions. The List Grid View web part is only available as a component of the Task Tracker template. It is not available as a separate web part elsewhere.

Toolbar Actions

The following actions are available in the toolbar at the top of the Grid:

1. Add Task: If a Grid row is selected, the Add Task action will be active. If a section was selected before clicking Add Task, a new subtask of the section will be added to the Grid. If a task was selected before clicking Add Task, a new sibling task will be added to the Grid. Tasks that are dragged to a top level, or are fully outdented, will be converted into a section.
2. Add Section: Adds a new section at the bottom of the Grid if no row is selected, or at the bottom of the section of the row that is selected.
3. Refresh: Refreshes the data in the Grid. This does not refresh the Grid structure; F5 is needed to refresh the Grid structure.
4. Expand All: Expands all rows in the Grid.
5. Collapse All: Collapses all rows in the Grid.
6. Indent: Moves the row one hierarchy level to the right. Indent is disabled when you are sorting on a column.
7. Outdent: Moves the row one hierarchy level to the left. Outdent is disabled when you are sorting on a column.

Context Menu Actions

The following actions are available by right-clicking on sections and tasks:

1. Add Section: Adds a new section below the section of the item selected.
2. Add Task: Adds a new task immediately below the selected item.
3. Add Subtask: Available when a task is selected. Adds a child task under the selected task creating a task hierarchy.
4. Open Details: Opens the item in a SharePoint dialog. You can use the dialog update additional columns not displayed in the Grid and perform other SharePoint actions.
5. Indent: Indents the selected item and any child tasks under it.
6. Outdent: Available for tasks only. Outdents a task out one level from its current hierarchy level.
7. Delete: Deletes the selected item in the Grid and sends it to the SharePoint recycle bin from where they can be recovered later if needed.
8. Save: Available when editing a cell. Saves changes to the cell being edited in the Grid.
9. Cancel: Available when editing a cell. Undoes any changes made to the cell in the Grid.

Drag and Drop

To Drag and drop items, hover the mouse over the drag icon in the left-most column, click and drag the item vertically, and drop it in the desired location. If when moving an item to a new location the item row's horizontal line is blue, the item will be dropped as a section. If when moving an item to a new location the item row's horizontal line is green, the item will be dropped as a task. Two green lines means the item will be dropped as a child-task of the selected item.

Mark Complete and Status Icons

Click on the row icon to mark an item as Completed. If the item is already Completed, it will be set to Not Started. This applies to all items, tasks and sections.

The status choices of: Not Started, In Progress, Completed, Deferred, and Waiting on someone else, each map to a corresponding status icon. Clicking the status icon will cycle the status values between Completed and Not Started only. When updating the row, a busy spinner icon is shown.

Search

Search allows users to search the Grid and return items that meet the search criteria.

Any relevant task contained under a summary task will be visually organized in a hierarchical manner, with their parent summary task positioned directly above them. This hierarchy structure serves to provide users with a clear and organized view of the tasks within the summary, enhancing the overall user experience and making it easier to manage and understand complex task lists.

Keyboard Navigation

Interaction Keys	Description
F2	Edits the selected cell
Enter	Saves the current cell and refreshes the Grid
Tab	Saves the current cell
Delete	Deletes the selected item
Esc	Deselects the currently selected cell
Ctrl + Shift + Up Arrow	Collapses selected item
Ctrl + Shift + Down Arrow	Expands selected item
Ctrl + Up Arrow	Collapses all items
Ctrl + Down Arrow	Expands all items
Ctrl + Home	Navigates to the first cell in the Grid
Ctrl + End	Navigates to the last cell in the Grid
Home	Moves focus to the first cell on the selected row
End	Moves focus to the last cell on the selected row
Up Arrow	Moves cell selection up
Down Arrow	Moves cell selection down
Right Arrow	Moves cell selection right
Left Arrow	Moves cell selection left
Alt + J	Sets the focus to the Grid

Configure the List Grid View Web Part

All web parts share basic modification functionality - click here to learn more. Modification options specific to the List Grid View web part are addressed below.

To configure the List Grid View web part: Click in an empty space on the Grid, click the Grid tab in the Ribbon, and then click Configure List Grid Settings.

Web Part Settings

Web Part Settings

Enter the web part Title and select the Chrome Type.

• Title
• Chrome Type

Select Source List

Select Source List

Select the list to use as a data source for the Grid. By default all items are returned from the list. To display a subset of the items select either a predefined view or specify a custom CAML filter.

• Select List

Select the source list, i.e., Project Tasks

• Filter:

  • All items
    This includes all items from the selected list.

  • Items in this view
    This uses the filtering from the selected view in the selected list. If there is no filtering specified in the selected view, then all items are included.

  • Specify filter (CAML)
    This allows you to write your own CAML filter and insert the code.

Select Columns

Columns

Optionally select the columns to display on the Grid.

You can view information and specify default behavior for columns in the Grid as follows:

• Display
  Select the checkbox beside the column name to display the column on the Grid.
• Column Name
  This is the column name that is displayed to the user as configured in the settings of the associated list.
• Type
  This is the column type as configured in the settings of the associated list.
• Position from Left
  The position from the left side of the Grid as presented to the user.

Column Settings

Task Defaults

Default values for new tasks created in the Grid.

• Assigned To: Defaults the Assigned To column to the Logged in User.
  Note that the Assigned To column must be included in the Grid.

General Settings

Add Actions

Select 'Show Add actions' to show Add Task and Add Section actions in the Grid. Unselect to remove the ability to add items from the toolbar actions, context menu, and through the keyboard.

If 'Show Add actions' is selected , then select 'Optionally, show an Add Section action on the page if the Grid is empty'. This will show the first step i.e., Add Section action, on the Grid if no items are displayed.

Delete Actions

Enable or disable deletion of items in the Grid. This will allow user with the correct permissions to delete items through the context menu or keyboard.