How to find control inside radmultipage in javascript

9 posts, 0 answers
  1. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 23 Jun 2012 Link to this post

    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 />
                                                <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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2012 Link to this post

    Hi Dorababu,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 25 Jun 2012 Link to this post

    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
  5. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 25 Jun 2012 Link to this post

    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">
    <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;
        }
  6. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 26 Jun 2012 Link to this post

    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>
  7. THANGARAI
    THANGARAI avatar
    21 posts
    Member since:
    Nov 2013

    Posted 26 Jun 2014 in reply to Princy Link to this post

    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.


  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Jun 2014 in reply to THANGARAI Link to this post

    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.
  9. THANGARAI
    THANGARAI avatar
    21 posts
    Member since:
    Nov 2013

    Posted 26 Jun 2014 in reply to Princy Link to this post

    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
    )
  10. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 01 Jul 2014 Link to this post

    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
     

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017