Add space between buttons

2 posts, 0 answers
  1. RB
    RB avatar
    126 posts
    Member since:
    Dec 2013

    Posted 17 Nov 2014 Link to this post

    How can I add space between RadButtond? I have a commandItemTemplate with 3 buttons as follows, but I need some spacing between them.
    Also is there a way for the Refresh button to be placed in the right corner?

                    addButton = new RadButton();
                addButton.ID = "addButton";
                addButton.Text = "Add Delegate";          
                addButton.CommandName = "InitInsert";     
                addButton.Visible = canAdd;                   
                addButton.Icon.PrimaryIconCssClass = "rbAdd";          
                addButton.Skin = "Telerik";
     
                deleteButton = new RadButton();
                deleteButton.ID = "deleteButton";
                deleteButton.Text = "Delete Selected Delegates";         
                deleteButton.CommandName = "DeleteSelected";
                deleteButton.OnClientClicked = "OnClientClicked"; //"javascript:return confirm('Delete all selected delegates?')";          
                deleteButton.Icon.PrimaryIconCssClass = "rbRemove";
                deleteButton.Skin = "Telerik";
     
                refreshButton = new RadButton();
                refreshButton.ID = "refreshButton";
                refreshButton.Text = "Refresh";
                refreshButton.CommandName = "RebindGrid";
                refreshButton.Icon.PrimaryIconCssClass = "rbRefresh";
                refreshButton.Skin = "Telerik";
     
                container.Controls.Add(addButton);
                container.Controls.Add(new LiteralControl(" "));
                container.Controls.Add(deleteButton);
                container.Controls.Add(new LiteralControl(" "));
                container.Controls.Add(refreshButton);
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 19 Nov 2014 Link to this post

    Hello RB,

    You can add CssClass to the desired button through which you can do the desired styling with the space and right float. For example:

    CSS:
    <style>
        .LeftMargin {
            margin-left: 100px;
        }
        .FloatRight {
            float: right;
        }
    </style>

    C#:
    protected void Page_Load(object sender, EventArgs e)
        {
            RadButton addButton;
            RadButton deleteButton;
            RadButton refreshButton;
            bool canAdd = true;
     
            addButton = new RadButton();
            addButton.ID = "addButton";
            addButton.Text = "Add Delegate";
            addButton.CommandName = "InitInsert";
            addButton.Visible = canAdd;
            addButton.Icon.PrimaryIconCssClass = "rbAdd";
            addButton.Skin = "Telerik";
     
            deleteButton = new RadButton();
            deleteButton.ID = "deleteButton";
            deleteButton.Text = "Delete Selected Delegates";
            deleteButton.CommandName = "DeleteSelected";
            deleteButton.OnClientClicked = "OnClientClicked"; //"javascript:return confirm('Delete all selected delegates?')";         
            deleteButton.Icon.PrimaryIconCssClass = "rbRemove";
            deleteButton.Skin = "Telerik";
            deleteButton.CssClass = "LeftMargin";
     
            refreshButton = new RadButton();
            refreshButton.ID = "refreshButton";
            refreshButton.Text = "Refresh";
            refreshButton.CommandName = "RebindGrid";
            refreshButton.Icon.PrimaryIconCssClass = "rbRefresh";
            refreshButton.Skin = "Telerik";
            refreshButton.CssClass = "FloatRight";
     
            container.Controls.Add(addButton);
            container.Controls.Add(new LiteralControl(" "));
            container.Controls.Add(deleteButton);
            container.Controls.Add(new LiteralControl(" "));
            container.Controls.Add(refreshButton);
        }


    ASPX:
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <asp:Panel ID="container" runat="server"></asp:Panel>
    </form>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top