JavaScript/jQuery Chat - editing
Configures editing.
Type:
NOTE
- Before allowing a user to update and delete messages, make sure that your data source supports these actions.
- Set the Store's key property to
"id"to ensure editing functions correctly.
jQuery
index.js
$('#chat').dxChat({
dataSource: initialMessages,
editing: {
allowUpdating: true,
allowDeleting: true
},
onMessageEntered({ message }) {
e.component.renderMessage(message);
},
onMessageUpdated(e) {
const message = e.message;
message.text = e.text;
message.isEdited = true;
initialMessages[e.message.id] = message;
e.component.repaint();
},
onMessageDeleted(e) {
const message = e.message;
message.isDeleted = true;
initialMessages[e.message.id] = message;
e.component.repaint();
},
});Angular
app.component.html
app.component.ts
<dx-chat
[dataSource]="messages"
(onMessageEntered)="onMessageEntered($event)"
(onMessageUpdated)="onMessageUpdated($event)"
(onMessageDeleted)="onMessageDeleted($event)"
>
<dxo-chat-editing
[allowUpdating]="true"
[allowDeleting]="true"
></dxo-chat-editing>
</dx-chat>
import { DxChatTypes } from "devextreme-angular/ui/chat";
// ...
export class AppComponent {
messages: DxChatTypes.Message[] = [];
onMessageEntered({ message }) {
this.messages = [...this.messages, message];
this.sendToBackend(message);
}
sendToBackend(message: DxChatTypes.Message) {
console.log(`Message sent to backend: '${message.text}'`);
// Backend logic goes here
}
onMessageUpdated(e: DxChatTypes.MessageUpdatedEvent) {
const message = e.message;
message.text = e.text;
message.isEdited = true;
initialMessages[e.message.id] = message;
e.component.repaint();
}
onMessageDeleted(e: DxChatTypes.MessageDeletedEvent) {
const message = e.message;
message.isDeleted = true;
initialMessages[e.message.id] = message;
e.component.repaint();
}
}Vue
App.vue
<template>
<DxChat
:data-source="messages"
@message-entered="onMessageEntered"
@message-updated="onMessageUpdated"
@message-deleted="onMessageDeleted"
>
<DxEditing :allow-updating="true" :allow-deleting="true" />
</DxChat>
</template>
<script setup lang="ts">
import DxChat, { DxChatTypes } from "devextreme-vue/chat";
const onMessageEntered = ({ message }) => {
messages.value = [...messages.value, message];
sendToBackend(message);
};
const sendToBackend = (message) => {
console.log(`Message sent to backend: '${message.text}'`);
// Backend logic goes here
};
const onMessageUpdated = (e: DxChatTypes.MessageUpdatedEvent) => {
const message = e.message;
message.text = e.text;
message.isEdited = true;
initialMessages[e.message.id] = message;
e.component.repaint();
};
const onMessageDeleted = (e: DxChatTypes.MessageDeletedEvent) => {
const message = e.message;
message.isDeleted = true;
initialMessages[e.message.id] = message;
e.component.repaint();
};
</script>React
App.js
import React, { useCallback, useState } from "react";
import Chat, { ChatTypes } from "devextreme-react/chat";
const onMessageUpdated = (e: ChatTypes.MessageUpdatedEvent) => {
const message = e.message;
message.text = e.text;
message.isEdited = true;
initialMessages[e.message.id] = message;
e.component.repaint();
};
const onMessageDeleted = (e: ChatTypes.MessageDeletedEvent) => {
const message = e.message;
message.isDeleted = true;
initialMessages[e.message.id] = message;
e.component.repaint();
};
const App = () => {
const [messages, setMessages] = useState();
const onMessageEntered = useCallback(({ message }) => {
setMessages((prevMessages) => [...prevMessages, message]);
sendToBackend(message);
}, []);
const sendToBackend = (message) => {
console.log(`Message sent to backend: '${message.text}'`);
// Backend logic goes here
}
return (
<Chat
onMessageEntered={onMessageEntered}
onMessageUpdated={onMessageUpdated}
onMessageDeleted={onMessageDeleted}
dataSource={messages}
>
<Editing allowUpdating={true} allowDeleting={true} />
</Chat>
);
};allowDeleting
Specifies whether a user can delete messages. Called for each message when defined as a function.
Return Value:
true if the message can be deleted; otherwise false.
Default Value: false
If false, no messages can be deleted. If true, only the current user can delete their messages.
allowUpdating
Specifies whether a user can update messages. Called for each message when defined as a function.
Return Value:
true if the message can be updated; otherwise false.
Default Value: false
If false, no messages can be edited. If true, only the current user can edit their messages.
Feedback