docs(searchbox): add itemselected event article and improve overview

controls/searchbox/search-context/events/onclientitemselected.md

@@ -0,0 +1,44 @@
+---
+title: OnClientItemSelected
+page_title: ClientItemSelected event of the SearchContext - RadSearchBox
+description: The OnClientItemSelected is a Client-Side event that is triggered when an item from the SearchBox dropdown (SearchContext) is clicked.
+slug: searchbox/search-context/events/onclientitemselected
+tags: onclientitemselected
+published: True
+---
+
+# OnClientItemSelected
+
+The **OnClientItemSelected** is a Client-Side event that is triggered when an item from the SearchBox dropdown (SearchContext) is clicked.
+
+The event handler receives two parameters:
+
+1. The instance of (`Telerik.Web.UI.SearchContext`) firing the event, the [SearchContext object]({%slug searchbox/client-side-programming/searchcontext-object%}).
+
+2. The event arguments that contains the following methods:
+
+   - `(Telerik.Web.UI.SearchContextItem)` **get_item()** - returns the [SearchContextItem object]({%slug searchbox/client-side-programming/searchcontextitem-object%}).
+   - `(bool)` **get_isDefaultItem()** - returns `true` if the [Default ("All")]({%slug searchbox/search-context/overview%}#summary-of-features-supported-by-radsearchboxs-search-context) item was selected
+   - `(string)` **get_text()** - returns the selected SearchContext Item's Text
+   - `(string/int)` **get_key()** - returns the selected SearchContext Item's Key (commonly known as the value)
+
+
+````ASP.NET
+<telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
+    DataTextField="Desc" DataValueField="Id">
+    <SearchContext DataTextField="Desc" DataKeyField="Id" OnClientItemSelected="OnClientItemSelected">
+    </SearchContext>
+</telerik:RadSearchBox>
+````
+
+````JavaScript
+function OnClientItemSelected(sender, args) {
+    var searchContext = sender; // Telerik.Web.UI.SearchContext
+    var searchContextItem = args.get_item(); // Telerik.Web.UI.SearchContextItem
+    var isDefaultItem = args.get_isDefaultItem(); // bool
+    var text = args.get_text(); // SearchContext Item's Text
+    var key = args.get_key(); // SearchContext Item's Key (value)
+}
+````
+
+

controls/searchbox/search-context/overview.md

@@ -13,7 +13,7 @@ position: 0
 **Search Context functionality** was added from Q2 2013 in order to provide context for the search operation. The search context is represented as a simple drop-down giving a choice to select a context item. This feature improves the performance and usability when searching in large data sets.
 
 SearchBox's Search Context behaves as a standard DropDownList control with single selection. It has Items which are accessible server as well as client side.
-![searchbox searchcontext overview](images/searchbox_searchcontext_overview.png)
+![searchbox searchcontext overview](images/searchbox_searchcontext_overview.png "searchbox searchcontext overview")
 
 ````ASPNET
 <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox2" runat="server" Width="500" DataSourceID="SqlDataSource3" 
@@ -30,52 +30,41 @@ SearchBox's Search Context behaves as a standard DropDownList control with singl
 ````
 
 
+## Supported Features
 
-## Summary of features supported by RadSearchBox's Search Context
+Summary of features supported by RadSearchBox's Search Context
 
-* **Data Binding**
+- **Data Binding** - binding SearchContext to a data source
+- **Declarative items** – SeachContextItems could be defined in the markup or added dynamically from code-behind.
+- [**Server-side**]({%slug searchbox/search-context/data-binding/server-side-binding%}) – server API for setting data source using DataSourceID/DataSource properties.
+- [**Client-side**]({%slug searchbox/search-context/data-binding/client-side-binding%}) – client API for population through Web services and integration with RadODataDataSource control.
+- **Default "All" Item** – Search Context renders an item which when selected won't provide context for the search operation. This item could be omitted if the **ShowDefaultItem** property is set to False (it's True by default).
+- **Loading Message** - When the default item is not shown and the SearchContext's is populate from a web service or bound to the RadODataDataSource control, a message is shown in the input of the Search Context while the items are being loaded and initialized. Once loaded the message is removed and the first item in the list is selected.
+- **Localization** - both the text of the default items as well as the loading message could be localized through the **Localization-DefaultItemText** and **Localization-LoadingItemsMessage** properties.
+- [**Keyboard Support**]({%slug searchbox/accessibility-and-internationalization/keyboard-support%}) - Search Context has a fully functional keyboard support, which is available once the control is focused. In order to be able to focus the Search Context the **TabIndex** property should be set.
 
