Loading Content

You can load the Window content initially or dynamically at a later stage.

Static Content

The Window exposes a Content() configuration method which allows you to load predefined HTML content. This is the most commonly preferred approach:

    @(Html.Kendo().Window()
        .Name("window")
        .Title("Static content")
        .Content(@<text>
                <strong>Static content</strong> of the Window.
        </text>)
    )

    <kendo-window name="window" title="Static content">
        <content>
            <strong>Static content</strong> of the Window.
        </content>
    </kendo-window>

Load-on-Demand Content

In some scenarios, it is required to configure the Window to load dynamic content. Here are the steps to achieve that:

1. Create a new action method which renders the view.

   public ActionResult Index()
   {
       return View();
   }
   

2. Create an action method which renders the content.

   public ActionResult AjaxContent()
   {
       return View();
   }
   

3. Add a Window on the page. Its definition will contain the LoadContentFrom() setting which will point to the Content Controller Action:

       @(Html.Kendo().Window()
           .Name("window") // The name of the Window is mandatory. It specifies the "id" attribute of the widget.
           .Title("About Alvar Aalto") // Set the title of the Window.
           .LoadContentFrom("AjaxContent", "Window") //Define the Action and Controller names.
   
           // In case the window is used in a RazorPages project, supply the name of the RazorPage in the LoadContentFrom option
           // .LoadContentFrom("MyRazorPageName")
   
       )
   

       <kendo-window name="window" title="About Alvar Aalto" content-url="@Url.Action("AjaxContent","Window")">
       </kendo-window>
   
         // In case the window is used in a RazorPages project, supply the name of the RazorPage in the content-url option
         // content-url="MyRazorPageName"
   

You can also use another .LoadContentFrom() overload to pass additional details to the action method returning the Window's content:

@(Html.Kendo().Window()
        .Name("window") 
        .Title("User Details") 
        .LoadContentFrom("UserDetails", "Window", new { userId = 10}) //Define the Action, Controller names and additional route values.
    )

<kendo-window name="window" title="User Details" content-url="@Url.Action("AjaxContent","Window",new { userId = 10 })">
</kendo-window>

public ActionResult UserDetails(int userId)
{
    MyUserViewModel model = myService.GetUserDetails(userId)
    //fetch required details and pass them to the View 

    return View(model);
}

To refresh or change the Window's content on the client, once the Window has been initialized, you can use the Client-side API of the Window and the refresh method.

See Also

• Server-Side API