New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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.

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>
<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