Telerik Extensions for ASP.NET MVC

This topic shows how to use the Window UI component in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

This topic contains the following sections.

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the Grid UI component).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

Window Declaration

The following example shows how to add the Window UI component to an existing ASP.NET MVC view:

CopyView
<%= Html.Telerik().Window()
        .Name("Window")
        .Title("Window title")
        .Content("<strong>Hello world!</strong>")
%>
The Title method sets text in the Window title bar. Use the Content method to set the HTML content inside the Window as a string. As an alternative, you can use the Content overload which accepts an action parameter:
CopyView
<% Html.Telerik().Window()
       .Name("Window")
       .Title("Window title")
       .Content(()=>
       {
           %>
               <strong>Hello world!</strong>
           <%
       })
       .Render();
%>

Loading content asyncroniously

The Window content can be loaded asynchroniously by specifying an Action using the LoadContentFrom(String) method or one of its overrides.
CopyView
<% Html.Telerik().Window()
       .Name("Window")
       .LoadContentFrom("AjaxView", "Window")
       .Buttons(buttons => buttons.Refresh().Maximize().Close())
       .Render();
%>

Controlling Window size

By default, the Window resizes automatically, depending on its contents. If you want it to have a fixed size, use the Width and Height methods:

CopyView
<%= Html.Telerik().Window()
        .Name("Window")
        .Title("Window title")
        .Content("<strong>Hello world!</strong>")
        .Width(300)
        .Height(200)
%>

It is advised to make the Window scrollable if the contents is likely to be bigger than the Window itself. This can be done using the Scrollable method.

Dragging and resizing

Window dragging can be enabled through the Draggable method. When it is enabled, the Window can be moved on the page by dragging its title bar.

CopyView
<%= Html.Telerik().Window()
        .Name("Window")
        .Title("Window title")
        .Content("<strong>Hello world!</strong>")
        .Draggable(true)
%>

Window resizing can be enabled through the Resizable method. Optionally, resizing boundaries (minimum width/height, maximum width/height) can be set through the Resizable method.

CopyView
<%= Html.Telerik().Window()
        .Name("Window")
        .Title("Window title")
        .Content("<strong>Hello world!</strong>")
        .Resizable(resizing => resizing
            .MinWidth(100)
            .MinHeight(100)
            .MaxWidth(200)
            .MaxHeight(200)
        )
%>

Modal Windows

Modal Windows (or dialog boxes) and the surrounding background overlay everything on the page. They are useful when you want the user to focus entirely on the activity that the Window allows - e.g. when data input is required.

Modal Windows can be created by using the Modal method:

CopyView
<% Html.Telerik().Window()
       .Name("Window")
       .Modal(true)
       .Content(()=>
       {
           %>
               <% Html.BeginForm(); %>
                   <label for="name">Enter your name:</label>
                   <input type='text' name="name" ""id='name' />

                   <button type="submit">Submit</button>
               <% Html.EndForm(); %>
           <%
       })
       .Render();
%>

Controlling title bar buttons

The Window supports the following title bar buttons:

  • Close - closes the Window. Enabled by default.
  • Maximize - allows the Window to be maximized, i.e. to expand to the size of the viewport. When maximized, the maximize button is replaced by a restore button, which restores the Window to its original size.
  • Refresh - used when content is loaded asynchroniously, to allow the user to refresh the Window contents.

The buttons can be enabled or disabled through the Buttons method.

CopyView
<% Html.Telerik().Window()
       .Name("Window")
       .LoadContentFrom("AjaxView", "Window")
       .Buttons(buttons => buttons.Refresh().Maximize().Close())
       .Render();
%>

Rendering an initially hidden Window and showing it via client-side script

You can render an initially hidden Window by calling its Visible(false) method:

CopyInitially hidden Window
<% Html.Telerik().Window()
       .Name("Window")
       .Visible(false)
       .Render();
%>

After the page content is loaded, the hidden Window is initialized, and can be shown through its open() client-side method

CopyOpening a hidden Window
$('#Window').data('tWindow').open();