New to Kendo UI for jQuery? Start a free 30-day trial
Use Custom Action Icons in the Window
Environment
| Product | Progress® Kendo UI® Window for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I use custom icons for the action buttons of a Kendo UI for jQuery Window?
Solution
To achieve the desired scenario, use any of the following approaches:
- Use some of the built-in Kendo UI icons, which are part of the theme sprite. Note that you can only use the
"normal"icons that work with ak-i-...CSS class. - Use a custom icon, which is not provided by or related to Kendo UI.
The example below demonstrates the two options of how to use custom icons for the action buttons of a Kendo UI Window. Note that the custom Window action name takes part in the generated CSS class of the icon's span element in the Window title bar. For example, an action name abc is going to generate a span.k-i-abc element in the title bar. When using Kendo UI icons, there is no need to write additional CSS code. When using non-Kendo UI icons, custom CSS is required, so that the generated CSS class is assigned the desired background image.
<style>
/* "foo" matches the custom action name */
.k-i-foo
{
background-color: #f00;
background-image: url(".place.your.own.icon.here.");
}
</style>
<div id="window">
<p id="time-foo" style="color:#f00"> </p>
<p id="time-clock" style="color:#00f"> </p>
</div>
<script>
$(document).ready(function() {
var win = $("#window").kendoWindow({
width: 300,
actions: ["foo", "clock"], // action names generate icons with corresponding CSS classes
title: "Window Title"
}).data("kendoWindow");
win.wrapper.find(".k-i-foo").parent().click(function(e) {
$("#time-foo").html(returnTimeString());
});
win.wrapper.find(".k-i-clock").parent().click(function(e) {
$("#time-clock").html(returnTimeString());
});
function returnTimeString() {
var d = new Date();
return kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000");
}
});
</script>