ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - 'Image Gallery' in database

In this example you can see customized "Browse Image Gallery" popup. It allows to work with images from database.
To open this popup, click "Browse" button in the "Image properties" popup (insert or edit an Image ):

Font Size Header 

<obout:EditorPopupHolder runat="server" ID="popupHolder" OnInit="PopupHolderInit" />
asp:UpdatePanel ID="updatePanel1" runat="server"><ContentTemplate>
    <obout:Editor runat="server" Id="editor" Height="400px" Width="100%" PopupHolderID="popupHolder" />


// on PopupHolder init
protected void PopupHolderInit(object sender, EventArgs e)
  PopupHolder popupHolder = sender as PopupHolder;
  // Add Image Properties popup to be loaded on demand
  popupHolder.Preload.Add(new ImageProperties() {
     // use our custom Images Browser
     BrowserType = (typeof(MyImageBrowser)).AssemblyQualifiedName
  // Add our custom images browser to be loaded on demand
  popupHolder.Preload.Add(new MyImageBrowser() {
     // use obout Treeview for navigation
     UseOboutTree = true,
     // set some Treeview features
     TreeFeatures = {
        // image for the folder nodes
        FolderImageUrl = "~/treeview/icons/folder_old.gif",
        // images for leaf nodes
        LeafImages = {
           // node image for pictures with any extensions
           new LeafImage() { Extensions = "*", Url = "~/treeview/img/picture.png" }

// Custom 'ImageBrowser' class
public class MyImageBrowser : ImageBrowser

The full source code of this example you can see in the downloaded Suite: cs_DatabaseImageGallery.aspx(.cs) and vb_DatabaseImageGallery.aspx(.vb) examples.

"The entire suite is a wonderful product."

Phil Mickelson

Random testimonial   All testimonials