Telerik 嵌套视图答案

【问题标题】：Telerik Nested viewTelerik 嵌套视图
【发布时间】：2017-01-24 18:35:58
【问题描述】：

下面是我的 Telerik 嵌套网格的代码：

我在使用 javascript“查找”控件（PreviousDate 和 DateofBirth）时遇到问题。

<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Hierarchy.NestedViewTemplate.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>


<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>   



    <script type="text/javascript" language="javascript">


function showPreviousDate(sender, eventArgs) {

var Grid = $find("<%= RadGrid1.ClientID %>");

 var MasterTable = Grid.get_masterTableView.get_dataItems();

 for (var i = 0; i < MasterTable.get_dataItems().length; i++) {

var row = MasterTable.get_dataItems()[i];

}

}

 </script>

<body>

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

   <ajaxToolkit:TabContainer ID="tabPrevious" runat="server"   
   ActiveTabIndex="0"/>

   <ajaxToolkit:TabPanel runat="server" HeaderText="Previous records" 

   ID="tabPrevious"/>

   <ContentTemplate>

    <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" 

     OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"

    runat="server" AutoGenerateColumns="False" AllowSorting="True" 

    AllowMultiRowSelection="False"

    AllowPaging="True" PageSize="5" GridLines="None" ShowGroupPanel="true"

    OnItemCreated="RadGrid1_ItemCreated"

    OnItemCommand="RadGrid1_ItemCommand">

    <PagerStyle Mode="NumericPages"></PagerStyle>

    <MasterTableView DataSourceID="SqlDataSource1" GroupLoadMode="Server">

      <NestedViewTemplate>

        <asp:Panel ID="Panel1" runat="server" CssClass="viewWrap" 

        Visible="false">                                   

          <table runat="server" style="width: 100%;">

            <tr>

               <td align="center">Previous Records </td>

            </tr>



            <tr>

              <td align="center">

        <table>

             <tr>

               <td style="padding-right: 20px">

                <asp:Label ID="labelDOb" runat="server" Text="Date of Birth" Width="100px"></asp:Label>

               <telerik:RadDatePicker SharedCalendarID="SharedCalendar"         
     ShowPopupOnFocus="true" Enabled="false" RenderMode="Lightweight"  
      ID="DateofBirth" runat="server">                                                          

               </telerik:RadDatePicker>

              </td>


               <td style="padding-right: 20px">


                   <asp:Label ID="labelDate" runat="server" Text="Previous Date" Width="100px">

                 </asp:Label>

                  <telerik:RadDatePicker SharedCalendarID="SharedCalendar" ShowPopupOnFocus="true" 

              Enabled="false" RenderMode="Lightweight" ID="PreviousDate" runat="server">

          <ClientEvents OnDateSelected="showPreviousDate" />

                  </telerik:RadDatePicker>

              </td>

            </tr>   

        </table>

      </td>

     </tr>

  </table>

</asp:Panel>

</NestedViewTemplate>  

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

</html>

提前致谢。

【问题讨论】：

标签： javascript asp.net telerik

【解决方案1】：

在 Telerik 控件中使用 JavaScript 从来都不是很好，但是您应该能够使用类并通过类似这样的方式导航到同一行中的另一个控件。请注意，这未经测试

function showPreviousDate(sender, eventArgs) {

var thisID = sender.get_id();
var dateOfBirthControl, previousDateControl

if (thisID.indexOf("Birth") > -1){
    //sender is the date of birth picker, and we have to find the other one
    dateOfBirthControl = sender;
    previousDateControl = $find($("#" + sender.get_id).parent().next().find(".PrevDateControl").prop("id"));
}
else {
    //sender is the previousDateControl picker, and we have to find the other
    previousDateControl = sender;
    dateOfBirthControl = $find($("#" + sender.get_id).parent().prev().find(".BirthDateControl").prop("id"));
}

}

如果您要尝试这个，请确保将 CssClasses 添加到您的 DatePickers 中

【讨论】：

您好，感谢分享。我遇到了一个错误对象不支持属性或方法'prop'。
我想我使用 jQuery 不够擅长它。试试更新的版本。无论如何，这更多的是让您了解如何去做。
很高兴我能帮上忙！如果您认为这是答案，请标记为这样。祝你好运！