What action will prompt the event to export all data as a CSV file?

After exploring various suggestions on stackoverflow related to my question, I have not been successful.

My current challenge involves implementing server-side pagination in UI-GRID. I am specifically struggling with exporting all data as a CSV file.

Due to the size of my data, I am displaying only 25 records upon initial loading. As the user navigates through pages, a query is submitted to retrieve the next 25 records from the database.

Is there an event that can be triggered to export all data as a CSV file? This would enable me to interact with the controller and fetch the complete dataset.

https://i.sstatic.net/5HKWk.jpg

Here is a snippet of code related to pagination:

gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) {
    paginationOptions.pageNumber = newPage;
    paginationOptions.pageSize = pageSize;

      CommonService.getStudents("../login/loadValues",
                paginationOptions)
            .then(function(data) {
                $scope.ListOption.data = data;
                $scope.ListOption.totalItems = data[0].count;
            });
        });

I am seeking a similar event trigger mechanism for exporting all data as CSV. Any suggestions or insights would be greatly appreciated.

javascriptangularjsangular-ui-grid

Answer №1

Stumbled upon a solution, albeit partially.

$scope.ListOption.exporterAllDataFn=function(){
//initiating service call
 CommonService.getStudents("../login/loadValues",
                paginationOptions)
            .then(function(data) {
                $scope.ListOption.data = data;
                $scope.ListOption.totalItems = data[0].count;
            });
}

Upon clicking "export all data as csv", the function is being triggered twice.

Observation: This anomaly occurs only during the initial page load. Subsequent clicks result in the function being executed once.

Could anyone shed some light on this peculiar behavior?

Answer №2

After obtaining all the necessary data, switch to external sorting/pagination being disabled

exporterAllDataFn: () => {

                filter.pageSize = this.gridOptions.totalItems;
                filter.pageNumber = 1;

                return getStuff()
                          .then((allData: any) => {
                              this.gridApi.grid.options.useExternalPagination = false;
                              this.gridApi.grid.options.useExternalSorting = false;
                              this.gridOptions.data = allData.items;
                              this.gridOptions.totalItems = allData.totalNumber;
                              return allData.items;
                          });
},
this.gridApi.core.on.sortChanged(this.$scope, (grid, sortColumns) => {
                if (this.gridApi.grid.options.useExternalSorting) {
                    this.sortDirection = sortColumns[0] ? sortColumns[0].sort.direction === "asc" ? 0 : 1 : 0;
                    this.sortColumn = sortColumns[0] ? sortColumns[0].colDef.databaseField : null;
                    getStuff()
                }
});

this.gridApi.pagination.on.paginationChanged(this.$scope, (newPage, pageSize) => {
            if (this.gridApi.grid.options.useExternalPagination) {
                this.paginationOptions.pageNumber = newPage;
                this.paginationOptions.pageSize  = pageSize;
                getStuff()
            }

});

For further details, refer to

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

execute javascript code found in the html document

Currently, I have a bash script that utilizes curl to download a page. Then, it uses grep and sed to extract javascript within the html block to a file. Following this, I use node to evaluate and leverage the downloaded javascript. Here is an example: cur ...

javascripthtmlnode.jsbashsed

An unexpected error occurred in the Angular unit and integration tests, throwing off the script

I seem to be facing a recurring issue while running unit/integration tests for my Angular project using Karma. The tests have a 50:50 success/failure rate, working fine on my machine but failing consistently on our build server, making the process quite un ...

javascriptangularjasminekarma-jasminekarma-runner

What could be the reason behind the issue of my HTML draggable feature not functioning properly on touch

I've set up a draggable div with headers and p tags, but I'm encountering an issue when trying to run it on a touch screen. The div tag isn't draggable in this scenario. Can anyone suggest the best solution for making this page touch screen ...

javascriptjqueryhtml

Display Angular errors specifically when the input field is filled out and contains invalid data

I need help with toggling an error area on my form so that it only appears once there is input. It seems unnecessary for errors to show up if the user hasn't even started typing. <form name="registerForm"> <input type="email" name="email" ...

javascriptangularjs

PHP Notification: Attempting to access a property of an invalid type object

