We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Changing icon on ButtonSettings inside the ribbon

Thread ID:

Created:

Updated:

Platform:

Replies:

119116 May 12,2015 03:41 AM Sep 25,2017 08:01 AM ASP.NET Web Forms 5
loading
Tags: Ribbon
Rakotondrabesa
Asked On May 12, 2015 03:41 AM

Hi ,
I have to change the icon inside the ribbon, but I don't know how to do because the ButtonSettings tag don't have an attributes to change the icon.
I tried to put an URL on the style ej.icons.css used by the ribbon like:

.e-ribbon .e-new:before {
    content:url("~/Content/images/arrow2.png");
    font-size: 36px;
    position: relative;
    left: -12px;
    top: -4px;
}

but it doesn't work.
I work with the ribbon on the assemblies

<%@ Register Assembly="Syncfusion.EJ.Web, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<%@ Register Assembly="Syncfusion.EJ, Version=12.4450.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Models" TagPrefix="ej" %>

Can you help me?
thanks a lot

Sarath Kumar P [Syncfusion]
Replied On May 13, 2015 08:03 AM

Hi Rakotondrabesa,

Thanks for using Syncfusion products.

We would like to let you know that to apply icon to the buttons in the ribbon control use properties “PrefixIcon” and “SuffixIcon” . Please refer the below Code snippets,

<ej:ContentGroup Id="undo" Text="Undo" ToolTip="Undo" IsBig="false">

<ButtonSettings ContentType="TextAndImage" ImagePosition="ImageTop" PrefixIcon="e-ribbon e-undo" Click="executeAction" Type="Button" />

</ej:ContentGroup>

<ej:ContentGroup Id="upDown" Text="Up & Down" ToolTip="Up & Down">

<ButtonSettings ContentType="ImageTextImage" PrefixIcon="e-upimg" SuffixIcon="e-downimg" Click="executeAction" Type="Button" Width="120" />

</ej:ContentGroup>

To put an URL on the content attribute refer the below format and the link,

.e-ribbon .e-new:before {

content: url('../images/arrow2.png');

font-size: 36px;

position: relative;

left: -12px;

top: -4px;

}

Link: http://stackoverflow.com/questions/946403/insert-image-after-each-list-item

Please find the below sample for your reference.

Sample: http://www.syncfusion.com/downloads/support/forum/119116/RibbonButtonIcons-1351014312.zip

Please let us know if you need any further assistance.

Regards,

Sarath Kumar P.


Rakotondrabesa
Replied On May 18, 2015 03:31 AM

Hi,
Thanks a lot it's work
Regards


Sarath Kumar P [Syncfusion]
Replied On May 18, 2015 11:55 PM

Hi Rakotondrabesa,

Thanks for your update.

Please let us know if you need any assistance.

Regards,

Sarath Kumar P.


nexus
Replied On September 23, 2017 06:34 AM

and how can i add a url to a button 


Karthik Ravichandran [Syncfusion]
Replied On September 25, 2017 08:01 AM

Hi Kelvin, 
 
Thanks for contacting syncfusion support. 
 
We have checked your query (“how can i add a url to a button”). You can achieve your requirement by using javascript window.open method in click event of ribbon buttons. Please refer the below code block. 
 
[cshtml] 
<ButtonSettings Type="Button" ContentType="ImageOnly" ImagePosition="ImageTop" PrefixIcon="e-icon e-ribbon e-new" Click="executeAction" /> 
 
[script] 
function executeAction(args) { 
    if (args.model.text == "New") { 
        window.open("https://www.syncfusion.com/", "_blank") 
    } 
} 
 
For your conveniene we have attached the sample in the below link, 
 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Karthik R 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;