docs(common): simplify overview examples for inputs; events will be on separate pages

Author: marin-bratanov

_contentTemplates/common/issues-and-warnings.md

@@ -1,7 +1,3 @@
-#generic-component-event-issue
->warning [.NET Core Issue 8385](https://github.com/aspnet/AspNetCore/issues/8385) is preventing the ValueChanged handler from working at the moment. The code below will work as soon as Microsoft release a fix for this problem. Until then, you may get compilation issue due to the handler presence. We strive to follow best practices and future-proof our components, which is why we are using this approach even though it does not work yet.
-#end
-
 
 #mono-linker-issue
 Open the Client `.csproj` file and ensure that the following switch is present. At the moment the IL Linker needs to be disabled because of [an issue in Mono](https://github.com/mono/mono/issues/12917).

components/dateinput/overview.md

@@ -14,42 +14,21 @@ The Date Input component allows the user to enter a date. The developer can cont
 
 To use a Telerik Date Input for Blazor, add the `TelerikDateInput` tag.
 
->caption Basic date input with its key features, and ValueChanged event handling
-
-@[template](/_contentTemplates/common/issues-and-warnings.md#generic-component-event-issue)
+>caption Basic date input with namespace and reference
 
 ````CSHTML
 @using Telerik.Blazor.Components.DateInput
 
-<TelerikDateInput Value="@dateInputValue" ValueChanged="@MyValueChangeHandler" Format="dd/MMMM/yyyy">
+<TelerikDateInput @bind-Value="@dateInputValue" Format="dd/MMMM/yyyy" @ref="theDateInput">
 </TelerikDateInput>
-@result
+@dateInputValue
 
 @code {
     DateTime dateInputValue { get; set; } = DateTime.Now;
-    string result;
-
-    private void MyValueChangeHandler(DateTime theUserInput)
-    {
-        Console.WriteLine("entered");
-        result = string.Format("The user entered: {0}", theUserInput);
-
-        StateHasChanged();
-    }
-}
-````
-
->caption Component namespace and reference
-
-````CSHTML
-@using Telerik.Blazor.Components.DateInput
-
-<TelerikDateInput @ref="theDateInput" @bind-Value="dateInputValue"></TelerikDateInput>
-
-@code {
-	Telerik.Blazor.Components.DateInput.TelerikDateInput theDateInput;
 
-	DateTime dateInputValue { get; set; } = DateTime.Now;
+    Telerik.Blazor.Components.DateInput.TelerikDateInput<DateTime> theDateInput;
+    // the type of the component depends on the type of the value
+    // in this case it is DateTime, but it could be DateTime?
 }
 ````
 

components/datepicker/overview.md

@@ -14,43 +14,26 @@ The Date Picker component allows the user to choose a date from a visual list ([
 
 To use a Telerik Date Picker for Blazor, add the `TelerikDatePicker` tag.
 
->caption Basic date picker with its key features, and ValueChanged event handling
-
-@[template](/_contentTemplates/common/issues-and-warnings.md#generic-component-event-issue)
+>caption Basic date picker with namespace and reference
 
 ````CSHTML
 @using Telerik.Blazor.Components.DatePicker
 
-<TelerikDatePicker @bind-Value="datePickerValue" ValueChanged="@ValueChanged"></TelerikDatePicker>
+<TelerikDatePicker @bind-Value="datePickerValue" @ref="theDatePicker"></TelerikDatePicker>
 
-<br />The selected date is: @selectedDate?.ToShortDateString()
+<br />The selected date is: @datePickerValue.ToShortDateString()
 
 @code  {
-    DateTime datePickerValue = DateTime.Now;
-    private DateTime? selectedDate;
-
-    protected void ValueChanged(DateTime newValue)
-    {
-        selectedDate = newValue;
-        //you can, alternatively, use the datePickerValue variable because it is bound
-    }
+    DateTime datePickerValue { get; set; } = DateTime.Now;
+
+    Telerik.Blazor.Components.DatePicker.TelerikDatePicker<DateTime> theDatePicker;
+    // the type of the component depends on the type of the value
+    // in this case it is DateTime, but it could be DateTime?
 }
 ````
 
 ![](images/datepicker-first-look.png)
 
->caption Component namespace and reference
-
-````CSHTML
-@using Telerik.Blazor.Components.DatePicker
-
-<TelerikDatePicker @ref="theDatePicker">
-</TelerikDatePicker>
-
-@code {
-	Telerik.Blazor.Components.DatePicker.TelerikDatePicker theDatePicker;
-}
-````
 
 The Date Picker component exposes the following features:
 

components/numerictextbox/overview.md

@@ -14,25 +14,17 @@ The Numeric Textbox component allows the user to enter decimal values and no tex
 
 To use a Telerik Numeric Textbox for Blazor, add the `TelerikNumericTextBox` tag.
 
->caption Basic numeric textbox with its key features, and ValueChanged event handling
-
-@[template](/_contentTemplates/common/issues-and-warnings.md#generic-component-event-issue)
+>caption Basic numeric textbox with its key features
 
 ````CSHTML
 @using Telerik.Blazor.Components.NumericTextBox
 
-<TelerikNumericTextBox Format="C" Max="5m" Min="-5m" Step="0.33m" Value="3.456m" ValueChanged="@MyValueChangeHandler"></TelerikNumericTextBox>
+<TelerikNumericTextBox Format="C" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@theValue"></TelerikNumericTextBox>
 <br />
-The new value is: @result
+The new value is: @theValue
 
 @code {
-	private string result;
-
-	private void MyValueChangeHandler(object newValue)
-	{
-		//the event argument is an object you can cast to the type you are actually using
-		result = newValue.ToString();
-	}
+     private decimal theValue { get; set; } = 1.234m;
 }
 ````
 

components/textbox/overview.md

@@ -14,43 +14,24 @@ The Textbox component allows the user to enter a generic plain text message. The
 
 To use a Telerik Textbox for Blazor, add the `TelerikTextBox` tag.
 
->caption Basic textbox with its key features, and ValueChanged event handling
+>caption Basic textbox with its key features, namespace and reference
 
-@[template](/_contentTemplates/common/issues-and-warnings.md#generic-component-event-issue)
 
 ````CSHTML
 @using Telerik.Blazor.Components.TextBox
 
-<TelerikTextBox ValueChanged="@MyValueChangeHandler" @bind-Value="theTbValue"
-			  Label="Enter Information" Id="myInputId" MaxLength="20"></TelerikTextBox>
+<TelerikTextBox @bind-Value="theTbValue" Label="Enter Information" MaxLength="20" @ref="theTextBoxRef"></TelerikTextBox>
 
-@result
+@theTbValue
 
 @code {
-	string result;
-	string theTbValue { get; set; } = "lorem ipsum";
+    string theTbValue { get; set; } = "lorem ipsum";
 
-	private void MyValueChangeHandler(string theUserInput)
-	{
-		result = string.Format("The user entered: {0}", theUserInput);
-
-		StateHasChanged();
-	}
-}
-````
-
->caption Component namespace and reference
-
-````CSHTML
-@using Telerik.Blazor.Components.TextBox
-
-<TelerikTextBox @ref="theTextBoxRef"></TelerikTextBox>
-
-@code {
     Telerik.Blazor.Components.TextBox.TelerikTextBox theTextBoxRef;
 }
 ````
 
+
 The numeric textbox provides the following features:
 
 * `Class` - the CSS class that will be rendered on the `input` element.