Find Dx Systemjs Vue Browser Examples and Templates
Use this online dx-systemjs-vue-browser playground to view and fork dx-systemjs-vue-browser 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.
Hover Mode - DevExtreme ChartsThe Chart and PieChart components support different modes of series hovering. This demo shows the «includePoints» mode, when all the points of a hovered series change their display style. In addition, you can specify a custom hover mode for legend items. Here, the «excludePoints» mode is used, when only the series line changes its display style leaving the points as they were.
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.
Overview - DevExtreme Pivot GridDevExtreme HTML5 JavaScript Pivot Grid is a powerful client-side widget for multi-dimensional data analysis that can be used as a Vue component. It provides such essential features as grouping, sorting, filtering, multiple summary calculation modes, flexible layout, and more. You can use Vue syntax and techniques to instantiate and configure the Pivot Grid or handle its events. Find out more about DevExtreme Vue components.
Record Grouping - DevExtreme Data Grid (forked)The DataGrid allows users to group data against a single column or multiple columns.
To group data, users can drag and drop column headers onto and from the area above the grid. This area is called the groupPanel. Set its visible property to true to show it.
Users can reorder headers within the groupPanel to change group hierarchy. To enable this functionality, set the allowColumnReordering property to "true".
To group data against a single column, apply the groupIndex property to it. This property accepts a zero-based index number that controls the column order. In this example, the data is grouped against the State column.
You can also use the grouping object to specify user interaction settings related to grouping. This demo illustrates the autoExpandAll property that specifies whether the groups appear expanded.
华睿产品组装报价Master-Detail ViewThe Master-Detail View allows users to expand a row ('master') and display the related content ('details') in the expanded section. To configure this feature, set the the masterDetail object's enabled property to true and use a template to specify detail section content. In this demo, the detail section displays another DataGrid.
Overview - DevExtreme Select BoxThe SelectBox component allows users to select an item from a drop-down list. This demo illustrates the following SelectBox properties:
items
Specifies an array of items displayed in the SelectBox.
placeholder
Specifies the text that is displayed when no items are selected.
readOnly
Prevents users from changing the editor's value via the UI.
disabled
Specifies whether the SelectBox responds to user interaction.
dataSource
Binds the SelectBox to data. Unlike the items property, dataSource accepts the DataSource object that allows users to sort, filter, group, and shape data.
fieldTemplate and itemTemplate
Allow you to customize the text field and drop-down list items.
onValueChanged event handler
Use this function to perform an action when a user chooses a new value. In this demo, this function is used to display the selected value.
To get started with the DevExtreme SelectBox component, refer to the following tutorial for step-by-step instructions: Getting Started with SelectBox.
Advanced Master-Detail View - DevExtreme Data Grid (forked)This demo illustrates an advanced master-detail view in the DataGrid component. Master rows represent suppliers. Detail sections contain TabPanel components with two tabs: Orders and Address. In the Orders tab, you can choose a supplier's product from the SelectBox, and the DataGrid under it will show orders placed on this product. The Address tab displays the supplier's address.
Cell Editing and Editing API - DevExtreme Data GridUsers can modify DataGrid data cell by cell. In this mode, only one cell can be in the edit state at a time. DataGrid saves changes immediately after the focus leaves cell.
To enable the cell mode, do the following:
Set the editing.mode to "cell".
Assign true to the editing object's allowUpdating, allowAdding, and allowDeleting properties.
This demo also shows how to delete selected records. Review the onSelectionChanged and deleteRecords functions for implementation details.
retailer.frontYou can use batch edit mode to defer saving multiple cell changes. Changes are stored in a buffer and can be discarded before a user clicks the Save button.
To enable batch edit mode, configure the following properties:
Set editing.mode to "batch".
Assign true to the editing object's allowUpdating, allowAdding, and allowDeleting properties.
The startEditAction property specifies whether cells enter the editing state on a single or double click. Cell edit also selects the cells' text because the selectTextOnEditStart property is set to true. You can use the controls below the DataGrid to change these properties at runtime.
Hover Mode - DevExtreme ChartsThe Chart and PieChart components support different modes of series hovering. This demo shows the «includePoints» mode, when all the points of a hovered series change their display style. In addition, you can specify a custom hover mode for legend items. Here, the «excludePoints» mode is used, when only the series line changes its display style leaving the points as they were.
Cell Editing - DevExtreme Tree ListUsers can modify TreeList data cell by cell. In this mode, only one cell can be in the edit state at a time. The TreeList saves changes immediately after the focus leaves cell.
To enable cell mode, do the following:
Set the editing.mode property to "cell".
Assign true to the editing object's allowUpdating, allowAdding, and allowDeleting properties.
This demo also shows how to populate cells of a new row with default values. The values are assigned within the onInitNewRow event handler.
Overview - DevExtreme Select BoxThe SelectBox component allows users to select an item from a drop-down list. This demo illustrates the following SelectBox properties:
items
Specifies an array of items displayed in the SelectBox.
placeholder
Specifies the text that is displayed when no items are selected.
readOnly
Prevents users from changing the editor's value via the UI.
disabled
Specifies whether the SelectBox responds to user interaction.
dataSource
Binds the SelectBox to data. Unlike the items property, dataSource accepts the DataSource object that allows users to sort, filter, group, and shape data.
fieldTemplate and itemTemplate
Allow you to customize the text field and drop-down list items.
onValueChanged event handler
Use this function to perform an action when a user chooses a new value. In this demo, this function is used to display the selected value.
To get started with the DevExtreme SelectBox component, refer to the following tutorial for step-by-step instructions: Getting Started with SelectBox.
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".