I am currently utilizing the Factory in AngularJS and here is the script I am using: app.factory('GetCountryService', function ($http, $q) { return { getCountry: function(str) { // The $http API is based on th ...

phpangularjsjsonsyntax-errornotice

``Implementing a method to save the output of an asynchronous request in a global variable for future manipulation

It's been a week and I still can't figure this out. Being new to front-end development, I'm struggling with storing the response from subscribe in a global variable for future use. ngOnInit(): void { this.http.get<APIResponse>('ur ...

javascriptangulartypescript

Utilizing PHP to create an interactive website

As a novice PHP developer, I took to Google in search of tutorials on creating dynamic PHP websites. What I found was that many tutorials used the $_GET variable to manipulate URLs and make them appear like this: example.com/?page=home example.com/?page= ...

phpjavascripthtmlcss

The functionality to disable the submit button for unchecked radio buttons is not functioning properly

I am currently working on a form where I need to disable the submit button until all fields are filled out. Everything is functioning properly for other field types, EXCEPT FOR RADIO BUTTONS. Even when we do not select a radio option, the Submit button s ...

javascriptjqueryhtmlvalidationdisabled-input

Recording JavaScript Cookie Visit Counts and Tracking Last Login Dates

I am a beginner in JavaScript and cookies, and I am attempting to create a cookie that can show the number of times someone has visited a website, the date of their last visit, and the expiration date of the cookie. Initially, I tried modifying code from ...

javascriptcookiesvisitor-pattern

In an effort to bring some flair to my React Hangman App, I am working on animating a collection

Challenge In my Hangman App, I am attempting to implement letter animations using react-spring. I want the letters from an array to fade in when loaded and fade out when removed by clicking on them. However, my previous attempts have resulted in laggy per ...

javascriptarraysreactjsanimationreact-spring

Unable to send multiple cookies using custom headers in Next.js configuration

I am using custom headers to set the cookie in my next.config.js file. The refresh token is successfully set, but for some reason the second token is not being recognized. key: 'Set-Cookie', value: `RefreshTokenKey = " ...

javascriptcookiesnext.jshttp-headers

Exploring nested components traversal in React

In my project, I have created a product component that displays the products' name, price, and description. const Product = (props) =>{ return( <div> <p>Price: {props.price} </p> <p>Name: ...

javascriptarraysreactjs

What does ngModel look like without the use of square brackets and parenthesis?

Can you explain the usage of ngModel without brackets and parentheses in Angular? <input name="name" ngModel> I am familiar with [ngModel] for one-way binding and [(ngModel)] for two-way binding, but I am unsure what it means when ngModel ...

javascriptangulartypescript

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

javascriptcssreactjsvisual-studio-codestyled-components

React useEffect not working when using the default state

I'm currently facing an issue where setting the page to its default value from the refresh function does not trigger the useEffect hook on the first attempt. However, if I run the refresh function for the second time, it works fine. Interestingly, thi ...

javascriptnode.jsreactjsreact-hooks

Clicking on an item will now automatically remove it from the selection, rather than requiring you to click on a specific

Is there a way to customize the design of select2 items in a multi-select box so that users can easily remove selected items by clicking anywhere on the button, rather than just the small "cross" icon on the left-hand side? Refer to the image; instead of n ...

javascriptjqueryjquery-select2

PHP working with Ajax, receiving a status of 200 but still showing a readyState of 0

Snippet: function handleXMLHttpRequest() { var xhr; try { xhr = new XMLHttpRequest(); } catch (e) { try { alert("Error occurred"); xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ x ...

javascriptphpajax

The variable in Vue.js is failing to update, resulting in a "variable is not defined" error

I've been attempting to display the updated value of the totalQuestions variable in the HTML, but I keep encountering the following error. Can someone point out where I went wrong? https://i.sstatic.net/mEEMS.jpg HTML <label><span class="r ...

javascripthtmlvue.jsvuejs2

Purge all previous page visits within a specified domain upon user logout using JavaScript

On my website, abc.xyz.com, an individual named A logs in from the login page and is directed to the home page. Then, when user A clicks on the profile button, they are taken to a page displaying their information. User A logs out, prompting the site to ...

javascriptjquery

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss