docs(dropdownlist): separate events article

Author: marin-bratanov

components/dropdownlist/events.md

@@ -0,0 +1,83 @@
+---
+title: Events
+page_title: DropDownList for Blazor | Events
+description: Events in the DropDownList for Blazor
+slug: components/dropdownlist/events
+tags: telerik,blazor,dropdown,list,dropdownlist,events
+published: true
+position: 20
+---
+
+# Events
+
+This article explains the events available in the Telerik DropDownList for Blazor:
+
+* [ValueChanged](#valuechanged)
+* `OnChange` - inherited event that you should not use, but you may see in the intellisense
+
+
+## ValueChanged
+
+The `ValueChanged` event fires upon every change of the user selection.
+
+>note If the initial `Value` is not present in the data source, the component will select the first item of the data source and this will fire the event as well. If you do not update the field from which the `Value` is taken, you may end in an infinite loop. This scenario is most common when the initial value is `null` as data sources rarely have items with a `null` value.
+
+The examples below use [binding]({%slug components/dropdownlist/databind%}) to primitive types for brevity, you can use full models as well.
+
+>caption Handle ValueChanged
+
+````CSHTML
+@result
+<br />
+<TelerikDropDownList Data="@MyList" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
+</TelerikDropDownList>
+
+@code {
+    string result;
+
+    private void MyValueChangeHandler(string theUserChoice)
+    {
+        result = string.Format("The user chose: {0}", theUserChoice);
+    }
+
+    protected List<string> MyList = new List<string>() { "first", "second", "third" };
+
+    //protected string MyItem { get; set; } = "second";
+}
+````
+
+@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
+
+@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
+
+>caption Handle ValueChanged and provide initial value
+
+````CSHTML
+from the handler: @result
+<br />
+from model: @MyItem
+<br />
+<br />
+<TelerikDropDownList Data="@MyList" Value="@MyItem" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
+</TelerikDropDownList>
+
+@code {
+    string result;
+
+    private void MyValueChangeHandler(string theUserChoice)
+    {
+        result = string.Format("The user chose: {0}", theUserChoice);
+
+        //you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
+        MyItem = theUserChoice;
+    }
+
+    protected List<string> MyList = new List<string>() { "first", "second", "third" };
+
+    protected string MyItem { get; set; } = "second";
+}
+````
+
+## See Also
+
+* [ValueChanged and Validation]({%slug value-changed-validation-model%})

components/dropdownlist/overview.md

@@ -19,7 +19,7 @@ To use a Telerik DropDownList for Blazor
 1. set the `TextField` and `ValueField` properties to point to the corresponding names of the model
 1. set the `Value` property to the intial value of the model (optional).
 
->caption Basic dropdownlist [data binding](data-bind) and value binding
+>caption Basic dropdownlist [data binding](data-bind) and two-way value binding
 
 ````CSHTML
 Selected value: @selectedValue
@@ -108,48 +108,6 @@ The DropDownList provides the following features:
 
 ## Examples
 
->caption Handling the ValueChanged event and providing an initial value
-
-````CSHTML
-@result
-<br />
-@InitialValue
-<br />
-
-<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
-                     Value="@InitialValue" ValueChanged="@( (int v) => MyValueChangedHandler(v) )">
-</TelerikDropDownList>
-
-@code {
-    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
-
-    int InitialValue { get; set; } = 3; // an intial value is not required, this example showcases how to set it
-
-    string result { get; set; }
-
-    public class MyDdlModel
-    {
-        public int MyValueField { get; set; }
-        public string MyTextField { get; set; }
-    }
-
-    async Task MyValueChangedHandler(int newVal)
-    {
-        // the type of the value field in the model determines the signature of the handler
-        result = $"The user selected {newVal}";
-
-        // handling ValueChanged does not let you use value binding, so if you need to update the model
-        // you must do that manually in the handler. This is not required, though
-        InitialValue = newVal;
-    }
-}
-````
-
-@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
-
-@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
-
-
 >caption Get selected item from external code
 
 ````CSHTML