After following a tutorial on exporting Kendo Grid Data, I am now attempting to export all data, not just the data shown on the page. How can I accomplish this task?
I attempted to change the page size before retrieving the data:
grid.dataSource.pageSize(grid.dataSource.total());
However, this caused my current grid to refresh with the new pageSize. Is there a way to query the Kendo datasource without refreshing the grid?
Thank you.
A more efficient approach is to create an Excel file using the actual data, rather than relying on the dataSource.
1] To implement this, add the following code snippet to your HTML page:
$('#export').click(function () {
var title = "EmployeeData";
var id = guid();
var filter = $("#grid").data("kendoGrid").dataSource._filter;
var data = {
filter: filter,
title: title,
guid: id
};
$.ajax({
url: '/Employee/Export',
type: "POST",
dataType: 'json',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
success: function (result) {
window.location = kendo.format("{0}?title={1}&guid={2}", '/Employee/GetGeneratedExcel', title, id);
}
});
});
2]
Create a new method called "Export" in the controller:
[HttpPost]
public JsonResult Export(KendoGridFilter filter, string guid)
{
// Implementation details for exporting to Excel
}
3]
Additionally, add the method "GetGeneratedExcel" to the controller:
[HttpGet]
public FileResult GetGeneratedExcel(string title, string guid)
{
// Retrieve and serve the generated Excel file
}
For further reference, check out the project repository on GitHub.
Explore a live example of this functionality at this link, where you can export Employees to Excel with potential modifications to meet specific requirements.
Although this question is quite old, here is a solution:
If you want to export all pages, you can do so by using the excel.allPages property:
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
allPages: true
},
// ....
});
Check out this example
Grid Toolbar Customization
..
.ToolBar(toolbar =>
{
toolbar.Template(
@<text>
@Html.Kendo().Button().Name("grid-export").HtmlAttributes(new { type = "button", data_url = @Url.Action("Export") }).Content("Export").Events(ev => ev.Click("exportGrid"))
</text>);
})
..
Data Export Endpoint Functionality
public FileResult Export([DataSourceRequest]DataSourceRequest request)
{
DemoEntities database = new DemoEntities();
byte[] excelData = WriteExcel(database.Table.ToDataSourceResult(request).Data, new string[] { "Id", "Name" });
return File(excelData,
"application/vnd.ms-excel",
"GridExcelExport.xls");
}
Javascript Method for Remote Grid Export URL Generation
function exportGrid() {
var toolbar = $(this.element);
var gridSelector = toolbar.closest(".k-grid");
var grid = $(gridSelector).data("kendoGrid");
var url = toolbar.data("url");
var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
.options.parameterMap({
page: grid.dataSource.page(),
sort: grid.dataSource.sort(),
filter: grid.dataSource.filter()
});
url = url + "?" + $.param({
"page": requestObject.page || '~',
"sort": requestObject.sort || '~',
"pageSize": grid.dataSource.pageSize(),
"filter": requestObject.filter || '~',
});
window.open(url, '_blank');
}
Explore the Complete Solution in my sample project on Github
This project allows you to export the grid server-side with its current configurations (sorting, filtering, paging) using a helpful function.
Looking to retrieve data from an API and store it in an array. When I assign the value directly using '=', the desired data is displayed. However, when attempting to add elements using 'push', they are added as another array. Below is ...
Currently, I am facing an issue with making a call to an ASPX URL as the return keeps coming back as a failure. I have successfully used this URL in previous programming projects, but this is my first time utilizing it with Ext JS. Despite researching dif ...
Looking to create a functional component in VueJS with a template as a single-file component? Utilizing x-templates means your component will be stored in a .html file. Want to transform the given component into a functional component? <!-- my_compone ...
Can someone guide me on how to implement an interface in typescript with callback function? interface LoginCallback{ Error: boolean, UserInfo: { Id: string, OrganizationId: string } } interface IntegrationInterface { Ini ...
Currently, I am working with 2 jQuery UI sortable lists which can be found at http://jqueryui.com/demos/sortable/#connect-lists. The process involves dragging items from list A (catalog) to list B (basket). I have a specific requirement where I need the ...
Can anyone help me figure out the error in my React component code below? import React, { Component } from 'react'; import { Input} from 'antd'; import Form from '../../components/uielements/form'; import Button from '.. ...
I am currently working on a file that generates a dynamic table based on the records in a database. Each row in the table has a button to delete that particular row. The code I have written works perfectly for the first row, but it fails to detect the row ...
Currently, I am delving into Express and experimenting with middleware. My goal is to initiate a file download when accessing the root route while sending out a "Hello World" message. My attempts so far have been: function initiateDownload(req, res, next) ...
Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...
Currently, I am utilizing Angular and encountering three specific requirements. Initially, there is an input box where I aim to display a placeholder upon pageload as 'TEXT1'. This placeholder should then toggle on mouse hover to display 'TE ...
One key aspect of an imperative program is the emphasis on state and its modifications. When it comes to ReactJs, there is a push for more functional programming styles, such as using purity and higher-order functions. I'm curious to explore whether ...
Running an apache server with PHP 5.4. I've set up a form that sends an asynchronous request to the server and stops any previous requests if the button is clicked again before the current request is completed. If I repeatedly click the button quick ...
GOAL: I want to freeze the header, freeze the first column, and be able to collapse rows multiple times. CURRENT PROGRESS: I have achieved freezing the header, first column, but can only collapse rows once. MY CODE SNIPPET: </head> <body> &l ...
Currently, using JavaScript I have a plain text containing data that is displayed within my form tags. Everything is functioning correctly, but now I need to update the values inside the code of my form tags in order for the changes to also be reflected in ...
Currently, I am delving into the complexities of linear algebra and experimenting with crafting a simple program that incorporates fundamental linear transformations (rotating, scaling, translating). Behold, here is a fully functional example: https://cod ...
I'm facing an issue with my web page that has a bootstrap modal which pops up when a button is clicked. I've added a print media query to print the content of the modal, but it's causing a problem. When I include the media query in the CSS, ...
Exploring the integration of React with Material UI Version 6 Library, I am looking to personalize the appearance of the rendered Input. In the previous version, Version 5, there was a property called "inputProp" for DateTimePicker. However, this feature ...
I'm trying to implement a Parallax scrolling effect on my Bootstrap 4 slider. However, every time the slider switches to the next image, the image needs to readjust itself into place. How can I avoid this? .customOverlayText { position: absolute; ...
Looking to create a curved BoxGeometry in Three.Js, but unsure of how to achieve it. The end result should resemble the image shown here: enter image description here My current code is as follows, however, it does not produce the desired curved effect. ...
Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...