Introduction:
The height and width for the kendo window can be set during the initialization, however there will be a certain scenario where we need to set a height and width of the kendo window based on screen size. In this blog you will learn how to set a height and width for the Kendo window programmatically.
Kendo window:
The below code is used initialize the kendo window
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<div id="window">
<h4>Hello, I'm kendo window</h4>
</div>
<script>
$("#window").kendoWindow({
height:500,
width:500,
title: "Your Kendo Window",
});
</script>
</body>
</html>From the above code, you can observe the height and width property has been used to set the height and width of the kendo window during the initialization.
Now, let’s see how to set the height and width of the kendo window after the initialization.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<div id="window">
<h4>Hello, I'm kendo window</h4>
</div>
<script>
$("#window").kendoWindow({
title: "Your Kendo Window",
});
var dialog=$("#window").data("kendoWindow");
dialog.setOptions({
width:$(window).width(),
height:$(window).height()
})
</script>
</body>
</html>The setOptions function is used to set the kendo Window options like height and width after the initialization.
Summary:
We have seen how to set the height and width of the kendo window programmatically using the setOptions functions, will see more about Kendo UI in my future blogs
Happy Coding!!!
