Welcome Guest Search | Active Topics | Sign In | Register

Error in DropDownList into Dialog Options
Camarate
Posted: Tuesday, September 14, 2010 9:25:13 AM
Rank: Advanced Member
Groups: Member

Joined: 9/2/2010
Posts: 120
Hi,

See the HTML code below:

Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TreeView.WebForm1" %>

<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>DroDownList Click Identification</title>
<script language="JavaScript">
 
    function ShowSubject()
    {
        eo_GetObject('dlgSubject').show(true);
    }
 
    function FieldSelect()
    {
        var combo = grid.getElementById("cboEmailField");
        if (combo != null)
        {
            if (combo.selectedIndex > 0)
            {
                var editor = eo_GetObject("edtEmail");
                editor.execCommand("InsertHTML", combo.options[combo.selectedIndex].value);
                combo.selectedIndex = 0;
            }
        }
     }

</script>
</head>
<body style="margin: 20px; background-color: #ebffff">
    <form id="form1" runat="server">
    <div>
        <eo:Grid ID="grdData" runat="server" AllowNewItem="True" BorderColor="#828790" BorderWidth="1px"
            ColumnHeaderAscImage="00050204" ColumnHeaderDescImage="00050205" ColumnHeaderDividerImage="00050203"
            ColumnHeaderHeight="24" FixedColumnCount="1" Font-Bold="False" Font-Italic="False"
            Font-Names="Tahoma" Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False"
            Font-Underline="False" FullRowMode="False" GoToBoxVisible="True" GridLineColor="240, 240, 240"
            GridLines="Both" Height="280px" ItemHeight="19" Width="496px" BackColor="White">
            <FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
            <ItemStyles>
                <eo:GridItemStyleSet>
                    <ItemStyle CssText="background-color: white" />
                    <ItemHoverStyle CssText="background-image: url(00050206); background-repeat: repeat-x" />
                    <SelectedStyle CssText="background-image: url(00050207); background-repeat: repeat-x" />
                    <CellStyle CssText="padding-left:8px;padding-top:2px;white-space:nowrap;" />
                </eo:GridItemStyleSet>
            </ItemStyles>
            <ColumnTemplates>
                <eo:TextBoxColumn>
                    <TextBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; FONT-FAMILY: Tahoma" />
                </eo:TextBoxColumn>
                <eo:DateTimeColumn>
                    <DatePicker ControlSkinID="None" DayCellHeight="16" DayCellWidth="19" DayHeaderFormat="FirstLetter"
                        DisabledDates="" OtherMonthDayVisible="True" SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
                        TitleRightArrowImageUrl="DefaultSubMenuIcon">
                        <TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
                        <SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <PickerStyle CssText="border-bottom-color:#7f9db9;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#7f9db9;border-left-style:solid;border-left-width:1px;border-right-color:#7f9db9;border-right-style:solid;border-right-width:1px;border-top-color:#7f9db9;border-top-style:solid;border-top-width:1px;font-family:Courier New;font-size:8pt;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:1px;padding-left:2px;padding-right:2px;padding-top:2px;" />
                        <CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma" />
                        <TitleArrowStyle CssText="cursor:hand" />
                        <DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid" />
                        <MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px" />
                        <TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
                        <OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                        <DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid" />
                        <DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
                    </DatePicker>
                </eo:DateTimeColumn>
                <eo:MaskedEditColumn>
                    <MaskedEdit ControlSkinID="None" TextBoxStyle-CssText="BORDER-RIGHT: #7f9db9 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7f9db9 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: #7f9db9 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #7f9db9 1px solid; font-family:Courier New;font-size:8pt;">
                    </MaskedEdit>
                </eo:MaskedEditColumn>
            </ColumnTemplates>
            <ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
            <GoToBoxStyle CssText="BORDER-RIGHT: #7f9db9 1px solid; BORDER-TOP: #7f9db9 1px solid; BORDER-LEFT: #7f9db9 1px solid; WIDTH: 40px; BORDER-BOTTOM: #7f9db9 1px solid" />
            <Columns>
                <eo:RowNumberColumn Width="40">
                </eo:RowNumberColumn>
                <eo:TextBoxColumn HeaderText="Subject" Name="Subject" Width="350">
                </eo:TextBoxColumn>
                <eo:CustomColumn ClientSideBeginEdit="ShowSubject" ClientSideEndEdit="Sai" HeaderText="Body"
                    Name="Body" Width="70">
                    <EditorTemplate>
                    </EditorTemplate>
                </eo:CustomColumn>
            </Columns>
            <ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
        </eo:Grid>
    
    </div>
        <eo:Dialog ID="dlgSubject" runat="server" BackColor="#E0E0E0" CloseButtonUrl="00020440"
            ControlSkinID="None" HeaderHtml="Email Body" HeaderHtmlFormat='
