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

Compact popup

Compact Buttons Empty Collection
Compact Buttons Collection

The RadSocialShare control offers many different buttons and a common scenario is to provide more or all of them without taking place on the page. This can be achieved by using the compact popup. The compact popup is a dialog which is shown when a CompactButton is added to the MainButtons collection.The compact popup allows filtering based on button labels to find the desired button easily. It can contain only styled buttons because standard third party buttons are not valid for filtering. You can specify the desired buttons to be shown in the popup by adding them to the CompactButtons collection or if you leave it empty which will automatically show all the buttons which are not displayed as main. Keyboard support is also available and turned on out of the box for the popup.

Setting a Compact button and leaving the CompactButtons collection empty, automatically populates the popup with all not shown RadSocialButtons

Explicitly adding RadSocialButtons in CompactButtons collection determines what will the compact popup contain in a custom manner.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#"  %>

<%@ 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" />
    <div class="demo-containers">
        <div class="demo-container size-thin">
            <strong>Compact Buttons Empty Collection</strong>
            <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare1" runat="server">
                <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnPinterest" UrlToShare="http://demos.telerik.com/aspnet-ajax/Common/Images/SiteNav/telerik-logo.png"
                        TitleToShare="ASP.NET AJAX Controls, .NET Web UI Components | Telerik" />
                    <telerik:RadSocialButton SocialNetType="ShareOnGooglePlus"></telerik:RadSocialButton>
                    <telerik:RadCompactButton></telerik:RadCompactButton>
                </MainButtons>
            </telerik:RadSocialShare>
        </div>
        <div class="demo-container size-thin">
            <strong>Compact Buttons Collection</strong>
            <telerik:RadSocialShare RenderMode="Lightweight" ID="RadSocialShare2" runat="server">
                <MainButtons>
                    <telerik:RadSocialButton SocialNetType="ShareOnFacebook"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnTwitter"></telerik:RadSocialButton>
                    <telerik:RadCompactButton></telerik:RadCompactButton>
                </MainButtons>
                <CompactButtons>
                    <telerik:RadSocialButton SocialNetType="Blogger"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="Delicious"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="GoogleBookmarks"></telerik:RadSocialButton>
                    <telerik:RadSocialButton SocialNetType="ShareOnGooglePlus"></telerik:RadSocialButton>
                </CompactButtons>
            </telerik:RadSocialShare>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance