This is a migrated thread and some comments may be shown as answers.

problem with javascript in AdvancedForm

5 Answers 155 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Pierre MAUREL
Top achievements
Rank 1
Pierre MAUREL asked on 23 Jun 2010, 04:18 PM
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> 

5 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 29 Jun 2010, 09:37 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Josh
Top achievements
Rank 1
answered on 06 Jul 2010, 08:17 PM
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?


0
Peter
Telerik team
answered on 12 Jul 2010, 01:57 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ricardo
Top achievements
Rank 1
answered on 29 Dec 2014, 09:05 PM
how to change dateinput cssclass in javascript
0
Plamen
Telerik team
answered on 01 Jan 2015, 12:08 PM
Hello,

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

Regards,
Plamen
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Scheduler
Asked by
Pierre MAUREL
Top achievements
Rank 1
Answers by
Peter
Telerik team
Josh
Top achievements
Rank 1
Ricardo
Top achievements
Rank 1
Plamen
Telerik team
Share this question
or