Skip to content

Commit d7e86a1

Browse files
attilaantalattilaantal
committed
docs(searchbox): add itemselected event article and improve overview
1 parent 821a70a commit d7e86a1

File tree

2 files changed

+68
-35
lines changed

2 files changed

+68
-35
lines changed

Diff for: ‎controls/searchbox/search-context/events/onclientitemselected.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: OnClientItemSelected
3+
page_title: ClientItemSelected event of the SearchContext - RadSearchBox
4+
description: The OnClientItemSelected is a Client-Side event that is triggered when an item from the SearchBox dropdown (SearchContext) is clicked.
5+
slug: searchbox/search-context/events/onclientitemselected
6+
tags: onclientitemselected
7+
published: True
8+
---
9+
10+
# OnClientItemSelected
11+
12+
The **OnClientItemSelected** is a Client-Side event that is triggered when an item from the SearchBox dropdown (SearchContext) is clicked.
13+
14+
The event handler receives two parameters:
15+
16+
1. The instance of (`Telerik.Web.UI.SearchContext`) firing the event, the [SearchContext object]({%slug searchbox/client-side-programming/searchcontext-object%}).
17+
18+
2. The event arguments that contains the following methods:
19+
20+
- `(Telerik.Web.UI.SearchContextItem)` **get_item()** - returns the [SearchContextItem object]({%slug searchbox/client-side-programming/searchcontextitem-object%}).
21+
- `(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
22+
- `(string)` **get_text()** - returns the selected SearchContext Item's Text
23+
- `(string/int)` **get_key()** - returns the selected SearchContext Item's Key (commonly known as the value)
24+
25+
26+
````ASP.NET
27+
<telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
28+
DataTextField="Desc" DataValueField="Id">
29+
<SearchContext DataTextField="Desc" DataKeyField="Id" OnClientItemSelected="OnClientItemSelected">
30+
</SearchContext>
31+
</telerik:RadSearchBox>
32+
````
33+
34+
````JavaScript
35+
function OnClientItemSelected(sender, args) {
36+
var searchContext = sender; // Telerik.Web.UI.SearchContext
37+
var searchContextItem = args.get_item(); // Telerik.Web.UI.SearchContextItem
38+
var isDefaultItem = args.get_isDefaultItem(); // bool
39+
var text = args.get_text(); // SearchContext Item's Text
40+
var key = args.get_key(); // SearchContext Item's Key (value)
41+
}
42+
````
43+
44+

Diff for: ‎controls/searchbox/search-context/overview.md

+24-35
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ position: 0
1313
**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.
1414

1515
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.
16-
![searchbox searchcontext overview](images/searchbox_searchcontext_overview.png)
16+
![searchbox searchcontext overview](images/searchbox_searchcontext_overview.png "searchbox searchcontext overview")
1717

1818
````ASPNET
1919
<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
3030
````
3131

3232

33+
## Supported Features
3334

34-
## Summary of features supported by RadSearchBox's Search Context
35+
Summary of features supported by RadSearchBox's Search Context
3536

36-
* **Data Binding**
37+
- **Data Binding** - binding SearchContext to a data source
38+
- **Declarative items** – SeachContextItems could be defined in the markup or added dynamically from code-behind.
39+
- [**Server-side**]({%slug searchbox/search-context/data-binding/server-side-binding%}) – server API for setting data source using DataSourceID/DataSource properties.
40+
- [**Client-side**]({%slug searchbox/search-context/data-binding/client-side-binding%}) – client API for population through Web services and integration with RadODataDataSource control.
41+
- **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).
42+
- **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.
43+
- **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.
44+
- [**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.
3745

38-
* Declarative items – SeachContextItems could be defined in the markup or added dynamically from code-behind.
3946

40-
* [Server-side]({%slug searchbox/search-context/data-binding/server-side-binding%}) – server API for setting data source using DataSourceID/DataSource properties.
41-
42-
* [Client-side ]({%slug searchbox/search-context/data-binding/client-side-binding%}) – client API for population through Web services and integration with RadODataDataSource control.
43-
44-
* **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).
45-
46-
* **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.
47-
48-
* **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.
49-
50-
* [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.
51-
52-
* **ItemDataBoud** - server-side event fired for every SearchContextItem create as a result of a binding to a data source.
53-
54-
* **ClientItemDataBoud** - client-side event fired for every SearchContextItem create as a result of a binding to a RadODataDataSource control.
55-
56-
## Databinding Properties and Methods
47+
## Data Binding
5748

5849
When binding Search Context to a particular Data Source you will need to use the following properties.
5950

60-
* **DataSource** property - set to an instance of your data source. This is mandatory when binding SearchContext at runtime.
61-
62-
* **DataSourceID** property - set to the ID of your data source. This is mandatory when binding SearchContext declaratively.
63-
64-
* **DataTextField** property - field name from the data source bound to the SearchContextItem's **Text** property.
65-
66-
* **DataKeyField** property - field name from the data source bound to the SearchContextItem's **Key** property.
67-
68-
* **DataModelID** property is used to set the ModelID when binding SearchContext to RadODataDataSource control.
51+
- **DataSource** - set to an instance of your data source. This is mandatory when binding SearchContext at runtime.
52+
- **DataSourceID** - set to the ID of a DataSource Control (SqlDataSource, ObjectDataSource, etc). This is mandatory when binding SearchContext declaratively.
53+
- **DataTextField** - set the field name from the data source bound to the SearchContextItem's **Text** property.
54+
- **DataKeyField** - set the field name from the data source bound to the SearchContextItem's **Key** property.
55+
- **DataModelID** - set the ModelID when binding SearchContext to RadODataDataSource control.
6956

70-
## Summary of SearchContextItem's properties
57+
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.
7158

72-
* **Text** – property defining the text of the SearchContextItem.
59+
## Events
7360

74-
* **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.
61+
- **Server-Side**:
62+
- [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.
7563

76-
* **ImageUrl** – this property accepts a path to a physical image.
64+
- **Client-Side**:
65+
- [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.
66+
- [ClientItemSelected]({%slug searchbox/search-context/events/onclientitemselected%}) - client-side event fired when a SearchContext item is selected.
7767

78-
* **Selected** – property defining the selected state of the item (Search Context could have only one selected item at a time).
7968

8069
## Search Context integration with RadSearchBox
8170

0 commit comments

Comments
 (0)