Replacing the existing iconThe 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 iconYou can add the event to a new icon by using the following code snippet.
iconToAdd.bind("click", function() {
alert('Event Triggered');
});
|
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
