Kendo UI Window with Custom Styling

By May 24, 2016Kendo UI
window

I use the Kendo UI Window widget quite often. It works nicely with MVVM initialization, it matches my theme, and almost everything I need is configurable. I said almost. If you have ever tried to custom style the wrapper for the window, you may have had to do this fun workaround:

 

So, we can’t do anything to the window wrapper until after the window is created, which is OK but I think we can do better. Let’s do this with an extended widget. After all, I can use that extended widget to add other ‘extras’ later. Anything you find yourself configuring repeatedly, you can add to this widget plugin and get a default Kendo UI Window that is exactly the same every time you use it. Or, different, if that suits your needs.

I recommend taking a look at the widget extension documentation, and then starting with this simple example:

 

All this does is create our widget plugin CustomWindow and let us add a custom class, which we read from a custom data attribute on the element. Then the class is added to the wrapper in the initialization. How does that look in use? Like this:

 

And now I can apply custom styling to my new class, which will let me easily change the wrapper, including the title bar. Sure, who wouldn’t want a pink title bar? We can compare it to the normal window:
window
Here is the complete example for you to try on your own, in case you don’t like the pink:

The following two tabs change content below.

Latest posts by Falafel Posts (see all)