Find Devextreme Aspnet Data Examples and Templates
Use this online devextreme-aspnet-data playground to view and fork devextreme-aspnet-data 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!
Simple Array - DevExtreme Data Grid (forked)You can use the DataGrid component to display and edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its key field. For more information, refer to the following help topic: Local Array.
Use the columns property to specify a list of data fields you want to display within the DataGrid as columns. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.
Multiple Selection - DevExtreme Drop Down Box (forked)If the UI component embedded into the DropDownBox allows multiple selection, synchronize the DropDownBox value with the selected items. Synchronization instructions are the same for every selection mode.
In this demo, the DataGrid's selection.mode and TreeView's selectionMode properties are used to enable multiple selection.
Search and Editing - DevExtreme Select Box (forked)Set the searchEnabled option to true to allow users to search. The following options help you configure the feature:
searchExpr
Specifies one or several data fields to search.
searchMode
Specifies whether found items should contain the typed-in string or start with it.
searchTimeout
Specifies the delay between the moment a user stops typing and the moment the search is executed.
minSearchLength
Specifies the minimum number of characters that a user should type in to trigger the search.
showDataBeforeSearch
Specifies whether the widget should display the unfiltered item list until a user have typed in the minimum number of characters (minSearchLength).
Set the acceptCustomValue option to true to allow users to add values to the SelectBox. You should also implement the onCustomItemCreating handler to create new data source entries.
Infinite Scrolling - DevExtreme Data Grid (forked)If the DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset.
To enable infinite scroll mode, set the scrolling.mode to "infinite".
In this demo, the DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.
Simple Array - DevExtreme Data Grid (forked)You can use the DataGrid component to display and edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its key field. For more information, refer to the following help topic: Local Array.
Use the columns property to specify a list of data fields you want to display within the DataGrid as columns. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.
Simple Array - DevExtreme Data Grid (forked)You can use the DataGrid component to display and edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its key field. For more information, refer to the following help topic: Local Array.
Use the columns property to specify a list of data fields you want to display within the DataGrid as columns. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.
Overview - DevExtreme Pivot Grid (forked)Our PivotGrid allows you to easily and accurately export its contents to Microsoft Excel. To enable export operations, you must reference or import ExcelJS and FileSaver libraries. You must also set export.enabled to true.
Once you've referenced/imported both files and set export.enabled to true, use the exportPivotGrid(options) method to export PivotGrid content to an Excel workbook.
Please review the onExporting handler and its data export code to learn more. In this example, PivotGrid content is exported as is to a single worksheet.
You can export PivotGrid to CSV. Call the exportPivotGrid(options) method as shown in the following ticket: Export PivotGrid into CSV file.
Web API Service - DevExtreme Pivot Grid (forked)The PivotGrid can communicate with a Web API service. The quantity of aggregated data is irrelevant when aggregation is performed on the server. For example, the PivotGrid works with a million aggregated records in this demo.
To configure access to a Web API service from the client, use the createStore method, which is part of the DevExtreme.AspNet.Data extension. This extension also allows you to configure server-side data processing for DevExtreme components.
You should also set the remoteOperations property to true to notify the PivotGrid that data is aggregated on the server.
Overview - DevExtreme Data Grid (forked)DevExtreme Vue Data Grid is a a client-side grid component that includes all the features needed for use in a modern business application: powerful data binding, editing, and validation capabilities, versatile searching and filtering, flexible layout, and many more. You can use Vue syntax and techniques to instantiate and configure the Data Grid or handle its events. In addition, the Data Grid supports prop validation and templates that use named slots. Find out more about DevExtreme Vue components.
To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: Getting Started with DataGrid.
DevExtreme 23.1.3 (forked)This demo shows how to implement remote CRUD operations in the CustomStore. You can view the server implementation under the DataGridWebApiController tab in the ASP.NET MVC version of this demo. The requests sent to the server are displayed under the DataGrid.
After a cell is edited, the DataGrid can behave differently depending on the selected refresh mode: reload data from the server (the refreshMode is full), reapply data processing operations (reshape), or merely rerender the changed cells (repaint).
DevExtreme 23.1.3 (forked)This demo shows how to implement remote CRUD operations in the CustomStore. You can view the server implementation under the DataGridWebApiController tab in the ASP.NET MVC version of this demo. The requests sent to the server are displayed under the DataGrid.
After a cell is edited, the DataGrid can behave differently depending on the selected refresh mode: reload data from the server (the refreshMode is full), reapply data processing operations (reshape), or merely rerender the changed cells (repaint).
