added templated picker docs

controls/listpicker/list-picker-templates.md

@@ -18,7 +18,7 @@ In addition the List Picker for Xamarin provides the following properties:
 * **ItemLength**(*double*): Defines the length of the items inside the list.
 * **ItemSpacing**(*double*): Defines the spacing between the items inside the list.
 * **SelectedItem**(*object*): Specifies the selected item of the list picker
-* **DisplayMemberPath**(*string*): Defines the path pf the property which is to be displayed as DisplayString. 
+* **DisplayMemberPath**(*string*): Defines the path of the property which is to be displayed as DisplayString. 
 
 ## Example
 

controls/templatedpicker/templated-picker-getting-started.md

@@ -5,7 +5,7 @@ position: 1
 slug: templated-picker-getting-started
 ---
 
-# Getting Started
+# Getting Started with Custom Picker for Xamarin
 
 This article will guide you through the steps needed to add a basic **RadTemplatedPicker** control in your application.
 
@@ -35,7 +35,7 @@ You have two options:
 | iOS      | Telerik.Xamarin.iOS.dll <br/>Telerik.XamarinForms.Input<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Primitives.dll |
 | UWP      | Telerik.Core.dll<br/>Telerik.UI.Xaml.Primitives.UWP.dll<br/>Telerik.XamarinForms.Input<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Primitives.dll |
 
-## 3. Adding RadListPicker control
+## 3. Adding RadTemplatedPicker control
 
 You could use one of the following approaches:
 
@@ -48,18 +48,22 @@ Take a look at the following topics on how to use the toolbox:
 	
 #### Create the control definition in XAML or C#.
 
-The snippet below shows a simple RadListPicker definition:
+The snippet below shows a simple RadTemplatedPicker definition:
 
-<snippet id='listpicker-getting-started-xaml' />
+<snippet id='templatedpicker-getting-started-xaml' />
-<snippet id='listpicker-getting-started-csharp' />
+<snippet id='templatedpicker-getting-started-csharp' />
+
+add the following Business model for the first spinner:
+
+<snippet id='templatedpicker-country-businessmodel' />
+
+add the following Business model for the second spinner:
+
+<snippet id='templatedpicker-city-businessmodel' />
 
 here is a sample definition of the ViewModel:
 
-<snippet id='listpicker-getting-started-viewmodel' />
+<snippet id='templatedpicker-viewmodel' />
-
-and the Business model:
-
-<snippet id='listpicker-getting-started-business-model' />
 
 In addition to this, you need to add the following namespace:
 
@@ -72,9 +76,9 @@ using Telerik.XamarinForms.Input;
 
 This is the result:
 
-![List Picker](images/listpicker_getting_started.png)
+![Templated Picker](images/listpicker_getting_started.png)
 
->important **SDK Browser** and **QSF** applications contain different examples that show RadDateTimePicker's main features. You can find the applications in the **Examples** and **QSF** folders of your local **Telerik UI for Xamarin** installation.
+>important **SDK Browser** and **QSF** applications contain different examples that show RadTemplatedPicker's main features. You can find the applications in the **Examples** and **QSF** folders of your local **Telerik UI for Xamarin** installation.
 
 ## See Also
 

controls/templatedpicker/templated-picker-key-features.md

