Steps to Trigger a Client-Side JavaScript Function Upon Closing a RadWindow

On my aspx page1, I have a button that opens a radwindow implemented on aspx page2 when clicked. Within the radwindow, I input some data and click save which triggers a server-side method before closing the radwindow. Following the closure of the radwindow, I need to execute a method on page1. How can this be accomplished?

Below is the code snippet used to open the radwindow from page1:

      function btnAddNewImage_click() {
        debugger;
        var hdn_PatientId = document.getElementById("<%=hdn_PatientId.ClientID %>").value;
        var selectedEncounterId = document.getElementById("<%=hdn_EncounterId.ClientID %>").value;
        var oWnd = radopen("../Admin/Encounter/PopUps/UploadImages.aspx?EncounterId=" + selectedEncounterId + "&PatientId=" + hdn_PatientId, "rwDialog");
        oWnd.SetTitle("Upload Image");
        oWnd.SetSize(600, 350);
        oWnd.Center();
        //oWnd.add_close("refreshGrid");
        oWnd.OnClientClose = "refreshGrid"; // Not working
        return false;

    }

Function that should trigger after the radwindow is closed:

function refreshGrid(sender, eventArgs) {
        debugger;
        alert("in refreshgrid");
        var selectedEncounterId = document.getElementById("<%=hdn_EncounterId.ClientID %>").value;
        loadImagesProgressNotes(selectedEncounterId, "Current");
    }

Code snippet responsible for closing the radwindow in page2:

RadScriptManager.RegisterStartupScript(this, this.GetType(), "Alert", "javascript:returnToParent();", true);     
function returnToParent() {
            debugger;
            //get a reference to the current RadWindow               
            var oWnd = GetRadWindow();                
            oWnd.close();


        }

Answer №1

After attempting to test your code, I encountered difficulty in doing so. It seems that the radwindow is typically declared statically, rather than dynamically as you are attempting.

<telerik:RadWindow RenderMode="Lightweight" runat="server" 
  ID="RadWindow1" OnClientClose="OnClientCloseHandler"
  NavigateUrl="dialog-page.aspx" VisibleOnPageLoad="true">   
</telerik:RadWindow>

I suggest referring to the documentation for more examples and guidance.

See a Demonstration of OnClientClose here:

Access the Documentation of OnClientClose here:

http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/events/onclientclose

Answer №2

Learn how to use the client-side API of RadWindow by adding an OnClientClose handler: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object#methods-for-modifying-client-side-event-handlers-dynamically.

var oWnd = radopen();
oWnd.add_close(refreshGrid);

Ensure that the refreshGrid function is within the same context (page) as the RadWindow being opened. If they are not, refer to this code library project for guidance on connecting them: http://www.telerik.com/support/code-library/creating-parent-child-relationships-between-radwindows-and-passing-data-between-them

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

Transferring data from a promise to a variable

