docs(common): fix @ref for preview 8

marin-bratanov · marin-bratanov · commit e513e47259d5 · 2019-08-16T08:51:32.000+03:00
diff --git a/components/animationcontainer/overview.md b/components/animationcontainer/overview.md
@@ -21,7 +21,7 @@ To use the animation container, add the `TelerikAnimationContainer` tag.
 @using Telerik.Blazor.Components.Button
 @using Telerik.Blazor
 
-<TelerikAnimationContainer @ref="myPopupRef" Top="300px" Width="100px" Height="100px" AnimationType="AnimationType.ZoomOut" Class="k-popup">
+<TelerikAnimationContainer @ref:suppressField @ref="myPopupRef" Top="300px" Width="100px" Height="100px" AnimationType="AnimationType.ZoomOut" Class="k-popup">
 	My content goes here. The "k-popup" class adds some background and borders which you can define through your own styles instead.
 </TelerikAnimationContainer>
 
@@ -65,7 +65,7 @@ The animation container exposes the following properties and methods:
 @using Telerik.Blazor.Components.Button
 @using Telerik.Blazor
 
-<TelerikAnimationContainer @ref="myPopup" Top="300px" Width="200px" Height="200px" AnimationType="@AnimType" Class="my-popup">
+<TelerikAnimationContainer @ref:suppressField @ref="myPopup" Top="300px" Width="200px" Height="200px" AnimationType="@AnimType" Class="my-popup">
 	My content goes here.<br />
 	<TelerikButton OnClick="@HideContainer">Hide Animation Container</TelerikButton>
 </TelerikAnimationContainer>
diff --git a/components/button/overview.md b/components/button/overview.md
@@ -35,7 +35,7 @@ To add a Telerik Button to your Blazor app, use the `<TelerikButton>` tag:
 ````CSHTML
 @using Telerik.Blazor.Components.Button
 
