Chat - Toolbar

Click on the "..." dots toggle button to reveal the toolbar. After that you can use the Image tool to send an image or directly drop it on the Chat component.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo shows how you can define tools in the RadChat's toolbar and incorporate other controls and JavaScript logic to create various commands.

  • DefaultCS.aspx
  • Handler.ashx.cs
    • Handler.ashx.cs
    • SampleAsyncUploadConfiguration.cs
    • SampleAsyncUploadResult.cs
    • StreamImage.ashx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        window.demo = window.demo || {};
        window.demo.RadChat1ClientId = "<%= RadChat1.ClientID %>";
    </script>
    <script src="scripts.js" type="text/javascript"></script>
    <div class="demo-container size-narrow" style="text-align: center">
        <telerik:RadChat runat="server" ID="RadChat1" Skin="Default" RenderMode="Lightweight">
            <ClientEvents OnToolClick="OnToolClick" />
            <ToolbarSettings Toggleable="true" Animation="true">
                <AnimationSettings>
                    <ExpandSettings Duration="500" Effects="expandVertical fadeIn" />
                    <CollapseSettings Duration="500" Effects="expandVertical fadeIn" />
                </AnimationSettings>
                <ButtonsCollection>
                    <telerik:ChatToolbarButton Name="UploadImage" IconClass="t-icon t-i-image" />
                </ButtonsCollection>
            </ToolbarSettings>
        </telerik:RadChat>
        <telerik:RadAsyncUpload runat="server" OnClientFileUploaded="OnClientFileUploaded" DropZones=".RadChat" AllowedFileExtensions=".bmp,.jpg,.jpeg,.png,.gif"
            HttpHandlerUrl="~/Chat/Toolbar/Handler.ashx" 
            OnClientFileUploading="OnClientFileUploading" CssClass="chat-upload" ID="RadAsyncUpload1">
        </telerik:RadAsyncUpload>
        <div style="text-align:left; font-style:italic; font-size:0.9em;color: #aaa;">Click on the "..." dots toggle button to reveal the toolbar. After that you can use the Image tool to send an image or directly drop it on the Chat component.</div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?