problem with javascript in AdvancedForm

[Pierre MAUREL]

Hi,
I want to use a Radcombobox like this : Radcombobox template in my advancedform.ascx.
But javascript functions seem not to be called.

P.S : the radcombobox works fine in a simple aspx page.

<div class="rsAdvancedEdit" style="position: relative">
    <div class="rsAdvTitle">
        <h1 class="rsAdvInnerTitle">
            <%= Owner.Localization.AdvancedEditAppointment %></h1>
        <asp:LinkButton runat="server" ID="AdvancedEditCloseButton" CssClass="rsAdvEditClose"
            CommandName="Cancel" CausesValidation="false" ToolTip='<%# Owner.Localization.AdvancedClose %>'>
            <%= Owner.Localization.AdvancedClose %>
        </asp:LinkButton>
    </div>
    <div class="rsAdvContentWrapper">
        <div class="rsAdvOptionsScroll">
            <asp:Panel runat="server" ID="AdvancedEditOptionsPanel" CssClass="rsAdvOptions">
                <asp:Panel runat="server" ID="BasicControlsPanel" CssClass="rsAdvBasicControls" OnDataBinding="BasicControlsPanel_DataBinding">
                    <telerik:RadTextBox runat="server" ID="SubjectText" Width="100%" Rows="5" Columns="50"
                        TextMode="MultiLine" Label='<%# Owner.Localization.AdvancedSubject + ":" %>'
                        Text='<%# Eval("Subject") %>' />
                    <asp:RequiredFieldValidator runat="server" ID="SubjectValidator" ControlToValidate="SubjectText"
                        EnableClientScript="true" Display="None" CssClass="rsValidatorMsg" />
                    <ul class="rsTimePickers">
                        <li class="rsTimePick">
                            <label for='<%= StartDate.ClientID %>_dateInput_text'>
                                <%= Owner.Localization.AdvancedFrom %>
                            </label>
                            <telerik:RadDatePicker runat="server" ID="StartDate" CssClass="rsAdvDatePicker"
                                Width="83px" SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
                                MinDate="1900-01-01">
                                <DatePopupButton Visible="False" />
                                <DateInput ID="DateInput2" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
                                    EmptyMessageStyle-CssClass="riError" EmptyMessage=" " />
                            </telerik:RadDatePicker>
                            <telerik:RadTimePicker runat="server" ID="StartTime" CssClass="rsAdvTimePicker"
                                Width="65px" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'>
                                <DateInput ID="DateInput3" runat="server" EmptyMessageStyle-CssClass="riError" EmptyMessage=" " />
                                <TimePopupButton Visible="false" />
                                <TimeView ID="TimeView1" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
                                    EndTime="18:00" Interval="00:30" />
                            </telerik:RadTimePicker>
                        </li>
                        <li class="rsTimePick">
                            <label for='<%= EndDate.ClientID %>_dateInput_text'>
                                <%= Owner.Localization.AdvancedTo%>
                            </label>
                            <telerik:RadDatePicker runat="server" ID="EndDate" CssClass="rsAdvDatePicker"
                                Width="83px" SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
                                MinDate="1900-01-01">
                                <DatePopupButton Visible="False" />
                                <DateInput ID="DateInput4" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
                                    EmptyMessageStyle-CssClass="riError" EmptyMessage=" " />
                            </telerik:RadDatePicker>
                            <telerik:RadTimePicker runat="server" ID="EndTime" CssClass="rsAdvTimePicker"
                                Width="65px" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'>
                                <DateInput ID="DateInput5" runat="server" EmptyMessageStyle-CssClass="riError" EmptyMessage=" " />
                                <TimePopupButton Visible="false" />
                                <TimeView ID="TimeView2" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
                                    EndTime="18:00" Interval="00:30" />
                            </telerik:RadTimePicker>
                        </li>
                        <li class="rsAllDayWrapper">
                            <asp:CheckBox runat="server" ID="AllDayEvent" CssClass="rsAdvChkWrap" Checked="false" />
                        </li>
                    </ul>
                    <asp:RequiredFieldValidator runat="server" ID="StartDateValidator" ControlToValidate="StartDate"
                        EnableClientScript="true" Display="None" CssClass="rsValidatorMsg" />
                    <asp:RequiredFieldValidator runat="server" ID="StartTimeValidator" ControlToValidate="StartTime"
                        EnableClientScript="true" Display="None" CssClass="rsValidatorMsg" />
                    <asp:RequiredFieldValidator runat="server" ID="EndDateValidator" ControlToValidate="EndDate"
                        EnableClientScript="true" Display="None" CssClass="rsValidatorMsg" />
                    <asp:RequiredFieldValidator runat="server" ID="EndTimeValidator" ControlToValidate="EndTime"
                        EnableClientScript="true" Display="None" CssClass="rsValidatorMsg" />
                    <asp:CustomValidator runat="server" ID="DurationValidator" ControlToValidate="StartDate"
                        EnableClientScript="false" Display="Dynamic" CssClass="rsValidatorMsg rsInvalid"
                        OnServerValidate="DurationValidator_OnServerValidate" />
                </asp:Panel>
                <asp:Panel runat="server" ID="AdvancedControlsPanel" CssClass="rsAdvMoreControls">
                    <label>
                        Test id_projet :
                    </label>
                    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                        <script type="text/javascript" language="javascript">
                            var cancelDropDownClosing = false;

                            function StopPropagation(e)
                            {
                                //cancel bubbling
                                e.cancelBubble = true;
                                if (e.stopPropagation)
                                {
                                    e.stopPropagation();
                                }
                            }

                            function onDropDownClosing()
                            {
                                cancelDropDownClosing = false;
                            }

                            function OnClientNodeClickingHandler(sender, e)
                            {
                                var node = e.get_node();
                                if (node.get_category() == "Client")
                                {
                                    node.toggle();
                                }
                                else
                                {
                                    //find the combobox, set its text and close it
                                    var combo = $find("<%= RCB_projet.ClientID %>");
                                    combo.set_text(node.get_text());
                                    cancelDropDownClosing = false;
                                    combo.hideDropDown();
                                }
                            }

                            function OnClientDropDownClosingHandler(sender, e)
                            {
                                //do not close the second combo if
                                //a checkbox from the first is clicked
                                e.set_cancel(cancelDropDownClosing);
                            }
                        </script>
                    </telerik:RadCodeBlock>
                    <telerik:RadComboBox ID="RCB_projet" runat="server" OnClientDropDownClosing="OnClientDropDownClosingHandler">
                        <ItemTemplate>
                            <div onclick="StopPropagation(event)">
                                <telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SqlDataSourceTreeview"
                                    DataTextField="projet" DataValueField="ID" DataFieldID="ID" DataFieldParentID="client_id"
                                    OnClientNodeClicking="OnClientNodeClickingHandler">
                                    <DataBindings>
                                        <telerik:RadTreeNodeBinding Depth="0" Category="Client" />
                                    </DataBindings>
                                </telerik:RadTreeView>
                            </div>
                        </ItemTemplate>
                        <Items>
                            <telerik:RadComboBoxItem />
                        </Items>
                    </telerik:RadComboBox>
                    <asp:SqlDataSource ID="SqlDataSourceTreeview" runat="server" ConnectionString="<%$ ConnectionStrings:PLANNING %>"
                        SelectCommand="SELECT ('client_' + CAST(id_client AS VARCHAR)) AS ID, nom_client AS projet, NULL AS client_id
                        FROM dbo.tbl_client_ca
                        UNION
                        SELECT CAST(projet.id_projet AS VARCHAR) AS ID, projet.projet AS projet, ('client_' + CAST(lppc.id_client AS VARCHAR)) AS client_id
                        FROM dbo.tbl_projet projet
                        LEFT OUTER JOIN dbo.lnk_projet_projet_ca lppc ON lppc.id_projet = projet.id_projet
                        ORDER BY projet">
                    </asp:SqlDataSource>
                    <asp:Panel runat="server" ID="ResourceControls">
                        <ul class="rsResourceControls">
                            <li>
                                <scheduler:ResourceControl runat="server" ID="ResRessource" Type="Ressource" Label="Ressource : "
                                    Skin='<%# Owner.Skin %>' />
                            </li>
                            <li>
                                <scheduler:ResourceControl runat="server" ID="ResRole" Type="Role" Label="Role : "
                                    Skin='<%# Owner.Skin %>' />
                            </li>
                        </ul>
                    </asp:Panel>
                </asp:Panel>
                <span class="rsAdvResetExceptions">
                    <asp:LinkButton runat="server" ID="ResetExceptions" OnClick="ResetExceptions_OnClick" />
                </span>
                <telerik:RadSchedulerRecurrenceEditor runat="server" ID="AppointmentRecurrenceEditor" />
                <asp:HiddenField runat="server" ID="OriginalRecurrenceRule" />
                <telerik:RadCalendar runat="server" ID="SharedCalendar" Skin='<%# Owner.Skin %>'
                    CultureInfo='<%# Owner.Culture %>' ShowRowHeaders="false" RangeMinDate="1900-01-01" />
            </asp:Panel>
        </div>
        <asp:Panel runat="server" ID="ButtonsPanel" CssClass="rsAdvancedSubmitArea">
            <div class="rsAdvButtonWrapper">
                <asp:LinkButton runat="server" ID="UpdateButton" CssClass="rsAdvEditSave">
                    <span><%= Owner.Localization.Save %></span>
                </asp:LinkButton>
                <asp:LinkButton runat="server" ID="CancelButton" CssClass="rsAdvEditCancel" CommandName="Cancel"
                    CausesValidation="false">
                    <span><%= Owner.Localization.Cancel %></span>
                </asp:LinkButton>
            </div>
        </asp:Panel>
    </div>
