feat(kb): add kb on how to stop cascading editcontext for a specific editor (#561)

Author: svdimitr

knowledge-base/form-stop-cascading-editcontext.md

@@ -0,0 +1,76 @@
+---
+title: Stop the cascading EditContext for a specific field in the Form
+description: Stop the cascading EditContext for a specific field in the Form
+type: how-to
+page_title: Stop the cascading EditContext for a specific field in the Form
+slug: form-stop-cascading-editcontext
+position: 
+tags: 
+res_type: kb
+---
+
+## Environment
+<table>
+	<tbody>
+		<tr>
+			<td>Product</td>
+			<td>Form for Blazor</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+I would like to stop the cascading `EditContext` for a specific editor in my Form. The Editor should still be in the Form, but should not be validated. This would also allow me to not provide a `ValueExpression`.
+
+## Solution
+
+To stop the cascading `EditContext` for a specific editor in the TelerikForm you should use the [Template]({%slug form-formitems-template%}) and wrap the custom editor in a `<CascadingValue>` tag. In the `Value` attribute of the `CascadingValue` you should reset the `EditContext`.
+
+````CSHTML
+@* Stop the cascading EditContext for the Edit the DoB checkbox. *@ 
+
+@using System.ComponentModel.DataAnnotations
+
+<TelerikForm Model="@person">
+    <FormValidation>
+        <DataAnnotationsValidator></DataAnnotationsValidator>
+    </FormValidation>
+    <FormItems>
+        <FormItem>
+            <Template>
+                <CascadingValue Value="@((EditContext?)null)">
+                    <label for="enable-datepicker">Edit the DoB</label>
+                    <TelerikCheckBox Value="@Enabled" OnChange="@(v => OnChange((bool)v))" Id="enable-datepicker"></TelerikCheckBox>
+                </CascadingValue>
+            </Template>
+        </FormItem>
+        <FormItem Field="@nameof(Person.Id)" Enabled="false" LabelText="Id"></FormItem>
+        <FormItem Field="@nameof(Person.FirstName)" LabelText="First name" Hint="Enter your first name"></FormItem>
+        <FormItem Field="@nameof(Person.LastName)" LabelText="Last name" Hint="Enter your last name" ColSpan="2"></FormItem>
+        <FormItem Field="@nameof(Person.DOB)" LabelText="Date of Birth" Hint="Enter your Date of Birth" Enabled="@Enabled"></FormItem>
+    </FormItems>
+</TelerikForm>
+
+@code {
+    public Person person = new Person();
+
+    private bool Enabled { get; set; }
+
+    private void OnChange(bool value)
+    {
+        Enabled = value;
+    }
+
+    public class Person
+    {
+        [Editable(false)]
+        public int Id { get; set; } = 10;
+        [Required]
+        public string FirstName { get; set; } = "John";
+        [Required]
+        public string LastName { get; set; } = "Doe";
+        public DateTime DOB { get; set; } = DateTime.Today.AddYears(-20);
+    }
+}
+````