Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: telerik/blazor-docs
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 9.0.0
Choose a base ref
...
head repository: telerik/blazor-docs
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref

Commits on May 21, 2025

  1. Fix env variable name

    dimodi committed May 21, 2025

    Verified

    This commit was signed with the committer’s verified signature.
    dimodi Dimo Dimov
    Copy the full SHA
    1d22b09 View commit details
  2. Copy the full SHA
    dd56b10 View commit details
  3. Fix slug

    dimodi committed May 21, 2025

    Verified

    This commit was signed with the committer’s verified signature.
    dimodi Dimo Dimov
    Copy the full SHA
    68f77cf View commit details
  4. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    2532df9 View commit details
  5. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    50ebbb7 View commit details
  6. docs(Common): Add Window Centered to breaking changes (#2983)

    * Update 9-0-0.md
    
    * Update upgrade/breaking-changes/9-0-0.md
    dimodi authored May 21, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    2b213a4 View commit details
  7. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    558ae8f View commit details
  8. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    fd930e0 View commit details

Commits on May 23, 2025

  1. Copy the full SHA
    51a982f View commit details

Commits on May 28, 2025

  1. chore(PanelBar): update field bindings docs (#2986)

    * chore(PanelBar): update field bindings docs
    
    * Update components/panelbar/data-binding/overview.md
    
    Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
    
    * Update components/panelbar/data-binding/overview.md
    
    ---------
    
    Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>
    ntacheva and ikoevska authored May 28, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    c2a3dc4 View commit details

Commits on May 29, 2025

  1. Copy the full SHA
    eee4841 View commit details

Commits on May 30, 2025

  1. chore(common): update assets section in hybrid apps docs (#2990)

    * chore(common): update assets section in hybrid apps docs
    
    * Update getting-started/hybrid-blazor.md
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    
    * Update getting-started/hybrid-blazor.md
    
    ---------
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    ntacheva and yordan-mitev authored May 30, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    9e6849f View commit details

Commits on Jun 6, 2025

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    2553785 View commit details
  2. docs(TabStrip): Set tab ID as parameter (#2999)

    * docs(TabStrip): Set tab ID as parameter
    
    * Update events.md
    dimodi authored Jun 6, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    c176113 View commit details
  3. Update formgroups.md (#2995)

    Added more description to the ColumnSpacing parameter.
    Removed Unnecessary and possibly misleading usage of the ColumnSpacing parameter in the example.
    JustinR34 authored Jun 6, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    dac4b26 View commit details
  4. Update overview.md (#2996)

    Shouldn't this say horizontal space? or maybe just space..
    JustinR34 authored Jun 6, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    8901f17 View commit details
  5. kb(Grid): Update KB to work in Safari (#2997)

    * kb(Grid): Update KB to work in Safari
    
    * Update knowledge-base/grid-remove-group-indent.md
    dimodi authored Jun 6, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    b1453d8 View commit details

Commits on Jun 9, 2025

  1. chore(selects): Optimize reference documentation (#2981)

    * chore(selects): Optimize reference documentation
    
    * Update components/combobox/data-bind.md
    
    * Update components/dropdownlist/data-bind.md
    ntacheva authored Jun 9, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    252f073 View commit details
  2. docs(TimePicker): Add a missing parameter (#3004)

    * docs(TimePicker): Add a missing parameter
    
    * Update components/timepicker/overview.md
    dimodi authored Jun 9, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    95c7349 View commit details
  3. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    0e66a76 View commit details
  4. docs(AI): Add AI Coding Assistant privacy information (#3006)

    * docs(AI): Add AI Coding Assistant privacy information
    
    * Update ai/overview.md
    
    * Update ai/overview.md
    
    * Update ai/overview.md
    dimodi authored Jun 9, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    feebb9a View commit details

Commits on Jun 10, 2025

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    64d3b28 View commit details
  2. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    330fc4d View commit details
  3. docs(AI): Connect Telerik MCP server to local LLM (#3013)

    * docs(AI): Connect Telerik MCP server to local LLM
    
    * Update ai/mcp-server.md
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    
    ---------
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    dimodi and yordan-mitev authored Jun 10, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    331211b View commit details

Commits on Jun 11, 2025

  1. docs(Common): Add TelerikLicensingStrict to license warnings as errors (

    #3015)
    
    * docs(Common): Add TelerikLicensingStrict to license warnings as errors
    
    * Update deployment/ci-cd-license-key.md
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    
    ---------
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    dimodi and yordan-mitev authored Jun 11, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    58f0d87 View commit details

Commits on Jun 12, 2025

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    e78f9b3 View commit details

Commits on Jun 13, 2025

  1. kb(Form): Add KB for FluentValidation exception and revamp existing e…

    …xample (#3017)
    
    * kb(Form): Add KB for FluentValidation exception and revamp existing example
    
    * Update knowledge-base/inputs-validation-child-component.md
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    
    * Update knowledge-base/inputs-validation-child-component.md
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    
    ---------
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    dimodi and yordan-mitev authored Jun 13, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    a392d63 View commit details
  2. kb(MediaQuery): Add KB about Json exception (#3014)

    * kb(MediaQuery): Add KB about Json exception
    
    * Update knowledge-base/mediaquery-initmediaquery-jsonexception.md
    
    Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
    
    * Update knowledge-base/mediaquery-initmediaquery-jsonexception.md
    
    Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
    
    * Update knowledge-base/mediaquery-initmediaquery-jsonexception.md
    
    Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
    
    ---------
    
    Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
    dimodi and Tsvetomir-Hr authored Jun 13, 2025

    Partially verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
    Copy the full SHA
    e9bec3e View commit details
  3. chore(TabStrip): add kb for adding and removing tabs (#2998)

    * chore(TabStrip): add kb for adding and removing tabs
    
    * chore: polish the example and update article content
    
    * polish KB article
    
    ---------
    
    Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
    Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
    3 people authored Jun 13, 2025

    Partially verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
    Copy the full SHA
    337dc10 View commit details
  4. Verified

    This commit was signed with the committer’s verified signature.
    dimodi Dimo Dimov
    Copy the full SHA
    a713c27 View commit details
  5. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    4a84b36 View commit details
  6. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    6a466b8 View commit details
  7. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    f6a926f View commit details
  8. docs(DockManager): Add missing UnpinnedSize and UnpinnedSizeChanged (#…

    …3026)
    
    * docs(DockManager): Add missing UnpinnedSize and UnpinnedSizeChanged
    
    * Update events.md
    
    * polishing
    dimodi authored Jun 13, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    921141f View commit details
  9. docs: Update PR-to-production action (#3025)

    * docs: Update PR-to-production action
    
    * add empty lines
    
    * Update .github/workflows/pull_request_closed.yml
    dimodi authored Jun 13, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    1876a2a View commit details
  10. docs(Grid,TreeList): Add information about deleting items in edit mode (

    #3024)
    
    * docs(Grid): Add information about deleting items in edit mode
    
    * docs(TreeList): Add information about deleting items in edit mode
    dimodi authored Jun 13, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    cb0ba41 View commit details
  11. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    aec7bf4 View commit details
  12. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    985eb69 View commit details

Commits on Jun 16, 2025

  1. Verified

    This commit was signed with the committer’s verified signature.
    dimodi Dimo Dimov
    Copy the full SHA
    9134df6 View commit details
  2. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    ccc7f48 View commit details
  3. Fix action output name

    dimodi committed Jun 16, 2025

    Verified

    This commit was signed with the committer’s verified signature.
    dimodi Dimo Dimov
    Copy the full SHA
    4479e4b View commit details
  4. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    989148b View commit details
  5. doc(Gauges): Document label Position parameter (#3033)

    * doc(Gauges): Document label Position parameter
    
    * Update components/gauges/arc/labels.md
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    
    ---------
    
    Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
    dimodi and yordan-mitev authored Jun 16, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    e0ae704 View commit details
  6. docs(Editor): Improve schema overview (#3036)

    * docs(Editor): Improve schema overview
    
    * Update overview.md
    dimodi authored Jun 16, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    39fbe5c View commit details
  7. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    4df790b View commit details
  8. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    7e5a600 View commit details

Commits on Jun 17, 2025

  1. docs(Common): Update obsolete NuGet server information (#3041)

    * docs(Common): Update obsolete NuGet server information
    
    * Update installation/nuget.md
    dimodi authored Jun 17, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    0405f44 View commit details
  2. kb(Grid): prevent checkbox column click (#3027)

    * kb(Grid): prevent checkbox column click
    
    * kb(Grid): add PR review suggestions
    IvanDanchev authored Jun 17, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    62e3bdc View commit details
  3. Added new kb article autocomplete-copy-text-itemtemplate (#3018)

    * Added new kb article autocomplete-copy-text-itemtemplate
    
    * chore(Autocomplete): add suggestions
    
    ---------
    
    Co-authored-by: KB Bot <kb-bot@telerik.com>
    Co-authored-by: Hristian Stefanov <Hristian.Stefanov@progress.com>
    3 people authored Jun 17, 2025

    Partially verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    We cannot verify signatures from co-authors, and some of the co-authors attributed to this commit require their commits to be signed.
    Copy the full SHA
    82e0fbd View commit details

Commits on Jun 18, 2025

  1. docs(kb): add kb for automatically select (#3032)

    * docs(kb): add kb for automatically select
    
    * chore: modify solution section
    Tsvetomir-Hr authored Jun 18, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    6d69639 View commit details
Showing with 4,417 additions and 1,160 deletions.
  1. +552 −0 .github/copilot-instructions.md
  2. +1 −1 .github/workflows/pull_request.yml
  3. +12 −14 .github/workflows/pull_request_closed.yml
  4. +3 −0 _contentTemplates/common/ai-coding-assistant.md
  5. +6 −0 _contentTemplates/common/get-started.md
  6. +26 −4 _contentTemplates/grid/state.md
  7. +3 −10 ai/copilot-extension.md
  8. +25 −32 ai/mcp-server.md
  9. +28 −7 ai/overview.md
  10. +1 −1 common-features/adaptive-rendering.md
  11. +1 −51 components/autocomplete/data-bind.md
  12. +1 −3 components/autocomplete/overview.md
  13. +9 −12 components/barcodes/qrcode/overview.md
  14. +95 −16 components/buttongroup/buttons.md
  15. +3 −0 components/chart/overview.md
  16. +21 −12 components/chart/types/bubble.md
  17. +1 −59 components/combobox/data-bind.md
  18. +1 −2 components/combobox/overview.md
  19. +20 −3 components/dockmanager/events.md
  20. +1 −0 components/dockmanager/overview.md
  21. +1 −53 components/dropdownlist/data-bind.md
  22. +5 −2 components/dropdownlist/overview.md
  23. +1 −1 components/editor/ai-integration/integration-with-inline-prompt.md
  24. +2 −2 components/editor/overview.md
  25. +12 −5 components/editor/prosemirror-schema/overview.md
  26. +1 −1 components/filemanager/data-binding/hierarchical-data.md
  27. +34 −61 components/filemanager/data-binding/overview.md
  28. +54 −307 components/filemanager/events.md
  29. +1 −1 components/fileselect/events.md
  30. +55 −1 components/filter/events.md
  31. +2 −2 components/form/formgroups.md
  32. +1 −1 components/form/overview.md
  33. +99 −29 components/form/validation.md
  34. +22 −16 components/gantt/gantt-tree/editing/incell.md
  35. +21 −14 components/gantt/gantt-tree/editing/inline.md
  36. +24 −0 components/gantt/gantt-tree/editing/overview.md
  37. +37 −4 components/gauges/arc/labels.md
  38. +37 −4 components/gauges/circular/labels.md
  39. +13 −0 components/grid/editing/incell.md
  40. +12 −1 components/grid/editing/inline.md
  41. +33 −2 components/grid/editing/overview.md
  42. +116 −0 components/grid/highlighting.md
  43. +4 −0 components/grid/overview.md
  44. +1 −0 components/grid/selection/cells.md
  45. +1 −0 components/grid/selection/rows.md
  46. +1 −1 components/grid/state.md
  47. +8 −17 components/grid/templates/editor.md
  48. +1 −1 components/multicolumncombobox/data-bind.md
  49. +1 −5 components/multicolumncombobox/overview.md
  50. +1 −51 components/multiselect/data-bind.md
  51. +44 −29 components/multiselect/overview.md
  52. +10 −1 components/panelbar/data-binding/overview.md
  53. +42 −41 components/panelbar/templates/header.md
  54. +33 −0 components/pdfviewer/form-filling.md
  55. +6 −0 components/pdfviewer/overview.md
  56. +1 −2 components/scheduler/recurrence.md
  57. +75 −0 components/speechtotextbutton/appearance.md
  58. +45 −0 components/speechtotextbutton/events.md
  59. +28 −0 components/speechtotextbutton/integration.md
  60. +70 −0 components/speechtotextbutton/overview.md
  61. +2 −5 components/splitter/panes.md
  62. +9 −6 components/tabstrip/events.md
  63. +11 −6 components/tabstrip/tabs-collection.md
  64. +25 −63 components/timepicker/events.md
  65. +1 −0 components/timepicker/overview.md
  66. +1 −1 components/togglebutton/events.md
  67. +2 −1 components/toolbar/appearance.md
  68. +11 −0 components/treelist/editing/incell.md
  69. +11 −0 components/treelist/editing/inline.md
  70. +32 −2 components/treelist/editing/overview.md
  71. +1 −1 components/treelist/state.md
  72. +1 −1 components/upload/events.md
  73. +1 −1 components/window/draggable.md
  74. +1 −22 components/window/overview.md
  75. +15 −3 deployment/ci-cd-license-key.md
  76. +15 −3 docs-builder.yml
  77. +2 −2 getting-started/client-blazor.md
  78. +14 −4 getting-started/hybrid-blazor.md
  79. +2 −2 getting-started/web-app.md
  80. +3 −3 getting-started/what-you-need.md
  81. +43 −7 installation/license-key.md
  82. +1 −7 installation/nuget.md
  83. +2 −1 introduction.md
  84. +106 −0 knowledge-base/autocomplete-copy-text-itemtemplate.md
  85. +10 −6 knowledge-base/buttongroup-vertical.md
  86. +112 −0 knowledge-base/chart-axis-labels-units.md
  87. +154 −0 knowledge-base/chart-bubble-size.md
  88. +5 −0 knowledge-base/chart-newtonsoft-seialization-settings.md
  89. +84 −0 knowledge-base/chiplist-add-chip-tooltips.md
  90. +186 −0 knowledge-base/combobox-auto-select-on-blur.md
  91. +4 −2 knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md
  92. +4 −0 knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md
  93. +134 −0 knowledge-base/dockmanager-reset-state.md
  94. +207 −0 knowledge-base/filemanager-load-file-data-on-demand.md
  95. +114 −0 knowledge-base/form-fluent-validation-cannot-validate-instances-of-type.md
  96. +210 −0 knowledge-base/gantt-persist-treelist-width-after-refresh.md
  97. +128 −0 knowledge-base/grid-checkbox-column-prevent-click.md
  98. +9 −9 knowledge-base/grid-conditional-cell-background.md
  99. +127 −0 knowledge-base/grid-popup-in-cell.md
  100. +101 −0 knowledge-base/grid-prevent-rowclick-when-selecting-text.md
  101. +1 −1 knowledge-base/grid-remove-group-indent.md
  102. +1 −0 knowledge-base/icon-new-names.md
  103. +139 −107 knowledge-base/inputs-validation-child-component.md
  104. +108 −0 knowledge-base/mediaquery-initmediaquery-jsonexception.md
  105. +54 −0 knowledge-base/pdfviewer-xss-vulnerability-cve-2025-6725.md
  106. +2 −0 knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md
  107. +177 −9 knowledge-base/tabstrip-dynamic-tabs.md
  108. +133 −0 knowledge-base/toolbar-vertical-orientation-display.md
  109. +120 −0 knowledge-base/treelist-paging-pre-selected-node.md
  110. +1 −1 knowledge-base/value-changed-validation-model.md
  111. +7 −0 troubleshooting/license-key-errors.md
  112. +7 −1 upgrade/breaking-changes/9-0-0.md
  113. +1 −1 upgrade/breaking-changes/list.md
552 changes: 552 additions & 0 deletions .github/copilot-instructions.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .github/workflows/pull_request.yml
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ jobs:
steps:
- name: Create branch comment
if: ${{ github.base_ref == 'master' && contains(join(github.event.pull_request.labels.*.name, ''), 'merge-to-production') }}
uses: peter-evans/create-or-update-comment@v1
uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
body: |
26 changes: 12 additions & 14 deletions .github/workflows/pull_request_closed.yml
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
name: Pull Request Closed

on:
pull_request:
branches: [master]
types: [closed]

jobs:
cherry_pick:
if: ${{github.event.pull_request.merged == true}}
runs-on: ubuntu-22.04
steps:
- name: Should create PR to production?
uses: peter-evans/find-comment@v1
uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e
id: fc
with:
issue-number: ${{github.event.number}}
@@ -39,30 +41,26 @@ jobs:
echo "##[set-output name=branch;]$(echo ${BRANCH_NAME})"
- name: Failed cherry-pick
if: ${{ failure() }}
uses: peter-evans/create-or-update-comment@v1
uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
body: |
Automatic cherry-pick & PR to production failed. Ping @telerik/blazor-admins for manual cherry-pick and push to production.
- name: pull-request
id: pr
if: steps.fc.outputs.comment-id != ''
uses: repo-sync/pull-request@v2
with:
destination_branch: "production"
source_branch: ${{ steps.cp.outputs.branch }}
github_token: ${{ secrets.GITHUB_TOKEN }}
pr_title: "Merge ${{ steps.cp.outputs.branch }} into production"
pr_body: |
*This is automatically generated PR*
PR from master branch: #${{github.event.number}}. Once the change is merged, upload the changes to LIVE.
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
GHPR_OUTPUT=$(gh pr create --base production --head ${{ steps.cp.outputs.branch }} --title "Merge ${{ steps.cp.outputs.branch }} into production" --body "Automatically generated PR from master branch: #${{github.event.number}}. Once the change is merged, upload the changes to LIVE.")
echo "##[set-output name=ghproutput;]$(echo $GHPR_OUTPUT)"
- name: Post PR link
if: steps.pr.outputs.pr_url != ''
uses: peter-evans/create-or-update-comment@v1
if: steps.pr.outputs.ghproutput != ''
uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
body: |
Here you are the link to your PR to production: [${{steps.pr.outputs.pr_number}}](${{steps.pr.outputs.pr_url}})
Here you are the link to your PR to production: ${{ steps.pr.outputs.ghproutput }}
delete_branch:
needs: [cherry_pick]
3 changes: 3 additions & 0 deletions _contentTemplates/common/ai-coding-assistant.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
#number-of-requests
A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik Blazor AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a [limited number of requests per year](slug:ai-overview#number-of-requests).
#end
6 changes: 6 additions & 0 deletions _contentTemplates/common/get-started.md
Original file line number Diff line number Diff line change
@@ -208,4 +208,10 @@ This will make the license key available to all Telerik .NET apps that you devel

The [Telerik License Key](slug:installation-license-key) article provides additional details on installing and updating your Telerik license key in different scenarios. [Automatic license key maintenance](slug:installation-license-key#automatic-installation) is more effective and recommended in the long run.

#end

#ai-coding-assistant-ad

Use the [Telerik AI Coding Assistant](slug:ai-overview) through the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension). These tools help you receive tips and generate code snippets that include Telerik UI for Blazor components and API.

#end
30 changes: 26 additions & 4 deletions _contentTemplates/grid/state.md
Original file line number Diff line number Diff line change
@@ -716,14 +716,17 @@
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Reorderable="true">
Reorderable="true"
Resizable="true">
<GridToolBarTemplate>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
OnClick="@ReorderPriceAndQuantity">Reorder Price and Quantity</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
OnClick="@MakeIdColumnLast">Make Id Column Last</TelerikButton>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Success"
OnClick="@ResizeColumns">Resize Columns</TelerikButton>
<span class="k-separator"></span>
<TelerikButton OnClick="@ResetColumnOrder">Reset Column Order</TelerikButton>
<TelerikButton OnClick="@ResetColumns">Reset Column Configuration</TelerikButton>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@(nameof(Product.Id))" Width="80px" />
@@ -784,13 +787,32 @@
}
}

private async Task ResetColumnOrder()
private async Task ResizeColumns()
{
if (GridRef != null)
{
var gridState = GridRef.GetState();
int newColumnWidth = 160;

foreach (GridColumnState columnState in gridState.ColumnStates)
{
columnState.Width = $"{newColumnWidth}px";
}

gridState.TableWidth = $"{newColumnWidth * gridState.ColumnStates.Count}px";

await GridRef.SetStateAsync(gridState);
}
}

private async Task ResetColumns()
{
if (GridRef != null)
{
var gridState = GridRef.GetState();

gridState.ColumnStates = new List<GridColumnState>();
gridState.TableWidth = null;

await GridRef.SetStateAsync(gridState);
}
13 changes: 3 additions & 10 deletions ai/copilot-extension.md
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ page_title: Telerik Blazor GitHub Copilot Extension
description: Learn how to add and use the Telerik Blazor GitHub Copilot extension as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor GitHub Copilot extension provides proprietary context about Telerik UI for Blazor to AI-powered software.
slug: ai-copilot-extension
tags: telerik,blazor,ai
published: False
published: True
position: 10
---

@@ -20,6 +20,7 @@ To use the Telerik GitHub Copilot extension for Blazor, you need to have:
* A [Telerik user account](https://www.telerik.com/account/).
* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started).
* Using the latest version of your [Copilot-enabled app](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) is recommended (for example, Visual Studio or VS Code).

## Installation

@@ -55,15 +56,7 @@ The following list describes how your prompts may look like:

## Number of Requests

> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests.
The Telerik Blazor Copilot extension allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):

* Perpetual licenses: 50 requests per year
* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 300 requests per day
* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests.

> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik Copilot extension and the Telerik MCP server both take up from the same usage quota.
@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)

## See Also

57 changes: 25 additions & 32 deletions ai/mcp-server.md
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ page_title: Telerik Blazor MCP Server
description: Learn how to add and use the Telerik Blazor MCP Server as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor MCP server provides proprietary context about Telerik UI for Blazor to AI-powered software.
slug: ai-mcp-server
tags: telerik,blazor,ai
published: False
published: True
position: 20
---

@@ -16,7 +16,8 @@ The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) le

To use the Telerik Blazor MCP server, you need:

* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*.
* [Node.js](https://nodejs.org/en) 18 or a newer version.
* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*. Using the latest version of the MCP client is recommended.
* A [Telerik user account](https://www.telerik.com/account/).
* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started).
@@ -29,20 +30,21 @@ Use the documentation of your AI-powered MCP client to add the Telerik MCP serve
* Type: `stdio` (standard input/output transport)
* Command: `npx`
* Arguments: `-y`
* Server name: `telerik_blazor_assistant` (depends on your preferences)
* Server name: `telerikBlazorAssistant` (depends on your preferences)

> * Do not use hyphens (`-`) or underscores (`_`) in the MCP server name in the MCP `.json` file, due to potential compatibility issues with some MCP clients such as Visual Studio or Windsurf.
> * Some MCP clients expect the MCP servers to be listed under a `servers` JSON key, while others expect `mcpServers`.
You also need to add your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the `mcp.json` file. There are two options:

* (recommended) Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location.
* Use a `TELERIK_LICENSE_KEY` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary.
* Use a `TELERIK_LICENSE` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary.

### Visual Studio

For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).

> Visual Studio 17.14 seems to impose the following requirements:
> * Do not use hyphens (`-`) in the MCP server name in `.mcp.json`. For example, `"telerik_blazor_assistant"` and `"telerikblazorassistant"` work, but `"telerik-blazor-assistant"` does not.
> * The Copilot Chat window must be open and active when you open a solution.
> Early Visual Studio `17.14....` versions require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used.
To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder.

@@ -51,10 +53,10 @@ To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` fil
````JSON.skip-repl
{
"servers": {
"telerik_blazor_assistant": {
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
"args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
@@ -65,7 +67,7 @@ To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` fil

To enable global automatic discovery of the Telerik MCP Server in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`.

> Once the Telerik MCP server is added, make sure that the `telerik_blazor_assistant` tool is [enabled (checked) in the Copilot Chart window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server). The Telerik MCP server may get disabled and you may see "🔧10/11" in the selected tools dropdown when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue for MCPs that is being investigated.
> Once the Telerik MCP server is added, make sure that the `telerikBlazorAssistant` tool is [enabled (checked) in the Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server). The Telerik MCP server may get disabled and you may see "🔧10/11" in the selected tools dropdown when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue for MCPs that is being investigated.
### VS Code

@@ -78,10 +80,10 @@ To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.
````JSON.skip-repl
{
"servers": {
"telerik_blazor_assistant": {
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
"args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
@@ -100,10 +102,10 @@ To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.
"chat.mcp.discovery.enabled": true,
"mcp": {
"servers": {
"telerik_blazor_assistant": {
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
"args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
@@ -115,19 +117,19 @@ To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.

### Cursor

For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/model-context-protocol).
For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/mcp).

To [enable the Telerik MCP Server in a specific workspace](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-workspace) or Blazor app, add a `.cursor` folder with an `mcp.json` file at the root of the workspace.
To [enable the Telerik MCP Server in a specific workspace, Blazor app, or globally](https://docs.cursor.com/context/mcp#using-mcp-json), add a `.cursor` folder with an `mcp.json` file at the root of the workspace, app, or your user folder, respectively.

>caption .cursor/mcp.json
````JSON.skip-repl
{
"mcpServers": {
"telerik_blazor_assistant": {
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
"args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
@@ -136,8 +138,6 @@ To [enable the Telerik MCP Server in a specific workspace](https://code.visualst
}
````

To [add the Telerik MCP Server globally for Cursor](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings), add a `.cursor` folder with the above `mcp.json` file in your user folder.

## Usage

To use the Telerik MCP Server:
@@ -150,8 +150,8 @@ To use the Telerik MCP Server:
* `/telerikblazor`
* `@telerikblazor`
1. Confirm that the Telerik MCP server is used, because this doesn't happen deterministically. Look for a statement in the output, which is similar to:
* `Running telerik_blazor_assistant` (in VS Code)
* `Calling MCP tool telerik_blazor_assistant` (in Cursor)
* `Running telerikBlazorAssistant` (in VS Code)
* `Calling MCP tool telerikBlazorAssistant` (in Cursor)

If the Telerik MCP server is not used even though it's installed and enabled, then try rephrasing your prompt and use another trigger syntax from the list in step 1.
1. Grant the Telerik tool permission to run for this session, workspace, or always.
@@ -167,20 +167,13 @@ The following list describes how your prompts may look like:
* &quot;Telerik Generate a ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data.&quot;
* &quot;Telerik Show me sample code for a Blazor Grid with virtual scrolling for the rows and columns.&quot;


## Number of Requests

> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests.
The Telerik Blazor MCP Server allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):
@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)

* Perpetual licenses: 50 requests per year
* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 300 requests per day
* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests.
## Connect to Local AI Model

> One prompt may trigger several requests to the MCP server, depending on the complexity.
>
> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik MCP server and the Telerik Copilot extension both take up from the same usage quota.
You can use the Telerik Blazor MCP server with local large language models (LLM). For example, run your local model through [Ollama](https://ollama.com) and use a third-party package such as [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge) to connect the model to the Telerik MCP server. This will allow you to use the Telerik AI Coding Assistant without a cloud-based AI model.

## See Also

35 changes: 28 additions & 7 deletions ai/overview.md
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ page_title: Telerik Blazor AI Tooling Overview
description: Learn about the AI-powered developer tools that integrate with your IDE or code editor for greater productivity and enhanced developer experience.
slug: ai-overview
tags: telerik,blazor,ai
published: False
published: True
position: 1
---

@@ -19,8 +19,8 @@ The Telerik AI Coding Assistant is integrated in:

The major differences between these tools are:

* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like GitHub Copilot in **Agent** mode can make changes to your app and rebuild it to verify the AI suggestions.
* The responses of the GitHub Copilot extension may contain shorter or partial code snippets and more explanations how to accomplish the task. When using the MCP server, the AI response is mostly code.
* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like Cursor or GitHub Copilot in **Agent** mode can directly suggest changes to your app and even rebuild it to verify the new AI generated code.
* The responses of the GitHub Copilot extension may contain more explanations how to accomplish the task, and shorter or partial code snippets. When using the MCP server, the AI response is mostly code.

## Getting Started

@@ -29,11 +29,32 @@ To use the Telerik Blazor AI Coding Assistant, you need:
* A [Telerik user account](https://www.telerik.com/account/).
* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started).
* @[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)

> A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik Blazor AI Coding Assistant:
>
> * Subscription license holders can make an unlimited number of requests.
> * Perpetual license holders and trial users have a limited number of requests per year.
## Number of Requests

> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests.
The Telerik Blazor AI Conding Assistant allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):

* Perpetual licenses: 50 requests per year
* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 300 requests per day
* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests.

> All Telerik AI tools share a single request limit for your Telerik account. For example, the [Telerik Copilot extension](slug:ai-copilot-extension) and the [Telerik MCP server](slug:ai-mcp-server) both take up from the same usage quota.
> When using the Telerik MCP server, one prompt may trigger several requests, depending on the prompt complexity.
## Privacy

The Telerik Blazor AI Coding Assistant operates under the following conditions:

* The Assistant does not have access to your workspace and application code. Note that when using the Telerik MCP server (or any other MCP server), the LLM generates parameters for the MCP server request, which may include parts of your application code.
* The Assistant does not use your prompts to train Telerik AI models.
* The Assistant does not generate the actual responses and has no access to these responses. The Assistant only provides a better context that helps your selected model (for example, GPT, Gemini, Claude) provide better responses.
* The Assistant does not associate your prompts to your Telerik user account. Your prompts and generated context are anonymized and stored for statistical and troubleshooting purposes.
* The Assistant stores metrics about how often and how much you use it in order to ensure compliance with the [allowed number of requests that correspond to your current license](#number-of-requests).

Make sure to also get familiar with the terms and privacy policy of your selected AI model and AI client.

## Next Steps

2 changes: 1 addition & 1 deletion common-features/adaptive-rendering.md
Original file line number Diff line number Diff line change
@@ -103,7 +103,7 @@ You can customize the [above-listed default adaptive breakpoints](#rendering-spe

## Limitations

Some of the [supported components](#supported-components) allow custom values, for example, [ComboBox](slug:components/combobox/custom-value) and [MultiColumnComboBox](slug:multicolumncombobox-custom-value). Using custom values with `AdaptiveMode.Auto` is currently not supported. To expedite the development of this feature, vote for the related feature request in the Blazor Feedback Portal: [Support for custom values in `AdaptiveMode`](https://feedback.telerik.com/blazor/1611829-support-for-custom-values-in-adaptivemode).
Some of the [supported components](#supported-components) allow custom values, for example, [ComboBox](slug:components/combobox/custom-value) and [MultiColumnComboBox](slug:multicolumncombobox-custom-value). Using custom values with `AdaptiveMode.Auto` is supported in Telerik UI for Blazor version 9.0.0 and later.

## See also

52 changes: 1 addition & 51 deletions components/autocomplete/data-bind.md
Original file line number Diff line number Diff line change
@@ -92,57 +92,7 @@ To bind the AutoComplete to a model:
}
````

## Considerations

### Reference

The AutoComplete is a generic component and its type depends on the type of its `Data` and `Value`.

<div class="skip-repl"></div>
````RAZOR String
@*Reference when binding to a string collection*@
<TelerikAutoComplete @ref="@AutoCompleteRef"
Data="@Suggestions"
@bind-Value="@AutoCompleteValue" />
@code{
private TelerikAutoComplete<string> AutoCompleteRef { get; set; }
private string AutoCompleteValue { get; set; }
private List<string> Suggestions { get; set; } = new List<string> { "first", "second", "third" };
}
````
````RAZOR Model
@*Reference when binding to a model collection*@
<TelerikAutoComplete @ref="@AutoCompleteRef"
Data="@Suggestions"
@bind-Value="@AutoCompleteValue"
ValueField="@( nameof(SuggestionsModel.Suggestion) )" />
@code{
private TelerikAutoComplete<SuggestionsModel> AutoCompleteRef { get; set; }
private string AutoCompleteValue { get; set; }
private List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
{
new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
};
public class SuggestionsModel
{
public string Suggestion { get; set; }//the auto complete needs only the string field
public int SomeOtherField { get; set; }
}
}
````

### Missing Data
## Missing Data

The AutoComplete is, essentially, a textbox. This means that its `Value` is always a string and it is up to you to bind and/or use it. The `Data` parameter, however, is required for the functionality of the component, and it must never be `null`. If there are no suggestions that you wish to provide to the user, consider using a regular TextBox, or creating an empty collection.

4 changes: 1 addition & 3 deletions components/autocomplete/overview.md
Original file line number Diff line number Diff line change
@@ -145,9 +145,7 @@ The AutoComplete provides the following popup settings:

## AutoComplete Reference and Methods

The AutoComplete is a generic component and its type is determined by the type of the model you use as its data source. You can find examples in the [Data Bind - Considerations](slug:autocomplete-databind#considerations) article.

Add a reference to the component instance to use the [AutoComplete's methods](slug:Telerik.Blazor.Components.TelerikAutoComplete-1).
Add a reference to the component instance to use the [AutoComplete's methods](slug:Telerik.Blazor.Components.TelerikAutoComplete-1). Note that the [AutoComplete is a generic component](slug:common-features-data-binding-overview#component-type).

@[template](/_contentTemplates/dropdowns/methods.md#methods-list)

21 changes: 9 additions & 12 deletions components/barcodes/qrcode/overview.md
Original file line number Diff line number Diff line change
@@ -16,19 +16,16 @@ The generated image from the component is a machine-readable label that contains

## Creating Blazor QRCode

1. Add the `TelerikQRCode` tag to add the component to your razor page.
1. Use the `TelerikQRCode` tag to add the component to your razor page.
1. Set the `Value` parameter, according to the [encoding recommendations](slug:qrcode-encoding).
1. Set the `Size` parameter, depending on the expected scanning distance and the required data capacity.
1. (optional) Define a [QRCode overlay type](slug:qrcode-qr-code-types)).

1. Set the `Value` property.

1. Set its `Size` property.

1. Optionally, choose a `QRCode Type` (one of the [types we support](slug:qrcode-qr-code-types)).

>caption A basic configuration of the Telerik QRCode
>caption Basic Telerik QRCode
````RAZOR
<TelerikQRCode Size="200px"
Value="https://docs.telerik.com/blazor-ui/introduction">
<TelerikQRCode Value="https://www.telerik.com/blazor-ui"
Size="200px">
</TelerikQRCode>
````

@@ -58,7 +55,7 @@ The Blazor Barcode provides various parameters that allow you to configure the c
| `QRCodeEncoding` | `enum` | The encoding mode used to encode the value. |
| `QRCodeErrorCorrection` | `enum` | The error correction level used to encode the value. |
| `Value` | `string` | Defines the initial value of the QRCode. |
| `Size` | `string` | Specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the [Dimensions article](slug:common-features/dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. |
| `Size` | `string` | Specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the [Dimensions article](slug:common-features/dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. To set an optimal `Size`, consider the expected scanning distance and data capacity. |
| `Width` | `string` | Sets the width of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Width` should be set to `Height`. |
| `Height` | `string` | Sets the height of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Height` should be set to `Width`. |
| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the QRCode component. |
@@ -84,7 +81,7 @@ The nested `QRCodeBorder` tag exposes parameters that enable you to customize th
| Parameter | Type | Description |
| ----------- | ----------- | ----------- |
| `Color` | `string` | The color of the border. Accepts a valid CSS color string, including HEX and RGB. |
| `Width` | `double` | The width of the border in pixels. By default the border width is set to zero which means that the border will not be visible. |
| `Width` | `double` | The width of the border in pixels. The default value is `0` and the border is not visible. The QR Code border is part of the component `Size`. Thus, a wider border may require a larger `Size`. |

## Next Steps

111 changes: 95 additions & 16 deletions components/buttongroup/buttons.md
Original file line number Diff line number Diff line change
@@ -10,24 +10,85 @@ position: 5

# ButtonGroup Buttons

The ButtonGroup component supports two types of buttons that have different behavior:
The ButtonGroup component supports two types of buttons that have different behaviors:

* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)
* [`ButtonGroupButton`](#buttongroup-button)
* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)

You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters of each button tag.

## ButtonGroup Button

The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.

The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.

>caption Using Buttons in a group
````RAZOR
<TelerikButtonGroup>
<ButtonGroupButton OnClick="@OnButton1Click">Button 1</ButtonGroupButton>
<ButtonGroupButton OnClick="@OnButton2Click">Button 2</ButtonGroupButton>
<ButtonGroupButton OnClick="@OnButton3Click">Button 3</ButtonGroupButton>
</TelerikButtonGroup>
You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters each button tag exposes.
@code {
private void OnButton1Click()
{
// ...
}
private void OnButton2Click()
{
// ...
}
private void OnButton3Click()
{
// ...
}
}
````

## ButtonGroup ToggleButton

The `ButtonGroupToggleButton` becomes selected when clicked and deselects when another one is clicked. If multiple selection is enabled, the user can select more than one `ButtonGroupToggleButton` at a time. Clicking on a selected button in this case will deselect it. Read more in the [Selection](slug:buttongroup-selection) article.

The `ButtonGroupToggleButton` inherits the parameters and behavior of the [`TelerikToggleButton`](slug:togglebutton-overview) component.

## ButtonGroup Button
>caption Using ToogleButtons in a group
The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.
````RAZOR
<TelerikButtonGroup>
<ButtonGroupToggleButton OnClick="@OnToggleButton1Click"
@bind-Selected="@ToggleButton1Selected">Toggle Button 1</ButtonGroupToggleButton>
<ButtonGroupToggleButton OnClick="@OnToggleButton2Click"
@bind-Selected="@ToggleButton2Selected">Toggle Button 2</ButtonGroupToggleButton>
<ButtonGroupToggleButton OnClick="@OnToggleButton3Click"
@bind-Selected="@ToggleButton3Selected">Toggle Button 3</ButtonGroupToggleButton>
</TelerikButtonGroup>
The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.
@code {
private bool ToggleButton1Selected { get; set; } = true;
private bool ToggleButton2Selected { get; set; }
private bool ToggleButton3Selected { get; set; }
private void OnToggleButton1Click()
{
// ...
}
private void OnToggleButton2Click()
{
// ...
}
private void OnToggleButton3Click()
{
// ...
}
}
````

## Disabled State

@@ -37,13 +98,18 @@ To disable a button, set its `Enabled` attribute to `false`.
````RAZOR
<TelerikButtonGroup>
<ButtonGroupButton>Enabled</ButtonGroupButton>
<ButtonGroupButton Enabled="false">Disabled</ButtonGroupButton>
<ButtonGroupToggleButton Selected="true">Enabled</ButtonGroupToggleButton>
<ButtonGroupToggleButton Enabled="false">Disabled</ButtonGroupToggleButton>
<ButtonGroupButton>Enabled Button</ButtonGroupButton>
<ButtonGroupButton Enabled="false">Disabled Button</ButtonGroupButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton1Selected">Enabled ToggleButton</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton2Selected">Enabled ToggleButton</ButtonGroupToggleButton>
<ButtonGroupToggleButton Enabled="false">Disabled ToggleButton</ButtonGroupToggleButton>
</TelerikButtonGroup>
````
@code {
private bool ToggleButton1Selected { get; set; } = true;
private bool ToggleButton2Selected { get; set; }
}
````

## Visibility

@@ -53,13 +119,26 @@ You can set the `Visible` parameter of individual buttons to `false` to hide the
````RAZOR
<TelerikButtonGroup>
<ButtonGroupButton>First</ButtonGroupButton>
<ButtonGroupButton Visible="false">Hidden</ButtonGroupButton>
<ButtonGroupToggleButton>Third</ButtonGroupToggleButton>
<ButtonGroupToggleButton Visible="false">Fourth</ButtonGroupToggleButton>
<ButtonGroupButton>Button</ButtonGroupButton>
<ButtonGroupButton Visible="@ShowHiddenButtons">Button Hidden</ButtonGroupButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton1Selected">ToggleButton</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@ToggleButton2Selected"
Visible="@ShowHiddenButtons">ToggleButton Hidden</ButtonGroupToggleButton>
</TelerikButtonGroup>
<br />
<br />
<TelerikToggleButton @bind-Selected="@ShowHiddenButtons">Show Hidden Buttons</TelerikToggleButton>
@code {
private bool ShowHiddenButtons { get; set; }
private bool ToggleButton1Selected { get; set; } = true;
private bool ToggleButton2Selected { get; set; }
}
````

## See Also

* [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)
* [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)
3 changes: 3 additions & 0 deletions components/chart/overview.md
Original file line number Diff line number Diff line change
@@ -5,13 +5,16 @@ description: Overview of the Chart for Blazor.
slug: components/chart/overview
tags: telerik,blazor,chart,overview, graph
published: True
hideCta: True
position: 0
---

# Blazor Chart Overview

The <a href="https://demos.telerik.com/blazor-ui/chart/overview" target="_blank">Blazor Charts</a> components enables you to present data in a visually meaningful way, helping users draw insights effectively. It offers a wide range of graph types and provides full control over its appearance, including colors, fonts, paddings, margins, and templates.

<span class="cta-panel-big-module--container--c08a9 d-print-none "><span class="row align-items-center justify-content-center cta-panel-big-module--row--9b71a"><span class="col-auto"><img class="cta-panel-big-module--icon--a648c" src="/images/avatar-ninja.svg" alt="ninja-icon"></span><span class="col-12 col-sm"><span class="cta-panel-big-module--message--40a0f">Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:</span></span><span class="col-12 col-lg-auto"><a class="cta-panel-big-module--btnTrial--38b3e" href="https://www.telerik.com/blazor-ui/documentation/ai/overview?utm_source=ai-assistants-docs" target="_blank">Try AI Assistants</a></span></span></span>

## Creating Blazor Chart

1. Add the `<TelerikChart>` tag to your razor page.
33 changes: 21 additions & 12 deletions components/chart/types/bubble.md
Original file line number Diff line number Diff line change
@@ -18,18 +18,17 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g

@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)

#### To create a bubble chart:
## Creating a Blazor Bubble Chart

1. add a `ChartSeries` to the `ChartSeriesItems` collection
2. set its `Type` property to `ChartSeriesType.Bubble`
3. provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size
To use a Chart component with Bubble series:

1. Add a `ChartSeries` to the `ChartSeriesItems` collection.
2. Set its `Type` property to `ChartSeriesType.Bubble`.
3. Provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size.

>caption A bubble chart that shows projected population change on a plot of life expectancy versus fertility rate
````RAZOR
@* Bubble Series *@
<TelerikChart>
<ChartSeriesItems>
@@ -90,9 +89,22 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g
new ModelData() { LifeExpectancy = 74.3, FertilityRate = 1.85, PopulationChange = 3000000, Country = "Great Britain" }
};
}
````

## Bubble Sizing

The Chart component determines the physical size of each bubble automatically:

* The maximum bubble size is 20% of the smaller Chart dimension (width or height). This ensures that the largest bubbles do not occupy too much space.
* The minimum bubble size is 2% of the smaller Chart dimension, but not less than `10px`. This ensures that even the smallest bubbles are perceivable and accessible. The smallest bubble size also depends on the largest `Size` value in the Chart series.
* All bubble sizes are set proportionately, as long as they comply with the preceding rules.

As a result of the above algorithms:

* Bubble sizing may not be linear if the ratio between the smallest and largest `Size` values is too big. For example, a 10-fold bubble size difference is achievable with a large-enough Chart, but a 100-fold size difference is not supported.
* The Bubble Chart helps users compare bubble sizes in the same Chart instance, rather than between different instances. To compare bubbles from multiple series, define these series in the same Chart instance.

If you need to [improve the bubble size comparability across several Charts](slug:chart-kb-bubble-size), then use a dummy data item with a `Size` value that matches the maximum `Size` value in all Chart instances.

## Bubble Chart Specific Appearance Settings

@@ -102,10 +114,8 @@ The color of a series is controlled through the `Color` property that can take a

The `ColorField` can change the color of individual items. To use it, pass a valid CSS color to the corresponding field in the model and the chart will use its values instead of the `Color` parameter.


@[template](/_contentTemplates/chart/link-to-basics.md#opacity-area-bubble)


### Negative Values

Negative values are allowed for the X and Y fields, because they are plotted on standard numerical axes.
@@ -149,12 +159,11 @@ The size field should, generally, have positive values as it correlates to the p
}
````


@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)

@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-numerical)


## See Also

* [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart)
* [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart)
* [Configure Relative Bubble Sizes in Multiple Charts](slug:chart-kb-bubble-size)
60 changes: 1 addition & 59 deletions components/combobox/data-bind.md
Original file line number Diff line number Diff line change
@@ -23,7 +23,6 @@ There are also some considerations you may find useful, such as showing the `Pla

* [Considerations](#considerations)
* [Value Out of Range](#value-out-of-range)
* [Component Reference](#component-reference)
* [Missing Value or Data](#missing-value-or-data)

## Strings and Value Types
@@ -105,7 +104,7 @@ To bind the ComboBox to a model:

## Considerations

The ComboBox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](#component-reference) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the app, because the component will not change it.
The ComboBox component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](slug:common-features-data-binding-overview#component-type) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account by the app, because the component will not change it.

### Value Out of Range

@@ -119,63 +118,6 @@ Handling such "unexpected" values is up to the application - for example, throug

When `AllowCustom="true"`, what the user types in the input will be set to the `Value` of the component regardless of the data source.

### Component Reference

The ComboBox is a generic component and its type depends on the type of its `Data` and `Value`.

<div class="skip-repl"></div>
````RAZOR String
@*ComboBox reference when binding to a string collection*@
<TelerikComboBox @ref="ComboBoxRef"
Data="@ComboBoxData"
Value="@ComboBoxValue">
</TelerikComboBox>
@code {
private TelerikComboBox<string, string>? ComboBoxRef { get; set; }
private List<string> ComboBoxData = new List<string>() { "first", "second", "third" };
private string ComboBoxValue { get; set; } = string.Empty;
protected override void OnInitialized()
{
ComboBoxValue = "third";
}
}
````
````RAZOR Model
@*ComboBox reference when binding to a model collection*@
<TelerikComboBox @ref="@ComboBoxRef"
Data="@ComboBoxData"
@bind-Value="@ComboBoxValue"
TextField="@nameof(ComboBoxItem.MyTextField)"
ValueField="@nameof(ComboBoxItem.MyValueField)">
</TelerikComboBox>
@code {
private TelerikComboBox<ComboBoxItem, int>? ComboBoxRef { get; set; }
private IEnumerable<ComboBoxItem> ComboBoxData = Enumerable.Range(1, 20)
.Select(x => new ComboBoxItem { MyTextField = "Item " + x, MyValueField = x });
private int ComboBoxValue { get; set; }
protected override void OnInitialized()
{
ComboBoxValue = 3;
}
public class ComboBoxItem
{
public int MyValueField { get; set; }
public string MyTextField { get; set; } = string.Empty;
}
}
````

### Missing Value or Data

In case you cannot provide strongly-typed `Value` or `Data` at compile time, you need to set the corresponding type properties to the `TItem` and `TValue` properties as shown below.
3 changes: 1 addition & 2 deletions components/combobox/overview.md
Original file line number Diff line number Diff line change
@@ -145,9 +145,8 @@ The ComboBox provides the following popup settings:

## ComboBox Reference and Methods

The ComboBox is a generic component and its type is determined by the type of the model you pass to it, and the type of its value field. You can find examples in the [Data Bind - Considerations](slug:components/combobox/databind#considerations) article.
Add a reference to the component instance to use the [ComboBox's methods](slug:Telerik.Blazor.Components.TelerikComboBox-2). Note that the [ComboBox is a generic component](slug:common-features-data-binding-overview#component-type).

Add a reference to the component instance to use the [ComboBox's methods](slug:Telerik.Blazor.Components.TelerikComboBox-2).

@[template](/_contentTemplates/dropdowns/methods.md#methods-list)

23 changes: 20 additions & 3 deletions components/dockmanager/events.md
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ This article explains the events available in the Telerik DockManager for Blazor
* [OnUndock](#ondock)
* [VisibleChanged](#visiblechanged)
* [SizeChanged](#sizechanged)
* [UnpinnedSizeChanged](#unpinnedsizechanged)
* [OnPaneResize](#onpaneresize)
* [State Events](#state-events)
* [OnPin](#onpin)
@@ -53,9 +54,13 @@ The `VisibleChanged` event is fired when the user tries to hide a given pane. Yo

The `SizeChanged` event is triggered when the `Size` parameter of the corresponding pane is changed.

## UnpinnedSizeChanged

The `UnpinnedSizeChanged` event is triggered when the `UnpinnedSize` parameter of the corresponding pane is changed.

## OnPaneResize

The `OnPaneResize` event is fired when any pane is resized. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug:dockmanager-state) for your users.
The `OnPaneResize` event is fired when a pane is resized, except unpinned panes. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug:dockmanager-state) for your users.

The event handler receives as an argument an `DockManagerPaneResizeEventArgs` object that contains:

@@ -119,9 +124,13 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
<DockManagerContentPane HeaderText="Pane 1"
Id="Pane1"
Size="50%"
UnpinnedSize="@Pane1UnpinnedSize"
UnpinnedSizeChanged="@Pane1UnpinnedSizeChanged"
Closeable="false">
<Content>
Pane 1. Undocking is allowed. Docking over it is cancelled.
<code>UnpinnedSizeChanged</code> is handled.
Current <code>UnpinnedSize</code>: <strong>@Pane1UnpinnedSize</strong>
</Content>
</DockManagerContentPane>
@@ -195,8 +204,9 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
</div>
@code {
private TelerikDockManager DockManagerRef { get; set; }
private TelerikDockManager? DockManagerRef { get; set; }
private string Pane1UnpinnedSize { get; set; } = "360px";
private bool Pane4Visible { get; set; } = true;
private bool FloatingPaneVisible { get; set; } = true;
@@ -246,6 +256,13 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
DockManagetEventLog.Insert(0, $"Pane <strong>{args.PaneId}</strong> was resized to {args.Size}.");
}
private void Pane1UnpinnedSizeChanged(string newUnpinnedSize)
{
Pane1UnpinnedSize = newUnpinnedSize;
DockManagetEventLog.Insert(0, $"Pane <strong>Pane 1</strong> was resized to {newUnpinnedSize} while unpinned.");
}
private void OnPaneUnpin(DockManagerUnpinEventArgs args)
{
if (args.PaneId == "Pane4")
@@ -282,4 +299,4 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object

## See Also

* [DockManager Overview](slug:dockmanager-overview)
* [DockManager Overview](slug:dockmanager-overview)
1 change: 1 addition & 0 deletions components/dockmanager/overview.md
Original file line number Diff line number Diff line change
@@ -130,6 +130,7 @@ The following table lists the Dock Manager parameters. Also check the [DockManag
| `Size` | `string` | Determines the size of the splitter pane. |
| `Unpinnable` | `bool` <br /> (`false`) | Determines whether the pane can be unpinned. |
| `Unpinned` | `bool` <br /> (`true`) | Determines whether the pane is unpinned. |
| `UnpinnedSize` | `string` | Determines the size of the splitter pane when it is unpinned. |
| `Visible` | `bool` <br /> (`true`) | Determines whether the tab/pane is rendered. |

### DockManagerSplitPane Parameters
54 changes: 1 addition & 53 deletions components/dropdownlist/data-bind.md
Original file line number Diff line number Diff line change
@@ -23,7 +23,6 @@ There are also some considerations you may find useful, such as showing the `Def

* [Considerations](#considerations)
* [Value Out of Range](#value-out-of-range)
* [Component Reference](#component-reference)
* [Missing Value or Data](#missing-value-or-data)

## Strings or Value Types
@@ -93,7 +92,7 @@ To bind the DropDownList to a model:

## Considerations

The DropDownList component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](#component-reference) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account be the app, because the component will not change it.
The DropDownList component attempts to infer the type of its model and value based on the provided `Data` and initial `Value`. This affects the way its [reference is obtained](slug:common-features-data-binding-overview#component-type) and what happens [if you can't provide data or a value](#missing-value-or-data). Providing a [value that is not in the data source](#value-out-of-range) needs to be taken into account by the app, because the component will not change it.

### Value Out of Range

@@ -102,57 +101,6 @@ When the `Value` the application provides does not match any of the values prese
If you have set the `DefaultText` and the `Value` matches the `default` value of the type (for example, `0` for an `int` or `null` for an `int?` or `string`), you will see the `DefaultText`. A `Value` that is non-`default` will not show the `DefaultText`.

Handling such "unexpected" values is up to the application - for example, through defensive checks, or through form validation, or by first checking what is present in the data source before setting a new `Value`.

### Component Reference

The DropDownList is a generic component and its type depends on the type of its `Data` and `Value`.

<div class="skip-repl"></div>
````RAZOR String
<TelerikDropDownList @ref="@DropDownListRef"
Data="@DropDownListData"
@bind-Value="DropDownListValue" />
@code {
private TelerikDropDownList<string, string>? DropDownListRef { get; set; }
private List<string> DropDownListData = new List<string>() { "first", "second", "third" };
private string DropDownListValue { get; set; } = string.Empty;
protected override void OnInitialized()
{
DropDownListValue = "second";
}
}
````
````RAZOR Model
<TelerikDropDownList @ref="@DropDownListRef"
Data="@DropDownListData"
@bind-Value="DropDownListValue"
TextField="@nameof(DropDownListItem.Text)"
ValueField="@nameof(DropDownListItem.Value)" />
@code {
private TelerikDropDownList<DropDownListItem, int>? DropDownListRef { get; set; }
private int DropDownListValue { get; set; }
private IEnumerable<DropDownListItem> DropDownListData = Enumerable.Range(1, 20)
.Select(x => new DropDownListItem { Text = $"Item {x}", Value = x });
protected override void OnInitialized()
{
DropDownListValue = 3;
}
public class DropDownListItem
{
public int Value { get; set; }
public string Text { get; set; } = string.Empty;
}
}
````

### Missing Value or Data

7 changes: 5 additions & 2 deletions components/dropdownlist/overview.md
Original file line number Diff line number Diff line change
@@ -5,13 +5,16 @@ description: The Blazor DropDownList allows users to select an option from a lis
slug: components/dropdownlist/overview
tags: telerik,blazor,dropdownlist,dropdown,list,overview
published: True
hideCta: True
position: 0
---

# Blazor DropDownList Overview

The Blazor DropDownList component allows the user to choose an option from a predefined set of choices presented in a dropdown list popup. The developer can control the [data](slug:components/dropdownlist/databind), sizes, and various appearance options like class and [templates](slug:components/dropdownlist/templates).

<span class="cta-panel-big-module--container--c08a9 d-print-none "><span class="row align-items-center justify-content-center cta-panel-big-module--row--9b71a"><span class="col-auto"><img class="cta-panel-big-module--icon--a648c" src="/images/avatar-ninja.svg" alt="ninja-icon"></span><span class="col-12 col-sm"><span class="cta-panel-big-module--message--40a0f">Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:</span></span><span class="col-12 col-lg-auto"><a class="cta-panel-big-module--btnTrial--38b3e" href="https://www.telerik.com/blazor-ui/documentation/ai/overview?utm_source=ai-assistants-docs" target="_blank">Try AI Assistants</a></span></span></span>

## Creating Blazor DropDownList

1. Use the `TelerikDropDownList` tag to add the Blazor dropdown list to your razor page.
@@ -145,9 +148,8 @@ The DropDownList provides the following popup settings:

## DropDownList Reference and Methods

The DropDownList is a generic component and its type comes from the model it is bound to and from the value field type. See the [Component Reference](slug:components/dropdownlist/databind#component-reference) section in the Data Binding article for details and examples.
Add a reference to the component instance to use the [DropDownList's methods](slug:Telerik.Blazor.Components.TelerikDropDownList-2). Note that the [DropDownList is a generic component](slug:common-features-data-binding-overview#component-type).

Add a reference to the component instance to use the [DropDownList's methods](slug:Telerik.Blazor.Components.TelerikDropDownList-2).

@[template](/_contentTemplates/dropdowns/methods.md#methods-list)

@@ -268,5 +270,6 @@ By default, if no `Value` is provided and no `DefaultText` is defined, the DropD
## See Also

* [Data Binding](slug:components/dropdownlist/databind)
* [DropDownList API Reference](slug:telerik.blazor.components.telerikdropdownlist-2)
* [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/overview)
* [Live Demo: DropDownList Validation](https://demos.telerik.com/blazor-ui/dropdownlist/validation)
Original file line number Diff line number Diff line change
@@ -64,7 +64,7 @@ The Editor allows customizing some of the integrated Inline Prompt's settings. F

| Parameter | Type and Default value | Description |
|-----------|------------------------|-------------|
| `SystemPrompt` | `string` | The system prompt that will be passed to the integrated Inline Prompt. If not provided, the Inline Prompt will use its [default `SystemPrompt` value](slug:Inline Prompt-overview#Inline Prompt-parameters). |
| `SystemPrompt` | `string` | The system prompt that will be passed to the integrated Inline Prompt. If not provided, the Inline Prompt will use its [default `SystemPrompt` value](slug:aiprompt-overview#aiprompt-parameters). |
| `Commands` | `List<Inline PromptCommandDescriptor>` | The commands displayed within the Commands view. If not set the Inline Prompt will use the [default predefined commands](slug:editor-ai-integration-overview#ai-integration-capabilities). |

>caption Customizing the Inline Prompt in the Editor
4 changes: 2 additions & 2 deletions components/editor/overview.md
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ The Blazor HTML Editor has a `Value` parameter, similar to other input component

An empty string is a valid initial Editor `Value`, but after the user interacts with the component, the minimal component `Value` is at least an empty element (usually `"<p></p>"`). Note that [the Editor and the browser treat empty paragraphs differently](slug:editor-kb-missing-br-tags-in-value).

The Editor manages its content and `Value` depending on a [customizable schema](#prosemirror-schema-and-plugins), which defines the allowed HTML tags and attributes. The component strips all other tags and attributes for compliance and security reasons.
The Editor manages its content and `Value` depending on a [customizable schema](#prosemirror-schema-and-plugins). The component strips all other tags and attributes for compliance and security reasons.


## Security
@@ -90,7 +90,7 @@ The Telerik UI for [Blazor Editor](https://www.telerik.com/blazor-ui/editor) use

## ProseMirror Schema and Plugins

The Editor uses a built-in <a href="https://prosemirror.net/docs/guide/#schema" target="_blank">ProseMirror Schema</a> containing some of the most common HTML tags and a set of predefined <a href="https://prosemirror.net/docs/ref/#state.Plugin_System" target="_blank">ProseMirror Plugins</a> for its basic functionalities. You can customize the default ProseMirror [Schema](slug:editor-prosemirror-schema-overview) and [Plugins](slug:editor-prosemirror-plugins) to achieve the desired functionality in the Editor for Blazor.
The Editor uses a built-in [ProseMirror Schema](https://prosemirror.net/docs/guide/#schema) that includes most of the common HTML tags and a set of predefined [ProseMirror Plugins](https://prosemirror.net/docs/ref/#state.Plugin_System) for its basic functionalities. Find out how to customize the default ProseMirror [Schema](slug:editor-prosemirror-schema-overview) and [Plugins](slug:editor-prosemirror-plugins) to achieve the desired functionality in the Editor for Blazor.

## Editor Parameters

17 changes: 12 additions & 5 deletions components/editor/prosemirror-schema/overview.md
Original file line number Diff line number Diff line change
@@ -10,17 +10,24 @@ position: 0

# ProseMirror Schema Overview

The Telerik UI for Blazor Editor component is based on the <a href="https://prosemirror.net/" target="_blank">ProseMirror library</a>. ProseMirror provides a set of tools and concepts for building rich textual editors, using user interface inspired by the What-You-See-Is-What-You-Get (WYSIWYG).
The Telerik UI for Blazor Editor component is based on the [ProseMirror library](https://prosemirror.net/). ProseMirror provides a set of tools and concepts for building rich textual editors, using user interface inspired by the What-You-See-Is-What-You-Get (WYSIWYG).

## Schema Concept

ProseMirror defines its own data structure, the <a href="https://prosemirror.net/docs/ref/#model.Node" target="_blank">`Node`</a>, to represent content documents. The <a href="https://prosemirror.net/docs/guide/#doc" target="_blank">ProseMirror document</a> is a tree-like structure comprised of nodes. A document is an instance of `Node` with children that are also instances of `Node`.
ProseMirror defines its own data structure, the [`Node`](https://prosemirror.net/docs/ref/#model.Node), to represent content documents. The [ProseMirror document](https://prosemirror.net/docs/guide/#doc) is a tree-like structure comprised of nodes. A document is an instance of `Node` with children that are also instances of `Node`.

Each ProseMirror `document` conforms to a specific <a href="https://prosemirror.net/docs/guide/#schema" target="_blank">schema</a>. Document schemas allow you to edit documents with a custom structure without writing your own editor from scratch.
Each ProseMirror `document` conforms to a specific [schema](https://prosemirror.net/docs/guide/#schema). Document schemas allow you to edit documents with a custom structure without writing your own editor from scratch.

The schema describes all nodes that may occur in the document, the way they are nested, and any marks applied to them. A mark is a piece of information that can be attached to a node. For example, emphasized text, text in code block or a link. It has a type and optionally a set of attributes that provide further information (such as the target of the link).
The Prosemirror schema describes:

For more details, refer to the <a href="https://prosemirror.net/docs/guide/#schema" target="_blank">ProseMirror schema guide</a>.
* All HTML elements and attributes that may occur in the document.
* What tag nesting is allowed.
* What is the order or the HTML attributes.
* What marks can be applied to a HTML node. A mark is a piece of information that can be attached to a node. For example, emphasized text, text in code block or a link. It has a type and optionally a set of attributes that provide further information (such as the target of the link).

As a result, the Editor may automatically modify its initial `Value` on first user interaction.

For more details, refer to the [ProseMirror schema guide](https://prosemirror.net/docs/guide/#schema).

## Editor Schema

2 changes: 1 addition & 1 deletion components/filemanager/data-binding/hierarchical-data.md
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ This article explains how to bind the FileManager for Blazor to hierarchical dat

Hierarchical data means that the collection of child items is provided in a field of its parent's model:

* The `Items` field contains a collection of all children including sub-folders and files. They will be rendered in the [Preview Pane](slug:filemanager-preview-pane) when the parent folder is selected.
* The `Items` field contains a collection of all children including sub-folders and files. They will be rendered in the [FileManager View](slug:filemanager-views) when the parent folder is selected.

* The `Directories` field contains a collection of the subfolders of a directory. They will be rendered in the TreeView navigation pane. If there are `Directories` for a specific folder it will have an expand icon. The `HasDirectories` field can override this, however, but it is not required for hierarchical data binding.

95 changes: 34 additions & 61 deletions components/filemanager/data-binding/overview.md
Original file line number Diff line number Diff line change
@@ -8,26 +8,20 @@ published: True
position: 0
---

# FileManager Data Binding Basics
# FileManager Data Binding Overview

This article explains the different ways to provide data to a FileManager component and the properties related to data binding. Reviewing this article will explain the basics of how you can describe the hierarchy of items in your data source to the treeview component so they can render.
This FileManager Data Binding section explains the different ways to provide data to a FileManager component and the properties related to data binding. This article describes what are the available (bindable) features of FileManager data items and how to map model properties to these features.

@[template](/_contentTemplates/common/general-info.md#valuebind-vs-databind-link)

First, review:

* The available (bindable) [features of a FileManager items](#filemanager-item-features).
* How to match fields in the model with the FileManager item [data bindings](#data-bindings).
There are two data binding modes that the FileManager supports:

There are two modes of providing data to a FileManager, and they both use the items' features. Once you are familiar with the current article, choose the data binding more you wish to use:
* [Flat data](slug:filemanager-data-binding-flat-data)&mdash;a collection of self-referencing items with parent-child relationships.
* [Hierarchical data](slug:filemanager-data-binding-hierarchical-data)&mdash;each item holds its children in a nested property.

* [Flat data](slug:filemanager-data-binding-flat-data) - a collection of self-referencing items with parent-child relationships See the `Id` and `ParentId` settings.

* [Hierarchical data](slug:filemanager-data-binding-hierarchical-data) - each item holds its children in a nested property. See the `Directories` setting.
@[template](/_contentTemplates/common/general-info.md#valuebind-vs-databind-link)

## FileManager Item Features

The FileManager has features that map to properties in the model. The following model uses property names that will work automatically, with no additional FileManager configuration:
The FileManager extracts information about the displayed files and folders from properties in the model. The following flat data model uses property names that will work automatically, with no additional FileManager configuration:

````RAZOR
@using System.IO
@@ -225,62 +219,41 @@ The FileManager has features that map to properties in the model. The following
}
````

The above model properties have the following meaning for the FileManager:

The following section describes the meaning of the model properties for the FileManager.

@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
## Data Bindings

| Property | Description |
| --- | --- |
| **Item features** | |
| `Name` | The name of the file. |
| `Size` | The size of the file. |
| `Path` | The path of the file. |
| `Extension` | The extension of the file. |
| `IsDirectory` | Whether the item is a directory. If its value is `false` the item is considered a file and not a directory. |
| `DateCreated` | The creation date of the file. |
| `DateCreateUtc` | The creation date of the file in UTC. Required. |
| `DateModified` | The modification date of the file. |
| `DateModifiedUtc` | The modification date of the file in UTC. Required. |
| **Item relations** | |
| `Id `| The unique identifier of the file. Required for [**binding to flat data**](slug:filemanager-data-binding-flat-data). |
| `ParentId` | Identifies the file's parent. Required for [**binding to flat data**](slug:filemanager-data-binding-flat-data). Set to `null` for root items. Do *not* use `ParentId` with hierarchical data. |
| `HasDirectories` | Determines whether the item has subdirectories. Required for binding to [**flat data**](slug:filemanager-data-binding-flat-data) If `true`, the directory will show an expand arrow. With [**hierarchical data**](slug:filemanager-data-binding-hierarchical-data), the FileManager renders expand icons based on `Directories`, but `HasDirectories` will take precedence. |
| `Directories` | Defines the item subdirectories. Required for [binding to **hierarchical data**](slug:filemanager-data-binding-hierarchical-data).
| `Items` | Defines all the subitems (directories and files) of the item. |
All [FileManager item features](#fileManager-item-features) map to model properties. You define that relationship by providing the property name from which the corresponding information is taken. To do this, use the following parameters of the main `TelerikFileManager` tag:

## Data Bindings
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)

All [FileManager item features](#fileManager-item-features) map to model properties. The properties of a treeview item match directly to a field of the model the treeview is bound to. You provide that relationship by providing the name of the field from which the corresponding information is to be taken. To do this, in the main `TelerikFileManager` tag, use the parameters described below:

| FileManager Parameter | Default Value |
| --- | --- |
| **Item features** | |
| `NameField`| `"Name"` |
| `SizeField`| `"Size"` |
| `PathField`| `"Path"` |
| `ExtensionField`| `"Extension"` |
| `IsDirectoryField`| `"IsDirectoryField"` |
| `DateCreatedField`| `"DateCreated"` |
| `DateCreateUtcField`| `"DateCreateUtc"` |
| `DateModifiedField`| `"DateModified"` |
| `DateModifiedUtcField`| `"DateModifiedUtc"` |
| **Item relations** | |
| `IdField `| `"Id" ` |
| `ParentIdField`| `"ParentId"` |
| `HasDirectoriesField`| `"HasDirectories"` |
| `DirectoriesField`| `"Directories"` |
| `EntriesField`| `"Entries"` |

>important Do not use `ParentId` with hierarchical data. This will confuse the FileManager that it is bound to flat data and the component may not render any items. If the model must have a `ParentId` property, set `ParentIdField` to a non-existent property.
| FileManager Parameter | Default&nbsp;Parameter&nbsp;Value <br /> (Model Property Name) | Model Property Type | Model Value Description |
| --- | --- | --- | --- |
| **Item features** | | | |
| `NameField`| `"Name"` | `string` | The name of the file or folder, excluding the extension. |
| `SizeField`| `"Size"` | `long` | The size of the file in bytes. |
| `PathField`| `"Path"` | `string` | The path to the item, including the name and extension. |
| `ExtensionField`| `"Extension"` | `string` | The item extension, starting with a dot `.` |
| `IsDirectoryField`| `"IsDirectory"` | `bool` | Whether the item is a folder. If `false`, it's treated as a file. |
| `DateCreatedField`| `"DateCreated"` | `DateTime` | The creation date of the file. |
| `DateCreatedUtcField`| `"DateCreatedUtc"` | `DateTime` | The creation date of the file in UTC. Required. |
| `DateModifiedField`| `"DateModified"` | `DateTime` | The modification date of the file. |
| `DateModifiedUtcField`| `"DateModifiedUtc"` | `DateTime` | The modification date of the file in UTC. Required. |
| **Item relations** | | | |
| `IdField `| `"Id" ` | any | The unique identifier of the file. Required for [binding to flat data](slug:filemanager-data-binding-flat-data). |
| `ParentIdField`| `"ParentId"` | any | Identifies the item's parent. Required for [binding to flat data](slug:filemanager-data-binding-flat-data). Set to `null` for root items. Do not use `ParentId` with hierarchical data. |
| `HasDirectoriesField`| `"HasDirectories"` | `bool` | Determines whether the item has child folders. Required for [binding to flat data](slug:filemanager-data-binding-flat-data). If `true`, the folder will show an expand arrow in the TreeView. With [hierarchical data](slug:filemanager-data-binding-hierarchical-data), the FileManager renders expand icons based on `Directories`, but `HasDirectories` takes precedence. |
| `DirectoriesField`| `"Directories"` | `IEnumerable<TItem>` | The item's child folders to display in the TreeView. Required for [binding to hierarchical data](slug:filemanager-data-binding-hierarchical-data). |
| `ItemsField`| `"Items"` | `IEnumerable<TItem>` | The folder's child files and folders to display in the FileManager view. Required for [binding to hierarchical data](slug:filemanager-data-binding-hierarchical-data). |

>important Do not use `ParentId` with hierarchical data. This will confuse the FileManager that it is bound to flat data and the component may not render any items. If the model must have a `ParentId` property, set `ParentIdField` to a non-existent property name.
## Next Steps

Learn the different ways to provide data to a TreeView:

* [Use flat data](slug:filemanager-data-binding-flat-data)
* [Use hierarchical data](slug:filemanager-data-binding-hierarchical-data) - each item holds its children in a nested property
Learn the different ways to provide data to a FileManager:

* [Use flat data](slug:filemanager-data-binding-flat-data), where all items at all levels represent a single collection.
* [Use hierarchical data](slug:filemanager-data-binding-hierarchical-data), where each folder item holds its child files and folders in nested properties.

## See Also

361 changes: 54 additions & 307 deletions components/filemanager/events.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion components/fileselect/events.md
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ The `FileSelectFileInfo` type contains the following properties:
Property | Type | Description
---------|----------|---------
`Id` | `string` | The unique file identifier.
`Name`|`string` | The file name.
`Name`|`string` | The encoded file name, including the extension. One method to decode it is [`System.Net.WebUtility.HtmlDecode()`](https://learn.microsoft.com/en-us/dotnet/api/system.net.webutility.htmldecode). The file can be renamed in the [`OnSelect` event handler](#onselect).
`Size` |`long` | The file size in bytes.
`Extension` |`string` | The file extension.
`InvalidExtension` | `bool` | A Boolean flag that shows if the file type is invalid.
56 changes: 55 additions & 1 deletion components/filter/events.md
Original file line number Diff line number Diff line change
@@ -12,13 +12,67 @@ position: 11

This article explains the available events for the Telerik Filter for Blazor:

* [OnUpdate](#onupdate)
* [ValueChanged](#valuechanged)

## OnUpdate

The `OnUpdate` event fires when the user changes the Filter `Value`. The component is designed for one-way binding and works directly with the object reference of the bound `CompositeFilterDescriptor`. The component updates the `Value` internally. Use the `OnUpdate` event to handle any additional logic when the Filter `Value` is modified.

>caption Handle OnUpdate
````RAZOR
@using Telerik.DataSource
<div class="info-note">Change any filter value to trigger the event and see the message update from the OnUpdate handler.</div>
<TelerikFilter Value="@Value" OnUpdate="@OnFilterUpdate">
<FilterFields>
<FilterField Name="@(nameof(Person.EmployeeId))" Type="@(typeof(int))" Label="Id"></FilterField>
<FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name"></FilterField>
<FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age"></FilterField>
</FilterFields>
</TelerikFilter>
<br />
<div>
<strong>@EventMessage</strong>
</div>
<style>
.info-note {
background: #e6f4ff;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
width: 400px;
}
</style>
@code {
private CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();
private string EventMessage { get; set; } = string.Empty;
private void OnFilterUpdate()
{
EventMessage = $"Filter updated at {DateTime.Now:HH:mm:ss}";
}
public class Person
{
public int EmployeeId { get; set; }
public string Name { get; set; } = string.Empty;
public int AgeInYears { get; set; }
}
}
````

## ValueChanged

The `ValueChanged` event fires when the value has changed. Its event handler receives the updated `CompositeFilterDescriptor` as an argument.

>caption Handle ValueChanged.
> The `ValueChanged` event is deprecated and will be removed in future versions. Use the `OnUpdate` event instead.
>caption Handle ValueChanged
````RAZOR
@* This code snippet showcases an example of how to handle the ValueChanged event. *@
4 changes: 2 additions & 2 deletions components/form/formgroups.md
Original file line number Diff line number Diff line change
@@ -25,7 +25,7 @@ The `FormGroup` tag exposes the following parameters:

* `Columns` - `int` - defines the number of columns in the group.

* `ColumnSpacing` - `string` - defines the space between the editors in the group.
* `ColumnSpacing` - `string` - defines the horizontal space between the editors in the group.

## Example - Organize FormItems into Groups

@@ -51,7 +51,7 @@ You can organize some FormItems into logical groups. You can configure the label
<FormItem LabelText="Age" Field="@nameof(Person.Age)" ColSpan="2"></FormItem>
<FormItem LabelText="Email" Field="@nameof(Person.Email)" ColSpan="2"></FormItem>
</FormGroup>
<FormGroup LabelText="Employee Information" ColumnSpacing="25px">
<FormGroup LabelText="Employee Information">
<FormItem LabelText="Company Name" Field="@nameof(Person.CompanyName)"></FormItem>
<FormItem LabelText="Position" Field="@nameof(Person.Position)"></FormItem>
</FormGroup>
2 changes: 1 addition & 1 deletion components/form/overview.md
Original file line number Diff line number Diff line change
@@ -207,7 +207,7 @@ The [Blazor Form](https://demos.telerik.com/blazor-ui/form/overview) exposes mul
|-----------|------------------------|-------------|
| `ButtonsLayout` | `FormButtonsLayout` enum <br /> (`Start`) | Determines the position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). |
| `Columns` | `int` | Defines the number of columns in the Form. See the [Columns](slug:form-columns) article for more information |
| `ColumnSpacing` | `string` | Defines the amout of vertical space between the Columns. See the [Columns](slug:form-columns) article for more information. |
| `ColumnSpacing` | `string` | Defines the amout of horizontal space between the Columns. See the [Columns](slug:form-columns) article for more information. |
| `Orientation` | `FormOrientation` enum <br /> (`Vertical`) | Determines the position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. |

### Styling and Appearance
128 changes: 99 additions & 29 deletions components/form/validation.md
Original file line number Diff line number Diff line change
@@ -133,7 +133,6 @@ You can use the built-in `DataAnnotationsValidator` that comes with the Blazor f
</FormValidation>
</TelerikForm>
@code {
public Person person { get; set; } = new Person();
@@ -158,8 +157,7 @@ You can use the <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/fo

When using a model with nested objects and fields, specify their `Field` settings as a dot-separate string, do *not* use the `nameof` operator, it does not return the full name of the model.

<div class="skip-repl"></div>
````RAZOR
````RAZOR.skip-repl
@using System.Dynamic
@using System.ComponentModel.DataAnnotations
@@ -228,50 +226,122 @@ When using a model with nested objects and fields, specify their `Field` setting

### Fluent Validation

You can use third-party validation libraries that integrate with the standard `EditContext` such as <a href="https://fluentvalidation.net/" target="_blank">FluentValidation</a> together with the Telerik Form for Blazor.
You can use third-party validation libraries that integrate with the standard `EditContext` such as [FluentValidation](https://fluentvalidation.net/) together with the Telerik Form for Blazor.

>note Such third party tools are not included with the Telerik UI for Blazor package. Your project must reference their NuGet packages explicitly. The code snippet below will not run unless you install the an appropriate package first. You can find some in <a href="https://docs.fluentvalidation.net/en/latest/blazor.html" target="_blank">their official documentation</a>.
The example below:

* Requires the [`Blazored.FluentValidation` NuGet package](https://www.nuget.org/packages/Blazored.FluentValidation). Also refer to the [FluentValidation documentation](https://docs.fluentvalidation.net/en/latest/blazor.html).
* Shows how to pass `ValueExpression` from a parent component to optional custom child components in a [Form item template](slug:form-formitems-template) or a [Grid editor template](slug:grid-templates-editor). If the `ValueExpression` is not passed correctly, the app will throw [exception similar to: `Cannot validate instances of type 'ComponentName'. This validator can only validate instances of type 'ModelClassName'`](slug:form-kb-fluent-validation-cannot-validate-instances-of-type).

>caption Using FluentValidation
<div class="skip-repl"></div>
````RAZOR
@using Microsoft.AspNetCore.Components.Forms
@using FluentValidation
````RAZOR Home.razor
@using Blazored.FluentValidation
@using FluentValidation
<div class="mt-4" style="margin: 0 auto;">
<TelerikForm EditContext="@EditContext">
<FormValidation>
<FluentValidationValidator Validator="@Validator"></FluentValidationValidator>
</FormValidation>
</TelerikForm>
</div>
<TelerikForm Model="@PersonToEdit"
OnValidSubmit="@OnFormValidSubmit">
<FormValidation>
<FluentValidationValidator Validator="@PersonFluentValidator" />
<TelerikValidationSummary />
</FormValidation>
<FormItems>
<FormItem Field="@nameof(Person.Id)" Enabled="false" LabelText="ID" />
<FormItem Field="@nameof(Person.FirstName)" LabelText="First Name" />
<FormItem Field="@nameof(Person.MiddleName)">
<Template>
<label for="person-middlename" class="k-label k-form-label">Middle Name (two-way binding)</label>
<div class="k-form-field-wrap">
<TextBox @bind-Value="@PersonToEdit.MiddleName"
Id="person-middlename" />
<TelerikValidationMessage For="@( () => PersonToEdit.MiddleName )" />
</div>
</Template>
</FormItem>
<FormItem Field="@nameof(Person.LastName)">
<Template>
<label for="person-lastname" class="k-label k-form-label">Last Name (one-way binding with explicit ValueExpression)</label>
<div class="k-form-field-wrap">
<TextBox Value="@PersonToEdit.LastName"
ValueChanged="@LastNameChanged"
ValueExpression="@( () => PersonToEdit.LastName )"
Id="person-lastname" />
<TelerikValidationMessage For="@( () => PersonToEdit.LastName )" />
</div>
</Template>
</FormItem>
</FormItems>
</TelerikForm>
<p style="color:var(--kendo-color-success)"><strong>@FormSubmitResult</strong></p>
@code {
public EditContext EditContext {get; set; }
public Customer MyModel { get; set; } = new Customer();
public CustomerValidator Validator { get; set; } = new CustomerValidator();
private Person PersonToEdit { get; set; } = new();
public PersonValidator PersonFluentValidator { get; set; } = new();
protected override void OnInitialized()
private string FormSubmitResult { get; set; } = string.Empty;
private void LastNameChanged(string newLastName)
{
EditContext = new EditContext(MyModel);
base.OnInitialized();
PersonToEdit.LastName = newLastName;
}
public class Customer
private void OnFormValidSubmit()
{
public string FirstName { get; set; }
public string LastName { get; set; }
FormSubmitResult = $"Form Submit Success at {DateTime.Now.ToString("HH:mm:ss")}";
}
public class PersonValidator : AbstractValidator<Person>
{
public PersonValidator()
{
RuleFor(customer => customer.FirstName).NotEmpty().MinimumLength(2).MaximumLength(60);
RuleFor(customer => customer.MiddleName).NotEmpty().MaximumLength(60);
RuleFor(customer => customer.LastName).NotEmpty().MinimumLength(2).MaximumLength(60);
}
}
public class Person
{
public int Id { get; set; }
public string FirstName { get; set; } = string.Empty;
public string MiddleName { get; set; } = string.Empty;
public string LastName { get; set; } = string.Empty;
}
}
````
````RAZOR TextBox.razor
@using System.Linq.Expressions
<TelerikTextBox Value="@Value"
ValueChanged="@ValueChanged"
ValueExpression="@ValueExpression"
Id="@Id" />
@code {
[Parameter]
public string Value { get; set; } = string.Empty;
[Parameter]
public EventCallback<string> ValueChanged { get; set; }
[Parameter]
public Expression<System.Func<string>>? ValueExpression { get; set; }
public class CustomerValidator : AbstractValidator<Customer>
[Parameter]
public string Id { get; set; } = string.Empty;
private async Task TextBoxValueChanged(string newValue)
{
public CustomerValidator()
Value = newValue;
if (ValueChanged.HasDelegate)
{
RuleFor(customer => customer.FirstName).NotEmpty().MaximumLength(50);
RuleFor(customer => customer.LastName).NotEmpty().MaximumLength(50);
await ValueChanged.InvokeAsync(newValue);
}
}
}
38 changes: 22 additions & 16 deletions components/gantt/gantt-tree/editing/incell.md
Original file line number Diff line number Diff line change
@@ -18,10 +18,18 @@ Command columns and non-editable columns are skipped while tabbing.

The InCell edit mode provides a specific user experience and behaves differently than other edit modes. Please review the notes below to get a better understanding of these specifics.

## New Row Position

To control whether a newly added item appears at the top or bottom of the Gantt Tree, set the `NewRowPosition` parameter.

The `NewRowPosition` parameter accepts values from the `GanttTreeListNewRowPosition` enum:

- `Top` (default)&mdash;Inserts the new item at the top of the view.
- `Bottom`&mdash;Inserts the new item at the bottom of the view.

### Note
It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.


>caption InCell Editing Example.
````RAZOR
@@ -68,20 +76,9 @@ It is up to the data access logic to save the data once it is changed in the dat
</TelerikGantt>
@code {
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
public int LastId { get; set; } = 1;
List<FlatModel> Data { get; set; }
private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
private int LastId { get; set; } = 1;
private List<FlatModel> Data { get; set; }
protected override void OnInitialized()
{
@@ -122,6 +119,16 @@ It is up to the data access logic to save the data once it is changed in the dat
base.OnInitialized();
}
public class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
private async Task CreateItem(GanttCreateEventArgs args)
{
var argsItem = args.Item as FlatModel;
@@ -251,4 +258,3 @@ It is up to the data access logic to save the data once it is changed in the dat
## See Also

* [Live Demo: Gantt InCell Editing](https://demos.telerik.com/blazor-ui/gantt/editing-incell)

35 changes: 21 additions & 14 deletions components/gantt/gantt-tree/editing/inline.md
Original file line number Diff line number Diff line change
@@ -20,6 +20,14 @@ You can also cancel the events by setting the `IsCancelled` property of the even

To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property to `GanttTreeListEditMode.Inline`, then handle the CRUD events as shown in the example below.

## New Row Position

To control whether a newly added item appears at the top or bottom of the Gantt Tree, set the `NewRowPosition` parameter.

The `NewRowPosition` parameter accepts values from the `GanttTreeListNewRowPosition` enum:

- `Top` (default)&mdash;Inserts the new item at the top of the view.
- `Bottom`&mdash;Inserts the new item at the bottom of the view.

>caption The Command buttons and the Gantt events let you handle data operations in Inline edit mode.
@@ -70,20 +78,9 @@ To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property
</TelerikGantt>
@code {
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
public int LastId { get; set; } = 1;
List<FlatModel> Data { get; set; }
private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
private int LastId { get; set; } = 1;
private List<FlatModel> Data { get; set; }
protected override void OnInitialized()
{
@@ -124,6 +121,16 @@ To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property
base.OnInitialized();
}
public class FlatModel
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Title { get; set; }
public double PercentComplete { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
private async Task CreateItem(GanttCreateEventArgs args)
{
var argsItem = args.Item as FlatModel;
24 changes: 24 additions & 0 deletions components/gantt/gantt-tree/editing/overview.md
Original file line number Diff line number Diff line change
@@ -298,6 +298,30 @@ You can customize the editors rendered in the Gantt Tree by providing the `Edito

* `IsCanceled`- a boolean field indicating whether the operation is to be prevented.

## New Row Position

You can control whether a newly added item appears at the top or bottom of the Gantt Tree. Use the [`NewRowPosition`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.gantttreelistnewrowposition) parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.

This configuration is available in InCell and Inline edit modes. For more details, see the [Tree InCell Editing](slug:gant-tree-incell-editing#new-row-position) and [Tree Inline Editing](slug:gant-tree-inline-editing#new-row-position) articles.

> When you set `NewRowPosition` to `Bottom`, add the new item at the end of your data collection in the `OnCreate` event handler. When set to `Top`, insert the new item at the beginning of the collection. This ensures the new row appears in the correct position in the view after successfully creating the new record.
>caption Example of adding a new item to the Gantt based on the `NewRowPosition` value
<div class="skip-repl"></div>
````C#
private void OnCreate(GanttCreateEventArgs args)
{
if (NewRowPosition == GanttTreeListNewRowPosition.Bottom)
{
dataCollection.Add(newItem);
}
else // Top
{
dataCollection.Insert(0, newItem);
}
}
````

## Example

41 changes: 37 additions & 4 deletions components/gauges/arc/labels.md
Original file line number Diff line number Diff line change
@@ -13,13 +13,10 @@ position: 20
You can customize the appearance of the labels rendered on the [scale](slug:arc-gauge-scale) of the Arc Gauge by using the `<ArcGaugeScaleLabels>`, child tag of the `<ArcGaugeScale>`, and the parameters it exposes:

* [Format](#format)

* [Center Template](#center-template)

* [Position](#position)
* [Color](#color)

* [Visible](#visible)

* [Additional Customization](#additional-customization)

## Format
@@ -87,6 +84,42 @@ The center template allows you to take control of the rendering of the central s
</TelerikArcGauge>
````

## Position

The `Position` parameter is of enum type `ArcGaugeScaleLabelsPosition` and determines whether the Gauge labels are on the inside (default) or outside of the Gauge graphic. Labels on the inside allow for a visually larger component within the same available space.

>caption Setting Arc Gauge label position
````RAZOR
<TelerikArcGauge>
<ArcGaugeScales>
<ArcGaugeScale>
<ArcGaugeScaleLabels Visible="true"
Position="@ArcGaugeScaleLabelsPosition.Inside" />
</ArcGaugeScale>
</ArcGaugeScales>
<ArcGaugePointers>
<ArcGaugePointer Value="66">
</ArcGaugePointer>
</ArcGaugePointers>
</TelerikArcGauge>
<TelerikArcGauge>
<ArcGaugeScales>
<ArcGaugeScale>
<ArcGaugeScaleLabels Visible="true"
Position="@ArcGaugeScaleLabelsPosition.Outside" />
</ArcGaugeScale>
</ArcGaugeScales>
<ArcGaugePointers>
<ArcGaugePointer Value="66">
</ArcGaugePointer>
</ArcGaugePointers>
</TelerikArcGauge>
````

## Color

The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.
41 changes: 37 additions & 4 deletions components/gauges/circular/labels.md
Original file line number Diff line number Diff line change
@@ -13,13 +13,10 @@ position: 15
You can customize the appearance of the labels rendered on the [scale](slug:circular-gauge-scale) of the Circular Gauge by using the `<CircularGaugeScaleLabels>`, child tag of the `<CircularGaugeScale>`, and the parameters it exposes:

* [Format](#format)

* [Center Template](#center-template)

* [Position](#position)
* [Color](#color)

* [Visible](#visible)

* [Additional Customization](#additional-customization)

## Format
@@ -91,6 +88,42 @@ The center template allows you to take control of the rendering of the central s
</TelerikCircularGauge>
````

## Position

The `Position` parameter is of enum type `CircularGaugeScaleLabelsPosition` and determines whether the Gauge labels are on the inside (default) or outside of the Gauge graphic. Labels on the inside allow for a visually larger component on the same available space.

>caption Setting Circular Gauge label position
````RAZOR
<TelerikCircularGauge>
<CircularGaugeScales>
<CircularGaugeScale>
<CircularGaugeScaleLabels Visible="true"
Position="@CircularGaugeScaleLabelsPosition.Inside" />
</CircularGaugeScale>
</CircularGaugeScales>
<CircularGaugePointers>
<CircularGaugePointer Value="66">
</CircularGaugePointer>
</CircularGaugePointers>
</TelerikCircularGauge>
<TelerikCircularGauge>
<CircularGaugeScales>
<CircularGaugeScale>
<CircularGaugeScaleLabels Visible="true"
Position="@CircularGaugeScaleLabelsPosition.Outside" />
</CircularGaugeScale>
</CircularGaugeScales>
<CircularGaugePointers>
<CircularGaugePointer Value="66">
</CircularGaugePointer>
</CircularGaugePointers>
</TelerikCircularGauge>
````

## Color

The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.
13 changes: 13 additions & 0 deletions components/grid/editing/incell.md
Original file line number Diff line number Diff line change
@@ -54,6 +54,17 @@ In in-cell edit mode, the `OnAdd` and `OnCreate` events fire immediately one aft

The above algorithm is different from [inline](slug:grid-editing-inline) and [popup](slug:grid-editing-popup) editing where new rows are only added to the data source after users populate them with valid values.

## New Row Position

You can control whether a newly added item appears at the top or bottom of the Grid. Use the `NewRowPosition` parameter to specify the position.

The `NewRowPosition` parameter accepts values from the `GridNewRowPosition` enum:

- `Top` (default)&mdash;Inserts the new item at the top of the view.
- `Bottom`&mdash;Inserts the new item at the bottom of the view.

For a complete example of how this feature works, see the following [example](slug:grid-editing-incell#basic).

## Integration with Other Features

Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:grid-editing-overview#integration-with-other-features).
@@ -72,6 +83,8 @@ This section explains what happens when the user tries to perform another data o
* If the validation is satisfied, then editing completes and the component fires `OnUpdate`.
* If the validation is not satisfied, then editing aborts and the component fires `OnCancel`.

Deleting items that are currently in edit mode [fires `OnDelete` with a cloned data item instance](slug:grid-editing-overview#delete-operations).

### Selection

To enable [row selection](slug:grid-selection-row) with in-cell edit mode, use a [checkbox column](slug:components/grid/columns/checkbox). More information on that can be read in the [Row Selection](slug:grid-selection-row#selection-and-editing-modes) article.
13 changes: 12 additions & 1 deletion components/grid/editing/inline.md
Original file line number Diff line number Diff line change
@@ -37,7 +37,16 @@ Inline add, edit, and delete operations use the following [command buttons](slug

In inline edit mode, the Grid commands execute row by row and the corresponding [Grid events](slug:grid-editing-overview#events) also fire row by row. This is similar to [popup editing](slug:grid-editing-popup) and unlike [in-cell editing](slug:grid-editing-incell), where commands and events relate to cells.

When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons has no effect, but users can still navigate between all input components in the row to complete the editing.
When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons have no effect, but users can still navigate between all input components in the row to complete the editing.

## New Row Position

You can control whether a newly added item appears at the top or bottom of the Grid. Use the `NewRowPosition` parameter to specify the position.

The `NewRowPosition` parameter accepts values from the `GridNewRowPosition` enum:

- `Top` (default)&mdash;Inserts the new item at the top of the view.
- `Bottom`&mdash;Inserts the new item at the bottom of the view.

## Integration with Other Features

@@ -54,6 +63,8 @@ This section explains what happens when the component is already in add or edit

If the component is already in add or edit mode, and the user tries to perform another data operation, then editing aborts and the component fires `OnCancel`.

Deleting items that are currently in edit mode [fires `OnDelete` with a cloned data item instance](slug:grid-editing-overview#delete-operations).

## Examples

### Basic
Loading