problem with javascript in AdvancedForm

6 posts, 0 answers
  1. Pierre MAUREL
    Pierre MAUREL avatar
    12 posts
    Member since:
    Aug 2012

    Posted 23 Jun 2010 Link to this post

    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> 

  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 29 Jun 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 06 Jul 2010 Link to this post

    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?


  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 12 Jul 2010 Link to this post

    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
  6. Ricardo
    Ricardo avatar
    1 posts
    Member since:
    Mar 2013

    Posted 29 Dec 2014 Link to this post

    how to change dateinput cssclass in javascript
  7. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 01 Jan 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017