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.
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.
