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.
TreeView with Search Bar - DevExtreme Tree ViewTo add a search bar to the TreeView and customize the search functionality, do the following:
Set the searchEnabled property to true.
Use the searchMode property to specify whether items should contain (default), start with, or match the search string. In this example, you can switch between search modes in the drop-down menu.
Configure the searchExpr property to specify custom search fields. The default search field is text.
The TreeView uses the TextBox component as a search bar. To customize it, specify TextBox properties in the searchEditorOptions object.
We do not recommend that you enable search if the TreeView uses virtual mode or custom logic to load data on demand. In these cases, the TreeView may not have the full dataset, and the search results include only loaded nodes.