Find File Saver Es Examples and Templates
Use this online file-saver-es playground to view and fork file-saver-es example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!
Batch Update Request - DevExtreme Data Grid (forked)With the DevExtreme DataGrid, users can modify multiple records and submit all changes simultaneously (when editing.mode is set to "batch"). Batch editing allows you to optimize your app, address performance related issues, and deliver the best possible user experience across a variety of usage scenarios.
If data is stored on a server, our DataGrid sends multiple requests to save edited objects - one request per object (this is because most servers only process one edit operation at a time). If your server supports batch update, you can configure the DataGrid to save all changes with a single request.
To incorporate this functionality into your web app, implement the DataGrid's onSaving function. This function accepts an e object that contains fields used for batch update. The following is a summary of the steps you must follow to enable batch update:
Disable default save logic
Set the e.cancel field to true.
Send pending changes to the server
Pending changes are contained in the e.changes array. Ensure it is not empty and send the changes to the server.
Update data in the DataGrid
Once changes are saved, call the refresh(changesOnly) method.
Reset edit state
Use the cancelEditData() method to clear pending changes.
Overview - DevExtreme Data Grid (forked)The DataGrid allows you to export its contents to a PDF document.
To enable PDF export operations, import the jsPDF library and set the export.enabled property to true.
Call the exportDataGrid(options) method that belongs to the pdfExporter module. Specify at least two required properties:
jsPDFDocument
Specifies the jsPDF instance.
component
Specifies the DataGrid's instance.
To review implementation details, see the exportDataGrid(options) method call in onExporting handler. You can also set allowExportSelectedData to true to export only selected rows.
overview-devextreme-data-grid-forkedTo enable export in the DataGrid, reference or import the ExcelJS and FileSaver libraries. Set export.enabled to true.
Once the conditions above are met, use the exportDataGrid(options) method to export the DataGrid to an Excel workbook.
Review the onExporting handler to see the data export code. DataGrid is exported as is to a single worksheet. You can also set allowExportSelectedData to true to export only selected rows.
You can export DataGrid to CSV. Call the exportDataGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file.
Import DataGrid - DevExtreme Data Grid (forked)The customizeCell function allows you to modify cell data and value formatting in exported worksheets. You can access and change the following attributes:
Font properties
Cell background
Cell values
Text alignment
Formatting properties
The customizeCell function also allows you to identify row types. For example, this demo changes the background color and font weight for cells with the "group" rowType.
Jobs DemoThe filterPanel displays the combined filter in the bottom of the TreeList. This filter is stored in the filterValue property and consists of conditions that a user applied in the following UI elements: filter row, header filter, filterBuilder. Users can deselect the checkbox in the filter panel to temporarily deactivate the current filter.
To display the filter panel, set the filterPanel.visible property to true.
A click on the combined filter calls the integrated filter builder. You can configure it in the filterBuilder object.
TreeList uses the DevExtreme Popup component to display the integrated filter builder. The Popup's default configuration is defined automatically, but you can change it in the filterBuilderPopup object.
Overview - DevExtreme Data Grid (forked)To enable export in the DataGrid, reference or import the ExcelJS and FileSaver libraries. Set export.enabled to true.
Once the conditions above are met, use the exportDataGrid(options) method to export the DataGrid to an Excel workbook.
Review the onExporting handler to see the data export code. DataGrid is exported as is to a single worksheet. You can also set allowExportSelectedData to true to export only selected rows.
You can export DataGrid to CSV. Call the exportDataGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file.
Overview - DevExtreme Data Grid (forked)To enable export in the DataGrid, reference or import the ExcelJS and FileSaver libraries. Set export.enabled to true.
Once the conditions above are met, use the exportDataGrid(options) method to export the DataGrid to an Excel workbook.
Review the onExporting handler to see the data export code. DataGrid is exported as is to a single worksheet. You can also set allowExportSelectedData to true to export only selected rows.
You can export DataGrid to CSV. Call the exportDataGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file.
Overview - DevExtreme Data Grid (forked)To enable export in the DataGrid, reference or import the ExcelJS and FileSaver libraries. Set export.enabled to true.
Once the conditions above are met, use the exportDataGrid(options) method to export the DataGrid to an Excel workbook.
Review the onExporting handler to see the data export code. DataGrid is exported as is to a single worksheet. You can also set allowExportSelectedData to true to export only selected rows.
You can export DataGrid to CSV. Call the exportDataGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file.
Overview - DevExtreme Data Grid (forked)To enable export in the DataGrid, reference or import the ExcelJS and FileSaver libraries. Set export.enabled to true.
Once the conditions above are met, use the exportDataGrid(options) method to export the DataGrid to an Excel workbook.
Review the onExporting handler to see the data export code. DataGrid is exported as is to a single worksheet. You can also set allowExportSelectedData to true to export only selected rows.
You can export DataGrid to CSV. Call the exportDataGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file.
Local Virtual Scrolling - DevExtreme Data Grid (forked)If the DataGrid component is bound to a large dataset, you can enable the virtual scroll feature to optimize data load times and improve user navigation. The component calculates the overall number of visible rows and displays a scrollbar that allows users to navigate to any section of rows. When users release the scroll thumb, the control loads records to be displayed in the viewport and removes other rows from memory.
To allow users to scroll the DataGrid virtually, set the scrolling.mode to "virtual".
In this demo, the DataGrid is bound to a local dataset of 100,000 records. You can drag the scrollbar on the right to see that records within the viewport are updated immediately.
WZOR_TABELAExcelJS library allows you to customize worksheets outside the exported cell area. This demo uses this functionality to add a header (a title before exported data) and a footer (a note after exported data).
Review the onExporting handler to see the data export code. The functions that create header and footer sections utilize the following customization features:
Merged cells
Cell values formatting
Font properties
Text alignment
