Edit this page

Use Custom Action Icons

There are two options to use custom icons for the action buttons of a Kendo UI Window:

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.

Example
    <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">&nbsp;</p>
      <p id="time-clock" style="color:#00f">&nbsp;</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").click(function(e) {
          $("#time-foo").html(returnTimeString());
        });

        win.wrapper.find(".k-i-clock").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>

See Also

Other articles and how-to examples on the Kendo UI Window:

For more runnable examples on the Kendo UI Window, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy