Use custom designer windows

When you work with widgets and open a widget designer or click on a command inside a RadDock, by default the designer or command window are displayed in as RadWindow. With Sitefinity CMS, you can use a new, lighter JavaScript-based window. By default, widget designers use a Bootstrap window. You can, however, customize the windows and you can have a different user interface control to wrap the designer.

This is possible because a Sitefinity CMS script handles the logic for rendering the content of the designer, including the designer script. The script puts the content inside the body of the page, so that the content is displayed upon clicking Edit. Once you create your custom widget designer window, it is important to trigger the modalDialogClosed event when the dialog is closed, so the markup of the dialog is removed from your page.

NOTE: When you trigger the modalDialogClosed event, make sure to use $telerik.$ instead of just $ or any other jQuery global variable. You do this because third party widget designers may load another jQuery instance and replace the global variables, making the trigger useless since the binding was on the previous jQuery instance.

To customize the widget designer window of a ContentBlock widget to use a Kendo window:

  1. In Visual Studio, open your Sitefinity CMS project.
  2. Navigate to Mvc » Views folder and create a new folder. Name the folder ContentBlock.
  3. In the ContentBlock folder, add a new file and name it Designer.cshtml.
  4. Add the following code in the content of the file:
  5. Save the file and build the solution.
  6. Open your Sitefinity CMS project in a browser.
  7. Navigate to Pages and create new page.
  8. Expand the MvcWidgets section and drag and drop the ContentBlock widget.
  9. Click Edit to open the widget designer.

As a result, you can see the new Kendo window of the widget designer.

Additional resources

External links

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?