</div>
<asp:SqlDataSource ID="SqlDataSourceProjetID" runat="server" ConnectionString="<%$ ConnectionStrings:PLANNING %>" SelectCommand="SELECT [id_projet], [projet] FROM [tbl_projet]"></asp:SqlDataSource>

[Peter]

Hello Pierre,

You should move your javascript handlers in AdavancedForm.js and let RadScriptManager load it along with the other script.

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
        <scripts>
            <asp:ScriptReference Path="~/AdvancedForm.js" />
        </scripts>
    </telerik:RadScriptManager>

Let me know how it goes.

Kind regards,
Peter
the Telerik team

[Josh]

I was having the same problem. My advanced form is setup in the same way, with controls on it that I wish to modify client-side. Here are some such controls (inside BasicControlsPanel):

<td style="padding: 5px 0px 0px 0px;" align="right">
                                        <asp:Label runat="server" ID="AvailabilityLabel">
                        <%# Owner.Localization.GetString("AvailabilityLabel_Callback")%>
                                        </asp:Label>
                                    </td>
                                    <td style="padding: 0px 0px 2px 0px" colspan="2">
                                        <telerik:RadComboBox runat="server" ID="AvailComboBox" OnDataBinding="AvailComboBox_DataBinding"
                                            Skin="WebBlue" DataValueField="avail_type" DataTextField="avail_name" HighlightTemplatedItems="True"
                                            SelectedValue='<%# Bind("avail_type") %>' Width="100%" OnClientSelectedIndexChanged="AvailChanged">
                                            <ItemTemplate>
                                                <asp:Image runat="server" ID="AvailabilityDDImage" ImageUrl='<%# "~/images/colors/" + Eval("color").ToString().Trim() + ".gif" %>'
                                                    ToolTip='<%# "~/images/colors/" + Eval("color").ToString().Trim() + ".gif" %>' />
                                                <asp:Label runat="server" ID="AvailabilityDDLabel" Text='<%# Eval("avail_name") %>'></asp:Label>
                                                <asp:HiddenField runat="server" ID="hidAvailType" Value='<%# Bind("avail_type") %>' />
                                            </ItemTemplate>
                                        </telerik:RadComboBox>
                                    </td>
                                    <td>
                                        &nbsp;&nbsp;&nbsp;</td>
                                    <td style="padding: 5px 0px 0px 0px;" align="right">
                                        <asp:Label runat="server" ID="TelnTypeLabel">
                        <%# Owner.Localization.GetString("TelnTypeLabel_Callback")%>
                                        </asp:Label>
                                    </td>
                                    <td style="padding: 0px 0px 2px 0px" colspan="2">
                                        <telerik:RadComboBox runat="server" ID="TelnComboBox" OnDataBinding="TelnComboBox_DataBinding"
                                            Skin="WebBlue" DataValueField="teln_id" DataTextField="teln_name" SelectedValue='<%# Bind("teln_id") %>' Width="100%">
                                        </telerik:RadComboBox>
                                    </td>

Here is the JS that fires when the first combobox's index is changed:

function AvailChanged(sender, args)
{
    var telnLabel = $find("<%= TelnTypeLabel.ClientID %>");
    alert(telnLabel);
}

After placing the script in a separate file and loading it with the script manager, the event fires but it cannot find any controls; the alert always shows 'null'. Is there something additional that needs to be done?

[Peter]

Hi Josh,

In my opinion, the neatest and easiest way to access controls client-side in the AdvancedForm user control is to tag them with a CssClass and use jQuery:
AdvancedForm.ascx:

<asp:Label runat="server" CssClass="CustomLabelCss" ID="TelnTypeLabel">
                     label 1
                  </asp:Label>

AdvancedForm.js:

function AvailChanged(sender, args) {
    var telnLabel = $telerik.$(".CustomLabelCss").get(0);
    telnLabel.style.color = "red";
}

All the best,
Peter
the Telerik team

[Ricardo]

how to change dateinput cssclass in javascript

[Plamen]

Hello,

You can use the onClientFormCreated event and find the dateinput there as for example it is explained in this article.

Regards,
Plamen
Telerik