Can UI for ASP.NET MVC Window be resized by dragging the border?

[K'Library]

Can UI for ASP.NET MVC Window be resized?

I want to make Window resizable by dragging its border, like Windows Explorer' s form. Is it possible?

[K'Library]

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?

[Ivan Danchev]

Hello Keith,

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

[Dan]

Hi Ivan,

What about if the Window needs to have an OK and Cancel buttons below the grid. How can this be achieved?

[Ivan Danchev]

Hello Dan,

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())
)

Since these are custom buttons added to the Window any logic that needs to be executed on clicking them would have to be implemented in the respective button click handler.

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

[Dan]

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.

[Dan]

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

[Ivan Danchev]

Hi Dan,

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

[Dan]

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%.