docs(treelist): Add Cell Selection documentation and revamp Selection… #2302
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dimodi
approved these changes
Aug 2, 2024
ikoevska
reviewed
Aug 13, 2024
| @@ -1,7 +1,7 @@ | |||
| --- | |||
| title: Cell Selection | |||
| page_title: Grid - Cells Selection | |||
| description: Learn how to select cell in Blazor Grid component. Explore the selected cells. Discover cell selection bevahior when combined with other Grid features. Try the practical sample code for cell selection. | |||
| description: Learn how to select cell in Blazor Grid component. Explore the selected cells. Discover cell selection bevahior when combined with other Grid features. Try the practical sample code for cell selection. | |||
There was a problem hiding this comment.
Suggested change
| description: Learn how to select cell in Blazor Grid component. Explore the selected cells. Discover cell selection bevahior when combined with other Grid features. Try the practical sample code for cell selection. | |
| Learn how to select cells in the Blazor Grid component. Explore the selected cells. Discover how cell selection behaves when combined with other Grid features. Try the practical sample code for cell selection. |
| --- | ||
| title: Cell Selection | ||
| page_title: TreeList - Cells Selection | ||
| description: Learn how to select cell in Blazor TreeList component. Explore the selected cells. Discover cell selection bevahior when combined with other TreeList features. Try the practical sample code for cell selection. |
There was a problem hiding this comment.
Suggested change
| description: Learn how to select cell in Blazor TreeList component. Explore the selected cells. Discover cell selection bevahior when combined with other TreeList features. Try the practical sample code for cell selection. | |
| description: Learn how to select cells in the Blazor TreeList component. Explore the selected cells. Discover how cell selection behaves when combined with other TreeList features. Try the practical sample code for cell selection. |
|
|
||
| # Cell Selection | ||
|
|
||
| The TreeList component supports [single or multiple cell selection]({%slug treelist-selection-overview%}#use-single-or-multiple-selection). You can select a cell with mouse click anywhere in the cell. You can access the collection of selected cells, use this collection and manipulate it. You can subscribe to selection events. |
There was a problem hiding this comment.
Provides fits better here as it's more of an active statement, suggesting value, rather than the more passive "supports". Our style guide also recommends the serial comma for a list of three or more items.
Suggested change
| The TreeList component supports [single or multiple cell selection]({%slug treelist-selection-overview%}#use-single-or-multiple-selection). You can select a cell with mouse click anywhere in the cell. You can access the collection of selected cells, use this collection and manipulate it. You can subscribe to selection events. | |
| The TreeList component provides [single and multiple cell selection]({%slug treelist-selection-overview%}#use-single-or-multiple-selection). You can select a cell with mouse click anywhere inside the cell. You can access the collection of selected cells, use this collection, and manipulate it. You can subscribe to selection events. |
|
|
||
| To select a cell, click anywhere in it. | ||
|
|
||
| To select a range of cells in one or more columns, hold the **Shift** key, while clicking on the first and last cell of the range. To select or deselect multiple cells that don't belong to a range, hold the **Ctrl** key. |
There was a problem hiding this comment.
Generally, our style guide suggests monospace formatting for key names. Source.
| When the TreeList `Data` collection changes, the `SelectedCells` collection has the following behavior: | ||
|
|
||
| * When the user updates a selected cell and the item instance is replaced, you have to also replace the `DataItem` object in the `SelectedCells` collection. Do that in the [TreeList `OnUpdate` event]({%slug treelist-editing-overview%}#events). | ||
| * When the user deletes a row with selected cells, update the `SelectedCells` collection in the the TreeList `OnDelete` event handler. |
There was a problem hiding this comment.
Suggested change
| * When the user deletes a row with selected cells, update the `SelectedCells` collection in the the TreeList `OnDelete` event handler. | |
| * When the user deletes a row with selected cells, update the `SelectedCells` collection in the TreeList `OnDelete` event handler. |
| --- | ||
| title: Row Selection | ||
| page_title: TreeList - Rows Selection | ||
| description: Learn how to select row in Blazor TreeList component. Explore the selected rows. Discover row selection bevahior when combined with other TreeList features. Try the practical sample code for row selection. |
There was a problem hiding this comment.
Suggested change
| description: Learn how to select row in Blazor TreeList component. Explore the selected rows. Discover row selection bevahior when combined with other TreeList features. Try the practical sample code for row selection. | |
| description: Learn how to select rows in the Blazor TreeList component. Explore the selected rows. Discover how row selection behaves when combined with other TreeList features. Try the practical sample code for row selection. |
|
|
||
| # Row Selection | ||
|
|
||
| The TreeList component supports [single or multiple row selection]({%slug treelist-selection-overview%}#use-single-or-multiple-selection). You can select a row with mouse click and through a checkbox column. You can access the collection of selected rows, use this collection and modify it. You can subscribe to selection events. |
There was a problem hiding this comment.
Suggested change
| The TreeList component supports [single or multiple row selection]({%slug treelist-selection-overview%}#use-single-or-multiple-selection). You can select a row with mouse click and through a checkbox column. You can access the collection of selected rows, use this collection and modify it. You can subscribe to selection events. | |
| The TreeList component provides [single and multiple row selection]({%slug treelist-selection-overview%}#use-single-or-multiple-selection). You can select a row with mouse click and through a checkbox column. You can access the collection of selected rows, use this collection, and modify it. You can subscribe to selection events. |
|
|
||
| The items in `SelectedItems` are compared against the items in the TreeList data in order to determine which rows will be highlighted. The default framework behavior is to compare objects by reference. The data item references may not match when: | ||
|
|
||
| * The `SelectedItems` are obtained from a different data source than the all TreeList items, for example, from a separate service. |
There was a problem hiding this comment.
Suggested change
| * The `SelectedItems` are obtained from a different data source than the all TreeList items, for example, from a separate service. | |
| * The `SelectedItems` are obtained from a different data source than all the TreeList items, for example, from a separate service. |
|
|
||
| ## Row Selection and Other TreeList Features | ||
|
|
||
| The selection behavior may vary when other TreeList features are enabled, such as editing, virtualization, paging, column and row templates, row drag and drop. In such cases you need to consider certain limitations or adjust the application code. |
| * If you are using a [TreeList column template]({%slug treelist-templates-column%}) and you have a clickable element in the template, you can check the knowledge base article on [how to prevent row selection when the user clicks another component in the Grid column template]({%slug grid-kb-row-selection-in-column-template%}). It is for the Grid component, but the concept is identical. | ||
| * If you are using a [row template]({%slug treelist-templates-row%}) the TreeList cannot render a built-in [checkbox column]({%slug treelist-columns-checkbox%}). You have to render checkboxes manually and handle their changed event to populate the `SelectedItems` collection of the TreeList. You can find an example to get started in the following thread: [Grid Row Template with Selection - Unsure how to Bind to Selected Item](https://feedback.telerik.com/blazor/1463819-grid-row-template-with-selection-unsure-how-to-bind-to-selected-item). It is for the Grid component, but the concept is identical. | ||
|
|
||
| ### Selection and Row Drag and Drop |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to https://github.com/telerik/blazor/issues/9365