In the case of a large Web application, it's often necessary to use controls with the same settings on numerous pages. It's quite annoying to specify the same settings many times.
In this example, we show how to specify some default settings for all DevExpress Blazor components in your application.

Inherit from our Blazor component and override the SetParametersAsync method. In this method, set the necessary default values for the public properties before calling the base method. Since the base method is called after your custom settings, you can initialize properties with custom default values in markup.

In this example, the MyDataGrid component contains an inherited DxDataGrid component whose PageSize, ShowFilterRow, and ShowGroupPanel properties contain new default values. Compare these components with the default DxDataGrid component on the Index page: they should have the same settings in markup.

This approach has the following limitation: it's not possible to use it with the DxChartXXXSeries components and specify the ValueField, ArgumentField, NameField, and PaneField properties.

Note: We don't recommend you override any other members of our components and change values of any protected properties.

.NET, WinForms, XtraGrid Suite

[C#]
privatevoidEmbeddedNavigator_ButtonClick(objectsender,NavigatorButtonClickEventArgse){if(e.Button.ButtonType!=NavigatorButtonType.Custom)return;e.Handled=true;stringtag=(string)e.Button.Tag;switch(tag){case"NextPage":this.CurrentPageIndex=Math.Min(this.CurrentPageIndex+ 1,this.MaxPageIndex);break;case"PrevPage":this.CurrentPageIndex=Math.Max(0,this.CurrentPageIndex- 1);break;}this.GridControl.DataSource=GetData(this.CurrentPageIndex);}

Private Sub EmbeddedNavigator_ButtonClick(ByVal sender As Object, ByVal e As NavigatorButtonClickEventArgs)
    If e.Button.ButtonType <> NavigatorButtonType.Custom Then
        Return
    End If
    e.Handled = True
    Dim tag As String = CStr(e.Button.Tag)
    Select Case tag
        Case "NextPage"
            Me.CurrentPageIndex = Math.Min(Me.CurrentPageIndex + 1, Me.MaxPageIndex)
        Case "PrevPage"
            Me.CurrentPageIndex = Math.Max(0, Me.CurrentPageIndex - 1)
    End Select
    Me.GridControl.DataSource = GetData(Me.CurrentPageIndex)
End Sub

This example shows how to access a single item by using method.

Updated:

The ASPxFormLayout.FindItemByPath method and the LayoutItem.LayoutItemNestedControlContainer property are obsolete. It is recommended to use the ASPxFormLayout.FindItemOrGroupByName method and the LayoutItem.Controls property instead.

Files to look at:

This example demonstrates how to use the End-User Report Designer client-side API to customize the Save As and Open dialogs.

Report files in this example are arranged in folders in the root Reports folder. Folder names correspond to the report's Category. The customized dialog displays report names and categories and allows the user to do the following:

The dialog also displays reports that do not fall in any category - reports created by the ReportsFactory static class and reports in the root Reports folder.

The Save As dialog is defined in a HTML template. The template contains the following widgets:

The dialog model defines the properties used in the dialog template and binds them to Knockout observables. The model specifies the following functions:

The updateCategories function calls the client-side DevExpress.Reporting.Designer.ReportStorageWeb.getUrls method to obtain report names and categories. This method uses the ReportStorageWebExtension.GetUrls method of a server-side report storage to get a dictionary that contains report names and categories. The code processes the dictionary and fills the categories data array.

The model defines the dialog buttons and their actions. The Save button's action calls the e.Popup.save method and the Cancel button's action calls the e.Popup.cancel method.

The dialog HTML template and dialog model are passed to the e.Customize method to modify the Report Designer's Save As dialog. This method is available in the CustomizeSaveAsDialog event handler.

The customizeSaveAsDialog function is the CustomizeSaveAsDialog event handler. The function uses the event handler argument’s Popup property to specify the dialog’s width, height, and title. The function defines variables used in the dialog model and defines the dialog model. Finally, the function calls the e.Customize method to modify the dialog based on the specified model and template.

The ReportDesignerClientSideEventsBuilder.CustomizeSaveAsDialog method is used to set the name of the JavaScript function that handles the CustomizeSaveAsDialog event (the customizeSaveAsDialog function in this example).

The custom Open dialog allows the user to find a report in a list grouped by category, select the report, and open it. The user can type in the text box to filter the list and find report and category names that contain the input string.

The Open dialog is customized in the same way as the Save As dialog. The ReportDesignerClientSideEventsBuilder.CustomizeOpenDialog method specifies the name of the JavaScript function that handles the CustomizeOpenDialog event - the customizeOpenDialog function in this example.

The Open dialog template and the dialog model are defined and passed to the e.Customize method to modify the dialog.

This example prints and exports a report in a browser without previewing it on a web page.

Print

On the server side, a controller performs the following actions:

On the client-side, a user can do one of the following:

NOTE: We don't recommend printing with an invisible iFrame element because it's not guaranteed to work reliably across all browsers.

For more information review the following help topic:

Export

The user selects the format and clicks a button to send the format to the server-side controller. The controller calls the export method for the selected format and sends the file back to the browser.

For more information review the following help topic:

This example illustrates a possible way to integrate the client part of ASP.NET Core RichEdit into a Blazor server application. This can be done as follows:

The devexpress-richedit npm package references devextreme as peerDependencies. These peerDependencies packages should be installed manually. This allows developers to control the version of peerDependencies packages and guarantees that the package is installed once.

Install the RichEdit package with required peerDependencies:

{  
    ...  "dependencies": {  "devextreme": "<:xx.x.x:>",  "devexpress-richedit": "<:xx.x.x:>"  
  }  
}  

You can find all libraries in the node_modules folder once installation is completed.

cd node_modules/devexpress-richedit  
npm i --save-dev  
npm run build-custom  
cd ../..

<link href="css/dx.richedit.css" rel="stylesheet" />  <script src="js/dx.richedit.min.js"></script>  

function createRichEdit(documentAsBase64) {  
    const options = DevExpress.RichEdit.createOptions();  
    options.confirmOnLosingChanges.enabled = false;  
    options.exportUrl = 'api/RichEdit/SaveDocument';  
    options.width = '1400px';  
    options.height = '900px';  
    var richElement = document.getElementById("rich-container");  
    window.richEdit = DevExpress.RichEdit.create(richElement, options);  
    if (documentAsBase64)  
        window.richEdit.openDocument(documentAsBase64, "DocumentName", DevExpress.RichEdit.DocumentFormat.Rtf);  
}

Register the created script in the <head> tag of Pages/_Host.cshtml

<script src="js/richedit-creator.js"></script>

[C#]
protectedoverrideasyncTaskOnAfterRenderAsync(boolfirstRender){if(firstRender){vardocumentAsBase64="e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDB"+"cZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHl"+"sZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCp"+"cY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2J"+"wYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5"+"mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2V"+"jdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjB"+"cZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1x"+"mczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==";awaitJSRuntime.InvokeVoidAsync("createRichEdit",documentAsBase64);}}

Files to look at:

This example illustrates a possible way to integrate the Diagram widget into Blazor applications. This can be done as follows:

[HTML]
<head><!--...--><linkrel="stylesheet"href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx.common.css">;  <linkrel="stylesheet"href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx.light.css">;  <scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"></script>;  <linkrel="stylesheet"href="https://cdn3.devexpress.com/jslib/20.1.4/css/dx-diagram.min.css">;  <scriptsrc="https://cdn3.devexpress.com/jslib/20.1.4/js/dx-diagram.min.js"></script>;  <scripttype="text/javascript"src="js/diagram-init.js"></script><scripttype="text/javascript"src="https://cdn3.devexpress.com/jslib/20.1.4/js/dx.all.js"></script>;  </head>

window.JsFunctions = {  
    InitDiagram: function () {  
        var diagram = $("#diagram").dxDiagram()  
            .dxDiagram("instance");  

        $.ajax({  
            url: "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/data/diagram-flow.json";,  
            dataType: "text",  
            success: function (data) {  
                diagram.import(data);  
            }  
        });  
    }  
};

[C#]
protectedoverridevoidOnAfterRender(boolfirstRender){JSRuntime.InvokeAsync<object>("JsFunctions.InitDiagram");}

Files to look at:

For version 20.1+:

In the latest version (v20.1), we added new summary types including CountDistinct. Please refer to the following What's new topic - What's New 20.1 PivotGrid. You can also find helpful information in this help article - SummaryType.

For older versions:

This example handles the PivotGridControl.CustomSummary event that occurs when the control calculates a summary for a field whose SummaryType is PivotSummaryType.Custom. The event handler calls the e.CreateDrillDownDataSource method to retrieve the underlying data rows for the current cell, counts distinct values and returns the result to the e.CustomValue property.

API in this example:

See also:

Examples for other platforms:

Files to look at:

For version 20.1+:

In the latest version (v20.1), we added new summary types including CountDistinct. Please refer to the following What's new topic - What's New 20.1 PivotGrid. You can also find helpful information in this help article - SummaryType.

For older versions:

This example demonstrates how to define and register the Distinct Count function that allows calculating the count of unique field values if the Server Mode is enabled. This concept is described in the Implementing Custom Functions help topic. A custom function class should implement the following interfaces:
ICustomFunctionOperator
ICustomFunctionOperatorFormattable
IQueryableConvertible

To register a custom function in your application, use the CriteriaOperator.RegisterCustomFunction method.

Files to look at:

For version 20.1+:

In the latest version (20.1) we added search functionality to the Customization Form. Please refer to the following What's new topic - What's New 20.1 PivotGrid. You can also find helpful information in this article - Field List Overview.

For older versions:

This example illustrates how to add a search box to the field list control.
Our PivotExcelFieldListControl uses the TreeViewFieldsPresenter component to show fields in a tree-like view. In this example, we create a TreeViewFieldsPresenter control descendant and implement the filtering functionality at its level.  The default TreeViewFieldsPresenter is replaced with our descendant via styles.

Important: The provided approach works when fields are grouped via User Folders. In OLAP mode, fields are grouped automatically. If fields are not grouped, PivotGrid uses another control (not TreeViewFieldsPresenter ) to manage hidden fields and custom style is not used.

Files to look at:

This example demonstrates the use of OAuth2 authentication in a web application. Users can sign in to the application via Google, Facebook or Microsoft authentication providers.

You can try this demo "as is" to overview its capabilities, and then try the demonstrated functionality in your own XAF applications according to the instructions below.

How to Run this Demo

Before running this demo, register developer accounts at the services you are going to use

[XML]
<appSettings><addkey="GoogleClientID"value="YourGoogleClientID"/><addkey="GoogleClientSecret"value="YourGoogleClientSecret"/><addkey="FacebookClientID"value="YourFacebookClientID"/><addkey="FacebookClientSecret"value="YourFacebookClientSecret"/><addkey="MicrosoftClientID"value="YourMicrosoftClientID"/><addkey="MicrosoftClientSecret"value="YourMicrosoftClientSecret"/>

You can remove keys corresponding to providers that you do not want to use.

Note that you may need to update nuget packages to work correctly.

Now you can run the application.

Overview of this Demo Capabilities

In the logon window, there are buttons for each provider specified in Web.config:

Standard XAF authentication with built-in username/password is also supported. When you log in via OAuth authentication, the email is used as a user name. By default, a user object is autocreated for each logon. You can disable autocreation, or specify the auto-assigned role for new users in the InitializeComponent method (see AuthenticationOwin.Web/WebApplication.cs(vb)):

C#

[C#]
OAuthProviderauthProvider=newOAuthProvider(typeof(OAuthUser),securityStrategyComplex1);authProvider.CreateUserAutomatically=true;

VB.NET

[VB.NET]
Dim authProvider AsNew OAuthProvider(GetType(OAuthUser), securityStrategyComplex1)  
authProvider.CreateUserAutomatically = True

When CreateUserAutomatically is false, the logon is allowed if a user with the email returned by the external service exists in the application database. To grant access to a user with a specific e-mail, use the built-in Admin account, create a user object and set the UserName to this e-mail.

If you set the EnableStandardAuthentication property to true for an auto-created user, this user will be able to login directly, with a user name and password. Note that the password is empty by default, so do not forget to specify it when enabling standard authentication.

Each user can have several associated email addresses. To add or remove email addresses, use the OAuth Authorization Emails list in the user's Detail View.

How to Implement the Demonstrated Functionality in your XAF Application

1.1. Choose the YourSolutionName.Web project in the Default project combo box, and execute the following commands to add Owin packages:
Install-Package Microsoft.Owin -Version 4.1.0
Install-Package Microsoft.Owin.Cors -Version 4.1.0
Install-Package Microsoft.Owin.Security -Version 4.1.0
Install-Package Microsoft.Owin.Security.Cookies -Version 4.1.0
Install-Package Microsoft.Owin.Host.SystemWeb -Version 4.1.0
Install-Package Microsoft.Owin.Security.Google -Version 4.1.0
Install-Package Microsoft.Owin.Security.Facebook -Version 4.1.0
Install-Package Microsoft.Owin.Security.MicrosoftAccount -Version 4.1.0

1.2. Switch to the YourSolutionName.Module.Web project and install these two packages:
Install-Package Microsoft.AspNet.Cors -Version 5.2.7
Install-Package Microsoft.Owin -Version 4.1.0
Install-Package Microsoft.Owin.Host.SystemWeb -Version 4.1.0
Install-Package Microsoft.Owin.Security -Version 4.1.0

[XML]
<authenticationmode="None"/><!--<forms name="Login" loginUrl="Login.aspx" path="/" timeout="10" />--></authentication><!--<authorization>  <deny users="?" />  <allow users="*" />  </authorization>-->

Include the copied files to your solution (Add|Existing Item... ). Update the namespace names in the copied code files to match namespaces you use in your solution. For image files, set the Build Action property to Embedded Resource.

Register CustomSecurityStrategyComplex:

C#

[C#]
this.securityStrategyComplex1=newAuthenticationOwin.Module.Web.Security.CustomSecurityStrategyComplex();

VB.NET

[VB.NET]
Me.securityStrategyComplex1 = New AuthenticationOwin.Module.Web.Security.CustomSecurityStrategyComplex()

Use AuthenticationMixed instead of your authentication:

C#

[C#]
publicYourApplicationNameAspNetApplication(){InitializeComponent();//...  AuthenticationMixedauthenticationMixed=newAuthenticationMixed();authenticationMixed.LogonParametersType=typeof(AuthenticationStandardLogonParameters);authenticationMixed.AuthenticationProviders.Add(typeof(CustomAuthenticationStandardProvider).Name,newCustomAuthenticationStandardProvider(typeof(OAuthUser)));OAuthProviderauthProvider=newOAuthProvider(typeof(OAuthUser),securityStrategyComplex1);authProvider.CreateUserAutomatically=true;authenticationMixed.AuthenticationProviders.Add(typeof(OAuthProvider).Name,authProvider);securityStrategyComplex1.Authentication=authenticationMixed;

VB.NET

[VB.NET]
PublicSubNew()  
  InitializeComponent()  '...  Dim authenticationMixed AsNew AuthenticationMixed()  
  authenticationMixed.LogonParametersType = GetType(AuthenticationStandardLogonParameters)  
  authenticationMixed.AuthenticationProviders.Add(GetType(CustomAuthenticationStandardProvider).Name, New CustomAuthenticationStandardProvider(GetType(OAuthUser)))  Dim authProvider AsNew OAuthProvider(GetType(OAuthUser), securityStrategyComplex1)  
  authProvider.CreateUserAutomatically = True
  authenticationMixed.AuthenticationProviders.Add(GetType(OAuthProvider).Name, authProvider)  
  securityStrategyComplex1.Authentication = authenticationMixed

C#

[C#]
WebApplication.Instance.Settings.LogonTemplateContentPath="LogonTemplateContent1.ascx";

VB.NET

[VB.NET]
WebApplication.Instance.Settings.LogonTemplateContentPath = "LogonTemplateContent1.ascx"

This example shows how XAF can get a user's email from OAuth2 services and create (or authenticate) a user based on this data (the OAuthProvider.Authenticate method).

Note that a third-party API and settings of OAuth2 services (Google, Facebook, and Microsoft) that we use in this example often change and we cannot control this at the level of our components. While we try to keep this example up-to-date with these changes, it is always better to refer to the official OAuth2 provider documentation. Please leave comments or create merge requests to this example if you find any inconsistencies.

Known OAuth2 services specificities:

Tip: You can refer to the OWIN OAuth 2.0 Authorization Server documentation to learn how to add more authentication providers.

For an example of integrating OAuth2 authentication in a WinForms XAF application, refer to the XAF - OAuth2 Authentication for WinForms ticket.

Files to look at:

Office.Cloud.Microsoft Module in eXpand Framework by Apostolis Bekiaris - authenticates against Azure Active Directory and contains API for querying the Microsoft Graph endpoints.

Commonly, providers from the File Management module are used with the DevExtreme File Manager. However, the providers logic is decoupled from the FileManager UI widget. That is why you can use the providers with other client-side components too.

This sample shows how to display and edit files and folders in DevExtreme TreeList. TreeList gets its content via RemoteFileSystemProvider.

Files to look at:

LookupPropertyEditorEx
This is a regular XAF PropertyEditor class that can be used for referenced properties instead of the standard LookupPropertyEditor in Windows Forms applications.
By default, this editor allows you to choose a value from the drop down list. It's possible to find the required record in the drop down list by typing text (auto-incremental search).
If you want to clear a value, use either the Control+Delete keystroke or click the minus (-) button.
If you want to add a new object, click the plus (+) button. It will show a modal DetailView allowing you to fill object properties and save it.

See Also:
Implement Custom Property Editors
PropertyEditors.Lookup - How to provide alternative data representations for reference lookup properties (e.g., a simple drop-down box, a complex multi-column grid, or a tree view)

This example illustrates how to edit DataGrid's row on a separate page.

The main idea is to open a new page and send the key value of the currently edited row as a parameter.
For this, create your own command button using the column's DisplayTemplate.
The navigation can be implemented using the default tag as it's demonstrated with the "Edit" button.
Another approach is using the default NavigationManager object. It's demonstrated in the "Save" and "Cancel" buttons on the SeparateEditForm page.

Untyped data sets cannot be serialized with an XML report layout.
The Web Report Designer works with XML report representation. If you bind a report to an untyped data set, create a custom DevExpress.XtraReports.Native.IDataSerializer and use data set XML-serialization methods to save and restore it.

In the IDataSerializer.Serialize method, serialize a DataSet to XML using the DataSet.WriteXml method.
In the IDataSerializer.Deserialize method, create a new DataSet instance and populate it from a correctly formatted XML stream by using the DataSet.ReadXml method.

See also:
How to serialize a report to XML with an untyped DataSet as a data source

Files to look at:

This example illustrates a possible way to integrate the client part of ASP.NET Core RichEdit into a Blazor client application using steps from the following help topic: Rich Text Editor > Get Started > Blazor WebAssembly Application.

Files to look at:

This example demonstrates how to programmatically generate an object data source with a parameterized constructorand map object data source parameters to report parameters.

Take note that the data source generation routine does not rely on a particular platform and is more like a 'core' functionality.

See also:
How to: Bind a Report to an Object Data Source
How to provide ASPxReportDesigner with the SqlDataSource, ObjectDataSource, EFDataSource and ExcelDataSource at runtime

Files to look at:

Starting with v15.1, we support the RibbonControl.CustomDrawItem event.

For earlier versions:

This example illustrates how to implement your own event at a RibbonControl level to allow you to draw a bar item link as required.

This example uses the Bootstrap Breadcrumb component that is bound to DxTreeView via the SelectionChanged event handler. TreeView's selected node is changed when a Breadcrumb item is selected:

<a @onclick="@(() => SelectNode(currentNodeInfo.Text))" href="#">  
    @currentNodeInfo.Text  </a>  
...  
void SelectNode(string text) {  
    TreeView.SelectNode((n) => n.Text == text);  
}  

Files to look at:

This example includes the server-side (backend) application that is an ASP.NET MVC application created from the DevExpress Visual Studio template as described in the Report Designer's Server-Side Configuration (ASP.NET MVC) topic.

The client-side (front-end) application is created in JavaScript with npm as described in the Basic Report Designer Integration (with npm or Yarn Package Managers) document.

To run the example, perform the following steps:

npm install