My design is as follows
I would like to find radDtHiredate and radDtDOB in javascript can some one help me
<
telerik:RadTabStrip
ID
=
"rdtabEmployee"
runat
=
"server"
MultiPageID
=
"rdmpPersonal"
OnTabClick
=
"tabClick"
UnSelectChildren
=
"True"
Skin
=
"WebBlue"
EnableEmbeddedSkins
=
"False"
ClickSelectedTab
=
"True"
AutoPostBack
=
"True"
SelectedIndex
=
"0"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Personal"
PageViewID
=
"rdpgPersonal"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"rdmpPersonal"
runat
=
"server"
>
<
telerik:RadPageView
ID
=
"rdpgPersonal"
runat
=
"server"
Selected
=
"true"
>
<
telerik:RadPanelBar
runat
=
"server"
ID
=
"rdpnlPersonal"
ExpandMode
=
"FullExpandedItem"
Skin
=
"Vista"
EnableEmbeddedSkins
=
"false"
Width
=
"550px"
>
<
Items
>
<
telerik:RadPanelItem
Expanded
=
"true"
Text
=
"Employee Personal Information"
runat
=
"server"
Selected
=
"true"
>
<
Items
>
<
telerik:RadPanelItem
Value
=
"AccountInformation"
runat
=
"server"
>
<
ItemTemplate
>
<
div
class
=
"text"
style
=
"background-color: #ffffff"
>
<
ul
class
=
"formList"
id
=
"accountInfo"
>
<
li
>
<
asp:Label
runat
=
"server"
ID
=
"lblHireDate"
CssClass
=
"label1"
AssociatedControlID
=
"radDtHiredate"
Width
=
"150px"
>Hire Date</
asp:Label
>
<
telerik:RadDatePicker
ID
=
"radDtHiredate"
Width
=
"200px"
runat
=
"server"
MinDate
=
"1900-01-01"
TabIndex
=
"5"
>
<
Calendar
ID
=
"calHire"
RangeMinDate
=
"1900-01-01"
runat
=
"server"
>
</
Calendar
>
</
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"rqrdcontactHireDate"
runat
=
"server"
Display
=
"Dynamic"
ValidationGroup
=
"accountValidation"
ControlToValidate
=
"radDtHiredate"
ForeColor
=
"Red"
ErrorMessage
=
"Select a Date"
></
asp:RequiredFieldValidator
>
</
li
>
<
li
>
<
asp:Label
runat
=
"server"
ID
=
"lblPayFrequency"
CssClass
=
"label1"
AssociatedControlID
=
"radPayFrequency"
Width
=
"150px"
>Pay Frequency</
asp:Label
>
<
telerik:RadComboBox
ID
=
"radPayFrequency"
TabIndex
=
"8"
AutoPostBack
=
"true"
CssClass
=
"ComboBox"
runat
=
"server"
Width
=
"200px"
>
</
telerik:RadComboBox
>
</
li
>
</
ul
>
<
br
/>
<
br
/>
</
div
>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
I would like to find radDtHiredate and radDtDOB in javascript can some one help me
8 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
answered on 25 Jun 2012, 06:45 AM
Hi Dorababu,
I couldn't find radDtDOB from your code. Try the following code snippet to access radDtHiredate in JavaScript.
JS:
Hope this helps.
Thanks,
Princy.
I couldn't find radDtDOB from your code. Try the following code snippet to access radDtHiredate in JavaScript.
JS:
<script type=
"text/javascript"
>
function
OnClientClick() {
var
rdpnlPersonal = $find(
"<%= rdpnlPersonal.ClientID %>"
);
var
item = rdpnlPersonal.findItemByText(
"Employee Personal Information"
);
var
date=item.findControl(
"radDtHiredate"
);
}
</script>
Hope this helps.
Thanks,
Princy.
0
Dorababu
Top achievements
Rank 1
answered on 25 Jun 2012, 09:14 AM
I write as per below
But I am getting an error as
if i use as per below
and write my custom validation as follows
But this validation fails
<script type=
"text/javascript"
language=
"javascript"
>
function
monthDiff(d1, d2) {
var
months;
var
date1 =
new
Date(d1);
var
date2 =
new
Date(d2);
return
(date1 - date2) / (1000 * 60 * 60 * 24);
return
months;
}
//function getLeapYear
function
difference(d1, d2) {
var
hiredate, dob;
var
diff = 18 * 12;
hiredate = document.getElementById(d1).value;
dob = document.getElementById(d2).value;
var
Age = monthDiff(hiredate, dob);
var
compareVal = 365 * 18;
//getCompareVal(hiredate,dob);
if
(Age >= compareVal) {
return
true
;
//true
}
else
{
return
false
;
//false
}
}
function
validatehiredate(value, arg) {
var
rdpnlPersonal = $find(
"<%=rdpnlPersonal.ClientID%>"
);
var
item = rdpnlPersonal.findItemByText(
"Employee Personal Information"
);
var
date = rdpnlPersonal.findItemByValue(
"radDtHiredate"
);
var
date1 = rdpnlPersonal.findItemByValue(
"radDtDOB"
);
arg.IsValid = (difference(date, date1));
}
</script>
But I am getting an error as
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
if i use as per below
var
rdpnlPersonal = $find(
"rdpnlPersonal.ClientID"
);
and write my custom validation as follows
<
asp:CustomValidator
ID
=
"CustomValidator1"
runat
=
"server"
ClientValidationFunction
=
"validatehiredate"
ControlToValidate
=
"radDtHiredate"
ValidationGroup
=
"accountValidation"
Display
=
"Dynamic"
>Can not Hire Guy less than 18 yrs</
asp:CustomValidator
>
But this validation fails
0
Dorababu
Top achievements
Rank 1
answered on 25 Jun 2012, 09:40 AM
My complete design and code is as follows
If user select DOB less than 18 years I would like to raise a custom error which is written as per my script
My code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="radTabStripMultiPage.aspx.cs"
Inherits="radTabStripMultiPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
href
=
"StyleSheet2.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"TabStrip.WebBlue.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
language
=
"javascript"
>
function monthDiff(d1, d2) {
var months;
var date1 = new Date(d1);
var date2 = new Date(d2);
return (date1 - date2) / (1000 * 60 * 60 * 24);
return months;
}
//function getLeapYear
function difference(d1, d2) {
var hiredate, dob; var diff = 18 * 12;
hiredate = document.getElementById(d1).value;
dob = document.getElementById(d2).value;
var Age = monthDiff(hiredate, dob);
var compareVal = 365 * 18; //getCompareVal(hiredate,dob);
if (Age >= compareVal) {
return true;
//true
} else {
return false; //false
}
}
function validatehiredate(value, arg) {
var multiPage = $find("<%#rdmpPersonal.ClientID %>");
var page = multiPage.findControl("rdpgPersonal");
var rdpnlPersonal = page.findControl("rdpnlPersonal");
//var item = rdpnlPersonal.findItemByText("Employee Personal Information");
var date = rdpnlPersonal.FindItemByValue("AccountInformation").FindControl("RadDatePicker1");
var date1 = rdpnlPersonal.FindItemByValue("AccountInformation").FindControl("radDtDOB");
arg.IsValid = (difference(date, date1));
}
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"rad"
runat
=
"server"
>
</
telerik:RadScriptManager
>
<
div
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager2"
runat
=
"server"
VisibleOnPageLoad
=
"false"
>
<
Shortcuts
>
<
telerik:WindowShortcut
CommandName
=
"CloseAll"
Shortcut
=
"Esc"
/>
</
Shortcuts
>
</
telerik:RadWindowManager
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
Behavior
=
"Default"
InitialBehavior
=
"None"
>
<
Windows
>
<
telerik:RadWindow
ID
=
"RadWindow1"
runat
=
"server"
Behaviors
=
"Default"
InitialBehaviors
=
"None"
OpenerElementID
=
"btn"
Width
=
"650"
Height
=
"480"
VisibleOnPageLoad
=
"false"
>
<
ContentTemplate
>
<
telerik:RadComboBox
ID
=
"rdcmb"
runat
=
"server"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"One"
Value
=
"One"
/>
<
telerik:RadComboBoxItem
Text
=
"Two"
Value
=
"Two"
/>
<
telerik:RadComboBoxItem
Text
=
"Three"
Value
=
"Three"
/>
<
telerik:RadComboBoxItem
Text
=
"Four"
Value
=
"Four"
/>
</
Items
>
</
telerik:RadComboBox
>
<
telerik:RadTextBox
ID
=
"rdText"
runat
=
"server"
>
</
telerik:RadTextBox
>
<
telerik:RadButton
ID
=
"radbtn"
runat
=
"server"
Text
=
"Save"
>
</
telerik:RadButton
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
Windows
>
</
telerik:RadWindowManager
>
<
telerik:RadTabStrip
ID
=
"rdtabEmployee"
runat
=
"server"
MultiPageID
=
"rdmpPersonal"
UnSelectChildren
=
"True"
Skin
=
"WebBlue"
EnableEmbeddedSkins
=
"False"
ClickSelectedTab
=
"True"
SelectedIndex
=
"0"
OnTabClick
=
"tabClick"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Personal"
PageViewID
=
"rdpgPersonal"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Contact"
PageViewID
=
"rdpgContact"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Salary"
PageViewID
=
"RadPageView1"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Bank"
PageViewID
=
"RadPageView2"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Taxes"
SelectedIndex
=
"0"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Residence"
PageViewID
=
"rdpgResident"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Work"
PageViewID
=
"rdpgWork"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Demo"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Demo1"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Demo2"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
Text
=
"Demo1"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"rdmpPersonal"
runat
=
"server"
>
<
telerik:RadPageView
ID
=
"rdpgPersonal"
runat
=
"server"
Selected
=
"true"
>
<
telerik:RadPanelBar
runat
=
"server"
ID
=
"rdpnlPersonal"
ExpandMode
=
"FullExpandedItem"
Skin
=
"Vista"
EnableEmbeddedSkins
=
"false"
Width
=
"550px"
>
<
Items
>
<
telerik:RadPanelItem
Expanded
=
"true"
Text
=
"Employee Personal Information"
runat
=
"server"
Selected
=
"true"
>
<
Items
>
<
telerik:RadPanelItem
Value
=
"AccountInformation"
runat
=
"server"
>
<
ItemTemplate
>
<
label
>
Demop
</
label
>
<
telerik:RadDatePicker
ID
=
"RadDatePicker1"
Width
=
"200px"
runat
=
"server"
MinDate
=
"1900-01-01"
TabIndex
=
"5"
>
<
Calendar
ID
=
"Calendar1"
RangeMinDate
=
"1900-01-01"
runat
=
"server"
>
</
Calendar
>
</
telerik:RadDatePicker
>
<
telerik:RadDatePicker
ID
=
"radDtHiredate"
Width
=
"200px"
runat
=
"server"
MinDate
=
"1900-01-01"
TabIndex
=
"5"
>
<
Calendar
ID
=
"calHire"
RangeMinDate
=
"1900-01-01"
runat
=
"server"
>
</
Calendar
>
</
telerik:RadDatePicker
>
<
asp:CustomValidator
ID
=
"CustomValidator1"
runat
=
"server"
ClientValidationFunction
=
"validatehiredate"
ControlToValidate
=
"radDtHiredate"
ValidationGroup
=
"accountValidation"
Display
=
"Dynamic"
>Can not Hire Guy less than 18 yrs</
asp:CustomValidator
>
<
telerik:RadButton
ID
=
"rdbtnwhAnother"
Text
=
"Add WithHolding"
runat
=
"server"
ButtonType
=
"LinkButton"
ValidationGroup
=
"accountValidation"
OnClick
=
"rdbtnwhAnother_Click"
>
</
telerik:RadButton
>
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"rdpgContact"
runat
=
"server"
>
<
label
>
Demo Contact
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView1"
runat
=
"server"
>
<
label
>
Salary Demo
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView2"
runat
=
"server"
>
<
label
>
Demo Bank
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"rdpgResident"
runat
=
"server"
>
<
label
>
Resident Demo
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"rdpgWork"
runat
=
"server"
>
<
label
>
Work Demo
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView3"
runat
=
"server"
>
<
label
>
Work Demo
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView4"
runat
=
"server"
>
<
label
>
Work Demo
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView5"
runat
=
"server"
>
<
label
>
Work Demo
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView6"
runat
=
"server"
>
<
label
>
Work Demo
</
label
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView7"
runat
=
"server"
>
<
label
>
Work Demo
</
label
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
Width
=
"16px"
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadAjaxManager
runat
=
"server"
ID
=
"RadAjaxManager1"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"rdbtnwhAnother"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadWindowManager1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"rdmpPersonal"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"rdtabEmployee"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"rdmpPersonal"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"rdtabEmployee"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"rdtabEmployee"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"rdmpPersonal"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
</
div
>
</
form
>
</
body
>
</
html
>
If user select DOB less than 18 years I would like to raise a custom error which is written as per my script
My code
protected
void
rdbtnwhAnother_Click(
object
sender, EventArgs e)
{
Page.Validate(
"accountValidation"
);
if
(Page.IsValid)
{
}
RadWindowManager1.Windows[0].VisibleOnPageLoad =
true
;
}
0
Dorababu
Top achievements
Rank 1
answered on 26 Jun 2012, 11:56 AM
After all I solved this as follows just by writing the script inside RadCodeBlock
<telerik:RadCodeBlock runat=
"server"
ID=
"radcb"
>
<script type=
"text/javascript"
language=
"javascript"
>
function
monthDiff(d1, d2) {
var
months;
var
date1 =
new
Date(d1);
var
date2 =
new
Date(d2);
return
(date1 - date2) / (1000 * 60 * 60 * 24);
return
months;
}
//function getLeapYear
function
difference(d1, d2) {
var
diff = 18 * 12;
var
Age = monthDiff(d1, d2);
var
compareVal = 365 * 18;
//getCompareVal(hiredate,dob);
if
(Age >= compareVal) {
return
true
;
//true
}
else
{
return
false
;
//false
}
}
function
validatehiredate(value, arg) {
var
datePicker = $find(
'<%= rdpnlPersonal.FindItemByValue("AccountInformation").FindControl("radDtHiredate").ClientID %>'
);
var
datePicker1 = $find(
'<%= rdpnlPersonal.FindItemByValue("AccountInformation").FindControl("radDtDOB").ClientID %>'
);
var
date = datePicker.get_selectedDate();
var
date1 = datePicker1.get_selectedDate();
arg.IsValid = (difference(date, date1));
}
</script>
</telerik:RadCodeBlock>
0
THANGARAI
Top achievements
Rank 1
answered on 26 Jun 2014, 05:21 AM
Hi Princy,
How to find and set values to pageview controls which loaded dynamically from the selected tab.
I'm using RadTabStrip with five tabs and RadMultiPageView for five different pageview(used contentUrl) .
when I select any tab, I Need to set value for RadComboBox inside the selected pageview.
Please reply for this scenario.
How to find and set values to pageview controls which loaded dynamically from the selected tab.
I'm using RadTabStrip with five tabs and RadMultiPageView for five different pageview(used contentUrl) .
when I select any tab, I Need to set value for RadComboBox inside the selected pageview.
Please reply for this scenario.
0
Princy
Top achievements
Rank 2
answered on 26 Jun 2014, 06:58 AM
Hi THANGARAI,
In order to achieve your scenario please try to select the RadComboBox item in the Page_Load event of that pageView. You have mentioned the contentUrl, so whenever a tab is selecting its contentUrl Page_Load will fire and there you can write the code to select the RadComboBoxItem. Please have a look into the sample code snippet which works fine at my end.
ASPX:
ContentUrl Page ASPX:
ContentUrlPage ASPX.CS
Please elaborate your requirement if it doesn't help.
Thanks,
Princy.
In order to achieve your scenario please try to select the RadComboBox item in the Page_Load event of that pageView. You have mentioned the contentUrl, so whenever a tab is selecting its contentUrl Page_Load will fire and there you can write the code to select the RadComboBoxItem. Please have a look into the sample code snippet which works fine at my end.
ASPX:
<
telerik:RadTabStrip
ID
=
"RadTabStrip1"
runat
=
"server"
MultiPageID
=
"RadMultiPage1"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Tab1"
PageViewID
=
"RadPageView1"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"RadMultiPage1"
runat
=
"server"
>
<
telerik:RadPageView
ID
=
"RadPageView1"
runat
=
"server"
ContentUrl
=
"ComboForPageView1.aspx"
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
ContentUrl Page ASPX:
<
telerik:RadComboBox
ID
=
"RadComboBox1"
runat
=
"server"
EmptyMessage
=
"select"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"1"
/>
<
telerik:RadComboBoxItem
Text
=
"2"
/>
</
Items
>
</
telerik:RadComboBox
>
ContentUrlPage ASPX.CS
protected
void
Page_Load(
object
sender, EventArgs e)
{
RadComboBox1.SelectedIndex = 1;
}
Please elaborate your requirement if it doesn't help.
Thanks,
Princy.
0
THANGARAI
Top achievements
Rank 1
answered on 26 Jun 2014, 07:57 AM
Hi Princy,
Thanks for you reply.
My scenario is like this.
I have a page with RadTabStrip and RadMultiPage(with five PageView).
In the 1st pageview I've a RadWindow, the other pageviews are called using ContentUrl. I'm passing a url from content page to Pageview1 radwindow . While closing the radwindow , I need to rebind a RadGrid inside the content page. (Using javascript
)
Thanks for you reply.
My scenario is like this.
I have a page with RadTabStrip and RadMultiPage(with five PageView).
In the 1st pageview I've a RadWindow, the other pageviews are called using ContentUrl. I'm passing a url from content page to Pageview1 radwindow . While closing the radwindow , I need to rebind a RadGrid inside the content page. (Using javascript
)
0
Hello THANGARAI,
I would suggest you to use the approach, demonstrated in the following help article, in order to rebind the RadGrid at client-side:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-rebind.html
Regards,
Nencho
Telerik
I would suggest you to use the approach, demonstrated in the following help article, in order to rebind the RadGrid at client-side:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-rebind.html
Regards,
Nencho
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.