In an effort to give back to the CuteSoft community of which I have taken advantage of so frequently, I am posting a how to on using the image selector outside of the cuteeditor. These codebits are pieces I have gathered from all of your different postings but in great part to help from Adam and Czar.
We will start with am image selector for a plain form without a datagrid.
'This is the presentation layer stuff that goes in your form.
<asp:TextBox id="imageFld" runat="server" />
<INPUT type="button" value="Change Image" onclick="callInsertImage()" id="Change" runat="server" NAME="Change">
'Note: the editor here is meant to be invisible, hence the sizes and styles, this is all Czar's stuff:
<ce:Editor id="ce_image" runat="server" Width="1px" Height="1px" AutoConfigure="None" ShowHtmlMode="False" ShowPreviewMode="False" ShowGroupMenuImage="False" ShowBottomBar="False" BackColor="White" BorderColor="White">
<FrameStyle Height="100%" BorderWidth="1px" BorderStyle="Solid" BorderColor="Silver" Width="100%" CssClass="CuteEditorFrame" BackColor="White"></FrameStyle>
<PageProperties Title="" Description="" HtmlBase="" Keywords="">
</PageProperties>
</ce:Editor>
'Next a javascript block must be used to call the image selector from our hidden cuteeditor through the use of the button above; once again, this stuff is thanks to Czar:
<Script Language="javascript">
function callInsertImage()
{
var ce_img;
ce_img = document.getElementById('<%=ce_image.clientID%>')
ce_img.focus();
var ce_imgDoc = ce_img.GetDocument()
ce_img.ExecCommand('ImageGalleryByBrowsing')
var ce_imgRange = ce_imgDoc.selection.createRange()
if (ce_imgDoc.selection.type == 'Control')
{
if (ce_imgRange.length == 1)
{
var ce_imgElement = ce_imgRange.item(0)
if (ce_imgElement.tagName == 'IMG')
{
document.Form1.imageFld.value = ce_imgElement.src
}
}
}
}
</script>
'Finally, in the codebehind clock, grab imageFld.text for the url of the image.
Next, lets put our image selector into a datagrid
Putting the selector into the datagrid becomes trickier but still doable. here is the template column for inside the datagrid.
'Here is our template column
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<img height="75" src="<%# DataBinder.Eval(Container.DataItem, "staff_image") %>">
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox id="imageFld" runat="server" text=<%# DataBinder.Eval(Container.DataItem, "staff_image") %> />
<INPUT type="button" value="Change" onclick="callInsertImage()" id="Change" runat="server" NAME="Change">
<img height="50" src="<%# DataBinder.Eval(Container.DataItem, "staff_image") %>">
<ce:Editor id="ce_image" runat="server" Width="1px" Height="1px" \
AutoConfigure="None" ShowHtmlMode="False" ShowPreviewMode="False" ShowGroupMenuImage="False" ShowBottomBar="False"
/>
</EditItemTemplate>
</asp:TemplateColumn>
Second, in the javascript call to the image selector, finding the ID becomes tricky. To deal with this I did the following:
To get the ID of the cuteeditor, I took a look inside the rendered HTML output of my datagrid. Look for the CuteEditor ID for the Image selector and name appropriately. The name will be something like "CE_YourGridName__ct(Number)_YourEditorName". Since the number ID of the image selector changes depending on which e.item.itemindex your editor is working on, I created a codeblock that inputs the correct number for my control. In my case I had to add 3 to the e.item.itemindex in my codebehind editrow proc. Be sure to make your variable for number public. In my case the declaration is like this:
public eind as int
then to assign it:
sub editrow()
eind = e.item.itemindex + 3
end sub
<Script Language="javascript">
function callInsertImage()
{
var ce_img;
'this is the line where you must edit in your applications info.
ce_img = document.getElementById('CE_DataGrid1__ctl<%=eind %>_ce_image_ID<%=ce_image.ClientID%>')
ce_img.focus();
var ce_imgDoc = ce_img.GetDocument()
ce_img.ExecCommand('ImageGalleryByBrowsing')
var ce_imgRange = ce_imgDoc.selection.createRange()
if (ce_imgDoc.selection.type == 'Control')
{
if (ce_imgRange.length == 1)
{
var ce_imgElement = ce_imgRange.item(0)
if (ce_imgElement.tagName == 'IMG')
{
'note the difference here as well, getting the control by ID instead of the document.form.control method
getElementById('DataGrid1:_ctl<%=eind %>:imageFld').value = ce_imgElement.src
}
}
}
}
</script>
Good luck and thanks again to Adam and Czar for doing the major effort of getting this to work.
Thanks,
Jason