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

How to find control inside radmultipage in javascript

8 Answers 438 Views

TabStrip

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

Dorababu asked on 23 Jun 2012, 08:47 AM

My design is as follows

<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 />

</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

answered on 25 Jun 2012, 09:14 AM

I write as per below

<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

answered on 25 Jun 2012, 09:40 AM

My complete design and code is as follows

<%@ 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;

}

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>

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:

<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.

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

How to find control inside radmultipage in javascript

8 Answers, 1 is accepted

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).