All Components

Toolbar

The Chat enables you to render a toolbar and display buttons with which the end users can interact.

You can implement the respective button action by handling the toolclick event and based on the command which the user executes in the toolbar.

<div id="vueapp">
  <kendo-chat ref="chat" id="chat" @toolclick="onToolClick" :toolbar-toggleable="true">
    <kendo-chat-toolbar-button name="sendimage" icon-class="k-icon k-i-image" text="Send Image"></kendo-chat-toolbar-button>
  </kendo-chat>

  <kendo-upload
      ref="upload"
      :async-save-url="'https://demos.telerik.com/kendo-ui/upload/async/save'"
      :async-remove-url="'https://demos.telerik.com/kendo-ui/upload/async/remove'"
      :async-auto-upload="true"
      :async-with-credentials="false"
      :drop-zone="'#chat'"
      :show-file-list="false"
      :validation-allowed-extensions="['.jpg', '.jpeg', '.png', '.bmp', '.gif']"
      :validation-min-file-size="500"
      @upload="onSuccess">
  </kendo-upload>

  <span>You can use the Image tool in the toolbar to send an image. Or drop an image on the Chat component.</span>
</div>
Vue.use(ChatInstaller);
Vue.use(UploadInstaller);

new Vue({
    el: '#vueapp',
     mounted () {
    this.$refs.upload.kendoWidget().wrapper.hide()
    var IMAGE_CARD_TEMPLATE = kendo.template(
      '<div class="k-card k-card-type-rich">' +
      '<div class="k-card-body quoteCard">' +
      '<img class="image-attachment" src="#: image #" style="max-height: 120px;" />' +
      '</div>' +
      '</div>'
    )

    kendo.chat.registerTemplate('image_card', IMAGE_CARD_TEMPLATE)
  },
  methods: {
    onToolClick (ev) {
      if (ev.name === 'sendimage') {
        this.$refs.upload.kendoWidget().element.click()
      }
    },
    onSuccess (e) {
      var that = this
      e.preventDefault()
      for (var i = 0; i < e.files.length; i++) {
        var file = e.files[i].rawFile
        if (file) {
          var reader = new FileReader()
          reader.onloadend = function () {
            that.$refs.chat.kendoWidget().renderAttachments({
              attachments: [{
                contentType: 'image_card',
                content: {
                  image: this.result
                }
              }],
              attachmentLayout: 'list'
            }, that.$refs.chat.kendoWidget().getUser())
          }
          reader.readAsDataURL(file)
        }
      }
    }
  }
})
In this article