Quantcast
Channel: DevExpress Support Center (Examples)
Viewing all 7205 articles
Browse latest View live
↧

File Manager - How to use it in ASP.NET Core Razor Pages

December 25, 2019, 5:13 am
$
0
0

This example shows DevExtreme FileManager, which is bound to a default file sytem provider. The page handler methods work as backend here.

Files to look at:

• Index.cshtml
• Index.cshtml.cs
• _Layout.cshtml

Note The project targets .NET Core 3.0. To run the project in Visual Studio 2017, change the target framework in the project settings.

Implementation: 1. Add required libraries to your project:(https://docs.devexpress.com/AspNetCore/401026/devextreme-based-controls/get-started/configure-a-visual-studio-project))

2. Add File Manager control to your Razor Page and use the Remote provider.

[C#]
@(Html.DevExtreme().FileManager().FileProvider(provider=>provider.Remote().Url(Url.Page("Index","Documents")))
3. File Manager uses both GET and POST requests, so it's necessary to create handlers for both request types:
[C#]
publicIActionResultOnGetDocuments(FileSystemCommandc,stringa)=>ProcessFileApiRequest(c,a);publicIActionResultOnPostDocuments(FileSystemCommandc,stringa)=>ProcessFileApiRequest(c,a);
4. Process requests with IFileProvider like in the Physical File System demo. Since all data operations except Download return JSON data, return the result in the handler as follows:
[C#]
returncommand==FileSystemCommand.Download?(IActionResult)result:newJsonResult(result);
5. Disable AntiForgeryToken in the Razor Page with File Manager via IgnoreAntiforgeryTokenAttribute.
↧
Search

File Uploader - How to upload images in Razor Pages

December 26, 2019, 11:35 pm
$
0
0

This example shows how to upload images in an ASP.NET Core Razor Pages application using DevExtreme FileUploader. The project also shows how to display links to uploaded images.

Files to look at:

• Index.cshtml
• Index.cshtml.cs
• _Layout.cshtml
Implementation: 1. Add required libraries to your project: Configure a Visual Studio Project.

Note The project targets .NET Core 3.1. To run the project in Visual Studio 2017, change the target framework in the project settings.

2. Add the FileUploader control to your Razor Page. Specify the Name and UploadUrl properties.
[C#]
@(Html.DevExtreme().FileUploader().Name("uploadedFile").ChunkSize(200000).UploadUrl(Url.Page("Index","FileUpload"))
3. Create the POST handler method and implement one of solutions from the Server-Side Implementation in ASP.NET article. Here, FileUploader uses Chunk Upload, so we use the Chunk Upload approach.

Important For Chunk or Ajax upload, make sure that the first parameter in your handler is the same as your FileUploader.Name

4. ASP.NET Core Razor Pages validate the Antiforgery Token in POST requests. So, it's necessary to add the token value to the uploader's requests:
[JavaScript]
(function(){var send = XMLHttpRequest.prototype.send;
        XMLHttpRequest.prototype.send = function(data){
            data.append('__RequestVerificationToken', $('[name=__RequestVerificationToken]').val());return send.apply(this, arguments);};}());
5. (Optional) To obtain an uploaded image's URL, modify the "ProcessUploadedFile" method so that it returns a relative path to your file and then return this URL from your handler method:
[C#]
stringProcessUploadedFile(stringtempFilePath,stringfileName){varpath=Path.Combine(_hostingEnvironment.WebRootPath,"uploads",fileName);System.IO.File.Copy(tempFilePath,path);returnPath.GetRelativePath(_hostingEnvironment.WebRootPath,path);}publicIActionResultOnPostFileUpload(IFormFileuploadedFile,stringchunkMetadata){...returnnewJsonResult(new{imgUrl=resultImageUrl});}
5. (Optional) Handle the FileUploader.OnUploaded event and get an image URL from the args.request.response property. Append a link to this URl in the following manner:
[JavaScript]
function OnUploaded(args){
        let imgUrl = JSON.parse(args.request.response).imgUrl;
        let imgName = args.file.name;
        let imagesContainer = document.getElementById("imagesContainer");
        imagesContainer.appendChild(createLink(imgName, imgUrl));}function createLink(imgName, url){
        let link = document.createElement("A");
        link.innerText = imgName;
        link.href = url;return link;}
↧
↧

DataGrid - ASP.NET MVC - How to configure routing based on Http[Verb] attributes to support CRUD operations

December 27, 2019, 6:00 am
$
0
0

This example demonstrates how to configure routing based on Http[Verb] attributes to support CRUD operations in DataGrid.

Set the Controller, LoadAction, UpdateAction, InsertAction, and DeleteAction options to true so that dxDataGrid's data source can access corresponding actions in a controller.

[C#]
.DataSource(d=>d.WebApi().Controller("DataGridEmployees").LoadAction(true).UpdateAction(true).InsertAction(true).DeleteAction(true).Key("ID"))

In the controller, implement data operations in these actions.

See also:

• Web API Controllers
• Attribute Routing in ASP.NET Web API 2

Files to look at:

• Index.cshtml
• HomeController.cs
• DataGridEmployeesController.cs
↧

Web Document Viewer - How to change the name of a print job in printer queue

December 27, 2019, 4:35 am
$
0
0

In desktop applications, the name of a report in printer queue is taken from the XtraReport.DisplayName property value. You can override it in the XtraReport.PrintingSystem.StartPrint event handler by specifying the DevExpress.XtraPrinting.PrintDocumentEventArgs.PrintDocument.DocumentName property.

When printing reports using Web Document Viewer, these settings won't take effect because web printing is PDF-based: see specifics of web printing.
Web Document Viewer takes the reporting print job name from the HTTP Handler Module that is used to communicate with the server.
To change the reporting print job name, create a custom controller action with the required print job name and call it in a custom IWebDocumentViewerExportResultUriGenerator service's IWebDocumentViewerExportResultUriGenerator.CreateUri method.

See also:
ASP.NET Core Reporting
Register Services in the Document Viewer

↧

How to use the Document Viewer in JavaScript with React Library

December 23, 2019, 5:10 am
$
0
0

This example consists of two parts:

• A server (back-end) ASP.NET MVC project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.
• A React JavaScript Library front-end client application.

Perform the following steps to run this example:

1. Open the back-end project solution (CS\ServerSide.sln) in Visual Studio and run the project.
2. Navigate to the JS\react-document-viewer folder that is the client part's root folder.
3. Open the console and run the following command:
4. npm install
5. Run the command to compile and start the client part:
6. npm start
7. The client application opens the browser at http://localhost:3000/. It displays the Document Viewer with the Products report.

For a step-by-step tutorial, refer to the
Document Viewer Integration in React topic.

See also:

• How to Use the Report Designer in JavaScript with React Library and Npm Package Manager
↧
↧

How to use the End-User Web Report Designer in JavaScript with React Library

December 23, 2019, 2:25 am
$
0
0

This example consists of two parts:

• A server (back-end) ASP.NET MVC project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.
• A React JavaScript Library front-end client application.

Perform the following steps to run this example:

1. Open the back-end project solution (CS\ServerSide.sln) in Visual Studio and run the project.
2. Navigate to the JS\react-report-designer folder that is the client part's root folder.
3. Open the console and run the following command:
4. npm install
5. Run the command to compile and start the client part:
6. npm start
7. The client application opens the browser at http://localhost:3000/. It displays the Report Designer with the Products report.

For a step-by-step tutorial, refer to the
Report Designer Integration in React topic.

See also:

• How to Use the Document Viewer in JavaScript with React Library and Npm Package Manager.
↧

How to use the Web Document Viewer in JavaScript with the Vue JavaScript Framework

December 17, 2019, 8:27 am
$
0
0

This example consists of two parts:

• A server (back-end) ASP.NET MVC project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.
• An Vue JavaScript Framework front-end client application.

Perform the following steps to run this example:

1. Open the back-end project solution (CS\ServerSide.sln or VB\ServerSide.sln) in Visual Studio and run the project.
2. Navigate to the JS\vue-report-viewer folder that is the client part's root folder.
3. Open the console and run the following command:
4. npm install
5. Run the command to compile and start the client part:
6. npm run serve
7. Point your browser to http://localhost:8080/ to see the result.

For a step-by-step tutorial, refer to the
Document Viewer Integration in Vue topic.

↧

How to use the End-User Web Report Designer in JavaScript with Vue Framework

December 20, 2019, 1:29 am
$
0
0

This example consists of two parts:

• A server (back-end) ASP.NET MVC project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.
• An Vue JavaScript Framework front-end client application.

Perform the following steps to run this example:

1. Open the back-end project solution (CS\ServerSide.sln or VB\ServerSide.sln) in Visual Studio and run the project.
2. Navigate to the JS\vue-report-designer folder that is the client part's root folder.
3. Open the console and run the following command:
4. npm install
5. Run the command to compile and start the client part:
6. npm run serve
7. Point your browser at http://localhost:8080/ to see the result.

For a step-by-step tutorial, refer to the
Report Designer Integration in Vue topic.

↧
Search

Use Subreports to Add a Chart

December 18, 2019, 5:21 am
$
0
0

This project performs the following tasks:

1. Create the main report that lists products grouped by category. • The report's GroupHeader band displays the category name. • The band's GroupFields collection specifies the group field (the CategoryID field).

• The report's Detail band lists products from the group field's category.
• The report's GroupFooter band contains an XRSubreport control instance. • The XRSubreport's ReportSource property references a chart report.
• The XRSubreport's ParameterBindings collection binds the chart report's srptCategory parameter to the main report's group field (the CategoryID field).


2. Create a chart report that visualizes a specific category's products and prices. • The chart report uses an XRChart control instance.
• The chart's Parameters collection specifies the chartCategory parameter that is bound to the report's srptCategory parameter.
• The chart series' FilterString property uses the ChartCategory parameter value to filter data.

Refer to the Merge Reports: Use Data-Driven Page Sequence topic for more information on how to add a chart to a report in the Report Designer.

Files to look at:

• Form1.cs
↧
↧

How to Use the ASP.NET Core Back-End to Integrate the Document Viewer and Report Designer in JavaScript with React Library

December 23, 2019, 7:08 am
$
0
0

This example consists of two parts: 

• A server (back-end) ASP.NET Core project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.

• Document Viewer and Report Designer front-end client applications created with the React JavaScript Library.

Perform the following steps to run this example:

1. Open the back-end project solution (CS\ServerSide.sln) in Visual Studio and run the project.

2. Navigate to the JS\react-document-viewer folder that is the client part's root folder.

3. Open the console and run the following command:
npm install

4. Run the command to compile and start the client part:
npm start

5. The client application opens the browser at http://localhost:3000/. It displays the Document Viewer with the Products report.

6. Navigate to the JS\react-report-designer folder that is the client part's root folder.

7. Open the console and run the following command:
npm install

8. Run the command to compile and start the client part:
npm start

9. The client application opens the browser at http://localhost:3000/. It displays the Report Designer with the Products report.

See also:

• Report Designer's Server-Side Configuration (ASP.NET Core)
• Document Viewer Integration in React
• Report Designer Integration in React
↧

How to Perform the JavaScript Document Viewer (Reporting) Integration (with npm or Yarn package managers)

December 25, 2019, 1:49 am
$
0
0

This example demonstrates how to integrate the HTML5 Document Viewer in JavaScript application based on the server-side model.

This example is created by performing the steps described in the Basic Document Viewer Integration (with npm or Yarn package managers) document.

This example consists of two parts: 

• A server (back-end) ASP.NET Core project that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements a custom web report storage.

• Document Viewer front-end client JavaScript application.

Perform the following steps to run this example:

1. Open the back-end project solution (CS\ServerSide.sln) in Visual Studio and run the project.

2. Navigate to the JS\ClientSide folder that is the client part's root folder.

3. Open the console and run the following command:
• if you have the npm package manager:
npm install

• if you have the Yarn package manager:
yarn install


4. Host the client-side part ( JS\ClientSide folder ) on the web server. You can add a new web site in the Internet Information Services (IIS) Manager.

5. Launch the browser and open the web site created in the previous step.

↧

How to localize DevExpress Blazor components

January 9, 2020, 2:57 am
$
0
0

This example demonstrates how to translate DevExpress Blazor components into different languages. The localization mechanism depends on your application’s hosting model: Blazor server (ASP.NET Core) or Blazor WebAssembly. The example contains code samples both for server-side and client-side Blazor.
 

Blazor Server

DevExpress components in server-side Blazor applications use the standard localization mechanism from the .NET framework - Satellite Resource Assemblies.
Our components ship with NuGet packages with predefined satellite assemblies for the following languages and cultures:

• German (de)
• Spanish (es)
• Japanese (ja)
• Russian (ru)

To obtain satellite assemblies for DevExpress .NET controls that correspond to other cultures, use the DevExpress Localization Service. This service allows you to modify the existing translations, compile and download the satellite assemblies.

Files to look at:

• Startup.cs
• CultureController.cs
• Index.razor

Blazor WebAssembly

Currently, there are no official nor recommended approaches on how to localize client-side Blazor applications. DevExpress Components in client-side Blazor applications are localized using the IDxLocalizationService interface implementation.

In this example, *.resx files are converted to dictionaries using T4 text templates. The IDxLocalizationService interface returns the required string from the corresponding dictionary using the IDxLocalizationService.GetString method.

Files to look at:

• Startup.cs
• DemoLocalizationService.cs
• Index.razor
• Resources folder
↧

Scheduler for Blazor - How to implement CRUD operations with a Web API Service

December 26, 2019, 7:51 am
$
0
0

This example contains two projects:

1. DataSourceWebApi project
This .NET Core project implements a Web API service with a connection to the MedicsScheduling database. The DataBase folder contains a script file that generates this database.

2. SchedulerCRUD project
This Blazor project illustrates how to use the AppointmentInserting, AppointmentInserted, AppointmentUpdated, and AppointmentRemoved events to implement CRUD operations in the DxScheduler. The XXX-ing events fire before the DxSchedulerDataStorage.AppointmentsSource object is changed and allow you to cancel changes. The XXX-ed events fire after the AppointmentsSource object was changed. You can use this object to update an assigned data source.

↧
↧

DataGrid for Blazor - How to bind it to the Web API Service

July 29, 2019, 7:34 am
$
0
0

There are two projects:

1. MyTestWebService
2. DataGridWithWebApiService
MyTestWebService

A sample project implementing a web API with ASP.NET Core.

ORM is EntityFrameworkCore.

The data base is "Northwind", and its backup is in this folder.

Restore the backup on your SQL server and change the connection string in this file correspondingly (see the OnConfiguring method).

DataGridWithWebApiService

This project uses the connection to the MyTestWebService web service. Deploy the MyTestWebService project, start it, and specify its address in this file

↧

DevExpress Blazor Components - A way to set predefined settings for the specific component

October 29, 2019, 9:36 am
$
0
0

In the case of a large Web application, you often 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.

Create an inheritor from our Blazor control 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 the 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 have the same settings in markup.

The list of limitations:

• It's not possible to use this approach 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.

↧
Search

Blazor Data Grid - How to use icons instead of default command buttons

August 16, 2019, 9:34 am
$
0
0

This example illustrates how to create custom HTML elements in DxDataGrid's command columns, specify icons for them and use the StartRowEdit method to initiate editing an existing row or adding a new row.

↧

Blazor Data Grid - How to save/load a grid's layout information

October 23, 2019, 8:37 am
$
0
0

This example illustrates how to use the LayoutChanged, LayoutRestoring events and the SaveLayout and LoadLayout methods to save layout information to some storage. After that this information can be restored and applied to DxDataGrid

Note: as this example illustrates a general approach, layout information is stored in the UserLayoutManager singleton service. This service doesn't identify the current end user.

The Index.razor page contains two DxDataGrids.

• The first grid handles the LayoutChanged and LayoutRestoring events. The current layout information is stored in the singleton service and is restored from this service inside these event handlers. So end-user modifications (paging/sorting/grouping/filtering) will be restored automatically after a page reload.
• The second grid saves and loads layout information using external buttons where the SaveLayout and LoadLayout methods are called. Click the "Save current layout" button to save the current layout information. The corresponding item will be created in the external list box. Then select any item in this list box and click the "Load layout" button to load the corresponding layout information.
↧
↧

Blazor Editors - How to implement the multiple selection editor

October 3, 2019, 12:58 pm
$
0
0

This example illustrates two different ways to implement the multiple selection editor. In both case our DxListBox box is used.
 

• In the first way, our DxListBox component is placed inside our DxPopup component.
• In the second way, the Bootstrap Dropdown widget is used, and DxListBox is placed inside that. This approach requires including the following JS libraries: jQuery, Popper, Bootstrap.
↧

Blazor Data Grid - How to bind a grid to a DataTable object

September 20, 2019, 8:40 am
$
0
0

DxDataGrid can be bound only to the IEnumerable collection of objects. So, a DataTable object cannot be directly passed to the DxDataGrid.Data property.

In the case when the structure of the used DataTable is known, it's possible to create a class with corresponding properties for each column in the DataTable object. Then it's necessary to generate the IEnumerable collection of this class' objects based on the Rows collection of the DataTable object.
This approach is demonstrated in the first "Static object" grid.

In some cases, the DataTable object is generated dynamically and its structure is not known. For this scenario, our DxDataGrid supports binding to the IEnumerable collection of the ExpandoObject objects. It's possible to dynamically generate properties in such objects based on the structure of the used DataTable.
This approach is demonstrated in the second "Dynamic object" grid. Check the ConvertDataTableToExpandoObjectList method which converts the DataTable object to the IEnumerable collection of the ExpandoObject objects.

↧

Blazor Data Grid - How to edit/delete the selected row by clicking on external buttons

July 29, 2019, 7:20 am
$
0
0

This example illustrates how to start editing/delete the selected row in DxDataGrid programmatically.
Our Data Grid provides the StartRowEdit method, which accepts a data item from the grid's data source.
It's possible to use this method to edit the selected row when some external button is clicked.
Also, this method accepts null as an argument to start a new row editing.

↧
Viewing all 7205 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>