Listbox clientside events in a USER CONTROL

6 posts, 1 answers
  1. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 03 Dec 2012 Link to this post

    I have a user control inside of a rad grid.
    When you expand the radgrid row for edit or insert I have a listbox that displays a set of items in a source and a destination box where the items they transfer are...
    I would like to validate that the destination box has at least one item either via a asp.net validation control or via client side javascript.
    The issue with the clientside script is that I am having a hard time getting it to work since it is a USER CONTROL inside of a parent page..

    Any ideas?
  2. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 06 Dec 2012 Link to this post

    Hello Warren,

    I have prepared a sample project for you, which implements the desired functionality using CustomValidator. Please find the attached sample and let us know if it works properly at your end.


    Regards,
    Nencho
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 06 Dec 2012 Link to this post

    I tried your code and for some reason the javascript is not getting added to the page when the application runs.  I used firebug to look for the script and it was just not showing up at all...

    <td style="width: 50%;">
                                      <telerik:RadListBox ID="RadListBoxDestinationSites" runat="server" AllowDelete="True"
                                          AllowReorder="True" AllowTransfer="True" Height="200px" TransferMode="Move" Width="100%"
                                          DataTextField="SiteName" DataValueField="SiteUID" />
                                      <asp:CustomValidator ID="CustomValidator1" ValidateEmptyText="true" ControlToValidate="RadListBoxDestinationSites"
                                          ClientValidationFunction="ClientValidate" ErrorMessage="No items!" ForeColor="red"
                                          Font-Name="verdana" runat="server" />
    </td>


    The javascript
    <script language="JavaScript" type="text/javascript">
          function ClientValidate(source, arguments) {
              var listbox = $find("<%= RadListBoxDestinationSites.ClientID %>");
              var itemsCount = listbox.get_items().get_count();
              if (itemsCount < 1)
                  arguments.IsValid = false;
              else if (itemsCount > 0)
                  arguments.IsValid = true;
          }
      </script>


    The entire page:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserDetails.ascx.cs"
        Inherits="TIPIdentityCore.UserDetails" %>
    <%@ Reference Control="~/MasterPages/NoNav.Master" %>
    <asp:Panel ID="PanelDetails" runat="server" CssClass="EditFormTabTable" DefaultButton="">
         
        <table>
            <tr>
                <td colspan="3">
                    <div class="EditFormCaption">
                        <table>
                            <tr>
                                <td>
                                    <label>
                                        User:</label>
                                    <asp:Label ID="NameCaptionLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.RealName") %>' />
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 25%">
                    <div class="EditFormTable">
                        <table>
                            <tr>
                                <td>
                                    <label>
                                        Name:</label>
                                </td>
                                <td>
                                    <asp:Label ID="RealNameLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.RealName") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        Username:</label>
                                </td>
                                <td>
                                    <asp:Label ID="LogOnNameLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LoginName") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        Password:</label>
                                </td>
                                <td>
                                    <%--<asp:Label ID="PasswordLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Password") %>' />--%>
                                    <asp:Label ID="PasswordLabel" runat="server" Text='**********' />
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td style="width: 25%">
                    <div class="EditFormTable">
                        <table>
                            <tr>
                                <td>
                                    <label>
                                        View:</label>
                                </td>
                                <td>
                                    <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ViewName") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        User Role:</label>
                                </td>
                                <td>
                                    <asp:Label ID="UserRoleNameLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.UserRoleName") %>' />
                                </td>
                            </tr>
                            <tr runat="server" id="DepartmentRowDisplay">
                                <td style="vertical-align: text-top;">
                                    Department:
                                </td>
                                <td>
                                    <div style="height: 100px; overflow: auto;">
                                        <asp:HiddenField runat="server" ID="DataKeyValueUserID" Value='<%# DataBinder.Eval(Container, "DataItem.UserID") %>' />
                                        <asp:Repeater runat="server" ID="DepartmentRepeater">
                                            <ItemTemplate>
                                                <asp:Label runat="server" ID="Department" Text='<%# DataBinder.Eval(Container, "DataItem.DepartmentName") %>'></asp:Label><br />
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        Phone:</label>
                                </td>
                                <td>
                                    <asp:Label ID="PhoneLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Phone") %>' />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        E-mail:</label>
                                </td>
                                <td>
                                    <asp:Label ID="EmailLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>' />
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td runat="server" id="Td1" style="width: 25%;">
                    <asp:Panel ID="MultiSitePanel0" runat="server" Visible="true" Width="50%">
                        <table>
                            <tr>
                                <td class="" style="text-align: left; vertical-align: middle; background: #eff2ff">
                                    <label style="color: #444444; background: #eff2ff;">
                                        Assigned Sites</label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div style="height: 100px; overflow: auto;">
                                        <asp:Repeater runat="server" ID="RepeaterAssignedSites" OnItemDataBound="RepeaterAssignedSites_ItemDataBound">
                                            <ItemTemplate>
                                                <div style="background: white;">
                                                    <asp:Label runat="server" ID="SitesLabel" Text='<%# DataBinder.Eval(Container, "DataItem.SiteName") %>'
                                                        Font-Names="Segoe UI, Helvetica" Font-Size="Small" ForeColor="#444444"></asp:Label><br />
                                                </div>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label style="#444444; font-size: 10px; color: red;">
                                        * First row is primary login site</label>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </td>
            </tr>
        </table>
    </asp:Panel>
    <asp:Panel ID="PanelAddEdit" runat="server" CssClass="EditForm" DefaultButton="">
        <div class="EditFormMainTable">
            <table>
                <tr>
                    <td colspan="3">
                        <div class="EditFormCaption">
                            <table>
                                <tr>
                                    <td>
                                        <label>
                                            User:</label>
                                        <asp:Label ID="NameLabel" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.RealName") %>' />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 25%">
                        <div class="EditFormTable">
                            <table>
                                <tr class="EditFormRequired">
                                    <td>
                                        <label>
                                            Name:</label>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="RealNameTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.RealName") %>'
                                            TabIndex="1" />
                                        <asp:RequiredFieldValidator ID="RealNameRequiredValidator" runat="server" ControlToValidate="RealNameTextBox"
                                            ValidationGroup="Validate" Display="Dynamic" CssClass="Error" ErrorMessage="<br />Name required"
                                            SetFocusOnError="True"><br />Name required</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr class="EditFormRequired">
                                    <td>
                                           
                                    </td>
                                    <td>
                                           
                                    </td>
                                </tr>
                                <tr class="EditFormRequired">
                                    <td>
                                        <label>
                                            Username:</label>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="LogOnNameTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.LoginName") %>'
                                            TabIndex="4" />
                                        <asp:CustomValidator ID="LogOnNameUniqueValidator" runat="server" ControlToValidate="LogOnNameTextBox"
                                            ErrorMessage="<br />Username must be unique" OnServerValidate="ValidateUserName_ServerValidate"
                                            Display="Dynamic" CssClass="Error" SetFocusOnError="True"><br />Username must be unique</asp:CustomValidator>
                                        <asp:RegularExpressionValidator ID="LogOnNameRegularExpressionValidator" runat="server"
                                            ControlToValidate="LogOnNameTextBox" Display="Dynamic" CssClass="Error" ErrorMessage="<br />Alphanumeric or @_.- only"
                                            SetFocusOnError="True" ValidationExpression="^[a-zA-Z0-9@_.-]+$"><br />Alphanumeric or @_.- only</asp:RegularExpressionValidator>
                                        <asp:RequiredFieldValidator ID="LogOnNameRequiredValidator" runat="server" ControlToValidate="LogOnNameTextBox"
                                            ValidationGroup="Validate" Display="Dynamic" CssClass="Error" ErrorMessage="<br />Username required"
                                            SetFocusOnError="True"><br />Username required</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr class="EditFormRequired">
                                    <td>
                                        <label>
                                            Password:</label>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="PasswordTextBox" runat="server" TextMode="Password" EmptyMessage="**********"
                                            TabIndex="5" />
                                        <asp:RequiredFieldValidator ID="PasswordRequiredValidator" runat="server" ControlToValidate="PasswordTextBox"
                                            ValidationGroup="Validate" Display="Dynamic" CssClass="Error" ErrorMessage="<br />Password required"
                                            SetFocusOnError="True" />
                                    </td>
                                </tr>
                                <tr class="EditFormRequired">
                                    <td>
                                        <label>
                                            Confirm Password:</label>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="ConfirmPasswordTextBox" runat="server" TextMode="Password"
                                            EmptyMessage="**********" TabIndex="6" />
                                        <asp:RequiredFieldValidator ID="ConfirmPasswordRequiredValidator" runat="server"
                                            ControlToValidate="ConfirmPasswordTextBox" ValidationGroup="Validate" Display="Dynamic"
                                            CssClass="Error" ErrorMessage="<br />Confirm Password required" SetFocusOnError="true" />
                                        <asp:CompareValidator ID="PasswordCompareValidator" ValidationGroup="Validate" runat="server"
                                            ControlToValidate="ConfirmPasswordTextBox" ControlToCompare="PasswordTextBox"
                                            ErrorMessage="<br />Password and confirmation must match" Display="Dynamic" CssClass="Error"
                                            SetFocusOnError="true" Operator="Equal" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                    <td style="width: 25%">
                        <div class="EditFormTable">
                            <table>
                                <tr class="EditFormRequired">
                                    <td>
                                        <label>
                                            View:</label>
                                    </td>
                                    <td>
                                        <telerik:RadComboBox ID="ddlViews" AppendDataBoundItems="true" runat="server" DataSourceID="LdsViews"
                                            DataTextField="ViewName" DataValueField="ViewUID" SelectedValue='<%# DataBinder.Eval(Container, "DataItem.ViewUID") %>'
                                            AutoPostBack="True" TabIndex="2" OnSelectedIndexChanged="ddlViews_SelectedIndexChanged">
                                            <Items>
                                                <telerik:RadComboBoxItem Text="" Value="" />
                                            </Items>
                                        </telerik:RadComboBox>
                                        <asp:LinqDataSource ID="LdsViews" runat="server" ContextTypeName="TIPIdentityCoreLibrary.DAL.IdentityCoreDataContext"
                                            Select="new (ViewUID, ViewName, ViewDescription)" TableName="tblUnvViews" OrderBy="ViewName">
                                        </asp:LinqDataSource>
                                        <asp:RequiredFieldValidator ID="RequiredFieldView" runat="server" ControlToValidate="ddlViews"
                                            ValidationGroup="Validate" Display="Dynamic" CssClass="Error" ErrorMessage="<br />View required"
                                            SetFocusOnError="True"><br />View required</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr class="EditFormRequired">
                                    <td>
                                        <label>
                                            User Role:</label>
                                    </td>
                                    <td>
                                        <telerik:RadComboBox ID="ddlUserRoles" runat="server" AppendDataBoundItems="true"
                                            DataSourceID="LdsUserRoles" DataTextField="UserRoleName" DataValueField="UserRoleUID"
                                            OnSelectedIndexChanged="ddlUserRoles_SelectedIndexChanged" SelectedValue='<%# DataBinder.Eval(Container, "DataItem.UserRoleUID") %>'
                                            TabIndex="3">
                                        </telerik:RadComboBox>
                                        <asp:RequiredFieldValidator ID="RequiredFieldUserRole" runat="server" ControlToValidate="ddlUserRoles"
                                            CssClass="Error" Display="Dynamic" ErrorMessage="<br />User role required"
                                            SetFocusOnError="True" ValidationGroup="Validate"><br />User role required</asp:RequiredFieldValidator>
                                        <asp:LinqDataSource ID="LdsUserRoles" runat="server" ContextTypeName="TIPIdentityCoreLibrary.DAL.IdentityCoreDataContext"
                                            OrderBy="UserRoleName" Select="new (UserRoleUID, ViewUID, UserRoleName, UserRoleDescription)"
                                            TableName="tblUnvUserRoles">
                                        </asp:LinqDataSource>
                                    </td>
                                </tr>
                                <tr class="EditFormRequired" runat="server" id="DepartmentRowEdit" clientidmode="Static">
                                    <td>
                                        <label>
                                            Department:</label>
                                    </td>
                                    <td>
                                        <telerik:RadComboBox ID="RadComboDepartments" runat="server" OnDataBinding="RadComboDepartments_DataBinding"
                                            DataTextField="DepartmentName" DataValueField="DepartmentUid" EmptyMessage="Please select">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="CheckBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.DepartmentName") %>' />
                                            </ItemTemplate>
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>
                                            Phone:</label>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="PhoneTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Phone") %>'
                                            TabIndex="8" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>
                                            E-mail:</label>
                                    </td>
                                    <td>
                                        <telerik:RadTextBox ID="EmailTextBox" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
                                            TabIndex="9" />
                                        <asp:RegularExpressionValidator ID="RegExpValidateEmail" runat="server" ControlToValidate="EmailTextBox"
                                            Display="Dynamic" CssClass="Error" ErrorMessage="<br />Enter a valid email address"
                                            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" SetFocusOnError="true"><br />Enter a valid E-mail address</asp:RegularExpressionValidator>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                    <td runat="server" id="SiteListBoxCell" style="width: 40%; background: #eff2ff;">
                        <asp:Panel runat="server" ID="MultiSitePanel" Visible="False">
                            <table>
                                <tr>
                                    <td style="text-align: left; vertical-align: middle;">
                                        <label style="color: #444444;">
                                            Unassigned Sites</label>
                                    </td>
                                    <td style="text-align: left; vertical-align: middle;">
                                        <label style="color: #444444;">
                                            Assigned Sites</label>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="width: 50%;">
                                        <telerik:RadListBox ID="RadListBoxSourceSites" runat="server" AllowTransfer="true"
                                            Height="200px" TransferToID="RadListBoxDestinationSites" Width="100%" ForeColor="Black"
                                            DataTextField="SiteName" DataValueField="SiteUID" />
                                    </td>
                                    <td style="width: 50%;">
                                        <telerik:RadListBox ID="RadListBoxDestinationSites" runat="server" AllowDelete="True"
                                            AllowReorder="True" AllowTransfer="True" Height="200px" TransferMode="Move" Width="100%"
                                            DataTextField="SiteName" DataValueField="SiteUID" />
                                        <asp:CustomValidator ID="CustomValidator1" ValidateEmptyText="true" ControlToValidate="RadListBoxDestinationSites"
                                            ClientValidationFunction="ClientValidate" ErrorMessage="No items!" ForeColor="red"
                                            Font-Name="verdana" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                        <label style="#444444; font-size: 10px; color: red;">
                                            * First row is primary login site</label>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="EditFormTable">
                            <table>
                                <tr>
                                    <td>
                                        <label>
                                            Active:</label>
                                    </td>
                                    <td>
                                        <asp:CheckBox ID="CheckActive" runat="server" Checked='<%# string.IsNullOrEmpty(DataBinder.Eval(Container, "DataItem.Active").ToString()) ? false : DataBinder.Eval(Container, "DataItem.Active") %>' />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                    <td align="right" colspan="2">
                        <asp:ImageButton ID="UpdateImageButton" runat="server" CommandName="Update" OnClick="UpdateImageButton_Click"
                            AlternateText="Update" ToolTip="Update" ValidationGroup="Validate" />
                        <asp:ImageButton ID="AddImageButton" runat="server" CommandName="PerformInsert" OnClick="AddImageButton_Click"
                            AlternateText="Add" ToolTip="Add" ValidationGroup="Validate" />
                        <asp:ImageButton ID="CancelImageButton" runat="server" CausesValidation="False" CommandName="Cancel"
                            AlternateText="Cancel" ToolTip="Cancel" />
                        <asp:Label CssClass="SavedLabel" ID="SavedLabel" runat="server" Text="<br />Record saved"
                            Visible="false" />
                    </td>
                </tr>
            </table>
        </div>
    </asp:Panel>
      
     <script language="JavaScript" type="text/javascript">
      
         function ClientValidate(source, arguments) {
             var listbox = $find("<%= RadListBoxDestinationSites.ClientID %>");
             var itemsCount = listbox.get_items().get_count();
      
             if (itemsCount < 1)
                 arguments.IsValid = false;
             else if (itemsCount > 0)
                 arguments.IsValid = true;
         }
        </script>
  5. Answer
    Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 11 Dec 2012 Link to this post

    Hi Warren,

    I can suggest you to access the RadListBox, which is about to be validated, through the "source" of the ClientValidate function in the following manner :

    <script type="text/javascript">
     
           function ClientValidate(source, arguments) {
               var listbox = $find(source.controltovalidate);
               var itemsCount = listbox.get_items().get_count();
     
               if (itemsCount < 1)
                   arguments.IsValid = false;
               else if (itemsCount > 0)
                   arguments.IsValid = true;
           }
       </script>

    Please note that the ClientValidate should be placed in the page with RadGrid, instead of placing it in the UserControl with RadListBox.


    All the best,
    Nencho
    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.
  6. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 11 Dec 2012 Link to this post

    I will give that a try.  Thanks
  7. Wired_Nerve
    Wired_Nerve avatar
    163 posts
    Member since:
    Oct 2007

    Posted 12 Dec 2012 Link to this post

    Wow, thanks for that tip. 
    The quick trick of    var listbox = $find(source.controltovalidate);    is going to help me out so much.. Very cool...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017