This example illustrates how to change DxDataGrid's column visibility based on the value of external check boxes.
Bind the Visible property of DataGrid's column and the value of the corresponding check box to the same variable to toggle this column's visibility based on value of this check box.
This demo illustrates how to implement a form that dynamically exposes different additional inputs depending upon the initial selection made by an end-user. The visibility of these additional inputs is specified using the Visible property of the DxFormLayoutGroup and DxFormLayoutItem elements.
This example illustrates how to create DxDataGrid for Blazor, add a template column with a hyperlink and navigate to a separate page using this hyperlink. The key field value is sent as a parameter.
Then, the necessary record is edited on this separate page and the page is navigated back to the page with DxDataGrid.
This example illustrates how to create two DxDataGrids for Blazor, handle the SelectedDataRowChanged event of the "Master" grid and bind the "Detail" grid based on the selected "Master" grid's row.
This example illustrates how to implement the confirmation dialog before deleting a record.
This example illustrates how to create DxDataGrid for Blazor, add a template column with a button and show some detail information about the current record in DxFormLayout.
GridControl provides the RowCellMenu property where you can define a custom Context Menu for GridControl rows and cells. You can use either the standard MenuFlyout control in this property, or our ContextToolbarControl or ToolbarControl. To compare these controls, refer to the Utility Controls -> Context Menu demo available from our Interactive Demos installed on your machine with our controls.
When you define a menu control in RowCellMenu, this control's DataContext is set to an object of the GridRowCellContextMenuInfo class. This class provides information about your GridControl, a target row, cell, column, etc. You can use this information to process different actions at your view model level.
In this example, we illustrated how to use ContextToolbarControl in GridControl's RowCellMenu. We implemented DuplicateCommand and DeleteCommand at the view model level. These commands should receive a target data item object to duplicate or delete it respectively. To pass a target data item, you can use the RowControl object from GridRowCellContextMenuInfo's Row property. RowControl provides its own Row property containing the target data item:
[XAML]xmlns:dxg="using:DevExpress.UI.Xaml.Grid"xmlns:dxr="using:DevExpress.UI.Xaml.Ribbon"<dxg:GridControl...><dxg:GridControl.RowCellMenu><dxr:ContextToolbarControlOrientation="Vertical"><dxr:ContextToolbarGroup><dxr:ContextToolbarButtonContent="Duplicate"Command="{Binding Grid.DataContext.DuplicateCommand}"CommandParameter="{Binding Row.Row}"/><dxr:ContextToolbarButtonContent="Delete"Command="{Binding Grid.DataContext.DeleteCommand}"CommandParameter="{Binding Row.Row}"/></dxr:ContextToolbarGroup></dxr:ContextToolbarControl></dxg:GridControl.RowCellMenu></dxg:GridControl>To bind your menu control's item to a certain command, you need to access your view model. As this view model is available from GridControl's DataContext, use GridRowCellContextMenuInfo's Grid property. Refer to the Command property definition in ContextToolbarButtons above.
This example demonstrates how to use the End-User Report Designer and HTML5 Document Viewer in an ASP.NET Core application that targets both .NET Standard and .NET Framework.
These are the main steps to integrate these controls into an application:
1. Install the DevExpress.AspNetCore.Reporting NuGet package.Before running this example, do the following:
1. In Visual Studio, right-click the package.json file and select Restore Packages. This adds the node_modules folder to the application project.For more information and step-by-step tutorials, refer to the following documentation topic: ASP.NET Core Reporting.
This example demonstrates how to add text to connection points and make them always visible in WPF DiagramControl:
The main idea is to use the DiagramContainer element to combine several shapes that will be used as input and output points.
To prevent attaching connectors to inappropriate points, it's necessary to handle the QueryConnectionPoints event.
This example illustrates how to implement the date range selection scenario. There are two DxDateEdit components, one for the start date and another one for the end date. The Duration variable is used to display the number of days in the selected interval. The MinDuration/MaxDuration variables specify the minimum/maximum number of days in a range.
This example demonstrates how to prevent creating detached connectors:
There are several scenarios when a user may create connector whose BeginItem/EndItem properties are empty:
1. Drawing a new connector using a tool. To cover this scenario, handle the AddingNewItem event and set e.Cancel to true if the BeginItem or EndItem properties are null:[C#]privatevoidDiagramDesignerControl_AddingNewItem(objectsender,DevExpress.Xpf.Diagram.DiagramAddingNewItemEventArgse){DiagramConnectorconnector=e.ItemasDiagramConnector;if(connector!=null){//...e.Cancel=connector.BeginItem==null||connector.EndItem==null;}}This example demonstrates how to bind the Diagram control to an in-memory data source and wrap shapes into horizontal and vertical containers. You need to use the ContainerKey property to specify the name of a data source field that provides the key of a shape's parent container shape.
See also:
Diagram for Web Forms - Node and Edge data sources - How to bind the control to in-memory data sources
Diagram for Web Forms - Tree from Linear Data Structure - How to bind the control to in-memory data sources
Files to look at:
• Default.aspx (VB: Default.aspx)This example contains an Angular client-side application with DevExtreme File Uploader. The control uploads image files to the ASP.NET Core API Controller and returns the uploaded images as the base64 strings to the client.
Files to look at:
• home.component.html[HTML]<dx-file-uploadername='myFile'uploadUrl="/FileUpload"[multiple]="true"accept="*"uploadMode="instantly"></dx-file-uploader>[C#]publicasyncTask<IActionResult>AsyncUpload(IFormFilemyFile){stringtargetLocation=Path.Combine(_hostingEnvironment.WebRootPath,"uploads");try{if(!Directory.Exists(targetLocation))Directory.CreateDirectory(targetLocation);using(varfileStream=System.IO.File.Create(Path.Combine(targetLocation,myFile.FileName))){myFile.CopyTo(fileStream);}}catch{Response.StatusCode= 400;}...}export class HomeComponent {
onUploaded(e) {
var image = document.createElement("IMG");
image.setAttribute("src", "data:image/jpg;base64," + e.request.responseText);
var container = document.getElementById("imagesContainer");
container.appendChild(image);
}
}This example illustrates how to use DevExpress Reporting tools to export DxDataGrid's content to different formats (.pdf/.xlsx/.docx) in the Blazor Server applications.
Note: the DevExpress Blazor components are now free-of-charge, but you need a corresponding DevExpress subscription to use the Reporting tools.
This example demonstrates how to apply the ExportMiddleware type to the application's request pipeline. Requests are handled via this middleware, and the file of the corresponding type is returned in the response.
The export buttons are located within the ExportButtons components. Each of them contains an URI to this project. The request with this URI will be processed by the mentioned middleware. Also, this URI contains DataGrid's options, so the created report will only contain data that is displayed in the grid after sorting and filtering are applied.
The ReportHelper.CreateReport method is used to create a report that is exported to the file of the corresponding type using the ExportToPdf(String)/ExportToXlsx(Stream)/ExportToDocx(Stream) method.
See also:
DataGrid for Blazor - Client side - How to implement the exporting functionality using DevExpress Reporting tools
How to use DevExpress Reporting Components in Blazor applications
This example illustrates how to use DevExpress Reporting tools to export DxDataGrid content to different formats (.pdf/.xlsx/.docx) in the Blazor WebAssembly application.
Note: DevExpress Blazor components are now free-of-charge, but you need a corresponding DevExpress subscription to use the Reporting tools.
In this example, DataGrid is bound to the external Web API service using the CustomData property. This Web API service’s source code is located in this folder. The database is "Northwind", and its script generation file can be found in this folder. Generate this data on your SQL server and change the connection string in this file correspondingly (see the OnConfiguring method).
The export buttons are located within the ExportButtons components. Each of them contains a URI to a specific ExportedDocument controller method in the mentioned Web API service. This URI contains DataGrid's options, so the created report will only contain data, which is displayed in the grid after sorting and filtering are applied.
The ReportHelper.CreateReport method is used to create a report that is exported to the file of the corresponding type using the ExportToPdf(String)/ExportToXlsx(Stream)/ExportToDocx(Stream) method.
See also:
DataGrid for Blazor - Server side - How to implement the exporting functionality using DevExpress Reporting tools
How to use DevExpress Reporting Components in Blazor applications
The following example shows how to customize the in-place combo box editor's appearance when its text field is not editable.
In this example, in-place combo boxes are used to edit the 'Access Card Color' column field values. The appearance of the editors' items on the drop-down list is specified via the ItemTemplate property. As for the edit box, you can either apply the same template by setting the ApplyItemTemplateToSelectedItem property to true or specify another template using the EditNonEditableTemplate property (in this example, we used the second approach).
Files to look at:
• Window1.xaml (VB: Window1.xaml)This example demonstrates how to use the Report and Dashboard Server's export API.
Run the Example
• Open the command line prompt and navigate to the example's root folder.dotnet user-secrets set "ReportServer:UserName" "Guest"dotnet user-secrets set "ReportServer:UserPassword" ""dotnet dev-certs https --trustdotnet run to build and run the example application.After the application is built, open your browser and go to http://localhost:5000/ or https://localhost:5001/ to see the result.
Documentation
https://docs.devexpress.com/ReportServer/401403/configuration-and-api/http-api#api-list
This example shows how to display documents in File Manager and open them in a popup dialog. The dialog opens Word documents (DOCX, RTF), Excel files (XLSX), Diagram data (JSON) and images.
Files to look at:
• Index.cshtmlIf you start a new project, add required DevExpress libraries to your project as described in these tutorials:
Devextreme-Based Controls - Configure a non Visual Studio Project
Office-Inspired Controls - Configure a Visual Studio Project
Configure FileManager and Popup 1. Add FileManager to your View. Connect FileManager to your file system like in the Physical File System demo.Note This project targets .NET Core 3.0. To run the project in Visual Studio 2017, change the target framework in the project settings.
[C#]@(Html.DevExtreme().Popup().ID("dialogPopup"))[C#]@using(Html.DevExtreme().NamedTemplate("text")){// }...[JavaScript]function onSelectedFileOpened(args){
openFileInDialog(args.fileItem);}This section describes how to open the most popular file types in different controls. It's not required to implement all of them.
• Rich Text Editor[C#]@using(Html.DevExtreme().NamedTemplate("text")){awaitHtml.RenderPartialAsync("RichEditPartial");}[JavaScript]FileLoader.loadRichEdit = function loadRichEdit(richEditControl, fileManager, fileItem, documentFormat){
fileManager.option("fileProvider").getItemContent([fileItem]).done(function(arrayBuffer){var base64Content = _fromArrayBufferToBase64(arrayBuffer);
richEditControl.openDocument(base64Content, fileItem.name, documentFormat);});};back to the top
Spreadsheet 1. Add Spreadsheet to a separate Partial View: SpreadsheetPartial.cshtml.[C#]@using(Html.DevExtreme().NamedTemplate("excel")){ViewContext.Writer.Write("<div id='excelContainer'>");awaitHtml.RenderPartialAsync("SpreadsheetPartial");ViewContext.Writer.Write("</div>");}[JavaScript]FileLoader.loadSpreadsheet = function loadSpreadsheet(spreadsheetSelector, url, fileItem){//spreadsheetSelector is parent div selector, i.e."#excelContainer"
$.post(url, { filePath: fileItem.key }, function(data){ $(spreadsheetSelector).html(data);});};[C#]publicIActionResultOpenDocInSpreadsheet(stringfilePath){returnPartialView("SpreadsheetPartial",GetDocumentModel(filePath));}[C#]@(Html.DevExpress().Spreadsheet("spreadsheet").Open(Model?.DocumentID,DevExpress.Spreadsheet.DocumentFormat.Xlsx,()=>{returnModel?.FileBytes;}))back to the top
Diagram 1. Create a separate Partial View with your Diagram: DiagramPartial.cshtml.[C#]@using(Html.DevExtreme().NamedTemplate("diagram")){awaitHtml.RenderPartialAsync("DiagramPartial");}[JavaScript]FileLoader.loadDiagram = function loadDiagram(diagramSelector, fileManager, fileItem){
fileManager.option("fileProvider").getItemContent([fileItem]).done(function(arrayBuffer){var enc = new TextDecoder("utf-8");var data = enc.decode(arrayBuffer);
$(diagramSelector).dxDiagram("instance").import(data);});};back to the top
Image 1. Add the IMG tag to the corresponding NamedTemplate:[C#]@using(Html.DevExtreme().NamedTemplate("image")){<imgid="imageViewer"/>}[JavaScript]FileLoader.loadImage = function loadImage(imageSelector, fileManager, fileItem){
fileManager.option("fileProvider").getItemContent([fileItem]).done(function(arrayBuffer){var base64Content = _fromArrayBufferToBase64(arrayBuffer);
$(imageSelector).attr("src","data:image/jpg;base64," + base64Content);});};back to the top
In WPF applications, use our Document Preview
[XAML]xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing"<dxp:DocumentPreviewControlName="previewControl"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"/>[C#]previewControl.DocumentSource=newInvoiceReport();and the End-User Report Designer
[XAML]xmlns:dxrud="http://schemas.devexpress.com/winfx/2008/xaml/reports/userdesigner"<dxrud:ReportDesignerName="reportDesigner"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"/>[C#]reportDesigner.DocumentSource=newInvoiceReport();See WPF Reporting for more information.
[Original message]
The following example demonstrates how to preview and edit reports, created by the XtraReports suite, in a WPF application.
Important note: the use of this example requires the WinForms part of our Reporting tools that is not included into WPF subscription. If you wish to use this functionality, it is required to own WinForms, Reporting, DXperience, or Universal subscription.
DescriptionIn this example, an XtraReport class descendant has been added to a WPF application. This report contains two simple labels, which display data from a report's data source populated from the Contacts.mdb file on a local disk.
To display a report's Print Preview, call the ShowPreview or ShowPreviewDialog method of a ReportPrintTool in a window's code behind. To run the End-User Report Designer, call the ShowDesigner or ShowDesignerDialog method of a ReportDesignTool.
Files to look at:
• MainWindow.xaml (VB: MainWindow.xaml)This example illustrates the use of a DOCVARIABLE field to provide additional information which is dependent on the value of a merged field. This technique is implemented so each merged document contains geocoordinates for a location that corresponds to the current data record.
NB: We do not provide code for retrieving geocoding and weather information, empty data are returned instead. You can implement a custom geocoordinate and weather information provider.
The location is represented by a merge field. It is included as an argument within the DOCVARIABLE field. When the DOCVARIABLE field is updated, the Document.CalculateDocumentVariable event is triggered. A code within the event handler obtains the information on geocoordinates. It uses e.VariableName to get the name of the variable within the field, e.Arguments to get the location and returns the calculated result in e.Value property.
The MailMergeRecordStarted event is handled to insert a hidden text indicating when the document is created. To display hidden text and all non-printing characters, use the CTRL-SHIFT-8 key combination.
The MyProgressIndicatorService class is implemented and registered as a service to allow progress indication using the ProgressBar control.
Files to look at:
• GeoLocation.cs (VB: GeoLocation.vb)