Telerik Nested perspective

Here is the code snippet that I am currently working on, which involves a nested grid from Telerik:

I've encountered an issue with using JavaScript to locate and interact with controls named "PreviousDate" and "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>

Any insights or assistance would be greatly appreciated.

Answer №1

When using JavaScript in conjunction with Telerik controls, the process may not always be seamless. However, one potential solution involves utilizing classes to navigate to another control within the same row. Please keep in mind that the code provided below has not been tested:

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"));
}

}

If you decide to implement this solution, ensure that you include the necessary CssClasses for your DatePickers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

determining if two words are synonymous or not

For this task, you are required to develop a program that can determine if two words are synonymous. A synonym dictionary will be provided with pairs of corresponding words. Your program will then need to respond to queries regarding whether two given word ...

Locating Undiscovered Users within mongodb

I have created a post collection where each user who marks a post as read has their user ID added to an array within the post document. Now, I am attempting to identify which users have not read certain posts by utilizing the $nin function while iteratin ...

Aligning an object in ThreeJS to always face the camera, ensuring it is perfectly straight and flat

Reviewing this demo http://codepen.io/anon/pen/JdmMPW, I am working on creating a camera orbiting around a sphere with text labels/satellites (represented by the plane object) that should always face the camera. function render() { marker.lookAt(camera.p ...

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

What strategies can be employed to maintain reliable datetime management for a reservation system operating in diverse time zones?

Looking at the big picture: An interesting scenario arises when a hotel owner specifies a time frame for booking reservations at a restaurant (5pm - 10pm). Along with this information, there is also a timezone provided to ensure that dates are displayed i ...

Utilizing JSDoc annotations for type safety in VSCode with ESLint configuration for TypeScript declarations import

Is there a way to configure VSCode to perform syntax checking on .eslintrc.js and provide autocomplete functionality? I have managed to set up a structure for a JavaScript configuration file with a custom syntax for my application, but the same approach do ...

React Login Redirect

I am struggling to implement a redirect in my React project login. Despite researching online and finding solutions using routers, I have been unsuccessful in adding it to my code correctly. Here is my code - how can I effectively implement the router? Ap ...

Unable to access a hyperlink, the URL simply disregards any parameters

When I click an a tag in React, it doesn't take me to the specified href. Instead, it removes all parameters in the URL after the "?". For example, if I'm on http://localhost:6006/iframe.html?selectedKind=Survey&selectedStory=...etc, clicking ...

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

The background of the ACTK Modal Popup vanishes after multiple instances of scrolling up and down

The issue I'm facing is with the AJAX Control ToolKit Modal Popup's background (the blind curtain) disappearing after scrolling up and down several times. I have attempted to resolve this by applying various CSS styles, but unfortunately, none of ...

Resolving Cross-Origin Resource Sharing issues with AWS SDK (Lightsail API) and Vue.js

I'm currently working on a small vue.js application that utilizes aws-sdk to retrieve information about Lightsail instances. However, I keep encountering this issue. :8081/#/:1 Access to XMLHttpRequest at 'https://lightsail.us-west-2.amazonaws.c ...

Guide to displaying API data in HTML format

This university assignment involves working on a homework project where I need to utilize a public API in HTML. So far, I have successfully called the public API to display a list of radio channels in the left menu (without adding any click functionality). ...

Creating a dynamic gridview in asp.net and customizing its appearance

I'm currently working on a gridview that is connected to a SQL Server table. In the code-behind file (C#), I have written the following code: protected void Page_Load(object sender, EventArgs e) { SqlConnection con = new SqlConnection ...

Discovering the value of an object through its prototypes

Is it possible to create a function that can locate the value "5" within an object's prototype? What is the proper algorithm to achieve this? var rex = { "Name": "rex", "Age": 16, } te = { "to": 5, } rex.te = Object.create(te); function findValu ...

Navigating Redirects using axios in the Browser

Is there a way to work with redirects in axios to capture the redirected URL in the browser when making an API call? I am looking to retrieve the redirected URL through a GET request. ...

Ways to display spinner animations during image loading on Next.js?

Currently, I am attempting to implement a spinner display while images are loading on a Next.js website. To achieve this, I am utilizing the NextUI UI library. My website features several cards, and my goal is to showcase a spinner during the image loadin ...

Guide on dynamically generating checkboxes within cells of a table using ASP.NET and C#

Currently, I am utilizing asp.net with c# to dynamically create checkboxes from the code and then add them to my webpage. Below is the snippet of my c# code in the aspx.cs file: public String getSubjects() { SqlConnection conn = new DB_Connection().ge ...

Order of custom code and JQuery in ASP master page

Using an ASP master page to include all the Javascript and jQuery files has presented a challenge for me. Specifically, the jQuery function in OrderManagement.js $(".menu-item").click(function () { window.alert("some text"); }); fails to execute whe ...

Clicking on a DIV using jQuery, with anchor elements

I have a method for creating clickable divs that works well for me: <div class="clickable" url="http://google.com"> blah blah </div> Afterwards, I use the following jQuery code: $("div.clickable").click( function() { window.location ...

Tips on efficiently reusing a variable

As someone who is relatively new to Jquery and Javascript, I have been attempting to search for a solution to my question on this platform. However, it seems that the terminology I am using may not be accurate enough to yield relevant results. If there is ...