"padding-top:4px">{0}</div>' HeaderImageHeight="27" HeaderImageUrl="00020441" Height="432px" MinHeight="100" MinWidth="150" Width="528px"> <HeaderStyleActive CssText="background-image:url(00020442);color:#444444;font-family:'trebuchet ms';font-size:10pt;font-weight:bold;padding-bottom:7px;padding-left:8px;padding-right:0px;padding-top:0px;" /> <BorderImages BottomBorder="00020409,00020429" BottomLeftCorner="00020408,00020428" BottomRightCorner="00020410,00020430" LeftBorder="00020406,00020426" RightBorder="00020407,00020427" TopBorder="00020402,00020422" TopLeftCorner="00020401,00020421" TopLeftCornerBottom="00020404,00020424" TopRightCorner="00020403,00020423" TopRightCornerBottom="00020405,00020425" /> <FooterStyleActive CssText="background-color:#f0f0f0; padding-right: 4px; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; padding-top: 4px; font-family: tahoma" /> <ContentTemplate> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td style="width: 10px; height: 15px"> </td> <td> </td> <td style="width: 10px"> </td> </tr> <tr> <td style="height: 22px"> </td> <td style="height: 22px"> <asp:Label ID="lblEmailCabField" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Text="Insert Variable:"></asp:Label> <asp:DropDownList ID="cboEmailField" runat="server" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" onchange="javascript:FieldSelect();" Width="312px"> <asp:ListItem></asp:ListItem> <asp:ListItem Value="@PERSON@">Person Name</asp:ListItem> <asp:ListItem Value="@DTINIVAL@">Start Date</asp:ListItem> </asp:DropDownList></td> <td style="height: 22px"> </td> </tr> <tr> <td style="height: 15px"> </td> <td> </td> <td> </td> </tr> </table> <eo:Editor ID="edtEmail" runat="server" ColorPickerID="clpColor" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" Height="100%" HighlightColor="255, 255, 192" Width="100%"> <FooterStyle CssText="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" /> <BreadcrumbItemStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma" /> <EmoticonStyle CssText="background-color:white;border-bottom-color:#c5d3ed;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#c5d3ed;border-left-style:solid;border-left-width:1px;border-right-color:#c5d3ed;border-right-style:solid;border-right-width:1px;border-top-color:#c5d3ed;border-top-style:solid;border-top-width:1px;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;" /> <BreadcrumbItemHoverStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma; background-color:#e0e0e0;" /> <HeaderStyle CssText="border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px" /> <BreadcrumbItemSeparatorStyle CssText="width: 3px; height: 10px" /> <EmoticonDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" /> <BreadcrumbLabelStyle CssText="padding-right: 6px; padding-left: 6px; font-size: 12px; padding-top: 1px; font-family: tahoma" /> <BreadcrumbDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" /> <TabButtonStyles> <NormalStyle CssText="border-right: #335ea8 1px; padding-right: 7px; border-top: #335ea8 1px; padding-left: 7px; font-size: 12px; padding-bottom: 3px; border-left: #335ea8 1px; padding-top: 3px; border-bottom: #335ea8 1px; font-family: tahoma; background-color: white" /> <HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: #c2cfe5" /> <SelectedStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: white" /> </TabButtonStyles> <EditAreaStyle CssText="border-right: gray 1px solid; padding-right: 0px; border-top: gray 1px solid; padding-left: 0px; padding-bottom: 0px; border-left: gray 1px solid; padding-top: 0px; border-bottom: gray 1px solid" /> </eo:Editor> <eo:ColorPicker ID="clpColor" runat="server" ControlSkinID="None"> <PopupStyle CssText="background-color:white;border-bottom-color:#999999;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#999999;border-left-style:solid;border-left-width:1px;border-right-color:#999999;border-right-style:solid;border-right-width:1px;border-top-color:#999999;border-top-style:solid;border-top-width:1px;font-family:Verdana;font-size:10pt;padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:10px;" /> <TextBoxStyle CssText="border-right: #7f9db9 1px solid; border-top: #7f9db9 1px solid; border-left: #7f9db9 1px solid; border-bottom: #7f9db9 1px solid" /> <PopupLayoutTemplate> <table cellpadding="0" cellspacing="2"> <tr> <td colspan="2"> <table cellpadding="0" cellspacing="2"> <tr> <td width="100"> <asp:Label ID="TitleText" runat="server">Select color:</asp:Label> </td> <td style="border-right: lightgrey 1px solid; border-top: lightgrey 1px solid; border-left: lightgrey 1px solid; border-bottom: lightgrey 1px solid" width="40">  <asp:PlaceHolder ID="AdjustedColor" runat="server"></asp:PlaceHolder> </td> </tr> </table> </td> </tr> <tr> <td> <asp:PlaceHolder ID="ColorField" runat="server"></asp:PlaceHolder> </td> <td> <asp:PlaceHolder ID="SpectrumSlider" runat="server"></asp:PlaceHolder> </td> </tr> </table> <table cellpadding="0" cellspacing="1"> <tr> <td width="20">  R:</td> <td> <asp:TextBox ID="RTextBox" runat="server" Style="width: 48px"></asp:TextBox> </td> <td width="20">  G:</td> <td> <asp:TextBox ID="GTextBox" runat="server" Style="width: 48px"></asp:TextBox> </td> </tr> <tr> </tr> <tr> <td width="20">  B:</td> <td> <asp:TextBox ID="BTextBox" runat="server" Style="width: 48px"></asp:TextBox> </td> <td width="20">  #</td> <td> <asp:TextBox ID="WebColorTextBox" runat="server" Style="width: 48px"></asp:TextBox> </td> </tr> <tr> <td align="center" colspan="4"> <asp:LinkButton ID="OKButton" runat="server">OK</asp:LinkButton> </td> </tr> </table> </PopupLayoutTemplate> </eo:ColorPicker> </ContentTemplate> <ContentStyleActive CssText="background-color:#f0f0f0;font-family:tahoma;font-size:8pt;padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px" /> </eo:Dialog> </form> </body> </html>


It is to add texts that will be used in emails. We need click on the column "Body" to enter the text. Must also permit the user to insert special fields (variables) in the body text, as below:



For this, the Javascript function "FieldSelect" is called when the DropDownList is clicked, and this is my problem. I'm not able to reference the DropDownList with the command "var combo = grid.getElementById ('cboEmailField');", to insert the corresponding field variable.

What am I doing wrong?

Regards, Marcelo Camarate
eo_support
Posted: Tuesday, September 14, 2010 10:22:07 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

That will not work because the ClientID of your DropDownList is not "'cboEmailField'". It's a long name that also includes the dialog ID. In order to use getElementById, you must use the ClientID, instead of ID of the control. The code should be something like this:

Code: JavaScript
getElementById('<%=cboEmailField.ClienID%>');


Thanks


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.