TabStrip and RadPageView

11 posts, 0 answers
  1. Marion
    Marion avatar
    5 posts
    Member since:
    Nov 2007

    Posted 28 Jul 2010 Link to this post

    I was following the Getting Started for the RadTabStrip at http://www.telerik.com/help/aspnet-ajax/tab_gettingstarted.html. When I view the completed page that I've typed in, the content of the Colors, Calendar, and Quote tabs is not visible when I select any of those tabs. I'm using the Q2 2010 release of the ASP.NET Ajax controls. I even tried it on another machine (typed in the code in Visual Studio 2010) and got the same results. Am I missing something? Below is my code.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

    <%@ 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>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server"
                ReorderTabsOnSelect="True" SelectedIndex="2" Skin="Outlook">
                <Tabs>
                    <telerik:RadTab runat="server" Owner="RadTabStrip1" Text="Calendar">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Owner="RadTabStrip1" Text="Colors">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" IsBreak="True" Owner="RadTabStrip1" Text="Quote"
                        Selected="True">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Owner="RadTabStrip1"
                        SelectedIndex="1" Text="Web Sites">
                        <Tabs>
                            <telerik:RadTab runat="server" NavigateUrl="http://www.telerik.com" Owner=""
                                Text="Telerik">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" NavigateUrl="http://www.google.com" Owner=""
                                Selected="True" Text="Google">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
                <telerik:RadPageView ID="RadPageView1" runat="server">
                    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView2" runat="server">
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </telerik:RadPageView>
                <telerik:RadPageView ID="RadPageView3" runat="server">
                    a quote
                </telerik:RadPageView>
            </telerik:RadMultiPage>
        </div>
        </form>
    </body>
    </html>


    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><br><br><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><br>
    <
    html xmlns="http://www.w3.org/1999/xhtml"><br>
    <
    head runat="server"><br>    <title></title><br></head>
    <
    br><body><br>    <form id="form1" runat="server"><br>   
    <
    asp:ScriptManager ID="ScriptManager1" runat="server"><br>    </asp:ScriptManager><br>    <div><br>        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" <br>            ReorderTabsOnSelect="True" SelectedIndex="2" Skin="Outlook"><br>            <Tabs><br>                <telerik:RadTab runat="server" Owner="RadTabStrip1" Text="Calendar"><br>                </telerik:RadTab><br>                <telerik:RadTab runat="server" Owner="RadTabStrip1" Text="Colors"><br>                </telerik:RadTab><br>                <telerik:RadTab runat="server" IsBreak="True" Owner="RadTabStrip1" Text="Quote" <br>                    Selected="True"><br>                </telerik:RadTab><br>                <telerik:RadTab runat="server" Owner="RadTabStrip1" <br>                    SelectedIndex="1" Text="Web Sites"><br>                    <Tabs><br>                        <telerik:RadTab runat="server" NavigateUrl="http://www.telerik.com" Owner="" <br>                            Text="Telerik"><br>                        </telerik:RadTab><br>                        <telerik:RadTab runat="server" NavigateUrl="http://www.google.com" Owner="" <br>                            Selected="True" Text="Google"><br>                        </telerik:RadTab><br>                    </Tabs><br>                </telerik:RadTab><br>            </Tabs><br>        </telerik:RadTabStrip><br>        <br>        <telerik:RadMultiPage ID="RadMultiPage1" runat="server"><br>            <telerik:RadPageView ID="RadPageView1" runat="server"><br>                <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar><br>            </telerik:RadPageView><br>            <telerik:RadPageView ID="RadPageView2" runat="server"><br>                <asp:Button ID="Button1" runat="server" Text="Button" /><br>            </telerik:RadPageView><br>            <telerik:RadPageView ID="RadPageView3" runat="server"><br>                a quote<br>            </telerik:RadPageView><br>        </telerik:RadMultiPage><br>    </div><br>    </form><br></body><br></html>
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 29 Jul 2010 Link to this post

    Hello Marion,

    You're supposed to set MulitPageID="RadMultiPage1" on your RadTabStrip control. So the RadTabStrip control knows which RadMulitPage control it is associated with.

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marion
    Marion avatar
    5 posts
    Member since:
    Nov 2007

    Posted 29 Jul 2010 Link to this post

    Cori,

    Thanks. I knew I was missing something and was wondering how the Tabstrip and MultiPage were connected. I just corrected your typo in the ID and everything works fine.

    thank you,
    marion
  5. srihari
    srihari avatar
    8 posts
    Member since:
    Jul 2015

    Posted 03 Sep 2015 Link to this post

    hi,

    I have facing problem with radcontextmenu in radgrid while updating radmultipage and radtab control id in ajax update panel in telerik. I will get the error like this 0x800a138f - JavaScript runtime error: Unable to set property 'control' of undefined or null reference and without using radmultipage and radtab control id in ajax update it is working fine but unable to switch the radtab selected.
    kindly give the solution to switch the radtab using the radcontextmenu with update the ajax.

    my code like this

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchableDataMap.aspx.cs" Inherits="TelerikExamples.SearchableDataMap" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head runat="server">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">

    body {

    margin: 0;

    padding: 0;

    padding-top: 20px;

    font: 14px/normal "Segoe UI", sans-serif;

    }

    .col, .header, .footer {

    background-color: #78a6ab;

    border: 1px solid #cccccc;

    text-align: center;

    border-radius: 3px;

    }

    .header, .footer {

    height: 50px;

    }

    .col {

    margin: 10px 0;

    padding: 5px 10px;

    height: 100px;

    }

    </style>

    <%--<link href="http://getbootstrap.com/css/kendo.common.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/css/kendo.bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/css/bootstrap-min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/css/bootstrap-responsive.css" rel="stylesheet">

    <style>

    @media all and (max-width:1024) {

    h2 {

    color: green;

    }

    }

    </style>

    <h2>My color changes when the width gets below 1024px</h2>--%>

    </head>

    <body>

    <form id="form1" runat="server">

    <div>



    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="6000">

    <Scripts>

    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

    </Scripts>



    </telerik:RadScriptManager>

    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">



    <script type="text/javascript">

    function RowContextMenu2(sender, eventArgs) {

    var menu = $find("<%=RadMenu2.ClientID %>");



    var evt = eventArgs.get_domEvent();



    if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {

    return;

    }

    var index = eventArgs.get_itemIndexHierarchical();

    document.getElementById("radGridClickedRowIndex2").value = index;



    sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

    menu.show(evt);

    evt.cancelBubble = true;

    evt.returnValue = false;

    if (evt.stopPropagation) {

    evt.stopPropagation();

    evt.preventDefault();

    }

    }

    </script>

    <%--<script type="text/javascript">

    Sys.Application.add_load(function () {



    window.demo.menu = $find("<%=RadMenu2.ClientID %>");

    });

    </script>--%>



    </telerik:RadCodeBlock>



    <telerik:RadAjaxManager ID="ramAsseti" runat="server">

    <AjaxSettings>

    <telerik:AjaxSetting AjaxControlID="RadMenu2">

    <UpdatedControls>

    <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />

    <telerik:AjaxUpdatedControl ControlID="rtvwPeopleBrowser" />

    <telerik:AjaxUpdatedControl ControlID="rtvwOrgBrowser" />



    </UpdatedControls>

    </telerik:AjaxSetting>

    <%--<telerik:AjaxSetting AjaxControlID="RadTabStrip1">

    <UpdatedControls>



    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />

    </UpdatedControls>

    </telerik:AjaxSetting>--%>

    <telerik:AjaxSetting AjaxControlID="chkdate">

    <UpdatedControls>

    <telerik:AjaxUpdatedControl ControlID="chkdate" />

    <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" />

    <telerik:AjaxUpdatedControl ControlID="RadDatePicker2" />

    </UpdatedControls>

    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="btnprev">

    <UpdatedControls>

    <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />

    <telerik:AjaxUpdatedControl ControlID="btnprev" />



    </UpdatedControls>

    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="btnnext">

    <UpdatedControls>

    <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />

    <telerik:AjaxUpdatedControl ControlID="btnprev" />



    </UpdatedControls>

    </telerik:AjaxSetting>

    <telerik:AjaxSetting AjaxControlID="btnSearch">

    <UpdatedControls>

    <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />

    <telerik:AjaxUpdatedControl ControlID="btnnext" />

    <telerik:AjaxUpdatedControl ControlID="btnprev" />

    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

    <%--<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> --%>

    </UpdatedControls>

    </telerik:AjaxSetting>

    </AjaxSettings>

    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" EnableEmbeddedSkins="true" Skin="Silk" Transparency="5">

    </telerik:RadAjaxLoadingPanel>



    <telerik:RadPageLayout ID="RadPageLayout1" runat="server">

    <Rows>

    <telerik:LayoutRow>

    <Content>

    <h2 class="sdmfont">Searchable Data Map</h2>



    </Content>

    </telerik:LayoutRow>

    <telerik:LayoutRow>

    <Columns>



    <telerik:LayoutColumn Span="5">

    <div class="card" style="height: 300px">

    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Width="1250px" MultiPageID="RadMultiPage1" Skin="Windows7" ClickSelectedTab="true" Align="Justify" BorderColor="#663300" ReorderTabsOnSelect="true">

    <Tabs>

    <telerik:RadTab Text="Search People" TabIndex="0" Width="150px" Selected="True" PageViewID="PageView1"></telerik:RadTab>

    <telerik:RadTab Text="Import" Width="150px" TabIndex="1" PageViewID="RadPageView_Import"></telerik:RadTab>

    <telerik:RadTab Text="Items Choosen" Width="150px" TabIndex="2" PageViewID="RadPageView_ItemChoosen"></telerik:RadTab>

    <telerik:RadTab Text="Organizational Browser" Width="150px" TabIndex="3" PageViewID="rpvOrgBrowser"></telerik:RadTab>

    <telerik:RadTab Text="People Browser" Width="150px" TabIndex="4" PageViewID="rpvPeopleBrowser"></telerik:RadTab>

    </Tabs>

    </telerik:RadTabStrip>

    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="innerMultiPage">

    <telerik:RadPageView runat="server" ID="PageView1">

    <div class="demo-containers">

    <div class="demo-container wrapper">

    <div class="demo-container demo-content">



    <table style="width:1250px;">

    <tr>

    <td style="width:250px;">

    <asp:Label ID="Label1" runat="server" Text="Last Name:" Width="100px"></asp:Label>

    <telerik:RadTextBox runat="server" ID="txtltname" Width="150px" Height="25px" EmptyMessage="Last Name"></telerik:RadTextBox>

    </td>

    <td style="width:420px;">

    <asp:Label ID="Label2" runat="server" Text="First Name and Middle Intial:" Width="250px" CssClass="lblPdng"></asp:Label>

    <telerik:RadTextBox runat="server" ID="txtfname" Width="140px" Height="25px" EmptyMessage="First Name and Middle Intial"></telerik:RadTextBox>

    </td>

    <td style="width:250px;">

    <asp:Label ID="Label3" runat="server" Text="Employee ID:" Width="100px" CssClass="lblPdng"></asp:Label>

    <telerik:RadTextBox runat="server" ID="txteid" Width="140px" Height="25px" EmptyMessage="Employee ID"></telerik:RadTextBox>

    </td>



    <td style="width:250px;">

    <asp:Label ID="Label4" runat="server" Text="Supervisor ID:" Width="100px" CssClass="lblPdng"></asp:Label>

    <telerik:RadTextBox runat="server" ID="txtsid" Width="150px" Height="25px" EmptyMessage="Supervisor ID"></telerik:RadTextBox><br />

    </td>

    </tr>

    <tr><td style="width:250px;">

    <asp:Label ID="Label5" runat="server" Text="Job Title:" Width="100px"></asp:Label>

    <telerik:RadTextBox runat="server" ID="txtjtitle" Width="150px" Height="25px" EmptyMessage="Job Title"></telerik:RadTextBox>

    </td>

    <td style="width:420px;">

    <asp:Label ID="Label6" runat="server" Text="Market Group:" Width="250px" CssClass="lblPdng"></asp:Label>

    <telerik:RadDropDownList ID="ddlmgroup" runat="server" DropDownHeight="200px" Width="150px"

    DropDownWidth="150px">

    </telerik:RadDropDownList>

    </td>

    <td style="width:250px;">

    <asp:Label ID="Label8" runat="server" Text="Segment:" Width="100px" CssClass="lblPdng"></asp:Label>

    <telerik:RadDropDownList ID="ddlsegment" runat="server" DropDownHeight="200px" Width="150px"

    DropDownWidth="150px">

    </telerik:RadDropDownList>

    </td>

    <td style="width:140px;">

    <telerik:RadButton runat="server" ID="btnSearch" Text="Search" CssClass="submitButton" Width="140px" OnClick="btnSearch_Click"></telerik:RadButton>

    </td>

    </tr>

    <tr>

    <td >

    <table><tr><td>

    <asp:CheckBox ID="chkdate" runat="server" Checked="true" AutoPostBack="true" Text="All Dates" OnCheckedChanged="chkdate_CheckedChanged" />



    </td>

    <td>

    <telerik:RadDatePicker ID="RadDatePicker1" Visible="true" DateInput-ReadOnly="true" Width="320px" runat="server" MinDate="1000/1/1" DateInput-Label="From Date:(MM/DD/YYYY)" AutoPostBack="true">



    </telerik:RadDatePicker>





    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator3" ControlToValidate="RadDatePicker1"

    ErrorMessage="Enter Valid date!" ForeColor="Red"></asp:RequiredFieldValidator>

    </td>

    <td>



    <telerik:RadDatePicker ID="RadDatePicker2" Width="320px" Visible="true" DateInput-ReadOnly="true" runat="server" MinDate="1000/1/1" DateInput-Label="To Date:(MM/DD/YYYY)" AutoPostBack="true">



    </telerik:RadDatePicker>

    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator4" ControlToValidate="RadDatePicker2"

    ErrorMessage="Enter Valid date!" ForeColor="Red"></asp:RequiredFieldValidator>



    <asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="RadDatePicker2"

    ControlToCompare="RadDatePicker1" ForeColor="Red" Operator="GreaterThanEqual" Type="Date" ErrorMessage="The second date must be after the first one or equal.<br /><br />">

    </asp:CompareValidator>

    </td></tr></table>



    </td>



    </tr>

    </table>





    <table style="width:1250px;">

    <tr>

    <td>

    <telerik:RadGrid ID="rgdsearch" runat="server" Skin="Bootstrap" ShowStatusBar="true" AllowSorting="True" width="1250px"

    AutoGenerateColumns="false" HeaderStyle-Font-Size="Small" AllowPaging="true"

    OnPageIndexChanged="rgdsearch_PageIndexChanged" AllowCustomPaging="true" PageSize="50" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true"

    OnSelectedIndexChanged="rgdsearch_SelectedIndexChanged" OnSortCommand="rgdsearch_SortCommand1"

    >

    <ClientSettings>

    <Scrolling UseStaticHeaders="True" AllowScroll="true" SaveScrollPosition="true"></Scrolling>

    <ClientEvents OnRowContextMenu="RowContextMenu2" />

    </ClientSettings>

    <HeaderStyle Width="180px" Height="10px" VerticalAlign="Middle"></HeaderStyle>

    <ItemStyle Font-Size="12px" BackColor="White" Height="5px" />

    <AlternatingItemStyle Font-Size="12px" BackColor="Wheat" />

    <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

    <SortingSettings SortedBackColor="Lavender" EnableSkinSortStyles="false"></SortingSettings>

    <MasterTableView Width="99%" ShowFooter="false">

    <Columns>

    <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" HeaderStyle-Width="40">

    <ItemTemplate>

    <asp:CheckBox ID="chkSearchResultsSelect" runat="server" AutoPostBack="true" OnCheckedChanged="ToggleSearchRowSelection" />

    </ItemTemplate>

    </telerik:GridTemplateColumn>

    <telerik:GridBoundColumn UniqueName="WaybackDate" DataField="WBDate" HeaderText="WB Date" SortExpression="WBDate" HeaderStyle-Width="80" DataFormatString="{0:MM/dd/yy}"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="EmployeeID" DataField="IndividualCode" HeaderText="Employee ID" SortExpression="IndividualCode" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name" SortExpression="Name" HeaderStyle-Width="160"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="JobTitle" DataField="JobTitle" HeaderText="Job Title" SortExpression="JobTitle" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="JobFamily" DataField="JobFamily" HeaderText="Job Family" SortExpression="JobFamily" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="NumReports" DataField="subcount" HeaderText="Reports" SortExpression="subcount" HeaderStyle-Width="60"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="MarketGroup" DataField="MarketGroupName" HeaderText="Market Group" SortExpression="MarketGroupName" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="ExternalBusinessSegment" DataField="ExternalBusinessSegment" HeaderText="External Business Segment" SortExpression="ExternalBusinessSegment" HeaderStyle-Width="140"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="BusinessSegmentName" DataField="BusinessSegmentName" HeaderText="Business Segment" SortExpression="BusinessSegmentName" HeaderStyle-Width="120"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="BusinessName" DataField="BusinessName" HeaderText="BusinessName" SortExpression="BusinessName" HeaderStyle-Width="120"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="Division" DataField="DivisionName" HeaderText="Division" SortExpression="DivisionName" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="GLFunction" DataField="GLFunctionName" HeaderText="GL Function" SortExpression="GLFunction" HeaderStyle-Width="120"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="City" DataField="City" HeaderText="City" SortExpression="City" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="State" DataField="State" HeaderText="State" SortExpression="State" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="Zip" DataField="Zip" HeaderText="Zip" SortExpression="Zip" HeaderStyle-Width="50"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="Address1" DataField="Addr1" HeaderText="Address 1" SortExpression="Addr1" HeaderStyle-Width="140"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="Address2" DataField="Addr2" HeaderText="Address 2" SortExpression="Addr2" HeaderStyle-Width="120"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="Country" DataField="Country" HeaderText="Country" SortExpression="Country" HeaderStyle-Width="100"></telerik:GridBoundColumn>

    <telerik:GridBoundColumn UniqueName="Effstatus" DataField="EffStatus" HeaderText="Employee Status" SortExpression="Effstatus" HeaderStyle-Width="75"></telerik:GridBoundColumn>

    </Columns>

    </MasterTableView>

    </telerik:RadGrid>

    <input type="hidden" id="radGridClickedRowIndex2" name="radGridClickedRowIndex2" />

    <telerik:RadContextMenu ID="RadMenu2" runat="server" OnItemClick="RadMenu2_ItemClick"

    EnableRoundedCorners="true" EnableShadows="true">

    <Items>

    <telerik:RadMenuItem Text="View Details">

    </telerik:RadMenuItem>

    <telerik:RadMenuItem Text="Locate in Organizational Browser">

    </telerik:RadMenuItem>

    <telerik:RadMenuItem Text="Locate in People Browser">

    </telerik:RadMenuItem>

    </Items>

    </telerik:RadContextMenu>

    </td>

    </tr>

    <tr>

    <td style="float:left;margin-left:10px;">

    <telerik:RadButton ID="btnprev" runat="server" Text="Prev" OnClick="btnprev_Click" Visible="false" ></telerik:RadButton>

    </td>

    <td style="float:left;margin-left:30px;">

    <telerik:RadButton ID="btnnext" runat="server" Text="Next" OnClick="btnnext_Click" Visible="false"></telerik:RadButton>



    </td></tr></table>

    </div>

    </div>

    </div>

    </telerik:RadPageView>

    <telerik:RadPageView runat="server" ID="RadPageView_Import">

    </telerik:RadPageView>

    <telerik:RadPageView runat="server" ID="RadPageView_ItemChoosen">



    </telerik:RadPageView>

    <telerik:RadPageView ID="rpvOrgBrowser" runat="server">



    Org Browser

    </telerik:RadPageView>

    <telerik:RadPageView ID="rpvPeopleBrowser" runat="server">



    </telerik:RadPageView>

    </telerik:RadMultiPage>

    </telerik:LayoutColumn>

    </Columns>

    </telerik:LayoutRow>

    </Rows>

    </telerik:RadPageLayout>



    </form>

    </body>

    </html>
  6. srihari
    srihari avatar
    8 posts
    Member since:
    Jul 2015

    Posted 03 Sep 2015 Link to this post

    hi,
    I have facing problem with radcontextmenu in radgrid while updating radmultipage and radtab control id in ajax update panel in telerik. I will get the error like this 0x800a138f - JavaScript runtime error: Unable to set property 'control' of undefined or null reference and without using radmultipage and radtab control id in ajax update it is working fine but unable to switch the radtab selected.
    kindly give the solution to switch the radtab using the radcontextmenu with update the ajax.
    my code like this
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchableDataMap.aspx.cs" Inherits="TelerikExamples.SearchableDataMap" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
     <title></title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
     <form id="form1" runat="server">
     <div>

     <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="6000">
     <Scripts>
     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
     <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
     </Scripts>

     </telerik:RadScriptManager>
     <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

     <script type="text/javascript">
     function RowContextMenu2(sender, eventArgs) {
    var menu = $find("<%=RadMenu2.ClientID %>");

    var evt = eventArgs.get_domEvent();

     if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
     return;
     }
    var index = eventArgs.get_itemIndexHierarchical();
    document.getElementById("radGridClickedRowIndex2").value = index;

    sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
    menu.show(evt);
    evt.cancelBubble = true;
    evt.returnValue = false;
     if (evt.stopPropagation) {
    evt.stopPropagation();
    evt.preventDefault();
     }
     }


     </telerik:RadCodeBlock>

     <telerik:RadAjaxManager ID="ramAsseti" runat="server">
     <AjaxSettings>
     <telerik:AjaxSetting AjaxControlID="RadMenu2">
     <UpdatedControls>
     <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />
     <telerik:AjaxUpdatedControl ControlID="rtvwPeopleBrowser" />
     <telerik:AjaxUpdatedControl ControlID="rtvwOrgBrowser" />

     </UpdatedControls>
     </telerik:AjaxSetting>
     <%--<telerik:AjaxSetting AjaxControlID="RadTabStrip1">
     <UpdatedControls>

     <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
     <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />
     </UpdatedControls>
     </telerik:AjaxSetting>--%>
     <telerik:AjaxSetting AjaxControlID="chkdate">
     <UpdatedControls>
     <telerik:AjaxUpdatedControl ControlID="chkdate" />
     <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" />
     <telerik:AjaxUpdatedControl ControlID="RadDatePicker2" />
     </UpdatedControls>
     </telerik:AjaxSetting>
     <telerik:AjaxSetting AjaxControlID="btnprev">
     <UpdatedControls>
     <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />
     <telerik:AjaxUpdatedControl ControlID="btnprev" />

     </UpdatedControls>
     </telerik:AjaxSetting>
     <telerik:AjaxSetting AjaxControlID="btnnext">
     <UpdatedControls>
     <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />
     <telerik:AjaxUpdatedControl ControlID="btnprev" />

     </UpdatedControls>
     </telerik:AjaxSetting>
     <telerik:AjaxSetting AjaxControlID="btnSearch">
     <UpdatedControls>
     <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />
     <telerik:AjaxUpdatedControl ControlID="btnnext" />
     <telerik:AjaxUpdatedControl ControlID="btnprev" />
     <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
     <%--<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> --%>
     </UpdatedControls>
     </telerik:AjaxSetting>
     </AjaxSettings>
     </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" EnableEmbeddedSkins="true" Skin="Silk" Transparency="5">
     </telerik:RadAjaxLoadingPanel>

     <telerik:RadPageLayout ID="RadPageLayout1" runat="server">
     <Rows>
     <telerik:LayoutRow>
     <Content>
     <h2 class="sdmfont">Searchable Data Map</h2>

     </Content>
     </telerik:LayoutRow>
     <telerik:LayoutRow>
     <Columns>

     <telerik:LayoutColumn Span="5">
     <div class="card" style="height: 300px">
     <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Width="1250px" MultiPageID="RadMultiPage1" Skin="Windows7" ClickSelectedTab="true" Align="Justify" BorderColor="#663300" ReorderTabsOnSelect="true">
     <Tabs>
     <telerik:RadTab Text="Search People" TabIndex="0" Width="150px" Selected="True" PageViewID="PageView1"></telerik:RadTab>
     <telerik:RadTab Text="Import" Width="150px" TabIndex="1" PageViewID="RadPageView_Import"></telerik:RadTab>
     <telerik:RadTab Text="Items Choosen" Width="150px" TabIndex="2" PageViewID="RadPageView_ItemChoosen"></telerik:RadTab>
     <telerik:RadTab Text="Organizational Browser" Width="150px" TabIndex="3" PageViewID="rpvOrgBrowser"></telerik:RadTab>
     <telerik:RadTab Text="People Browser" Width="150px" TabIndex="4" PageViewID="rpvPeopleBrowser"></telerik:RadTab>
     </Tabs>
     </telerik:RadTabStrip>
     <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="innerMultiPage">
     <telerik:RadPageView runat="server" ID="PageView1">
     <div class="demo-containers">
     <div class="demo-container wrapper">
     <div class="demo-container demo-content">

     <table style="width:1250px;">
     <tr>
     <td style="width:250px;">
     <asp:Label ID="Label1" runat="server" Text="Last Name:" Width="100px"></asp:Label>
     <telerik:RadTextBox runat="server" ID="txtltname" Width="150px" Height="25px" EmptyMessage="Last Name"></telerik:RadTextBox>
     </td>
     <td style="width:420px;">
     <asp:Label ID="Label2" runat="server" Text="First Name and Middle Intial:" Width="250px" CssClass="lblPdng"></asp:Label>
     <telerik:RadTextBox runat="server" ID="txtfname" Width="140px" Height="25px" EmptyMessage="First Name and Middle Intial"></telerik:RadTextBox>
     </td>
     <td style="width:250px;">
     <asp:Label ID="Label3" runat="server" Text="Employee ID:" Width="100px" CssClass="lblPdng"></asp:Label>
     <telerik:RadTextBox runat="server" ID="txteid" Width="140px" Height="25px" EmptyMessage="Employee ID"></telerik:RadTextBox>
     </td>

     <td style="width:250px;">
     <asp:Label ID="Label4" runat="server" Text="Supervisor ID:" Width="100px" CssClass="lblPdng"></asp:Label>
     <telerik:RadTextBox runat="server" ID="txtsid" Width="150px" Height="25px" EmptyMessage="Supervisor ID"></telerik:RadTextBox><br />
     </td>
     </tr>
     <tr><td style="width:250px;">
     <asp:Label ID="Label5" runat="server" Text="Job Title:" Width="100px"></asp:Label>
     <telerik:RadTextBox runat="server" ID="txtjtitle" Width="150px" Height="25px" EmptyMessage="Job Title"></telerik:RadTextBox>
     </td>
     <td style="width:420px;">
     <asp:Label ID="Label6" runat="server" Text="Market Group:" Width="250px" CssClass="lblPdng"></asp:Label>
     <telerik:RadDropDownList ID="ddlmgroup" runat="server" DropDownHeight="200px" Width="150px"
    DropDownWidth="150px">
     </telerik:RadDropDownList>
     </td>
     <td style="width:250px;">
     <asp:Label ID="Label8" runat="server" Text="Segment:" Width="100px" CssClass="lblPdng"></asp:Label>
     <telerik:RadDropDownList ID="ddlsegment" runat="server" DropDownHeight="200px" Width="150px"
    DropDownWidth="150px">
     </telerik:RadDropDownList>
     </td>
     <td style="width:140px;">
     <telerik:RadButton runat="server" ID="btnSearch" Text="Search" CssClass="submitButton" Width="140px" OnClick="btnSearch_Click"></telerik:RadButton>
     </td>
     </tr>
     <tr>
     <td >
     <table><tr><td>
     <asp:CheckBox ID="chkdate" runat="server" Checked="true" AutoPostBack="true" Text="All Dates" OnCheckedChanged="chkdate_CheckedChanged" />

     </td>
     <td>
     <telerik:RadDatePicker ID="RadDatePicker1" Visible="true" DateInput-ReadOnly="true" Width="320px" runat="server" MinDate="1000/1/1" DateInput-Label="From Date:(MM/DD/YYYY)" AutoPostBack="true">

     </telerik:RadDatePicker>


     <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator3" ControlToValidate="RadDatePicker1"
    ErrorMessage="Enter Valid date!" ForeColor="Red"></asp:RequiredFieldValidator>
     </td>
     <td>

     <telerik:RadDatePicker ID="RadDatePicker2" Width="320px" Visible="true" DateInput-ReadOnly="true" runat="server" MinDate="1000/1/1" DateInput-Label="To Date:(MM/DD/YYYY)" AutoPostBack="true">

     </telerik:RadDatePicker>
     <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator4" ControlToValidate="RadDatePicker2"
    ErrorMessage="Enter Valid date!" ForeColor="Red"></asp:RequiredFieldValidator>

     <asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="RadDatePicker2"
    ControlToCompare="RadDatePicker1" ForeColor="Red" Operator="GreaterThanEqual" Type="Date" ErrorMessage="The second date must be after the first one or equal.<br /><br />">
     </asp:CompareValidator>
     </td></tr></table>

     </td>

     </tr>
     </table>


     <table style="width:1250px;">
     <tr>
     <td>
     <telerik:RadGrid ID="rgdsearch" runat="server" Skin="Bootstrap" ShowStatusBar="true" AllowSorting="True" width="1250px"
    AutoGenerateColumns="false" HeaderStyle-Font-Size="Small" AllowPaging="true"
    OnPageIndexChanged="rgdsearch_PageIndexChanged" AllowCustomPaging="true" PageSize="50" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true"
    OnSelectedIndexChanged="rgdsearch_SelectedIndexChanged" OnSortCommand="rgdsearch_SortCommand1"
     >
     <ClientSettings>
     <Scrolling UseStaticHeaders="True" AllowScroll="true" SaveScrollPosition="true"></Scrolling>
     <ClientEvents OnRowContextMenu="RowContextMenu2" />
     </ClientSettings>
     <HeaderStyle Width="180px" Height="10px" VerticalAlign="Middle"></HeaderStyle>
     <ItemStyle Font-Size="12px" BackColor="White" Height="5px" />
     <AlternatingItemStyle Font-Size="12px" BackColor="Wheat" />
     <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
     <SortingSettings SortedBackColor="Lavender" EnableSkinSortStyles="false"></SortingSettings>
     <MasterTableView Width="99%" ShowFooter="false">
     <Columns>
     <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" HeaderStyle-Width="40">
     <ItemTemplate>
     <asp:CheckBox ID="chkSearchResultsSelect" runat="server" AutoPostBack="true" OnCheckedChanged="ToggleSearchRowSelection" />
     </ItemTemplate>
     </telerik:GridTemplateColumn>

     <telerik:GridBoundColumn UniqueName="EmployeeID" DataField="IndividualCode" HeaderText="Employee ID" SortExpression="IndividualCode" HeaderStyle-Width="100"></telerik:GridBoundColumn>



     
     </Columns>
     </MasterTableView>
     </telerik:RadGrid>
     <input type="hidden" id="radGridClickedRowIndex2" name="radGridClickedRowIndex2" />
     <telerik:RadContextMenu ID="RadMenu2" runat="server" OnItemClick="RadMenu2_ItemClick"
    EnableRoundedCorners="true" EnableShadows="true">
     <Items>
     <telerik:RadMenuItem Text="View Details">
     </telerik:RadMenuItem>
     <telerik:RadMenuItem Text="Locate in Organizational Browser">
     </telerik:RadMenuItem>
     <telerik:RadMenuItem Text="Locate in People Browser">
     </telerik:RadMenuItem>
     </Items>
     </telerik:RadContextMenu>
     </td>
     </tr>
     <tr>
     <td style="float:left;margin-left:10px;">
     <telerik:RadButton ID="btnprev" runat="server" Text="Prev" OnClick="btnprev_Click" Visible="false" ></telerik:RadButton>
     </td>
     <td style="float:left;margin-left:30px;">
     <telerik:RadButton ID="btnnext" runat="server" Text="Next" OnClick="btnnext_Click" Visible="false"></telerik:RadButton>

     </td></tr></table>
     </div>
     </div>
     </div>
     </telerik:RadPageView>
     <telerik:RadPageView runat="server" ID="RadPageView_Import">
     </telerik:RadPageView>
     <telerik:RadPageView runat="server" ID="RadPageView_ItemChoosen">

     </telerik:RadPageView>
     <telerik:RadPageView ID="rpvOrgBrowser" runat="server">

     Org Browser
     </telerik:RadPageView>
     <telerik:RadPageView ID="rpvPeopleBrowser" runat="server">

     </telerik:RadPageView>
     </telerik:RadMultiPage>
     </telerik:LayoutColumn>
     </Columns>
     </telerik:LayoutRow>
     </Rows>
    </telerik:RadPageLayout>

     </form>
    </body>
    </html>
  7. srihari
    srihari avatar
    8 posts
    Member since:
    Jul 2015

    Posted 03 Sep 2015 in reply to srihari Link to this post

    I have a question about how to switch between tabs selection using radcontextmenu selecting in radradgrid.

    kindly give the example

     Thanks

    p.srihari

  8. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 08 Sep 2015 Link to this post

    Hello Srihari,

    In order to set some tab as Selected, you need to get a reference to it, using the RadTabStrip object and also you need to set the corresponding PageView as selected. This could be achieved in the ContextMenu's ItemClick event handler. Please consider the below approach:

    protected void RadMenu2_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
      {
          string selectedItemText = e.Item.Text;
          RadTab tabToSelect = new RadTab();
          switch (selectedItemText)
          {
              case "Locate in Organizational Browser":
                  tabToSelect = RadTabStrip1.FindTabByText("Organizational Browser");
                  tabToSelect.Selected = true;
                  tabToSelect.PageView.Selected = true;
     
                  break;
     
              case "Locate in People Browser":
     
                  tabToSelect = RadTabStrip1.FindTabByText("People Browser");
                  tabToSelect.Selected = true;
                  tabToSelect.PageView.Selected = true;
     
                  break;
              default:
                  break;
          }
      }

    In addition, in the attachment you can find a runnable sample page, where the above approach is implemented.

    Note : in the example I have used simplified RadGrid for the testing purpose.

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. srihari
    srihari avatar
    8 posts
    Member since:
    Jul 2015

    Posted 08 Sep 2015 in reply to Nencho Link to this post

    Hello Nencho,

    Thanks for giving reply. I facing problem in context menu in radtreeview also.please find the code and give the suitable solution.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" ValidateRequest="false" MaintainScrollPositionOnPostback="true" %>
    <!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 id="Head1" runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <link rel="stylesheet" type="text/css" href="CSS/StyleSheet1.css" />
        <%--<link rel="stylesheet" type="text/css" href="CSS/Styleforcontrols.css" /> --%>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="6000">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
            <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
                <script type="text/javascript">
                    function RowContextMenu(sender, eventArgs) {
                        var menu = $find("<%=RadMenu1.ClientID %>");
                        var evt = eventArgs.get_domEvent();
                        if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                            return;
                        }
                        var index = eventArgs.get_itemIndexHierarchical();
                        document.getElementById("radGridClickedRowIndex").value = index;
                        sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
                        menu.show(evt);
                        evt.cancelBubble = true;
                        evt.returnValue = false;
                        if (evt.stopPropagation) {
                            evt.stopPropagation();
                            evt.preventDefault();
                        }
                    }
                </script>
                <script type="text/javascript">
                    function RowContextMenu2(sender, eventArgs) {
                        var menu = $find("<%=RadMenu2.ClientID %>");
                        var evt = eventArgs.get_domEvent();
                        if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                            return;
                        }
                        var index = eventArgs.get_itemIndexHierarchical();
                        document.getElementById("radGridClickedRowIndex2").value = index;
                        sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
                        menu.show(evt);
                        evt.cancelBubble = true;
                        evt.returnValue = false;
                        if (evt.stopPropagation) {
                            evt.stopPropagation();
                            evt.preventDefault();
                        }
                    }


                </script>

            </telerik:RadCodeBlock>
            <script type="text/javascript">
                //<!--
                var linksArray = [];
                if (typeof (_spBodyOnLoadFunctionNames) != 'undefined' && _spBodyOnLoadFunctionNames != null) {
                    _spBodyOnLoadFunctionNames.push("suppressSubmitWrapper");
                }

                function suppressSubmitWrapper() {
                    _spSuppressFormOnSubmitWrapper = true;
                }
                function confirmResetToNewList(button) {
                    function confirmResetToNewListCallbackFn(arg) {
                        if (arg) {
                            __doPostBack(button.name, "");
                        }
                    }
                    radconfirm("You are about to reset the tool with a new list. All unsaved changes will be lost. Do you wish to continue?", confirmResetToNewListCallbackFn, 330, 110, null, "Confirm Reset");
                }
                function openDetailsWindow() {
                    $find("DetailsWindow").show();
                }
                function openDetailsWindow() {
                    $find("DetailsWindow1").show();
                }
                function onClientContextMenuShowingorg(sender, args) {

                    var treeNode = args.get_node();

                    treeNode.set_selected(true);

                    setMenuItemsStateorg(args.get_menu().get_items(), treeNode);
                    console.log(args.get_menu().get_items());
                }

                function OnClientTabSelected(sender, args) {
                    //accessing the selected tab and setting css
                    args.get_tab().set_cssClass("selected-tab-style");
                }
                function OnClientTabUnSelected(sender, args) {
                    //accessing the last selected tab and giving the default styling
                    args.get_tab().set_cssClass("unselected-tab-style");
                }


            </script>

            <script type="text/javascript" language="javascript">
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    if (args.get_error() != undefined) {
                        args.set_errorHandled(true);
                    }
                }
            </script>
            <script type="text/javascript">
                var invalidDate = false;
                function OnClientClicking(sender, args) {
                    if (invalidDate == true) {
                        args.set_cancel(true);
                    }
                }
                function OnBlur(sender, args) {
                    var dateinput = sender.get_textBoxValue();
                    if (dateinput.length != 0) {
                        if (isDate(dateinput)) {
                            invalidDate = false;
                        }
                        else {
                            invalidDate = true;
                        }
                    }
                    else {
                        invalidDate = false;
                        alert("Date is empty");
                    }
                }
                function OnDateSelected() {
                    invalidDate = false;
                }
                function isDate(txtDate) {
                    //Declare Regex 
                    var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
                    var dtArray = txtDate.match(rxDatePattern); // is format OK?
                    if (dtArray == null)
                        return false;
                    //Checks for mm/dd/yyyy format.
                    dtMonth = dtArray[1];
                    dtDay = dtArray[3];
                    dtYear = dtArray[5];
                    if (dtMonth < 1 || dtMonth > 12)
                        return false;
                    else if (dtDay < 1 || dtDay > 31)
                        return false;
                    else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
                        return false;
                    else if (dtMonth == 2) {
                        var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
                        if (dtDay > 29 || (dtDay == 29 && !isleap))
                            return false;
                    }
                    return true;
                }
            </script>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                       
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"  />
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        
                    </UpdatedControls>
                </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                       
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"   />
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1"  />
                       
                    </UpdatedControls>
                </telerik:AjaxSetting>
                   <telerik:AjaxSetting AjaxControlID="RadMenu2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgdsearch" LoadingPanelID="RadAjaxLoadingPanel1" />
                           
                            <telerik:AjaxUpdatedControl ControlID="DetailsWindow" />
                          <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"   />
                  
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                 <telerik:AjaxSetting AjaxControlID="RadMenu1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgrdItemsChosen" LoadingPanelID="RadAjaxLoadingPanel1" />
                           
                            <telerik:AjaxUpdatedControl ControlID="DetailsWindow" />
                             <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"   />
                          
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                   <telerik:AjaxSetting AjaxControlID="rgdimport1">
                        <UpdatedControls>
                            <%--<telerik:AjaxUpdatedControl ControlID="rgdimport1" LoadingPanelID="RadAjaxLoadingPanel1" />--%>
                            <%-- <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"   /> --%>
                            <telerik:AjaxUpdatedControl ControlID="DetailsWindow1" />
                            
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <%-- <telerik:AjaxSetting AjaxControlID="btnupdate">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="DetailsWindow1" LoadingPanelID="RadAjaxLoadingPanel1" />
                           
                            <telerik:AjaxUpdatedControl ControlID="rgdimport1" />
                              <telerik:AjaxUpdatedControl ControlID="RadTabStrip1"   />
                        </UpdatedControls>
                    </telerik:AjaxSetting>--%>
                </AjaxSettings>
            </telerik:RadAjaxManager>



            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" EnableEmbeddedSkins="true" Skin="Silk" Transparency="5">
            </telerik:RadAjaxLoadingPanel>

            <%--MetroTouch--%>
            <div class="demo-container no-bg">
                <h2 class="sdmfont">Searchable Data Map</h2>
                <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Width="1250px" MultiPageID="RadMultiPage1"  Skin="Windows7" ClickSelectedTab="true" Align="Justify" BorderColor="#663300" OnClientTabSelected="OnClientTabSelected" OnClientTabUnSelected="OnClientTabUnSelected" ReorderTabsOnSelect="true">
                    <Tabs>
                        <telerik:RadTab Text="Search People" TabIndex="0" Width="150px" Selected="True"></telerik:RadTab>
                        <telerik:RadTab Text="Import" Width="150px" TabIndex="1"></telerik:RadTab>
                        <telerik:RadTab Text="Items Choosen" Width="150px" TabIndex="2"></telerik:RadTab>
                        <telerik:RadTab Text="Organizational Browser" Width="150px" TabIndex="3"></telerik:RadTab>
                        <telerik:RadTab Text="People Browser" Width="150px" TabIndex="4"></telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="RadMultiPage1"  CssClass="innerMultiPage">
                    <telerik:RadPageView runat="server" ID="PageView1" Selected="true">
                        <div class="ingredients qsf-ib">
                            <div class="demo-containers">
                                <div class="demo-container wrapper">
                                    <div class="demo-container demo-content" style="font: normal 11px verdana;">
                                        <br />
                                        <asp:Label ID="Label1" runat="server" Text="Last Name:" Width="70px"></asp:Label>
                                        <telerik:RadTextBox runat="server" ID="txtltname" Width="150px" Height="25px" EmptyMessage="Last Name"></telerik:RadTextBox>
                                        <asp:Label ID="Label2" runat="server" Text="First Name and Middle Intial:" Width="180px" CssClass="lblPdng"></asp:Label>
                                        <telerik:RadTextBox runat="server" ID="txtfname" Width="140px" Height="25px" EmptyMessage="First Name and Middle Intial"></telerik:RadTextBox>
                                        <asp:Label ID="Label3" runat="server" Text="Employee ID:" Width="100px" CssClass="lblPdng"></asp:Label>
                                        <telerik:RadTextBox runat="server" ID="txteid" Width="140px" Height="25px" EmptyMessage="Employee ID"></telerik:RadTextBox>
                                       
                                        <telerik:RadButton runat="server" ID="btnSearch" Text="Search" CssClass="submitButton" OnClientClicking="OnClientClicking" Width="140px" Style="float: right; background-color: lightgray; margin-right: 20px;" OnClick="btnSearch_Click"></telerik:RadButton>
                                        <telerik:RadDatePicker ID="RadDatePicker1" Visible="false" Width="250px" runat="server" MinDate="1000/1/1" DateInput-Label="From Date:(MM/DD/YYYY)" AutoPostBack="true">
                                        </telerik:RadDatePicker>
                                        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator3" Display="Static" ControlToValidate="RadDatePicker1"
                                            ErrorMessage="Enter Valid  date!" ForeColor="Red"></asp:RequiredFieldValidator>
                                        <telerik:RadDatePicker ID="RadDatePicker2" Width="250px" Visible="false" runat="server" MinDate="1000/1/1" DateInput-Label="To Date:(MM/DD/YYYY)" AutoPostBack="true">
                                        </telerik:RadDatePicker>
                                        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator4" Display="Static" ControlToValidate="RadDatePicker2"
                                            ErrorMessage="Enter Valid  date!" ForeColor="Red"></asp:RequiredFieldValidator>
                                        <asp:CompareValidator ID="dateCompareValidator" runat="server" ControlToValidate="RadDatePicker2"
                                            ControlToCompare="RadDatePicker1" ForeColor="Red" Operator="GreaterThanEqual" Type="Date" ErrorMessage="The second date must be after the first one or equal.<br /><br />">
                                        </asp:CompareValidator>
                                        <asp:CheckBox ID="chkdate" runat="server" Checked="true" AutoPostBack="true" Text="All Dates" OnCheckedChanged="chkdate_CheckedChanged" />
                                        <br />
                                        <div>
                                            <telerik:RadGrid ID="rgdsearch" runat="server" Skin="Bootstrap" ShowStatusBar="true" AllowSorting="True" Width="98%"
                                                AutoGenerateColumns="false" HeaderStyle-Font-Size="Small" AllowPaging="true"
                                                OnPageIndexChanged="rgdsearch_PageIndexChanged" AllowCustomPaging="true" PageSize="50" EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true"
                                                OnSelectedIndexChanged="rgdsearch_SelectedIndexChanged" OnSortCommand="rgdsearch_SortCommand1" OnItemCommand="rgdsearch_ItemCommand1"
                                                OnEditCommand="rgdsearch_EditCommand" OnUpdateCommand="rgdsearch_UpdateCommand">
                                                <ClientSettings>
                                                    <Scrolling UseStaticHeaders="True" AllowScroll="true" SaveScrollPosition="true"></Scrolling>
                                                    <ClientEvents OnRowContextMenu="RowContextMenu2" />
                                                </ClientSettings>

                                          
                                            </telerik:RadGrid>
                                            <input type="hidden" id="radGridClickedRowIndex2" name="radGridClickedRowIndex2" />
                                            <telerik:RadContextMenu ID="RadMenu2" runat="server" OnItemClick="RadMenu2_ItemClick"
                                                EnableRoundedCorners="true" EnableShadows="true">
                                                <Items>
                                                    <telerik:RadMenuItem Text="View Details">
                                                    </telerik:RadMenuItem>
                                                    <telerik:RadMenuItem Text="Locate in Org Browser">
                                                    </telerik:RadMenuItem>
                                                    <telerik:RadMenuItem Text="Locate in Ppl Browser">
                                                    </telerik:RadMenuItem>
                                                </Items>
                                            </telerik:RadContextMenu>
                                            <br />
                                            <telerik:RadButton ID="btnprev" runat="server" Text="Prev" OnClick="btnprev_Click" Visible="false"></telerik:RadButton>
                                            <telerik:RadButton ID="btnnext" runat="server" Text="Next" OnClick="btnnext_Click" Visible="false"></telerik:RadButton>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="RadPageView_Import">
                        <div class="ingredients qsf-ib">
                            <div class="demo-containers">
                                <div class="demo-container wrapper">
                                    <div class="demo-container demo-content" style="font: normal 12px verdana;">
                                        <table width="100%">
                                            <tr>
                                                <td>&nbsp;
                                                </td>
                                                <td>
                                                    <div>
                                                        <br />
                                                        <%--<telerik:RadUpload ID="fileSelect" runat="server" MaxFileInputsCount="2" OverwriteExistingFiles="false"
                                ControlObjectsVisibility="RemoveButtons" Skin="Silk">
                            </telerik:RadUpload> --%>
                                                        <%-- <telerik:RadAsyncUpload runat="server" ID="fileSelect" ChunkSize="1048576" /> --%>

                                                        <asp:FileUpload ID="fileSelect" runat="server" />
                                                        <telerik:RadButton ID="btnimport" runat="server" Width="150px" Height="16px" CssClass="p" BackColor="#cccccc" Text="Import Employees" OnClick="btnimport_Click"></telerik:RadButton>
                                                        <br />
                                                        <br />
                                                        <telerik:RadButton ID="btnItemChoosen" runat="server" Width="180px" Height="16px" BackColor="#cccccc" CssClass="p" Text="Send to Items Chosen" OnClick="btnItemChoosen_Click"></telerik:RadButton>
                                                        <%-- <telerik:RadButton ID="btnsaveprogress" runat="server" Width="140px" Height="16px" BackColor="#cccccc" CssClass="p" Text="Save Progress" OnClick="btnsaveprogress_Click"></telerik:RadButton>--%>

                                                        <asp:Label ID="lblstatus" runat="server"></asp:Label>
                                                    </div>
                                                    <br />
                                                    <br />
                                                    <div>

                                                        <asp:HiddenField ID="hdnvalue" runat="server" />
                                                        <telerik:RadGrid ID="rgdimport1" runat="server" RenderMode="Auto"
                                                            Height="370px" ShowStatusBar="true" Width="95%" AutoGenerateColumns="false"
                                                            HeaderStyle-Font-Bold="true" Font-Italic="true" HeaderStyle-ForeColor="#cc6600" HeaderStyle-Height="9" HeaderStyle-BackColor="#CEECF5" AllowSorting="true" HeaderStyle-Font-Size="13px" OnItemDataBound="rgdimport1_ItemDataBound">
                                                            <PagerStyle />
                                                            <ClientSettings>
                                                                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true"></Scrolling>
                                                                 <Resizing AllowRowResize="True" />
                                                                 <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" EnableRealTimeResize="true" ClipCellContentOnResize="true" />
                                                            </ClientSettings>
                                                           
                                                        </telerik:RadGrid>

                                                       
                                                    </div>
                                                    <div class="disclaimer">
                                                        <%--<div class="backgrd">--%>
                                                        <telerik:RadWindow runat="server" ID="DetailsWindow1"
                                                            RestrictionZoneID="PopupWindowZone" Modal="true" DestroyOnClose="false"
                                                            Height="600px" Width="950px">
                                                            <ContentTemplate>
                                                                <telerik:RadWindowManager runat="server" ID="RadWindowManager2"></telerik:RadWindowManager>
                                                                <div class="sdm-details-window-main">
                                                                    <telerik:RadGrid ID="rgdimport2" runat="server"
                                                                        Height="450px" ShowStatusBar="true" Width="850px" AutoGenerateColumns="false"
                                                                        HeaderStyle-Font-Bold="true" AllowSorting="true" HeaderStyle-ForeColor="#cc6600" HeaderStyle-Height="9" HeaderStyle-BackColor="#CEECF5" OnItemDataBound="rgdimport2_ItemDataBound">
                                                                        <PagerStyle Mode="NumericPages" />
                                                                        <ClientSettings>
                                                                            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true"></Scrolling>
                                                                        </ClientSettings>
                                                                       
                                                                    </telerik:RadGrid>
                                                                   
                                                                </div>
                                                                <br />
                                                                <br />
                                                                </div>
                                                        </div>
                                                     
                                                            </ContentTemplate>
                                                        </telerik:RadWindow>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="RadPageView_ItemChoosen">
                        <div class="ingredients qsf-ib">
                            <div class="demo-containers">
                                <div class="demo-container wrapper">
                                    <div class="sdm-items-chosen-section">
                                        <%-- <telerik:RadAjaxPanel ID="RadAjaxPanel3" runat="server" LoadingPanelID="RadAjaxLoadingPanel3" BorderStyle="None">--%>
                                        <table width="100%" style="table-layout: fixed;">
                                            <%--<tr>
                                    <td>
                                        <h2 class="fontcolr">Items Choose</h2>
                                    </td>
                                </tr>--%>
                                            <tr>
                                                <td>
                                                    <br />
                                                    <telerik:RadButton ID="btnDeleteall" runat="server" CssClass="submitButton" Width="140px" Style="float: left; background-color: lightgray; margin-left: 10px;" Text="Remove All Items" OnClick="btnDeleteall_Click"></telerik:RadButton>
                                                      <telerik:RadButton ID="btnsavesession2" runat="server" CssClass="submitButton" Width="140px" Style="float: left; background-color: lightgray; margin-left: 10px;" Text="SAVE SESSION" OnClick="btnsavesession2_Click"></telerik:RadButton>
                                                    <br />
                                                    <br />
                                                    <div class="sdm-items-chosen-grid-area">
                                                        <telerik:RadGrid ID="rgrdItemsChosen" runat="server"
                                                            Height="500px" ShowStatusBar="true" AllowSorting="True" Width="95%" AutoGenerateColumns="false" HeaderStyle-ForeColor="#cc6600" HeaderStyle-Height="9" HeaderStyle-BackColor="#CEECF5" HeaderStyle-Font-Size="13px">
                                                            <PagerStyle Mode="NumericPages" />
                                                           
                                                            <ClientSettings>
                                                                <Scrolling AllowScroll="true" SaveScrollPosition="true" ScrollHeight="100%" />
                                                                <ClientEvents OnRowContextMenu="RowContextMenu" />
                                                                <Selecting AllowRowSelect="true" />
                                                            </ClientSettings>
                                                        </telerik:RadGrid>
                                                        <input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />
                                                        <telerik:RadContextMenu ID="RadMenu1" runat="server" OnItemClick="RadMenu1_ItemClick"
                                                            EnableRoundedCorners="true" EnableShadows="true">
                                                            <Items>
                                                                <telerik:RadMenuItem Text="View">
                                                                </telerik:RadMenuItem>
                                                                <%--<telerik:RadMenuItem Text="Edit">
                                                        </telerik:RadMenuItem>--%>
                                                                <telerik:RadMenuItem Text="Delete">
                                                                </telerik:RadMenuItem>
                                                                <telerik:RadMenuItem Text="Locate Org Browser">
                                                                </telerik:RadMenuItem>
                                                                <telerik:RadMenuItem Text="Locate People Browser">
                                                                </telerik:RadMenuItem>
                                                            </Items>
                                                        </telerik:RadContextMenu>
                                                    </div>
                                                </td>
                                            </tr>
                                          
                                        </table>
                                      
                                    </div>
                                </div>
                            </div>
                        </div>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="rpvOrgBrowser" runat="server">
                        <div>
                            <table>
                              
                                <tr>
                                    <td>
                                        <asp:Panel ID="pnlOrgBrowser" runat="server">
                                            <telerik:RadTreeView ID="rtvwOrgBrowser" Skin="Default" runat="server" Font-Size="Small" OnClientContextMenuShowing="onClientContextMenuShowingorg" OnClientContextMenuItemClicking="onClientContextMenuItemClickingorg"
                                                Height="470px" Width="800px" CheckBoxes="true" OnNodeCheck="rtvwOrgBrowser_NodeCheck" OnNodeExpand="rtvwOrgBrowser_Expand" OnContextMenuItemClick="rtvwOrgBrowser_ContextMenuItemClick">
                                                <%--OnNodeCollapse="rtvwOrgBrowser_NodeCollapse" OnNodeClick="rtvwOrgBrowser_NodeClick"--%>
                                                <ContextMenus>
                                                   
                                                            <telerik:RadMenuItem Value="Locate in People browser" Text="Locate in ppl browser" Enabled="true"></telerik:RadMenuItem>
                                                          
                                                        </Items>
                                                    </telerik:RadTreeViewContextMenu>
                                                </ContextMenus>
                                            </telerik:RadTreeView>
                                        </asp:Panel>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </telerik:RadPageView>
                    <telerik:RadPageView ID="rpvPeopleBrowser" runat="server">
                        <div>
                            <table>
                              
                                <tr>
                                    <td>
                                        <asp:Panel ID="pnlPeopleBrowser" HorizontalAlign="Justify" runat="server" CssClass="sdm-browser-treeview">
                                            <telerik:RadTreeView ID="rtvwPeopleBrowser" Skin="Default" runat="server" Font-Size="Small" OnClientContextMenuShowing="onClientContextMenuShowingpeople" OnClientContextMenuItemClicking="onClientContextMenuItemClickingpeople" Height="500px" Width="800px" CheckBoxes="true" OnNodeCheck="rtvwPeopleBrowser_NodeCheck" OnNodeExpand="rtvwPeopleBrowser_NodeExpanded" OnContextMenuItemClick="rtvwPeopleBrowser_ContextMenuItemClick">
                                                <ContextMenus>
                                                    <telerik:RadTreeViewContextMenu ID="PeopleBrowserMainContextMenu" runat="server">
                                                        <Items>
                                                           
                                                            <telerik:RadMenuItem Value="Locate in Organizational Browser" Text="Locate in org Browser" Enabled="true"></telerik:RadMenuItem>
                                                        </Items>
                                                    </telerik:RadTreeViewContextMenu>
                                                </ContextMenus>
                                            </telerik:RadTreeView>
                                        </asp:Panel>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </telerik:RadPageView>
                </telerik:RadMultiPage>
                <telerik:RadWindowManager runat="server" ID="RadWindowManager1">
                    <Windows>

                        <%--<telerik:RadAjaxPanel ID="RadAjaxPanel5" runat="server" LoadingPanelID="RadAjaxLoadingPanel5" BorderStyle="None">--%>
                        <telerik:RadWindow runat="server" ID="DetailsWindow" Skin="Windows7" AutoSize="True" EnableShadow="True" Opacity="100"
                            RestrictionZoneID="PopupWindowZone" Modal="true" DestroyOnClose="true"
                            Height="390px" Width="00px">
                            <ContentTemplate>
                               
                                  
                                </div>
                            </ContentTemplate>
                        </telerik:RadWindow>
                        <%--</telerik:RadAjaxPanel>--%>
                    </Windows>
                </telerik:RadWindowManager>
            </div>

        </form>
    </body>
    </html>

    Regards

    P. Srihari

  10. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 11 Sep 2015 Link to this post

    Hello srihari,

    In order to achieve the desired functionality, you should add an AjaxSetting, in order to specify that the TabStrip and the MultiPage should be updated by the TreeView control in question. In addition, you should use the previously provided logic for navigation, but this time, using the ContextMenuItemClick event handler of the RadTreeView.


    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. srihari
    srihari avatar
    8 posts
    Member since:
    Jul 2015

    Posted 11 Sep 2015 in reply to Nencho Link to this post

    HI Nencho,

    Thanks for your reply. I tried that functionality of add an AjaxSetting, in order to specify that the TabStrip and the MultiPage should be updated but there is problem i facing upload file functionality ,save the griddata files and radtab clicking functionality.

    Regards

    P. srihari

  12. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 16 Sep 2015 Link to this post

    Hello Srihari,

    I am afraid that I was unable to replicate the last described issues locally. This is why, I would suggest you to submit a support ticket, along with a simplified runnable sample attached, so we could replicate locally the described issue and troubleshoot them for you.

    Regards,
    Nencho
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017