Step-by-step guide for implementing the Export Pdf feature for a Customized Edit Form in OrgChartJS by Balkan

I recently created a personalized Edit form using OrgChartJS by Balkan, but now I'm facing difficulties in exporting that edit form to PDF. Can anyone provide guidance or assistance?

Here is a snippet from my JS file:

var chart;
    fetch('url', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ rootId: rootNodeId })
    })
        .then(response => response.json())
    // Rest of the script continues...

This is an excerpt from my ASPX File:

<div id="editForm" style="
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        // Rest of the HTML code follows...

The export PDF option was previously available in default edit forms, but I am currently struggling to integrate this feature with my customized edit form (which includes HTML, CSS, and images). Any insights or suggestions on how to achieve this would be greatly appreciated.

javascriptasp.netexport-to-pdforgchart

Answer №1

If you want to achieve this functionality, follow these steps: Insert the following code snippet into your HTML form:

<a href="#">Save as PDF</a>

Next, include this JavaScript code:

document.getElementById('editForm').addEventListener('click', function (e) {
e.preventDefault();
chart.exportPDFProfile({
    id: chart.editUI.nodeId,
});
chart.editUI.hide();

})

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

Tips for incorporating a favicon in a React application

Having trouble adding a favicon to my React application. I followed the instructions in this post, but it's not working for me. I placed the favicon.ico file inside the public folder where index.html resides. This is how my directory structure looks ...

javascriptreactjswebpackhtml-webpack-pluginwebpack-plugin

"Angular-chart is throwing an error with an undefined $scope.chart

I am having trouble creating a chart with an onClick event that can retrieve the label that was clicked. After searching, I found and modified a solution. Here is my code snippet: $scope.chart; $scope.onClick = function (points, evt) { console.log(po ...

javascriptangularjschartschart.jsangular-chart

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

javascripthtmljquerycss

Adjusting the Aspect Ratio of an Embedded YouTube Video

<!DOCTYPE HTML> <head> <style> body { overflow: hidden; margin:0; } </style> </head> <body> <iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&sh ...

javascriptjqueryhtmlcssyoutube

Troubleshooting Google Charts, AJAX, and PHP: Issue with JSON encoding leading to error message "Data for arrayToDataTable is not

My current project involves using PHP/PDO/MSSQL to pass data from a database to a Google Chart via AJAX in .js. I'm encountering an issue that seems to be related to encoding. I've been following a tutorial at which hardcodes the data into the ...

javascriptphpjqueryajaxreact-google-charts

Utilizing Jquery to pass two classes along

I am looking for assistance on how to pass multiple classes within if-else statements and jQuery. My goal is to have both divs and divs2 change when the next button is clicked. Can someone please provide guidance on achieving this? --code not mine-- ...

javascripthtmljquerycss

Uploading photos to Postgres through express/multer

Currently, I am using Postman to send images to a POST route through the Express library. However, when I retrieve the buffer of binary data, I am unable to process it accordingly. Will using body-parser resolve this issue? This is how I am uploading the ...

javascriptnode.jspostgresqlexpressmulter

JavaScript Indexed Array Names: Managing Arrays with Indices

I have a collection of arrays named "list0" through "list7" which have been explicitly defined. My goal is to include each of these arrays as elements in an existing array, creating a 2D array of these defined arrays. How can I reference each 'list&a ...

javascriptarraysnames

What is the most effective way to share data among components in React?

I recently delved into learning about react and find myself puzzled on how to pass data between two components. Presently, I have set up 2 functions in the following manner: First, there's topbar.tsx which displays information for the top bar, inclu ...

javascriptreactjstypescript

Retrieving the chosen option in Vue.js when the @change event occurs

I have a dropdown menu and I want to perform different actions depending on the selected option. I am using a separate vue.html and TypeScript file. Here is my code snippet: <select name="LeaveType" @change="onChange()" class="f ...

javascripthtmlvue.js

The issue with fancybox links not functioning properly within ajax content

I'm looking to constantly update a specific section on my website using ajax, jquery, and php. Upon the initial page load, a javascript function is triggered to display the content of that section. Subsequently, json is utilized to check for any new ...

javascriptjqueryajaxfancybox

Is there a more concise method in Vue to transmit data from the script section to the template section aside from utilizing a function?

My current code structure is as follows: <template> ..somecode {{showEditFlag}} </template> <script> export default{ data: function() { return { showEditFlag }; } } </script> Could it be simplified to something like this in ...

javascriptvue.jsecmascript-6

Steps for registering Ajax Control Toolkit in Global Assembly Cache (GAC)

Could somebody please share the steps to install the ajax control toolkit in GAC using visual studio 2008? Your help would be greatly appreciated. Thank you. ...

asp.netajaxgac

Uniform Fixed Width for Material UI Table Cells

Below is a Material UI Table with columns set to a fixed size of 205px each, and the table itself set to 100% width. However, when there isn't enough space available, the columns do not shrink according to the text inside them, remaining stuck at 205p ...

javascripthtmlcssreactjsmaterial-ui

Steps to prevent specific links from being clickable in React Native's webview component

In my React Native app, I am utilizing the react-native-webview component to display blog posts. The code I have implemented is straightforward, but my goal is to restrict the webview to only show content from the blog section of the website, preventing us ...

javascriptreact-nativewebview

What is the best way to insert objects into another array of objects at alternating positions?

I'm currently developing a React component and have a requirement to insert a new object at alternate positions within an array of objects. For example: arr1 = [{test: 1},{test: 2},{test: 3},{test: 4}] The expected output should look like this: arr ...

javascriptarraysnode.jsreactjsreact-redux

Sharing React components in projects

Two of my upcoming projects will require sharing components such as headers, footers, and inputs. To facilitate this, I have moved these shared components into a separate repository, which has been working well so far. In the common repository, I have set ...

javascriptreactjsnpm

utilizing mongoose populate for displaying the author

One of the features on my website allows users to add notices, and I want the page to display the author of each notice. const notices = await Notice.findById(id).populate('author'); When I access this route, I can successfully log the authors o ...

javascriptnode.jsexpressmongooseejs

Creating an automatic image carousel using a combination of Jquery, Javascript, and CSS

I have been working on creating a slider using jQuery and javascript, but I am facing some issues with the autoplay functionality and the next-previous buttons. This slider is intended for displaying images as a title indicates. Can anyone assist me with i ...

javascriptjqueryhtmlcss

Exploring diverse output values in console using JavaScript and jQuery

As someone new to javascript/jquery/html, I've been tasked with creating a small simulator using html and javascript. I have an array containing html ids and a function that updates input based on the state passed to it. The snippet of code looks li ...

javascriptjquery