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.