-* Declarative items – SeachContextItems could be defined in the markup or added dynamically from code-behind.
 
-* [Server-side]({%slug searchbox/search-context/data-binding/server-side-binding%}) – server API for setting data source using DataSourceID/DataSource properties.
-
-* [Client-side ]({%slug searchbox/search-context/data-binding/client-side-binding%}) – client API for population through Web services and integration with RadODataDataSource control.
-
-* **Default "All" Item** – Search Context renders an item which when selected won't provide context for the search operation. This item could be omitted if the **ShowDefaultItem** property is set to False (it's True by default).
-
-* **Loading Message** - When the default item is not shown and the SearchContext's is populate from a web service or bound to the RadODataDataSource control, a message is shown in the input of the Search Context while the items are being loaded and initialized. Once loaded the message is removed and the first item in the list is selected.
-
-* **Localization** - both the text of the default items as well as the loading message could be localized through the **Localization-DefaultItemText** and **Localization-LoadingItemsMessage** properties.
-
-* [Keyboard Support]({%slug searchbox/accessibility-and-internationalization/keyboard-support%}) - Search Context has a fully functional keyboard support, which is available once the control is focused. In order to be able to focus the Search Context the **TabIndex** property should be set.
-
-* **ItemDataBoud** - server-side event fired for every SearchContextItem create as a result of a binding to a data source.
-
-* **ClientItemDataBoud** - client-side event fired for every SearchContextItem create as a result of a binding to a RadODataDataSource control.
-
-## Databinding Properties and Methods
+## Data Binding 
 
 When binding Search Context to a particular Data Source you will need to use the following properties.
 
-* **DataSource** property - set to an instance of your data source. This is mandatory when binding SearchContext at runtime.
-
-* **DataSourceID** property - set to the ID of your data source. This is mandatory when binding SearchContext declaratively.
-
-* **DataTextField** property - field name from the data source bound to the SearchContextItem's **Text** property.
-
-* **DataKeyField** property - field name from the data source bound to the SearchContextItem's **Key** property.
-
-* **DataModelID** property is used to set the ModelID when binding SearchContext to RadODataDataSource control.
+- **DataSource** - set to an instance of your data source. This is mandatory when binding SearchContext at runtime.
+- **DataSourceID** - set to the ID of a DataSource Control (SqlDataSource, ObjectDataSource, etc). This is mandatory when binding SearchContext declaratively.
+- **DataTextField** - set the field name from the data source bound to the SearchContextItem's **Text** property.
+- **DataKeyField** - set the field name from the data source bound to the SearchContextItem's **Key** property.
+- **DataModelID** - set the ModelID when binding SearchContext to RadODataDataSource control.
 
-## Summary of SearchContextItem's properties
+Once the data binding is configured, you will be able to access the values through the SearchContext Item object. For a list properties and methods, check out the [SearchContextItem Object]({%slug searchbox/client-side-programming/searchcontextitem-object%}) article.
 
-* **Text** – property defining the text of the SearchContextItem.
+## Events
 
-* **Key** – this property defines the value which is used as a context when the search operation is performed and the SearchBox is bound to a data source control or RadODataDataSouce components.
+- **Server-Side**:
+  - [ItemDataBound]({%slug searchbox/search-context/events/onitemdatabound%}) - server-side event fired for every SearchContextItem create as a result of a binding to a data source.
 
-* **ImageUrl** – this property accepts a path to a physical image.
+- **Client-Side**:
+  - [ClientItemDataBound]({%slug searchbox/search-context/events/onclientitemdatabound%}) - client-side event fired for every SearchContextItem create as a result of a binding to a RadODataDataSource control.
+  - [ClientItemSelected]({%slug searchbox/search-context/events/onclientitemselected%}) - client-side event fired when a SearchContext item is selected.
 
-* **Selected** – property defining the selected state of the item (Search Context could have only one selected item at a time).
 
 ## Search Context integration with RadSearchBox