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