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>();
}