Extending Document Manager metadata on assets

[Gavin Pollock]

Hi there,

I am thinking about a way to extend the Document/Image managers in the Editor to allow a user to store actual metadata about each item somewhere. It is similar in a way to the concept of your custom content provider:
http://demos.telerik.com/aspnet-ajax/editor/examples/dbfilebrowsercontentprovider/defaultcs.aspx

But really I am more interested in reading additional data about a file into fields on the properties tab and then allowing a way for the user to save it. I'm thinking the easiest route might be to have an xml document somewhere that I can store this metadata per item in. Then I need to override the Dialogs and build in code that loads the info into extra fields on the properties tab.

Is there any existing framework I can tie into? Client-side or Server-side events? Or any existing examples of something similar to this?

Many thanks
Gavin

[Gavin Pollock]

Hey guys, any ideas on this?

Cheers
Gavin

[Dobromir]

Hi Gavin,

The recommended approach to achieve the required functionality is to implement a custom content provider to the RadEditor's dialogs, and pass that information as a custom attribute of the FileItem object, e.g.:

// Create the FileItem
{
    FileItem fileItem = new FileItem(filename, extension, length, path, string.Empty, string.Empty, permissions);

    // Add a custom attribute
    fileItem.Attributes.Add("CustomAttribute", "AttributeValue");
}

Then you can use the custom attribute in the dialog as highlighted bellow (getResult method may differ for the different dialogs):

getResult: function ()
{
    var newImage = this._imageProperties.getModifiedImage();
    if (newImage == null && this._currentItem)
    {
        //for example if image size is large and the user clicks insert before it is loaded.
        newImage = new Image();
        newImage.src = this._currentItem.get_url();
    }

    if (this._imageProperties.isThumbLinkChecked() && this._thumbOriginalUrl)
    {
        if (!newImage.style.border) newImage.style.borderWidth = "0px";
        var oDoc = newImage.ownerDocument;
        var oLink = oDoc.createElement("a");
        oLink.setAttribute("href", this._thumbOriginalUrl);
        if (this._imageProperties.isThumbNewWindowChecked())
        {
            oLink.setAttribute("target", "_blank");
        }
        oLink.appendChild(newImage);
        newImage = oLink;
    }

    var fileExplorer = this.get_browser().get_fileBrowser();
    var customAttribute = fileExplorer.get_grid().get_selectedItems()[0]._dataItem.Attributes.CustomAttribute
    newImage.setAttribute("alt", customAttribute);

    return newImage;
},

I hope this helps.

Regards,
Dobromir
the Telerik team

[Gavin Pollock]

Thanks Dobromir,

So to check my understanding... I can create my Custom Content Provider, and in the override of GetFiles:

protected FileItem[] GetFiles(DirectoryInfo directory, PathPermissions permissions, string location)

I would add extra attributes to the FileItem objects.

Then I would need to add extra UI code to actually do things with these attributes in the dialogs themselves? Which controls would these actually be where I would add in the getResult function?

Cheers
Gavin

[Gavin Pollock]

Thanks I got them... in DocumentManager.ascx etc.

[Gavin Pollock]

Is it possible to extend the FileBrowser.ascx control to add on of these Attributes to the columns? I can see the example at
http://www.telerik.com/help/aspnet-ajax/radfileexplorer-adding-custom-columns.html

But unsure how to go about this by extending the control.

[Dobromir]

Hi Gavin,

In order to achieve the required result you need to add a WebUserControl to the FileBrowser.ascx. To access the RadFileExplorer on the server. You can use the approach provided in the this KB article.

Greetings,
Dobromir
the Telerik team

[Phil]

Hi

We were using the JavaScript extended technique discussed here in the Image Manager, but it didnt work after upgrading to 2012 Q1 controls.
It turns out it was due to new Client-side API changes, and moving from listing Images to showing as thumbnails.

We found that modifying the JavaScript with the following solved this.

fileExplorer.get_fileList().get_selectedItems()[0].Attributes

Cheers