[Solved] Standalone ImagePreviewer and ImageProperties

[Praveen]

Hi,

I have requirement of integrating custom image search functionality in Image Manager. I am trying to insert the images which are in form of rows of radgrid into imagepreviewer and Imageproperties control of Image Manager. 

The code block for main control is:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImagePreviewer.ascx.cs"
    Inherits="ImgManager.ImagePreviewer" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Editor.DialogControls"
    TagPrefix="dc" %>
<%@ Register TagPrefix="uc1" TagName="DialogControl" Src="~/EditorDialogs/SetImageProperties.ascx" %>
<style type="text/css">
.selectedFileName1
{
   border-color:Black;
}
</style>
<script type="text/javascript">
    function RowSelected(sender, eventArgs) {

        var grid = sender;
        var MasterTable = grid.get_masterTableView();
        var selectedRows = MasterTable.get_selectedItems();
        var item = selectedRows[0];

        var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
        var cell = MasterTable.getCellByColumnUniqueName(row, "Picture");


        var imgTags = document.getElementsByTagName("IMG");
        var img1 = imgTags[0];

        var div = document.getElementById("ImagePreviewer");

        div.appendChild(img1);

        var imgPropDiag = document.getElementById("ImageProperties");
        Telerik.Web.UI.Widgets.ImageProperties.prototype.initialize();
        setTimeout(Telerik.Web.UI.Widgets.ImageProperties.prototype.loadImageProperties(img1),3000);
       // alert(img1.href);
        //here cell.innerHTML holds the value of the cell
    }

</script>
<table width="50%">
<tr>
<td>
<telerik:RadGrid ID="rdgridImages" runat="server" >
 <MasterTableView Width="100%" Summary="RadGrid table" CommandItemDisplay="Top">
             <Columns>
             <telerik:GridTemplateColumn  UniqueName="Picture" HeaderStyle-Width="70px" HeaderStyle-Height="70px">
             <ItemTemplate>
             <table>
             <tr style="border:none">
             <td style="border:none">
             <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Picture")%>' Height="70px" Width="70px">
         </asp:Image>
         </td>
             </tr>
             </table>
             </ItemTemplate>
         </telerik:GridTemplateColumn>
             </Columns>

             </MasterTableView>
              <ClientSettings>
         <Selecting AllowRowSelect="True" />
         <ClientEvents OnRowSelected="RowSelected" />
         </ClientSettings>
</telerik:RadGrid>
</td>
</tr>
</table>
<table width="50%">

    <tr>

        <td>
            <telerik:RadMultiPage ID="imageMultiPage" runat="server">
                <telerik:RadPageView ID="previewPage" runat="server" Selected="true">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td>
                                <div id="selectedFileName" >
                                    </div>
                            </td>
                        </tr>
                        <tr>
                            <td valign="middle" style="border-color: Red">
                                <div id="CleanImageContainer" style="position: absolute; width: 0px; height: 0px;
                                    overflow: hidden;">
                                </div>
                                <div id="ImagePreviewer" class="imagePreview noImage">
                                    </div>
                            </td>
                        </tr>
                    </table>
                </telerik:RadPageView>
                <telerik:RadPageView ID="propertiesPage" runat="server" ToolTip="here" >
                    <%--<dc:SetImagePropertiesDialog ID="ImageProperties1"  runat="server" ExternalDialogsPath="~/EditorDialogs"  >
                    </dc:SetImagePropertiesDialog>--%>
                    <uc1:DialogControl ID="ImageProperties" runat="server" />
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </td>
    </tr>
    <tr>

            <td >
                <telerik:RadTabStrip ID="imageTabStrip" Width="100%" runat="server" Orientation="HorizontalBottom" ShowBaseLine="true"
                    MultiPageID="imageMultiPage">
                    <Tabs>
                        <telerik:RadTab Text="Preview" Value="Preview" Selected="true" PageViewID="previewPage" />
                        <telerik:RadTab Text="Properties" Value="Properties" PageViewID="propertiesPage" />
                    </Tabs>
                </telerik:RadTabStrip>
            </td>
        </tr>
</table>

