$(function(){
    $("#chatContainer").dxChat({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-chat ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-chat>

import { DxChatModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChatModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxChat ...
        :element-attr="chatAttributes">
    </DxChat>
</template>

<script>
import DxChat from 'devextreme-vue/chat';

export default {
    components: {
        DxChat
    },
    data() {
        return {
            chatAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import Chat from 'devextreme-react/chat';

class App extends React.Component {
    chatAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Chat ...
                elementAttr={this.chatAttributes}>
            </Chat>
        );
    }
}
export default App;

focusStateEnabled

Type:

Boolean

Default Value: true

height

Specifies the UI component's height.

Type:

|

|

Return Value:

|

The UI component's height.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".
Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.

hoverStateEnabled

Type:

Boolean

Default Value: true

items

Selector: Item

Type:

Array<Message>

Raised Events: onOptionChanged

message

Type:

Message

onDisposing

Type:

Function

Function parameters:

e:

DisposingEvent

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery
component	Chat

Default Value: null

onInitialized

Type:

Function

Function parameters:

e:

InitializedEvent

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery
component	Chat

Default Value: null

onMessageSend

Type:

Function

Function parameters:

e:

MessageSendEvent

Object structure:

Name	Type	Description
component	Chat
element	HTMLElement \| jQuery
event	Event (jQuery or EventObject)
message	Message

Default Value: null

onOptionChanged

Type:

Function

Function parameters:

e:

OptionChangedEvent

Object structure:

Name	Type	Description
value	any
previousValue	any
name	String
fullName	String
element	HTMLElement \| jQuery
component	Chat

Default Value: null

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

Boolean

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

title

Type:

String

Default Value: ''

user

Selector: User

Type:

User

Default Value: { id: new Guid().toString() }

visible

Specifies whether the UI component is visible.

Type:

Boolean

Default Value: true

width

Specifies the UI component's width.

Type:

|

|

Return Value:

|

The UI component's width.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The width in pixels.
String
A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".
Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.