Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Image selector for content items: Implement a dialog for thumbnail selection

Dialogs have a special function in Sitefinity CMS. They are used everywhere in the backend when editing, creating, and selecting items. They provide the infrastructure for opening specialized windows and returning results. In the case of a news item, you can think of the dialog as a simple control, which is registered in Sitefinity CMS with a specific URL and opens in a RadWindow.

Your dialog is a wrapper that contains the simple image selector:

<div>
<samples:SimpleImageSelector ID="imageSelector" runat="server">
</samples:SimpleImageSelector>
</div>
   
<div class="sfClearer">
<asp:HyperLink ID="lnkDone" runat="server"NavigateUrl="javascript:void(0);" CssClass="sfLinkBtn sfSave">
    <span class="sfLinkBtnIn">Done</span>
</asp:HyperLink> or
<asp:HyperLink ID="lnkCancel" runat="server"NavigateUrl="javascript:void(0);" Text="Cancel"CssClass="sfCancel"></asp:HyperLink>
</div>

The client component gets the URL of the image from the selector and returns it from the dialog as a result:

_doneLinkClicked: function (sender, args) {
    var selectedValue =this.get_imageSelector().get_selectedImageId();
    if (!selectedValue || selectedValue === "") {
        alert("No image selected.");
    }
    else {
        dialogBase.close(selectedValue);
    }
},
  
_cancelLinkClicked: function (sender, args) {
    dialogBase.close();
},

To let Sitefinity CMS know about the dialog, you must register it in the Global.asax file in the following way:

protected void Application_Start(object sender, EventArgs e)
{
    Telerik.Sitefinity.Abstractions.Bootstrapper.Initialized += new EventHandler<Telerik.Sitefinity.Data.ExecutedEventArgs>(Bootstrapper_Initialized);
}
  
protected void Bootstrapper_Initialized(object sender, Telerik.Sitefinity.Data.ExecutedEventArgs args)
{
    Telerik.Sitefinity.Web.UI.Dialogs.RegisterDialog<Telerik.Sitefinity.Samples.SimpleImageSelectorDialog>();
}

Back To Top

Next: Image selector for content items: Save the thumbnail URL in the item