From 637976ef97796c4913fded57444e84e6c7174e24 Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Tue, 19 Nov 2024 15:05:28 +0000
Subject: [PATCH 1/2] Added new kb article multiselect-limit-selection

---
 knowledge-base/multiselect-limit-selection.md | 67 +++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 knowledge-base/multiselect-limit-selection.md

diff --git a/knowledge-base/multiselect-limit-selection.md b/knowledge-base/multiselect-limit-selection.md
new file mode 100644
index 0000000000..cfc61bf04a
--- /dev/null
+++ b/knowledge-base/multiselect-limit-selection.md
@@ -0,0 +1,67 @@
+---
+title: Restrict the Number of Selected Items in the MultiSelect
+description: Learn how to restrict the number of selectable items in the Telerik Blazor MultiSelect component.
+type: how-to
+page_title: How to Restrict the Number of Selected Items in MultiSelect for Blazor
+slug: multiselect-kb-limit-selection
+tags: multiselect, blazor, selection limit
+res_type: kb
+ticketid: 1670731
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>MultiSelect for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+When using the [MultiSelect]({%slug multiselect-overview%}) component, it might be necessary to limit the number of items a user can select. For example, restricting selection to a maximum of three items. This KB article also answers the following questions:
+- How to set a selection limit on MultiSelect in Blazor?
+- How to prevent additional selections in MultiSelect after reaching a defined limit?
+- How to notify users they've reached the maximum number of selectable items in MultiSelect?
+
+## Solution
+
+To restrict the number of selectable items in a MultiSelect component, use one-way binding with the `Value` parameter and the `ValueChanged`({%slug multiselect-events%}#valuechanged) event. This approach allows you to manually update the selected items collection and enforce a maximum selection limit.
+
+Below is a demonstration of how to implement a selection limit. This example restricts the user to a maximum of three selections and informs them when they have reached this limit.
+
+````RAZOR
+@if (MultiValues.Count == 3)
+{
+    <p style="color:red;">You've reached the maximum selected count</p>
+}
+
+<TelerikMultiSelect Data="@MultiData"
+                    Value="@MultiValues"
+                    ValueChanged="@( (List<string> newValues) => OnMultiValueChanged(newValues) )">
+</TelerikMultiSelect>
+
+@code {
+    private List<string> MultiData { get; set; } = new List<string> {
+        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer"
+    };
+
+    private List<string> MultiValues { get; set; } = new List<string>() { "Developer" };
+
+    private void OnMultiValueChanged(List<string> newValues)
+    {
+        if (newValues.Count <= 3)
+        {
+            MultiValues = newValues;
+        }
+    }
+}
+````
+
+## See Also
+
+- [MultiSelect Overview]({%slug multiselect-overview%})
+- [MultiSelect Events]({%slug multiselect-events%})

From ef767f12da502d54c1f57fd2a489e08409fc35cd Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 26 Nov 2024 15:09:59 +0200
Subject: [PATCH 2/2] kb(MultiSelect): apply suggestions and improve example

---
 knowledge-base/multiselect-limit-selection.md | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/knowledge-base/multiselect-limit-selection.md b/knowledge-base/multiselect-limit-selection.md
index cfc61bf04a..8ea67aec4a 100644
--- a/knowledge-base/multiselect-limit-selection.md
+++ b/knowledge-base/multiselect-limit-selection.md
@@ -29,28 +29,37 @@ When using the [MultiSelect]({%slug multiselect-overview%}) component, it might
 
 ## Solution
 
-To restrict the number of selectable items in a MultiSelect component, use one-way binding with the `Value` parameter and the `ValueChanged`({%slug multiselect-events%}#valuechanged) event. This approach allows you to manually update the selected items collection and enforce a maximum selection limit.
+To restrict the number of selectable items in a MultiSelect component, use one-way binding with the `Value` parameter and the [`ValueChanged`]({%slug multiselect-events%}#valuechanged) event. This approach allows you to manually update the selected items collection and enforce a maximum selection limit.
 
 Below is a demonstration of how to implement a selection limit. This example restricts the user to a maximum of three selections and informs them when they have reached this limit.
 
-````RAZOR
-@if (MultiValues.Count == 3)
-{
-    <p style="color:red;">You've reached the maximum selected count</p>
-}
-
+````CSHTML
 <TelerikMultiSelect Data="@MultiData"
                     Value="@MultiValues"
-                    ValueChanged="@( (List<string> newValues) => OnMultiValueChanged(newValues) )">
+                    ValueChanged="@( (List<string> newValues) => OnMultiValueChanged(newValues) )"
+                    AutoClose="false"
+                    OnItemRender="@OnItemRenderHandler"
+                    Width="400px">
 </TelerikMultiSelect>
 
+@if (MultiValues.Count == 3)
+{
+    <span style="color:red;">Maximum  selected items reached</span>
+}
+
 @code {
-    private List<string> MultiData { get; set; } = new List<string> {
-        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer"
+    private static List<string> MultiData { get; set; } = new List<string> {
+        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Software Architect", "Product Manager"
     };
+    private List<string> MultiValues { get; set; } = new List<string>() { MultiData[0] };
 
-    private List<string> MultiValues { get; set; } = new List<string>() { "Developer" };
-
+    private void OnItemRenderHandler(MultiSelectItemRenderEventArgs<string> args)
+    {
+        if (MultiValues.Count == 3 && !MultiValues.Contains(args.Item))
+        {
+            args.Class = "k-disabled";
+        }
+    }
     private void OnMultiValueChanged(List<string> newValues)
     {
         if (newValues.Count <= 3)