@@ -0,0 +1,62 @@
+---
+title: Key Features
+page_title: Key Features
+position: 2
+slug: templated-picker-key-features
+---
+
+# Key Features
+
+The purpose of this help article is to show you the key features of the Templated(Custom) Picker control for Xamarin.
+
+## DisplayMemberPath
+
+Its purpose is to specify a property of the source object to serve as the visual representation of the spinner item.
+
+## DisplayStringFormat
+
+You can choose what text to display when an item from the spinner was picked through the Picker DisplayStringFormat property. For more info on this check the Key Features - Display String section.
+
+## SelectedValue
+
+The SelectedValue property is used when you have linked your RadTemplatedPicker to a data source, and you want to return a value of type object other than the one which is displayed. 
+
+## Example
+
+Here is a sample example which shows how the *SelectedValue* and *DisplayMemberPath* can be used:
+
+<snippet id='templatedpicker-keyfeatures' />
+
+Here is a sample definition of the SelectorTemplate:
+
+<snippet id='templatedpicker-keyfeatures-selectortemplate' />
+
+and for the HeaderTemplate:
+
+<snippet id='templatedpicker-keyfeatures-headertemplate' />
+
+add the following Business model for the first spinner:
+
+<snippet id='templatedpicker-country-businessmodel' />
+
+add the following Business model for the second spinner:
+
+<snippet id='templatedpicker-city-businessmodel' />
+
+here is a sample definition of the ViewModel:
+
+<snippet id='templatedpicker-viewmodel' />
+
+In addition to this, you need to add the following namespace:
+
+```XAML
+xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
+```
+```C#
+using Telerik.XamarinForms.Input;
+
+
+## See Also
+
+- [Templates]({%slug templated-picker-templates%})
+- [Styling]({%slug templated-picker-styling%})

controls/templatedpicker/templated-picker-overview.md

@@ -25,4 +25,6 @@ slug: templated-picker-overview
 
 ## See Also
 
-- [Getting Started]({%slug templated-picker-getting-started%})
+- [Getting Started]({%slug templated-picker-getting-started%})
+- [Templates]({%slug templated-picker-templates%})
+- [Styling]({%slug templated-picker-styling%})

controls/templatedpicker/templated-picker-styling.md

@@ -0,0 +1,31 @@
+---
+title: Styling
+page_title: Styling
+position: 4
+slug: templated-picker-styling
+---
+
+# Styling
+
+Using the SelectorSettings property of the RadPickerBase class, you could style the dialog(popup) through the following properties:
+
+* **PopupViewStyle**(of type *Style* with target type is **telerikInput:PickerPopupContentView**):
+* **HeaderStyle**(of type *Style* with target type is **telerikInput:PickerPopupHeaderView**):
+* **HeaderLabelStyle**(of type *Style* with target type is **Label**):
+* **FooterStyle**(of type *Style* with target type is **telerikInput:PickerPopupFooterView**):
+* **AcceptButtonStyle**(of type *Style* with target type is **Button**):
+* **CancelButtonStyle**(of type *Style* with target type is **Button**):
+
+The SelectorSetting also provides the following properties for popup customization:
+
+* **PopupOutsideBackgroundColor**(*Xamarin.Forms.Color*): Defines the color outside of the popup.
+* **HeaderLabelText**(*string*): Specifies the text visualized in the popup header.
+* **AcceptButtonText**(*string*): Defines the text visualized for the accept button. By default the text is *OK*.
+* **CancelButtonText**(*string*): Defines the text visualized for the cancel button. By default the text is *Cancel*. 
+
+>important A sample Styling example can be found in the TemplatedPicker/Features folder of the [SDK Samples Browser application]({%slug developer-focused-examples%}).
+
+## See Also
+
+- [Getting Started]({%slug templated-picker-getting-started%})
+- [Templates]({%slug templated-picker-templates%})

controls/templatedpicker/templated-picker-templates.md

@@ -0,0 +1,64 @@
+---
+title: Templates
+page_title: Templates
+position: 3
+slug: templated-picker-templates
+---
+
+# Templates
+
+Templated Picker for Xamarin provides the following template:
+
+* **SelectorTemplate**(*ControlTemplate*): Defines the template used for displaying the selector of the picker.
+
+In addition to this you can define the following templates provided from the RadPickerBase class:
+
+* **PlaceholderTemplate**(*ControlTemplate*): Defines the template visualized for the placeholder.  
+* **DisplayTemplate**(*ControlTemplate*): Defines the template visualized when the picked date/time is displayed.
+
+And using RadPickerBase.SelectorSettings property(of type *Telerik.XamarinForms.Input.PickerPopupSelectorSettings*) you can define the following templates:
+
+* **HeaderTemplate**(*ControlTemplate*): Defines what will be displayed inside the dialog(popup) header.
+* **FooterTemplate**(*ControlTemplate*): Defines what will be displayed inside the dialog(popup) footer.
+
+## Example
+
+Here is a sample Templated Picker definition:
+
+<snippet id='templatedpicker-keyfeatures' />
+
+### SelectorTemplate
+
+Here is a sample definition of the SelectorTemplate:
+
+<snippet id='templatedpicker-keyfeatures-selectortemplate' />
+
+### HeaderTemplate:
+
+<snippet id='templatedpicker-keyfeatures-headertemplate' />
+
+add the following Business model for the first spinner:
+
+<snippet id='templatedpicker-country-businessmodel' />
+
+add the following Business model for the second spinner:
+
+<snippet id='templatedpicker-city-businessmodel' />
+
+here is a sample definition of the ViewModel:
+
+<snippet id='templatedpicker-viewmodel' />
+
+In addition to this, you need to add the following namespace:
+
+```XAML
+xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
+```
+```C#
+using Telerik.XamarinForms.Input;
+
+>important A sample Key Features example can be found in the TemplatedPicker/Features folder of the [SDK Samples Browser application]({%slug developer-focused-examples%}).
+
+## See Also
+
+- [Styling]({%slug templated-picker-styling%})

