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

Listbox clientside events in a USER CONTROL

5 Answers 92 Views

ListBox

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

5 Answers, 1 is accepted

answered on 06 Dec 2012, 04:14 PM

sample.zip

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.

answered on 06 Dec 2012, 07:18 PM

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>

Accepted

answered on 11 Dec 2012, 02:02 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Listbox clientside events in a USER CONTROL

5 Answers, 1 is accepted