2

I was trying to apply some solutions specified for a kind of similar problems, but it did not work for me, so I decided to post my question here.

My page has a Kendo.Window() that generates an html:

enter image description here

I'm trying to set border-radiusstyles to div .k-widget .k-window element the following way:

div < .customTitle{
    border-radius:6px;
}

or

div .k-window < div .customTitle{
    border-radius:6px;
}

But that does not work for me.

How can I do something like that?

gene
  • 1,762
  • 6
  • 28
  • 74

1 Answers1

1

You can add a custom class to the element on the open event of the window and use that class as your selector for the styling. See the snippet below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
  
  <style>
    .customClass {
      border-radius: 6px;
    }
  </style>
</head>
<body>
  
<div id="dialog"></div>
  <button onclick="openWindow()">Open window</button>
<script>
$("#dialog").kendoWindow({
  visible: false,
  open: (e) => {
   e.sender.wrapper.addClass("customClass");
  }
});
  
  function openWindow() {
    var dialog = $("#dialog").data("kendoWindow");
  dialog.open();
  }
</script>
</body>
</html>
Shai
  • 2,599
  • 2
  • 10
  • 25