1052621: Updated the Common API UG for Blazor components - #10644
Vaseegaran-SF4468 wants to merge 1 commit into
Conversation
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
kmkrish001
left a comment
There was a problem hiding this comment.
📋 Review Summary
Overall Quality: Needs Work
Target .NET Version: Latest stable (Blazor)
📊 Findings Overview
- ❌ 0 Critical issues
⚠️ 2 Major issues- ℹ️ 3 Minor issues
⚠️ Changes Requested
The following major issues should be addressed before merge:
- Inconsistent hyperlink coverage in the "Common properties" table — only DataGrid cells are linked in the
CssClass,Locale, andTooltipTemplaterows (blazor/common/api-reference/common-apis-across-data-components.md, line 34) - Unverified
TooltipTemplateclaims for TreeGrid, Gantt Chart, and Pivot Table — these likely need correction to the actual tooltip-related APIs per component (line 39)
Please review the inline comments for detailed recommendations.
🤖 Automated review by Blazor Docs PR Reviewer Agent
|
|
||
| | Description | DataGrid | TreeGrid | Gantt Chart | Pivot Table | Scheduler | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| | Property for custom CSS class | [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CssClass) | `CssClass` | `CssClass` | `CssClass` | `CssClass` | |
There was a problem hiding this comment.
Formatting Issue (Major)
In the "Common properties" table, only the DataGrid cells are hyperlinked to the API reference in the CssClass, Locale, and TooltipTemplate rows, while the TreeGrid, Gantt Chart, Pivot Table, and Scheduler cells are plain backticked code. Other rows (Height, Width, EnableRtl, DataSource) link every cell. This inconsistency looks unfinished and prevents readers from navigating to the API docs for the unlinked components.
Why this matters: The page's purpose is to be a cross-component API reference; missing links for 4 of 5 components significantly reduces its usefulness.
Recommended fix: Link every cell in the table, for example:
| Property for custom CSS class | [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CssClass) | [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_CssClass) | [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_CssClass) | [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_CssClass) | [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_CssClass) || | Property for component width | [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) | [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_Width) | [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Width) | [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Width) | [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_Width) | | ||
| | Property for locale/culture | [Locale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Locale) | `Locale` | `Locale` | `Locale` | `Locale` | | ||
| | Property for right-to-left support | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnableRtl) | | ||
| | Property for tooltip template | [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_TooltipTemplate) | `TooltipTemplate` | `TooltipTemplate` | `TooltipTemplate` | — | |
There was a problem hiding this comment.
Technical Error (Major)
The TooltipTemplate row lists this property for TreeGrid, Gantt Chart, and Pivot Table as plain code with no links to verify. Based on the DataGrid link (which points to GridTemplates.TooltipTemplate, a child templates component — not the root grid), these claims need verification:
- Gantt Chart: tooltips are configured through
GanttTooltipSettingsand itsTemplate, not a root-levelTooltipTemplateproperty. - Pivot Table:
SfPivotViewdoes not expose a rootTooltipTemplateproperty. - TreeGrid: tooltip customization is handled via tooltip settings rather than a root
TooltipTemplate.
Why this matters: Documenting API names that don't exist at the root level will mislead developers trying to configure tooltips.
Recommended fix: Link each cell to the actual tooltip-related API for that component, or correct the row to reflect how tooltips are configured per component. If a component doesn't support a root-level tooltip template, use an em dash (—) as done for Scheduler.
| | Property for locale/culture | [Locale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Locale) | `Locale` | `Locale` | `Locale` | `Locale` | | ||
| | Property for right-to-left support | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableRtl) | [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnableRtl) | | ||
| | Property for tooltip template | [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_TooltipTemplate) | `TooltipTemplate` | `TooltipTemplate` | `TooltipTemplate` | — | | ||
| | Property for data source | [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) | [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) | [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DataSource) | [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_DataSourceSettings) | EventSettings.DataSource | |
There was a problem hiding this comment.
Formatting Issue (Minor)
The Scheduler cell in the DataSource row uses plain text EventSettings.DataSource without backticks, while other unlinked cells in the table use backtick formatting (e.g., CssClass).
Recommended fix:
... | [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_DataSourceSettings) | `EventSettings.DataSource` ||
|
||
| # Common APIs across Blazor Data Components | ||
|
|
||
| The Syncfusion® Blazor data components, including the [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid), [Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart), [Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table), and [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler), share a common set of events, properties, and CSS conventions for component lifecycle management, action handling, appearance customization, and theming. Understanding these shared APIs helps you work more efficiently across components, apply configurations consistently, and quickly become familiar with other data components in the Syncfusion Blazor suite. |
There was a problem hiding this comment.
Formatting Issue (Minor)
There is a trailing whitespace at the end of the intro paragraph ("...Syncfusion Blazor suite. ").
Recommended fix: Remove the trailing space.
| | Event when component is created | [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) | [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Created) | [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Created) | [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_Created) | [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Created) | | ||
| | Event when component is destroyed | [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Destroyed) | [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridEvents-1.html#Syncfusion_Blazor_TreeGrid_TreeGridEvents_1_Destroyed) | [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_Destroyed) | [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_Destroyed) | [Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEvents-1.html#Syncfusion_Blazor_Schedule_ScheduleEvents_1_Destroyed) | | ||
|
|
||
| `OnActionBegin` is raised before an action is performed and can be cancelled through its `Cancel` argument. The remaining events are raised after the corresponding lifecycle or action stage completes. |
There was a problem hiding this comment.
Content Clarity (Minor)
The sentence "The remaining events are raised after the corresponding lifecycle or action stage completes" groups DataBound, OnActionComplete/ActionCompleted, Created, and Destroyed together, which is vague — especially for Destroyed, which is a cleanup/disposal event rather than a "stage completion."
Recommended fix: Be slightly more specific, e.g.:
"OnActionComplete/ActionCompleted is raised after the action finishes, DataBound after data is loaded, and Created/Destroyed when the component is initialized and disposed."
| </ul> | ||
| </li> | ||
| <li> | ||
| <a href="/blazor/common/api-reference/common-apis-across-data-components">Common APIs</a> |
Description
Updated the Common API UG documentation for Blazor DataGrid, TreeGrid, Gantt Chart, Pivot Table, Scheduler components
Code Studio usage(Mandatory)
Code Studio used in this PR/MR?
If
Yes: Primary use (choose one)Outcome
If “Cost time” explain in short (1 or 2 lines):
Type of Change
Reviewer Checklist (Mandatory)