8 Answers, 1 is accepted
Sorry, I tried ".Resizable()" and it worked.
But I put a Grid in the Window, the Grid's height could not fill the Window when the Window resized.
Is there any setting need to do this?
See the following article (the second example), which shows how the Grid can be resized when it is nested in a Window:
#grid
{
border-width
:
0
;
height
:
100%
;
/* DO NOT USE !important for setting the Grid height! */
}
#window
{
padding
:
0
;
}
Regards,
Ivan Danchev
Progress Telerik
Hi Ivan,
What about if the Window needs to have an OK and Cancel buttons below the grid. How can this be achieved?
If you want to have OK/Cancel buttons within the Window they can be added to the Window's content, for instance:
@(Html.Kendo().Window()
.Name(
"window"
)
.Title(
"Window title"
)
.Content(@<text>
<div id=
"grid"
></div>
<div>
<input type=
"button"
value=
"OK"
class
=
"okButton k-button"
/>
<input type=
"button"
value=
"Cancel"
class
=
"cancelButton k-button"
/>
</div>
</text>)
.Position(p => p.Top(10).Left(350))
.Resizable()
.Draggable(
true
)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
Alternatively you could consider using the Dialog instead of the Window, since it has built-in support and specific configuration options for such buttons. See this demo for example.
Regards,
Ivan Danchev
Progress Telerik
Hi Ivan,
What I was asking was the styling of the grid and the button div so that the grid be resizing within the window but the buttons remain at the bottom.
Also the Dialog does not offer the same functionality as Window so it is not a solution for my case.
Hi Ivan,
Here is a styling that I have but it only works on IE11. On all the other browsers (Chrome, Opera, Edge, Firefox) The buttons are not visible on the window and also the content placed on the window seems to be bigger than the window size
https://dojo.telerik.com/AHEGE/2
The following two changes to your dojo fix the issue:
1. Added missing div closing tag:
<
div
id
=
"dialog"
>
<
div
id
=
"dialog-content"
>
<
div
id
=
"grid"
></
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"template"
>
<
div
class
=
"toolbar"
>
Title
</
div
>
</
script
>
<
div
id
=
"dialog-buttons"
>
<
span
class
=
"k-button k-button-icontext cancel-button"
>OK</
span
>
<
span
class
=
"k-button k-button-icontext ok-button"
>Cancel</
span
>
</
div
>
</
div
>
</
div
>
2. Set #grid element's height to 90% instead of 100%. Since both it and the #dialog-buttons div are in the same container if the first is set to occupy 100% of that container the second will not be visible.
#grid {
height
:
90%
;
flex-grow:
1
;
}
Modified dojo.
Regards,
Ivan Danchev
Progress Telerik
Hi Ivan,
Thank you so much for the help. For some reason it works even if I change the dialog buttons to have a greater height of 10%.