Attempting to retrieve a value from a Promise and store it in a local variable within a function resulted in the Promise being resolved last. The following function, which will be triggered in Vue.js mounted(): getPriceForYesterday(){ let yesterdayUS ...

Unable to access the symbol located directly under the cursor

After recently transitioning to vs2019, we encountered an issue with the F12/"Go To Definition" feature. Whenever attempting to use it, we receive an error message stating "Cannot navigate to the symbol under the caret". Interestingly, F12 works perfectly ...

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

The functionality of ClickMarker is malfunctioning in the XY Amcharts

Recently, I encountered a situation where I had to incorporate custom legends in XY Amcharts. After managing to implement them successfully, I came across an issue. Despite adding event listeners to the legends, the associated function failed to trigger. ...

What is the solution to the error message "Specified cast is not valid" that I am encountering?

Trying to retrieve the ID of a field defined as SMALLINT by using the OUTPUT clause in an insert statement, along with the DataContext.ExecuteQuery method (or any other appropriate DataContext method). Here is my attempt: string query = $@" ...

What is Reddit's approach to creating a login/signup modal?

Attempting to create a modal similar to the one on Reddit, I am puzzled about how they achieve the following: Scroll is disabled when the modal is open Scroll is enabled when the window is smaller than the modal I have experimented with various CSS ...

Retrieving data from an array using an AJAX request function

I've been attempting to utilize an AJAX call to update a series of image elements on a webpage. The array containing the elements to update is populated with URLs fetched from a PHP page via AJAX. The issue I'm encountering with the code provide ...

When incorporating a JS React component in TypeScript, an error may occur stating that the JSX element type 'MyComponent' is not a valid constructor function for JSX elements

Currently, I am dealing with a JavaScript legacy project that utilizes the React framework. Within this project, there are React components defined which I wish to reuse in a completely different TypeScript React project. The JavaScript React component is ...

What is the best way to integrate webpack into an express application?

Every time I attempt to utilize webpack with a basic express server, I am bombarded with numerous errors: express.js 'use strict'; var express = require('express'); var path = require('path'); var url = require('url&apos ...

I've been attempting to load an EJS file, but the page has been loading for what seems like an eternity

app.get('/all-datas', (req, res) => { data.find({}, function (err, names) { res.render('EJS.ejs', { nameList: Uname }) }) }) I'm trying to incorporate this code into my JavaScript application. However, whene ...

How can one change the color of movable tiles to red while keeping the rest of the tiles in their original state in a puzzle game?

In this section of our code, the function moveTile is responsible for moving a tile. How can I modify it so that the hover color changes to red? function moveTile(identity) { var emptyId = findEmptySpace(); if (isEmptyNeighbor(identity)) { document.ge ...

Whenever I click the button, I consistently receive the same value and then pass it on to the next page using a session within the repeater control

Creating a dynamic product display on my website's homepage involves using a repeater and eval to pull products from the database. Here is the code snippet: <div class="col-md-12 grid-gallery overflow-hidden"> <div class="tab-content"> ...

Setting default values through checkboxes just got easier - here's how!

I'm trying to figure out how to use a Map in order to save the status of my checkboxes. The component I am currently working on consists of 3 different sections, each containing checkboxes. I want to establish default values for these checkboxes using ...

Tips for choosing this element (using Python)

As I work on getting a selector for the action-button class using Selenium in Python, I am utilizing a Javascript Document QuerySelector. This involves executing some js code via the WebDriver, as demonstrated below: printBtnlast = driver.execute_scrip ...

Improving Performance in JQuery to Prevent Page Flickering

After experimenting with different code variations in the Masterpage to prevent page flickering when navigating, I found that while removing certain lines reduced flickering, it also resulted in double page reloads or blank pages. What would be the most ...

Retrieving data from async action creator in React JS

Recently diving into the world of javascript and React, I am currently developing an application that allows users to upload profile photos. After conducting some research, I found a solution for uploading files to Cloudinary using Superagent which worked ...

Exploring the functionality of a personalized hook using the useSelector method

I have developed a custom hook and I am in the process of testing it independently. However, I am encountering an issue where I need to wrap the hook inside a Provider to proceed further. The error message I am getting is displayed below: Error: could not ...

Tips on avoiding the conversion of the ✳ symbol into an emoji

My issue lies in my ✳ (Eight-Spoked Asterisk) symbol being converted to an emoji on iOS/android devices. Find more about the Eight-Spoked Asterisk Emoji here. Could someone guide me on how to prevent the normal symbol ✳ from being transformed into an ...

I have implemented a code snippet that verifies if the incoming week aligns with the existing week, triggering an alert accordingly

One of the challenges I faced was checking if a newly created week matched with an existing one, and then displaying an alert. Here's how I approached it: $scope.addWeek = function(type,newWeek,index){ var c = $scope.weekList.length + 1; var ...

Utilize OpenLayer3 to showcase Markers and Popups on your map

I am currently exploring how to show markers/popups on an osm map using openlayers3. While I have come across some examples on the ol3 webpage, I'm interested in finding more examples for coding markers/popups with javascript or jquery, similar to som ...