while executing I am getting following as null:

        this._colorPicker = $find("BorderColor");

        this._imageAlignment = $find("ImageAlignment"); 

        this._marginTopSpinBox = $find("marginTop");

        this._marginRightSpinBox = $find("marginRight");

        this._marginBottomSpinBox = $find("marginBottom");

        this._marginLeftSpinBox = $find("marginLeft");

        this._borderWidthSpinBox = $find("ImageBorderWidth");

        this._imageCssClassList = $find("ImageCssClass");

Any help is greatly appreciated. I am stuck here for long time. If there is any other approach whihc you can suggest then feel free to give me some idea on that.

Regards,

Praveen

[Fiko]

Hello Praveen,

I recommend you check this and this Code Libraries. The RadFileExplorer control is used in RadEditor's ImageManager. This KB article shows how to get reference to the RadFielExplorer control and this one shows how to set the ExternalDialogsPath property (check the commented lines) of the standalone ImageManager.

I hope this helps.

Greetings,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Praveen]

Hi Fiko,

Thanks for those nice code blocks. Those are some nice functionality in radfileexplorer I never noticed.

However my problem is little different. I have to search on the sharepoint search index using the search api's and then display them on grid and then whatever row we select we have to put that imagerow into ImageProperties/ImagePreviewer dialog.

I tried to recreate the imagemanager from basic components imagepreviewer, multipage, imageproperties. 

I put the code from SetImageProperties.ascx and ImageManager.ascx into single user control where I has a radgrid also.

Then on Row selection of radgrid I wrote this javascript function:

<script type="text/javascript">
    function RowSelected(sender, eventArgs) {

        var grid = sender;
        var MasterTable = grid.get_masterTableView();
        var selectedRows = MasterTable.get_selectedItems();
        var item = selectedRows[0];

        var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
        var cell = MasterTable.getCellByColumnUniqueName(row, "Picture");


        var imgTags = document.getElementsByTagName("IMG");
        var img1 = imgTags[0];

        var div = document.getElementById("ImagePreviewer");

        div.appendChild(img1);

        var imgPropDiag = document.getElementById("ImageProperties");

        Telerik.Web.UI.Widgets.ImagePropertiesNew.prototype.initialize();
        Telerik.Web.UI.Widgets.ImagePropertiesNew.prototype.loadImageProperties(img1)

       // alert(img1.href);
        //here cell.innerHTML holds the value of the cell
    }

</script>

This method sets the image on Previewer but it is not properly setting the image properties. I am also getting javascript error: Telerik.Web.UI.Dialogs is undefined.

this is web.config entry for dialoghandler.

<add path="Telerik.Web.UI.DialogHandler.aspx" verb="*" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI, Version=2010.1.415.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
         validate="false" />

You can download complete solution from following location:

http://rapidshare.com/files/383506392/ImgManager.zip.html

Please assist me as this is something that I am looking for long time.

[Praveen]

Can anybody help me on implementing this thing?

[Rumen]

Hi Praveen,

Please, note that we do not provide support for so complex customization of RadEditor tools and dialogs. We can provide basic guidelines and help, but it is up to the developer working with the control to implement the requested custom functionality.

Perhaps it is better to implement your own custom dialog that provides the required search functionality.

You are always welcome to send us your feature requests on enhancing our controls.

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[eugene vereshagin]

Hi,

I was also having some similar requirement. Does ImagePeviewer/mageProperties has any method on Client/Server side by which I can pass the image and it sets into previewer/Properties.
I am having images in Radgrid and wanted to set the clicked image into ImagePreviewer and Image Image Properties.
I tried Telerik.Web.UI.Widgets.ImageProperties.prototype.loadImageProperties(<image>) but am getting some javascript errors in that.

Is there any other Server Side method for achieving this?

[Rumen]

Hi Eugene,

If you want to use the Image manager or the Image Editor as standalone controls see the following articles:
Using the Image and Document managers outside RadEditor and A quick, but not so dirty Image Editor using the public RadEditor ImageEditing API.

You can find code that loads an image in the dialog opener in this forum:
http://www.telerik.com/community/forums/aspnet-ajax/editor/standalone-imageeditormanager-does-not-work-since-q3.aspx

Best regards,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.