
Wired_Nerve
Top achievements
Rank 2
Wired_Nerve
asked on 04 Dec 2012, 12:13 AM
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?
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?
5 Answers, 1 is accepted
0
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
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.
0

Wired_Nerve
Top achievements
Rank 2
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...
The javascript
The entire page:
<
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
>
0
Accepted
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 :
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
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.
0

Wired_Nerve
Top achievements
Rank 2
answered on 11 Dec 2012, 02:25 PM
I will give that a try. Thanks
0

Wired_Nerve
Top achievements
Rank 2
answered on 12 Dec 2012, 04:16 PM
Wow, thanks for that tip.
The quick trick of
The quick trick of
var
listbox = $find(source.controltovalidate);
is going to help me out so much.. Very cool...