This is a migrated thread and some comments may be shown as answers.

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

8 Answers 97 Views
Window
This is a migrated thread and some comments may be shown as answers.
K'Library
Top achievements
Rank 1
K'Library asked on 03 Jun 2017, 12:21 PM

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?

8 Answers, 1 is accepted

Sort by
0
K'Library
Top achievements
Rank 1
answered on 03 Jun 2017, 12:33 PM

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?

0
Ivan Danchev
Telerik team
answered on 05 Jun 2017, 06:27 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 21 Nov 2017, 01:12 PM

Hi Ivan,

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

0
Ivan Danchev
Telerik team
answered on 22 Nov 2017, 04:10 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 23 Nov 2017, 06:46 AM

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.

0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 23 Nov 2017, 09:53 AM

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

0
Ivan Danchev
Telerik team
answered on 24 Nov 2017, 02:06 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 24 Nov 2017, 02:43 PM

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

Tags
Window
Asked by
K'Library
Top achievements
Rank 1
Answers by
K'Library
Top achievements
Rank 1
Ivan Danchev
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or