Find Devexpress Gantt Examples and Templates
Use this online devexpress-gantt playground to view and fork devexpress-gantt 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!
nnfxwThis example demonstrates the DataGrid’s built-in filtering and searching capabilities. The filter row, located under the column headers, allows a user to type any value and select filter operations. With the header filter, which is called by clicking the filter icon in any column header, a user can choose from a set of predefined values. The search panel at the top of the DataGrid allows searching for values in all columns at once.
Drag & Drop for Hierarchical Data Structure - DevExtreme Tree View (forked)This sample app demonstrates node drag and drop operations within DevExtreme TreeView when using a hierarchical data structure. You can reorder nodes within a single tree view or drag and drop nodes between two separate tree views.
Use Sortable to implement the necessary drag and drop functionality within your web app. The following steps outline configuration requirements for our JavaScript TreeView:
Allow users to reorder nodes
Wrap the TreeView in a Sortable and enable the Sortable's allowReordering property.
Allow users to change node hierarchy
Enable the allowDropInsideItem property so that users can drop one node onto another. This adds it as the target node's child. If this property is disabled, users can only drop nodes between other nodes.
Allow users to drag only tree view nodes
To specify tree view nodes as drag targets, set the filter property to a class selector. Since all tree view nodes use the dx-treeview-node class, you can use this class selector as needed.
Prevent a node from being moved into its child node
When a user moves a parent node into its own child node, it breaks the hierarchy. To prevent this outcome, implement the onDragChange function and traverse up the node tree. If the target is a child of the dragged node, cancel the ability to drop the node.
Reorder nodes in code
Implement the onDragEnd function. In this function, you must gather information about nodes being moved. With this information, you can reorder the nodes in the data source (see the moveNode function), and reassign the data source to the TreeView's items property.
Specify tree view identifiers (for drag and drop between multiple tree views only)
Identifiers help distinguish between multiple tree views. Save them in the Sortable's data property. The tree views below include the following identifiers: "driveC" and "driveD".
Combine tree views into one drag and drop group (for drag and drop between multiple tree views only)
Set the Sortable's group property to the same value for all tree views. This allows users to move nodes between the tree views.
overview-devextreme-data-gridDevExtreme HTML5 JavaScript Data Grid is a feature-rich grid control that can be used as a React component. Its main features include robust data layer, fast data processing, client-side data validation, and many more. Advanced UI customization is carried out using template components and render props. Declared PropTypes for typechecking are included. Learn more about DevExtreme React components.
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.
drag-n-dropIn this demo, the FileUploader component is configured for asynchronous upload. Use the File types drop-down menu to select acceptable file types for the Open file dialog. The Upload mode drop-down menu allows you to specify whether the file is uploaded on a button click or instantly after the file has been selected. In addition, you can specify whether the FileUploader allows multiple file selection.
To select files, click the Select file button or drop the files directly on the component. If the upload mode is «useButtons», you must click the Upload button or a corresponding button for each file to initiate upload.
NOTE
This demo does not actually upload files. To upload files, assign the URL of a page providing server scenarios for saving uploaded files to the uploadUrl configuration property of the component.
Custom Axis Position - DevExtreme Charts (forked)The Chart component initially displays axes along pane borders. Several other predefined axis layout properties are available. In this demo, the customPosition property is used to move each axis, so that it is displayed on the specified value of another axis. When you position the argument axis, use values from the value axis (in the same type and format) and vice versa.
Regardless of which automatic axis layout type you use, the Chart Control allows you to apply manual offsets. Specify the offset property in pixels to keep the axis position unchanged when users scroll or zoom the Chart data. The offset property shifts the axis from the specified position as follows:
If the axis is horizontal, a negative offset shifts the axis to the top, a positive offset shifts it to the bottom.
If the axis is vertical, a negative offset shifts the axis to the left, a positive offset shifts it to the right.
In this demo, you can use controls under the Chart to change the customPosition and offset properties for both axes.
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.
Zooming and Panning - DevExtreme Charts In this demo, the visualRange property is used to zoom the chart initially. The zoomAndPan.argumentAxis property allows you to zoom and scroll the argument axis at runtime.
Zooming and scrolling are available on mouse-equipped and touch-enable devices: you can use the mouse wheel/spread and pinch gestures to zoom, and the scrollbar/drag gesture to scroll.
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".
simple-array-devextreme-pivot-grid-forkedThe PivotGrid is a high-performance, enterprise-ready UI component optimized for multi-dimensional data analysis. It allows your end users to easily arrange and summarize information in a cross-tabular format. In this demo, the PivotGrid’s simplicity of use is illustrated. Sorting and filtering are enabled so you can sort data in ascending or descending order and by summary values. You can drag and drop fields to reorganize the PivotGrid and change filtering properties to analyze data more efficiently.
Zooming and Panning - DevExtreme Charts (forked)In this demo, the visualRange property is used to zoom the chart initially. The zoomAndPan.argumentAxis property allows you to zoom and scroll the argument axis at runtime.
Zooming and scrolling are available on mouse-equipped and touch-enable devices: you can use the mouse wheel/spread and pinch gestures to zoom, and the scrollbar/drag gesture to scroll.