knowledge-base/calendar-appointments-from-json.md

@@ -0,0 +1,140 @@
+---
+title: Load calendar appoinments data from JSON
+description: deserialize appointment objects from JSON file
+type: how-to
+page_title: RadCalendar appointment from JSON
+slug: appointment-from-json
+position: 
+tags: calendar, appointment, JSON, deserialize, xamarin, telerik ui for xamarin, events, newtonsoft
+ticketid: 1417911
+res_type: kb
+---
+
+## Environment
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>2019.3.1004.1</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Calendar for Xamarin</td>
+	    </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+This article shows how to deserialize appointment objects from JSON.
+
+## Solution
+
+First, download NuGet packages for NewtonSoft library. More information about NewtonSoft can be found [here](https://www.newtonsoft.com/json).
+
+Create new JSON file with name "Source.json" to our project and change its Build Action to "Embedded resource".
+
+Here is a sample how our JSON file is stuctured.
+
+```JSON
+[
+  {
+    "Title": "Meeting with Tom",
+    "Detail": "Sea Garden",
+    "StartDate": "2019-10-07T00:00:00Z",
+    "EndDate": "2019-10-07T01:00:00Z",
+    "Color":  "Red",
+    "IsAllDay": true
+  },
+  {
+    "Title": "Lunch with Sara",
+    "Detail": "Restaurant",
+    "StartDate": "2019-10-08T00:00:00Z",
+    "EndDate": "2019-10-08T01:00:00Z",
+    "Color": "Blue",
+    "IsAllDay": true
+  },
+  {
+    "Title": "Elle Birthday",
+    "StartDate": "2019-10-09T00:00:00Z",
+    "EndDate": "2019-10-09T01:00:00Z",
+    "Color": "Green",
+    "IsAllDay": false
+  }
+]
+```
+
+Add the RadCalendar in the Main.xaml file.
+
+```XAML
+<telerikInput:RadCalendar x:Name="calendar"/>
+```
+
+After that lets create a class that will convert inconsistent JSON data like Colors.
+
+```C#
+public class AppointmentJsonConverter : JsonConverter<Appointment>
+{
+    public override Appointment ReadJson(JsonReader reader, Type objectType, Appointment existingValue, bool hasExistingValue, JsonSerializer serializer)
+    {
+        JObject jObject = JObject.Load(reader);
+        var title = jObject["Title"].Value<string>();
+        String detail = null;
+        if (jObject["Detail"] != null)
+        {
+            detail = jObject["Detail"].Value<string>();
+        }
+           
+        var startDate = jObject["StartDate"].Value<DateTime>();
+        var endDate = jObject["EndDate"].Value<DateTime>();
+
+        var colorTypeConverter = new ColorTypeConverter();
+        var color = (Color)colorTypeConverter.ConvertFromInvariantString(jObject["Color"].Value<string>());
+
+        return new Appointment()
+        {
+            Title = title,
+            Detail = detail,
+            StartDate = startDate,
+            EndDate = endDate,
+            Color = color
+        };
+    }
+
+    public override void WriteJson(JsonWriter writer, Appointment value, JsonSerializer serializer)
+    {
+        throw new NotImplementedException();
+    }
+}
+```
+ 
+Finally, create a method named "GetJsonData()" which uses NewtonSoft library and deserializes the appointment objects in it.
+
+```C#
+public partial class MainPage : ContentPage
+{
+    public MainPage()
+    {
+        InitializeComponent();
+        this.GetJsonData();
+    }
+
+    private void GetJsonData()
+    {
+        string jsonFileName = "Source.json";
+        ObservableCollection<Appointment> objAppointmentList = new ObservableCollection<Appointment>();
+        var assembly = typeof(MainPage).GetTypeInfo().Assembly;
+        Stream stream = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.{jsonFileName}");
+        using (var reader = new System.IO.StreamReader(stream))
+        {
+            var jsonString = reader.ReadToEnd();
+            objAppointmentList = JsonConvert.DeserializeObject<ObservableCollection<Appointment>>(jsonString, new AppointmentJsonConverter());
+        }
+        this.calendar.AppointmentsSource = objAppointmentList;
+    }
+}
+```
+
+
+