How to: Use the image selector from CuteEditor outside of the editor itself

  •  06-23-2005, 4:36 PM

    How to: Use the image selector from CuteEditor outside of the editor itself

    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


     
     
     
View Complete Thread