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.