-<TelerikButton @ref="theButton">Hello!</TelerikButton>
+<TelerikButton @ref:suppressField @ref="theButton">Hello!</TelerikButton>
 
 @code{
 	Telerik.Blazor.Components.Button.TelerikButton theButton;
@@ -181,4 +181,3 @@ You can control the `type` attribute through the `ButtonType` property of the co
 
   * [Live Demo: Button](https://demos.telerik.com/blazor-ui/button/index)
    
-  
diff --git a/components/calendar/navigation.md b/components/calendar/navigation.md
@@ -97,7 +97,7 @@ You can make the Calendar component move to a certain date and view through its
 @using Telerik.Blazor.Components.Button
 
 <TelerikButton OnClick="@NavigateCalendarProgrammatically">Go to new date and view</TelerikButton>
-<TelerikCalendar Date="@startDate" Max="@maxDate" Min="@minDate" View="@Telerik.Blazor.CalendarView.Decade" @ref="theCalendar"></TelerikCalendar>
+<TelerikCalendar Date="@startDate" Max="@maxDate" Min="@minDate" View="@Telerik.Blazor.CalendarView.Decade" @ref:suppressField @ref="theCalendar"></TelerikCalendar>
 
 @code{
 	DateTime startDate = new DateTime(2345, 11, 22);
diff --git a/components/calendar/overview.md b/components/calendar/overview.md
@@ -50,7 +50,7 @@ The selected date is: @selectedDate
 ````CSHTML
 @using Telerik.Blazor.Components.Calendar
 
-<TelerikCalendar @ref="myCalendarReference">
+<TelerikCalendar @ref:suppressField @ref="myCalendarReference">
 </TelerikCalendar>
 
 @code {
diff --git a/components/chart/overview.md b/components/chart/overview.md
@@ -78,7 +78,7 @@ To use a Telerik chart for Blazor, add the `TelerikChart` tag.
 ````CSHTML
 @using Telerik.Blazor.Components.Chart
 
-<TelerikChart @ref="myChartRef">
+<TelerikChart @ref:suppressField @ref="myChartRef">
 </TelerikChart>
 
 @code {
@@ -103,7 +103,7 @@ You can also set the chart size in percentage values so it occupies its containe
 
 <div style="border: 1px solid red;width:@ContainerWidth; height: @ContainerHeight">
 	
-	<TelerikChart Width="100%" Height="100%" @ref="theChart">
+	<TelerikChart Width="100%" Height="100%" @ref:suppressField @ref="theChart">
 	
 		<TelerikChartSeriesItems>
 			<TelerikChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@someData">
diff --git a/components/dateinput/overview.md b/components/dateinput/overview.md
@@ -19,7 +19,7 @@ To use a Telerik Date Input for Blazor, add the `TelerikDateInput` tag.
 ````CSHTML
 @using Telerik.Blazor.Components.DateInput
 
-<TelerikDateInput @bind-Value="@dateInputValue" Format="dd/MMMM/yyyy" @ref="theDateInput">
+<TelerikDateInput @bind-Value="@dateInputValue" Format="dd/MMMM/yyyy" @ref:suppressField @ref="theDateInput">
 </TelerikDateInput>
 @dateInputValue
 
@@ -77,4 +77,3 @@ The date input provides the following features:
   * [Live Demo: Date Input](https://demos.telerik.com/blazor-ui/dateinput/index)
   * [Input Validation]({%slug common-features/input-validation%})
   * [Supported Date Formats]({%slug components/dateinput/supported-formats%})
-  
diff --git a/components/datepicker/overview.md b/components/datepicker/overview.md
@@ -19,7 +19,7 @@ To use a Telerik Date Picker for Blazor, add the `TelerikDatePicker` tag.
 ````CSHTML
 @using Telerik.Blazor.Components.DatePicker
 
-<TelerikDatePicker @bind-Value="datePickerValue" @ref="theDatePicker"></TelerikDatePicker>
+<TelerikDatePicker @bind-Value="datePickerValue" @ref:suppressField @ref="theDatePicker"></TelerikDatePicker>
 
 <br />The selected date is: @datePickerValue.ToShortDateString()
 
diff --git a/components/dropdownlist/data-bind.md b/components/dropdownlist/data-bind.md
@@ -87,7 +87,7 @@ The DropDownList is a generic component and its type comes from the model it is
 ````Primitive
 @using Telerik.Blazor.Components.DropDownList
 
-<TelerikDropDownList @ref="myDdlRef" Data="@MyList" Value="third">
+<TelerikDropDownList @ref:suppressField @ref="myDdlRef" Data="@MyList" Value="third">
 </TelerikDropDownList>
 
 @code {
@@ -100,7 +100,7 @@ The DropDownList is a generic component and its type comes from the model it is
 ````Model
 @using Telerik.Blazor.Components.DropDownList
 
-<TelerikDropDownList @ref="myDdlRef" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="3">
+<TelerikDropDownList @ref:suppressField @ref="myDdlRef" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="3">
 </TelerikDropDownList>
 @code {
     //the type of the generic component is determined by the type of the model you pass to it, and the type of its value field
@@ -146,4 +146,3 @@ The DropDownList is a generic component and its type comes from the model it is
 
   * [DropDownList Overview]({%slug components/dropdownlist/overview%})
   * [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/index)
-  
diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md
@@ -53,7 +53,7 @@ To use a Telerik DropDownList for Blazor
 ````CSHTML
 @using Telerik.Blazor.Components.DropDownList
 
-<TelerikDropDownList @ref="myDdlRef" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="3">
+<TelerikDropDownList @ref:suppressField @ref="myDdlRef" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="3">
 </TelerikDropDownList>
 @code {
 	//the type of the generic component is determined by the type of the model you pass to it, and the type of its value field
@@ -68,7 +68,7 @@ To use a Telerik DropDownList for Blazor
 	}
 }
 
-<TelerikDropDownList @ref="myDdlRef2" Data="@MyList" @bind-Value="MyItem">
+<TelerikDropDownList @ref:suppressField @ref="myDdlRef2" Data="@MyList" @bind-Value="MyItem">
 </TelerikDropDownList>
 
 @code {
@@ -159,7 +159,7 @@ The DropDownList provides the following features:
 @using Telerik.Blazor.Components.DropDownList
 @using Telerik.Blazor.Components.Button
 
-<TelerikDropDownList @ref="myDdlRef" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="5">
+<TelerikDropDownList @ref:suppressField @ref="myDdlRef" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="5">
 </TelerikDropDownList>
 <TelerikButton OnClick="@GetSelectedItem">Get Selected Item</TelerikButton> @result
 @code {
@@ -200,4 +200,3 @@ The DropDownList provides the following features:
   * [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/index)
   * [Live Demo: DropDownList Validation](https://demos.telerik.com/blazor-ui/dropdownlist/validation)
   
-  
diff --git a/components/grid/overview.md b/components/grid/overview.md
@@ -69,7 +69,7 @@ The grid is a generic component, and to store a reference, you must use the mode
 ````CSHTML
 @using Telerik.Blazor.Components.Grid
 
-<TelerikGrid Data="@MyData" @ref="theGridReference">
+<TelerikGrid Data="@MyData" @ref:suppressField @ref="theGridReference">
 	<TelerikGridColumns>
 		<TelerikGridColumn Field="@(nameof(SampleData.ID))">
 		</TelerikGridColumn>
diff --git a/components/numerictextbox/overview.md b/components/numerictextbox/overview.md
@@ -35,7 +35,7 @@ The numeric textbox component is generic, meaning that it takes the type of its
 ````CSHTML
 @using Telerik.Blazor.Components.NumericTextBox
 
-<TelerikNumericTextBox @ref="myNumericTextboxRef" @bind-Value="CurrentValue"></TelerikNumericTextBox>
+<TelerikNumericTextBox @ref:suppressField @ref="myNumericTextboxRef" @bind-Value="CurrentValue"></TelerikNumericTextBox>
 
 @code {
 	//determines the type of the component
diff --git a/components/tabstrip/overview.md b/components/tabstrip/overview.md
@@ -28,7 +28,7 @@ To control the position of the tab titles, the main tab strip tag exposes the op
 ````CSHTML
 @using Telerik.Blazor.Components.TabStrip
 
-<TelerikTabStrip TabPosition="Telerik.Blazor.Components.TabStrip.TabPosition.Left" @ref="myTabStrip">
+<TelerikTabStrip TabPosition="Telerik.Blazor.Components.TabStrip.TabPosition.Left" @ref:suppressField @ref="myTabStrip">
 	<TelerikTab Title="First">
 		First tab content.
 	</TelerikTab>
@@ -57,7 +57,7 @@ To control the position of the tab titles, the main tab strip tag exposes the op
 
 <TelerikButton OnClick="@WriteActiveTab">Get Active Tab</TelerikButton>
 
-<TelerikTabStrip TabPosition="Telerik.Blazor.Components.TabStrip.TabPosition.Left" @ref="myTabStrip">
+<TelerikTabStrip TabPosition="Telerik.Blazor.Components.TabStrip.TabPosition.Left" @ref:suppressField @ref="myTabStrip">
 	<TelerikTab Title="First">
 		First tab content.
 	</TelerikTab>
@@ -86,13 +86,13 @@ To control the position of the tab titles, the main tab strip tag exposes the op
 @using Telerik.Blazor.Components.TabStrip
 @using Telerik.Blazor.Components.Button
 
-<TelerikTabStrip @ref="myTabStrip">
+<TelerikTabStrip @ref:suppressField @ref="myTabStrip">
 	<TelerikTab Title="First">
 		First tab content.
 		<br />
 		<TelerikButton OnClick="@SelectSecondTab">Select the second tab</TelerikButton>
 	</TelerikTab>
-	<TelerikTab Title="Second" @ref="chosenTab">
+	<TelerikTab Title="Second" @ref:suppressField @ref="chosenTab">
 		Second tab content.
 	</TelerikTab>
 	<TelerikTab Title="Third">
diff --git a/components/textbox/overview.md b/components/textbox/overview.md
@@ -20,7 +20,7 @@ To use a Telerik Textbox for Blazor, add the `TelerikTextBox` tag.
 ````CSHTML
 @using Telerik.Blazor.Components.TextBox
 
-<TelerikTextBox @bind-Value="theTbValue" Label="Enter Information" MaxLength="20" @ref="theTextBoxRef"></TelerikTextBox>
+<TelerikTextBox @bind-Value="theTbValue" Label="Enter Information" MaxLength="20" @ref:suppressField @ref="theTextBoxRef"></TelerikTextBox>
 
 @theTbValue
 
@@ -76,4 +76,4 @@ The length, enabled and pattern attributes are HTML attributes on the `<input />
 
   * [Live Demo: Textbox](https://demos.telerik.com/blazor-ui/textbox/index)
   * [Live Demo: Textbox Validation](https://demos.telerik.com/blazor-ui/textbox/validation)
-  * [Input Validation]({%slug common-features/input-validation%})
+  * [Input Validation]({%slug common-features/input-validation%})
diff --git a/components/treeview/overview.md b/components/treeview/overview.md
@@ -31,7 +31,7 @@ To use a Telerik TreeView for Blazor:
 ````CSHTML
 @using Telerik.Blazor.Components.TreeView
 
-<TelerikTreeView @ref="theTreeView">
+<TelerikTreeView @ref:suppressField @ref="theTreeView">
 </TelerikTreeView>
 
 @code {
diff --git a/components/window/overview.md b/components/window/overview.md
@@ -50,7 +50,7 @@ The Window component is of type `Telerik.Blazor.Components.Window.TelerikWindow`
 <button @onclick="ShowWindow">Show the Window</button>
 <button @onclick="CloseWindow">Close the Window</button>
 
-<TelerikWindow @ref="myFirstWindow">
+<TelerikWindow @ref:suppressField @ref="myFirstWindow">
 	<TelerikWindowTitle>
 		<strong>The Title</strong>
 	</TelerikWindowTitle>
diff --git a/components/window/size.md b/components/window/size.md
@@ -71,7 +71,7 @@ The developer can invoke those actions through its `Maximize`, `Minimize` and `R
 <button @onclick="MaximizeWindow">Change Maximize state of the Window</button>
 <button @onclick="MinimizeWindow">Change Minimize state of the Window</button>
 
-<TelerikWindow @ref="myWindow" Visible="true">
+<TelerikWindow @ref:suppressField @ref="myWindow" Visible="true">
     <TelerikWindowTitle>
         <strong>The Title</strong>
     </TelerikWindowTitle>
@@ -115,7 +115,7 @@ The developer can invoke those actions through its `Maximize`, `Minimize` and `R
 <button @onclick="MaximizeWindow">Change Maximize state of the Window</button>
 <button @onclick="MinimizeWindow">Change Minimize state of the Window</button>
 
-<TelerikWindow @ref="myWindow" Visible="true">
+<TelerikWindow @ref:suppressField @ref="myWindow" Visible="true">
 	<TelerikWindowTitle>
 		<strong>The Title</strong>
 	</TelerikWindowTitle>
diff --git a/knowledge-base/tabstrip-activate-by-index.md b/knowledge-base/tabstrip-activate-by-index.md
@@ -35,11 +35,11 @@ The `SetActiveTab` method of the TabStrip requires a reference to the tab. So, y
 <TelerikNumericTextBox @bind-Value="@tabToSelect" Min="0" Max="@tabsCount" Step="1"></TelerikNumericTextBox>
 <TelerikButton OnClick="@ActivateChosenTab">Activate the tab with the chosen index</TelerikButton>
 
-<TelerikTabStrip @ref="myTabStrip">
+<TelerikTabStrip @ref:suppressField @ref="myTabStrip">
 	@{
 		foreach (int item in tabTitles)
 		{
-			<TelerikTab Title="@( "Tab " + item )" @ref="@theTabsRefs[item]">content for tab @item </TelerikTab>
+			<TelerikTab Title="@( "Tab " + item )" @ref:suppressField @ref="@theTabsRefs[item]">content for tab @item </TelerikTab>
 		}
 	}
 </TelerikTabStrip>
