)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to replace one icon with another and adding event to it?

Platform: Dashboard Platform |
Control: Dashboard SDK |
Published Date: July 6, 2018 |
Last Revised Date: May 7, 2019

Replacing the existing icon

The following code snippet shows removing the existing icon. You can remove the existing icon in the afterLayoutRender event.

 
afterLayoutRender: function(args) {
         var dbrdElement = $(args.wrapperElement.prevObject).attr("id");   // Id of Dashboard Element
         var iconToRemove = $('#' + dbrdElement).find('.className');   // ‘className' refers to the class name of the icon you want to remove
         iconToRemove.hide();
}
         

 

Then, you should create a new div element and add class to the created element. Append the new element next to the removed element using the following code snippet.

 
var iconToAdd = $("<div>").addClass('e-dbrd-test-icon');
$(iconToRemove).after($(iconToAdd));
 

 

To add your font to the new class, refer to the following snippet.

 
@@font-face {
      font-family: 'test_font';    // ‘test’ is the font name that you are going to replace.
      src: url('@Url.Content("~/DashboardService/fonts/test.ttf")') format('opentype');
      font-style: italic;
      font-weight: bold;
   }
 
.e-dashboardviewer .e-dbrd-test-icon:before
 {
  content: '\e900';
  font-size: 14px;
}
 

 

By using the following css, you can align the icon properly.

 

 
.e-dashboardviewer .e-dbrd-test-icon {
    font-family: 'test_font';
    color: #6d6e70;
    padding: 11px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    float: right;
    margin-right: 2px;
}
 

 

Binding event to the new icon

You can add the event to a new icon by using the following code snippet.

 
iconToAdd.bind("click", function() {
       alert('Event Triggered');
});
 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon