Find Devextreme Vue Examples and Templates
Use this online devextreme-vue playground to view and fork devextreme-vue 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!
Overview - DevExtreme Text AreaThe TextArea component enables users to enter and edit multi-line text. This component can have a fixed or resizable height. The component with the fixed height displays a native scroll bar if the entered text exceeds the text area. If you set the autoResizeEnabled property to true, the TextArea automatically resizes its height to fit the text.
You can also specify the maxLength property to limit the number of characters a user can enter. Note that this property only limits the number of characters for users. You can enter text that exceeds the maximum character length programmatically, but the number of characters displayed to users will still be limited by this property setting.
The TextArea stores the text in the value property and updates it after the DOM event occurs. To specify which DOM event to use instead of the default "change" event, use the valueChangeEvent property. To handle the value change, use the TextArea's onValueChanged function.
Change the text in the Event Handling and API section below to see how this feature works. Use the "Synchronize text areas" drop-down menu to select which event updates the read-only component's value: "change" or "keyup".
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.
Direct Upload to Azure - DevExtreme File Uploader (forked)The FileUploader component supports direct-upload to blob storages. This demo illustrates how to configure the uploadChunk property to upload a large file directly to Azure Blob Storage without using a user's web server. All APIs that implement access to Azure Blob Storage on the client are stored in the azure-file-system.js file.
To implement file upload logic, use the uploadChunk property to specify how to process a connection request to the storage.
Pimss DxDataGrid Scrolling IssueIf 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.
