|
| 1 | +--- |
| 2 | +title: Data Binding |
| 3 | +page_title: Chat Data Binding |
| 4 | +description: Learn how to bind data to the Telerik UI for Blazor Chat component, including message models and dynamic updates. |
| 5 | +slug: chat-data-binding |
| 6 | +tags: telerik,blazor,chat,data-binding,messages |
| 7 | +published: True |
| 8 | +position: 2 |
| 9 | +--- |
| 10 | + |
| 11 | +# Data Binding |
| 12 | + |
| 13 | +The Telerik UI for Blazor Chat component supports data binding to collections of messages and provides flexible field mapping to accommodate different data models. |
| 14 | + |
| 15 | +## Bind to Data |
| 16 | + |
| 17 | +To bind the Chat to data, set its `Data` parameter to an `IEnumerable<T>` where `T` represents your message model. |
| 18 | + |
| 19 | +>caption Basic data binding |
| 20 | +
|
| 21 | +````Razor |
| 22 | +<TelerikChat Data="@Messages" |
| 23 | + AuthorId="@CurrentUserId" |
| 24 | + OnSendMessage="@HandleSendMessage"> |
| 25 | +</TelerikChat> |
| 26 | +
|
| 27 | +@code { |
| 28 | + private List<ChatMessage> Messages { get; set; } = new List<ChatMessage> |
| 29 | + { |
| 30 | + new ChatMessage { Id = "1", Text = "Hello!", AuthorId = "user1", Timestamp = DateTime.Now.AddMinutes(-5) }, |
| 31 | + new ChatMessage { Id = "2", Text = "Hi there!", AuthorId = "user2", Timestamp = DateTime.Now.AddMinutes(-3) } |
| 32 | + }; |
| 33 | + |
| 34 | + private string CurrentUserId { get; set; } = "user1"; |
| 35 | +
|
| 36 | + private void HandleSendMessage(ChatSendMessageEventArgs args) |
| 37 | + { |
| 38 | + var newMessage = new ChatMessage |
| 39 | + { |
| 40 | + Id = Guid.NewGuid().ToString(), |
| 41 | + Text = args.Message, |
| 42 | + AuthorId = CurrentUserId, |
| 43 | + Timestamp = DateTime.Now |
| 44 | + }; |
| 45 | + |
| 46 | + Messages.Add(newMessage); |
| 47 | + } |
| 48 | +
|
| 49 | + public class ChatMessage |
| 50 | + { |
| 51 | + public string Id { get; set; } |
| 52 | +
|
| 53 | + public string AuthorId { get; set; } |
| 54 | +
|
| 55 | + public string AuthorName { get; set; } |
| 56 | +
|
| 57 | + public string AuthorImageUrl { get; set; } |
| 58 | +
|
| 59 | + public string Text { get; set; } |
| 60 | +
|
| 61 | + public string MessageToReplyId { get; set; } |
| 62 | +
|
| 63 | + public string Status { get; set; } |
| 64 | +
|
| 65 | + public bool IsDeleted { get; set; } |
| 66 | +
|
| 67 | + public bool IsPinned { get; set; } |
| 68 | +
|
| 69 | + public DateTime Timestamp { get; set; } |
| 70 | +
|
| 71 | + public List<string> SuggestedActions { get; set; } |
| 72 | +
|
| 73 | + public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>(); |
| 74 | + } |
| 75 | +} |
| 76 | +```` |
| 77 | + |
| 78 | +## Field Mapping |
| 79 | + |
| 80 | +The Chat component provides field mapping parameters to work with different data models. Use these parameters to specify which properties in your data model correspond to Chat features: |
| 81 | + |
| 82 | +| Parameter | Description | Default Value | |
| 83 | +|-----------|-------------|---------------| |
| 84 | +| `TextField` | Field containing message text content | `"Text"` | |
| 85 | +| `AuthorIdField` | Field containing the author/user ID | `"AuthorId"` | |
| 86 | +| `AuthorNameField` | Field containing the author display name | `"AuthorName"` | |
| 87 | +| `TimestampField` | Field containing the message timestamp | `"Timestamp"` | |
| 88 | +| `IdField` | Field containing the unique message ID | `"Id"` | |
| 89 | +| `FilesField` | Field containing file attachments | `"Files"` | |
| 90 | +| `StatusField` | Field containing message status | `"Status"` | |
| 91 | +| `IsDeletedField` | Field indicating if message is deleted | `"IsDeleted"` | |
| 92 | +| `IsPinnedField` | Field indicating if message is pinned | `"IsPinned"` | |
| 93 | +| `ReplyТоIdField` | Field containing the ID of replied message | `"ReplyТоId"` | |
| 94 | +| `SuggestedActionsField` | Field containing suggested actions | `"SuggestedActions"` | |
| 95 | + |
| 96 | +## Dynamic Updates |
| 97 | + |
| 98 | +The Chat component automatically reflects changes to the bound data collection. You can add, modify, or remove messages programmatically: |
| 99 | + |
| 100 | +````Razor |
| 101 | +<TelerikChat @ref="@Chat1" |
| 102 | + Data="@Messages" |
| 103 | + TextField="Content" |
| 104 | + AuthorId="@CurrentUserId" |
| 105 | + OnSendMessage="@HandleSendMessage"> |
| 106 | +</TelerikChat> |
| 107 | +
|
| 108 | +<div style="margin-top: 20px;"> |
| 109 | + <TelerikButton OnClick="@AddSystemMessage">Add System Message</TelerikButton> |
| 110 | + <TelerikButton OnClick="@ClearMessages">Clear All Messages</TelerikButton> |
| 111 | +</div> |
| 112 | +
|
| 113 | +@code { |
| 114 | + private TelerikChat<ChatMessage> Chat1 { get; set; } |
| 115 | + private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>(); |
| 116 | + private string CurrentUserId = "user1"; |
| 117 | +
|
| 118 | + private void HandleSendMessage(ChatSendMessageEventArgs args) |
| 119 | + { |
| 120 | + var newMessage = new ChatMessage |
| 121 | + { |
| 122 | + Id = Guid.NewGuid().ToString(), |
| 123 | + Content = args.Message, |
| 124 | + AuthorId = CurrentUserId, |
| 125 | + AuthorName = "User", |
| 126 | + Timestamp = DateTime.Now |
| 127 | + }; |
| 128 | +
|
| 129 | + Messages.Add(newMessage); |
| 130 | +
|
| 131 | + Chat1?.Refresh(); |
| 132 | + } |
| 133 | +
|
| 134 | + private void AddSystemMessage() |
| 135 | + { |
| 136 | + Messages.Add(new ChatMessage |
| 137 | + { |
| 138 | + Id = Guid.NewGuid().ToString(), |
| 139 | + Content = "System notification: New user joined the chat", |
| 140 | + AuthorId = "system", |
| 141 | + AuthorName = "System", |
| 142 | + Timestamp = DateTime.Now |
| 143 | + }); |
| 144 | +
|
| 145 | + Chat1?.Refresh(); |
| 146 | + } |
| 147 | +
|
| 148 | + private void ClearMessages() |
| 149 | + { |
| 150 | + Messages.Clear(); |
| 151 | + Chat1?.Refresh(); |
| 152 | + } |
| 153 | +
|
| 154 | + public class ChatMessage |
| 155 | + { |
| 156 | + public string Id { get; set; } |
| 157 | + public string AuthorId { get; set; } |
| 158 | + public string AuthorName { get; set; } |
| 159 | + public string Content { get; set; } |
| 160 | + public DateTime Timestamp { get; set; } |
| 161 | + public string Status { get; set; } |
| 162 | + public IEnumerable<FileSelectFileInfo> Attachments { get; set; } = new List<FileSelectFileInfo>(); |
| 163 | + } |
| 164 | +} |
| 165 | +```` |
| 166 | + |
| 167 | +## See Also |
| 168 | + |
| 169 | +* [Chat Overview](slug:chat-overview) |
| 170 | +* [Chat Integrations](slug:chat-integrations) |
0 commit comments