# ChatPicker Overview

The `RadChat` component offers different pickers allowing you to present the user a selection of choices either as a part of the conversation, or over the messages' view.

Depending on the information that is presented and the choice that have to be made, the pickers can be one of the types listed below.

* `DatePicker`—Displays a Calendar to choose a date.
* `TimePicker`—Displays a clock view to choose a time.
* `ItemPicker`—Displays a list of suggestions the end user can choose from.
* `CardPicker`—Displays a list of cards with structured layout.

Each of these pickers is a part of the `RadChatPicker` control and is defined through the corresponding `PickerContext` property, namely `DatePickerContext`, `TimePickerContext`, `ItemPickerContext`, etc.

You can use `RadChatPicker` in three different ways:

* [Inline as a part of the conversation](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/overview#inline-as-part-of-the-conversation)–Through a `PickerItem` added to the Chat’s Items collection.
* [Inside the Chat but not as a part of the conversation](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/overview#inside-the-chat---not-part-of-the-conversation)–The picker is placed between the entry and the conversation–implemented through the Chat’s Picker property.
* As a separate Chat Picker control–Shown outside the `RadChat` control.

### Inline as Part of the Conversation

In this case, you need to create an item of type `PickerItem` that derives from the `ChatItem`. Set its `Context`, and add it to the `Items` collection of the Chat.

The following example demonstrates how to use the `RadChatPicker` inline as a part of the conversation:

```C#
DatePickerContext context = new DatePickerContext
{
    MinDate = new DateTime(2019, 1, 1),
    MaxDate = new DateTime(2019, 2, 2),
    SelectedDate = new DateTime(2019, 1, 16)
};
PickerItem pickerItem = new PickerItem { Context = context };
chat.Items.Add(new TextMessage { Text = "Select a date", Author = chat.Author });
chat.Items.Add(pickerItem);

context.PropertyChanged += (s, e) =>
{
    if (e.PropertyName == "SelectedDate")
    {
        if (context.SelectedDate != null)
        {
            chat.Items.Remove(pickerItem);
            chat.Items.Add(new TextMessage { Author = chat.Author, Text = "" + context.SelectedDate });
        }
    }
};
```

When the user makes a selection, you can add a new `TextMessage` with the `SelectedDate` and remove the `PickerItem` from the conversation.

![Telerik UI for .NET MAUI Chat inline DatePicker selecting a date from the February 2019 calendar](https://www.telerik.com/maui-ui/documentation/assets/c8a10e18c6f80c5f761cda9167fad033/chat-datepicker.gif)

### Inside the Chat - Not Part of the Conversation

If you choose this approach, you need to create a `RadChatPicker` instance and set it to the `Picker` property of the Chat:

```XAML
<telerik:RadChat x:Name="chat">
    <telerik:RadChat.Picker>
        <telerik:RadChatPicker x:Name="picker" 
            IsOkButtonVisible="False"
            IsCancelButtonVisible="False"                                               
            BackgroundColor="LightGray" />
    </telerik:RadChat.Picker>
</telerik:RadChat>
```

Then, when you need to display any of the available pickers, you set the `Context` property of the `ChatPicker`. The next example shows how to achieve this with `DatePickerContext`:

```C#
DatePickerContext context = new DatePickerContext
{
    MinDate = new DateTime(2019, 1, 1),
    MaxDate = new DateTime(2019, 2, 2),
    SelectedDate = new DateTime(2019, 1, 16)
};

context.PropertyChanged += (s, e) =>
{
    if (e.PropertyName == "SelectedDate")
    {
        if (context.SelectedDate != null)
        {
            chat.Items.Add(new TextMessage { Author = this.chat.Author, Text = "" + context.SelectedDate });
            (chat.Picker as RadChatPicker).IsVisible = false;
        }
    }
};
(chat.Picker as RadChatPicker).Context = context;
```

When the user selects a date, the `Context` is reset to `null` and a new `TextMessage` with the `SelectedDate` can be added to the conversation. The `IsVisible` property of the picker can also be set to `false`.

In the example above, `RadChatPicker` is used for immediate selection by setting its `IsOkButtonVisible` and `IsCancelButtonVisible` to false. You can also show **OK** and **Cancel** buttons and use the provided events/commands to handle the selection.

![Telerik UI for .NET MAUI Chat DatePicker displayed inside the chat above the message input](https://www.telerik.com/maui-ui/documentation/assets/b59f8e9f918c4c7502e2f7dbda10d174/chat-picker-inside-chat.png)

## See Also

* [DatePicker](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/datepicker)
* [TimePicker](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/timepicker)
* [ItemPicker](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/itempicker)
* [CardPicker](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/card-picker/overview)