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.

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

You can replace the existing icon with a new icon by removing 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;

}

 

 

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

 

iconToAdd.bind("click", function() {

       alert('Event Triggered');

});

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
8914 07/06/2018 07/06/2018 Dashboard Platform Dashboard Viewer
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.