Search code examples
jquerycsstelerikkendo-window

How to specify custom css class for kendo.Window()?

I built kendoWindow and need to create my custom class for its title, so I do not use common classes provided by telerik.

This is my window:

$("#win").kendoWindow({
    visible: false,
    modal: true,
    title: true,
    open: function (e) { $("html, body").css("overflow", "hidden"); },
    close: function (e) { $("html, body").css("overflow", ""); },
    draggable: false,
    width: 950,
    height: 510,
    position: {
        top: 100,
        left: 500
    },
    resizable: false
});

It generates the following html:

enter image description here

I'm looking for the way to modify the way the title is generating by using my own class, instead of using existing one k-window-titlebar k-header

How can I do something like that?

Solution

  • Below is how you can customize any CSS class in Kendo UI:

    //You need to first make sure the window is initialized - if you are not using Kendo wrappers 

$("#myWindow").kendoWindow({
  // put your settings here
});

// Now you can add a custom CSS class after window initialization

var winObject = $("#myWindow").data("kendoWindow");
winObject.wrapper.addClass("myCustomClass");

// Here you can add a custom CSS class in the open event handler

function onWindowOpen(e) {
    e.sender.wrapper.addClass("myCustomClass");
}

    Let me know your results!