how to assign custom icons to window actions

[Marcel]

Hi 
How can I assign a custom icon to an action and change it when clicked?

So far I have the window opening and I have successfully attached the click events - now how do I change the icon after it has been clicked (and before).

$("#idExplorerReal").kendoWindow({

    actions: ["Expand", "Custom", "Close"],

    draggable: true,

    height: "500px",

    width: "300px",

    minHeight: 500,

    minWidth: 250,

    modal: true,

    visible: true,

    resizable: true,

    title: "Explorer",

    close: onCloseWin

});

 

var kendoWindow = $("#idExplorerReal").data("kendoWindow");

 

var vv = kendoWindow.wrapper.find(".k-i-custom");

vv.click(function (e) {

    alert("custom");

});

 

var vv2 = kendoWindow.wrapper.find(".k-i-expand");

vv2.click(function (e) {

    alert("expand");

});

One more question....

How exactly does this .data("kendoWindow") work?  Does Kendo places a reference to itself in the jQuery .data() action of the element that is transformed to a Kendo Window?

Thanks,

[Dimo]

Hi Marcel,

Please refer to the following demo, which is based on your code snippet:

http://jsfiddle.net/dimodi/hCsbe/

It is up to you to create the algorithm, which will remove the additional "clicked" class to restore the initial icon.

We use the .data() method to attach, store and retrieve the Kendo widgets' client objects to/form the respective DOM element. You can find more information about this method at http://api.jquery.com/data/

All the best,
Dimo
the Telerik team