Clientside "validateCombo" doesn't work for combobox in RadSchuler form template

2 posts, 0 answers
  1. MfE_Developer
    MfE_Developer avatar
    10 posts
    Member since:
    May 2011

    Posted 02 Oct 2011 Link to this post

    I've tried to use:

    http://www.telerik.com/community/forums/aspnet-ajax/combobox/validate-user-input-in-radcombobox-with-allowcustomtext-quot-true-quot-filter-quot-contains-quot.aspx

    however, the javascript never fires. I've debugged in the browser and the javascript is never called. The requirefield validator works fine, but if a user tpyes somejunk into the filter and presses 'ok' without selecting an item, the form accepts the input, writes to teh database and closes the modal form.
    I've included the AdvancedInsertTemplate of the RadScheduler below.

    <AdvancedInsertTemplate>
                <div class="rsAdvancedEdit rsAdvancedModal"
                   style="position: relative; width:560px; left: 30%;">
                   <div class="rsModalBgTopLeft">
                   </div>
                   <div class="rsModalBgTopRight">
                   </div>
                   <div class="rsModalBgBottomLeft">
                   </div>
                   <div class="rsModalBgBottomRight">
                   </div>
                   <div class="rsAdvTitle">
                      <h1 class="rsAdvInnerTitle">
                         <%#Container.Appointment.Owner.Localization.AdvancedNewAppointment%>
                      </h1>
                      <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="false"
                         CommandName="Cancel" CssClass="rsAdvEditClose"
                         ToolTip="<%# Container.Appointment.Owner.Localization.AdvancedClose %>"> <%#Container.Appointment.Owner.Localization.AdvancedClose%></asp:LinkButton>
     
                   </div>
                   <div class="rsAdvContentWrapper">
                      <div style="display: inline-block">
                         <!-- ** -->
                         <div style="float: left;">
                            <p>
                               <telerik:RadComboBox ID="UsersComboBox" runat="server" DataSourceID="UsersDataSource" DataTextField="Fullname" DataValueField="Username"  AllowCustomText="true" EnableTextSelection="false" EmptyMessage="Please select..." Filter="Contains"
                                  Label="User" SelectedValue='<%# Bind("Username") %>'>
                               </telerik:RadComboBox>
                               <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="UsersComboBox" runat="server" ErrorMessage="Required"></asp:RequiredFieldValidator>
                               <asp:CustomValidator ID="CustomValidator331" runat="server"
                                  ControlToValidate="UsersComboBox"
                                   ClientValidationFunction="validateCombo" ValidateEmptyText="true"
                                   ErrorMessage="You cansubmit only existing name">
                                     
                               </asp:CustomValidator>
                            </p>
                            <p>
                               <div style="display: inline-block">
                                  <div style="float: left; width: 76px; text-align: right; padding-right: 5px; padding-top: 5px;">
                                     <asp:Label ID="Label1" runat="server" ForeColor="#333333" Text="Start"></asp:Label>
                                  </div>
                                  <div>
                                     <telerik:RadDateTimePicker ID="StartInput" runat="server" Culture="en-NZ"
                                        SelectedDate='<%# Bind("Start") %>'>
                                        <TimeView CellSpacing="-1" Culture="en-NZ" EndTime="17:30:00"
                                           Interval="00:30:00" RenderDirection="Vertical" StartTime="08:30:00">
                                        </TimeView>
                                        <TimePopupButton HoverImageUrl="" ImageUrl="" />
                                        <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                                           ViewSelectorText="x">
                                        </Calendar>
                                        <DateInput DateFormat="d/MM/yyyy" DisplayDateFormat="d/MM/yyyy">
                                        </DateInput>
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                     </telerik:RadDateTimePicker>
                                  </div>
                               </div>
                            </p>
                            <p>
                               <div style="display: inline-block">
                                  <div style="float: left; width: 76px; text-align: right; padding-right: 5px; padding-top: 5px;">
                                     <asp:Label ID="Label2" runat="server" ForeColor="#333333" Text="End"></asp:Label>
                                  </div>
                                  <div>
                                     <telerik:RadDateTimePicker ID="EndInput" runat="server" Culture="en-NZ"
                                        SelectedDate='<%# Bind("End") %>'>
                                        <TimeView CellSpacing="-1" Culture="en-NZ" EndTime="17:30:00"
                                           Interval="00:30:00" RenderDirection="Vertical" StartTime="08:30:00">
                                        </TimeView>
                                        <TimePopupButton HoverImageUrl="" ImageUrl="" />
                                        <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                                           ViewSelectorText="x">
                                        </Calendar>
                                        <DateInput DateFormat="d/MM/yyyy" DisplayDateFormat="d/MM/yyyy">
                                        </DateInput>
                                        <DatePopupButton HoverImageUrl="" ImageUrl="" />
                                     </telerik:RadDateTimePicker>
                                  </div>
                               </div>
                            </p>
                            <p>
                               <div style="display: inline-block">
                                  <div style="float: left; width: 76px; text-align: right; padding-right: 5px; padding-top: 5px;">
                                     <asp:Label ID="Label3" runat="server" ForeColor="#333333" Text="Permanent"></asp:Label>
                                  </div>
                                  <div>
                                     <asp:CheckBox ID="chkPerm" runat="server" />
                                     <asp:HiddenField ID="hidPerm" runat="server" Value='<%# Bind("Perman") %>' />
                                  </div>
                               </div>
                            </p>
                            <p>
                               <telerik:RadComboBox ID="StatusComboBox" runat="server"
                                  DataSourceID="StatusDataSource" DataTextField="Status"
                                  DataValueField="StatusId" Label="Status"
                                  SelectedValue='<%# Bind("StatusId") %>' Visible="false">
                               </telerik:RadComboBox>
                            </p>
                         </div>
                         <!-- ** -->
                         <div>
                            <telerik:RadTextBox ID="DescriptionTextBox" runat="server" Columns="30"
                               Label="Notes" Rows="4" Text='<%# Bind("Description") %>' TextMode="MultiLine">
                            </telerik:RadTextBox>
                         </div>
                      </div>
                      <asp:Panel ID="Panel1" runat="server" CssClass="rsAdvancedSubmitArea">
                         <div class="rsAdvButtonWrapper">
                            <asp:LinkButton ID="UpdateButton" runat="server" CommandName="Insert"  CausesValidation="true"
                               CssClass="rsAdvEditSave"> <span><%# Container.Appointment.Owner.Localization.Save%></span></asp:LinkButton>
                            <asp:LinkButton ID="CancelButton" runat="server" CausesValidation="false"
                               CommandName="Cancel" CssClass="rsAdvEditCancel">
                               <span><%# Container.Appointment.Owner.Localization.Cancel%></span>
                               </asp:LinkButton>
     
                             
                         </div>
                      </asp:Panel>
                   </div>
                </div>
             </AdvancedInsertTemplate>
  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 05 Oct 2011 Link to this post

    Hello Mike,

    The custom validator should work fine in that scenario if you have set the ClientValidationFunction right.
    Here is an example how it should be:
    JS:
    function clientValidationFunction(source, arguments) {
            }

    In that method, you could check if the typed text in the input field of the RadComboBox corresponds to the text of any item from the RadComboBox items collection, and respectively set arguments.IsValid to "true".

    Another approach is to prevent the users from typing some particular characters in the RadComboBox's input field, using regular expressions.

    If you are still having troubles, please send us a support ticket with a runnable sample page attached to it, so we can troubleshoot the issue locally. 

    Greetings,
    Ivana
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top