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

How to implement a Theme Switcher in Blazor applications

December 13, 2019, 4:34 am
$
0
0

This example demonstrates how to create a Theme Switcher as in DevExpress Blazor Demos and apply the selected theme to an application dynamically. The example contains solutions both for server-side and client-side Blazor.

This Theme Switcher offers the standard Bootstrap theme, 2 DevExpress Bootstrap themes, and 21 Bootstwatch themes.

Files to look at:

| Server-Side Blazor | Client-Side Blazor |
|---|---|
| ThemeSwitcher.razor | ThemeSwitcher.razor
| MainLayout.razor | MainLayout.razor
| Index.razor | Index.razor
| site.css | site.css
| switcher-resources (folder) | switcher-resources (folder)
| ThemeLink.razor |
| LinkService.cs
| Startup.cs |
| _Host.cshtml |

↧
Search

How to add a pre-created parameter instance to the Field List and keep the parameter's name

September 28, 2012, 6:38 am
$
0
0

This example demonstrates how to programmatically add a report parameter to the report that is being opened in the End\-User report designer. To display a report in the Field List, it is not sufficient to add it to the XtraReport.Parameters collection. You will also need to use the DesignToolHelper.AddToContainer method and specify the target XRDesignPanel.

Files to look at:

• Form2.cs (VB: Form2.vb)
↧
↧

How to override the existing behavior when dropping an item from the Field List in the End-User Designer

December 31, 2000, 4:00 pm
↧

RichEdit Angular Application

December 24, 2019, 3:14 am
$
0
0

This example is a ready-to-use client Angular application with the DevExpress RichEdit component.

Documentation: Add RichEdit to an Angular Application

Requirements

• To use the RichEdit control in an Angular application, you need to have a Universal, DXperience, or ASP.NET subscription.
• Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

Quick Start

1. Open the JS folder. In the command prompt, download and install npm packages that are used in the application:
npm install

2. In the same folder, run the following command to compile and run the application:
ng serve --open

See Also

Documentation:

• Add RichEdit to an Angular Application
• Rich Text Editor

Examples:

• RichEdit for Angular - How to customize the built-in ribbon
↧

RichEdit for Angular - How to customize the built-in ribbon

December 24, 2019, 4:06 am
$
0
0

This example is a ready-to-use client Angular application with the DevExpress RichEdit component. It demonstrates how to modify the built-in ribbon in the RichEdit control.
The ribbon option allows you to access RichEdit's built-in ribbon. You can get required tabs and items using the getTab and getItem methods respectively.
Then, you can add or remove items using the insertItem and removeItem methods.

Documentation: Add RichEdit to an Angular Application

Requirements

• To use the RichEdit control in an Angular application, you need to have a Universal, DXperience, or ASP.NET subscription.
• Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

Quick Start

1. Open the JS folder. In the command prompt, download and install npm packages that are used in the application:
npm install

2. In the same folder, run the following command to compile and run the application:
ng serve --open

See Also
Documentation:

• Add RichEdit to an Angular Application
• Rich Text Editor

Examples:

• RichEdit Angular Application
↧
↧

ImageSlider - How to apply a watermark to images

September 4, 2018, 1:31 pm
$
0
0

Files to look at:

• HomeController.cs (VB)
• Views/Home/Index.cshtml (VB)
• Code/ImageHelper.cs (VB)
• Code/PhotoUtils.cs (VB)

This example illustrates how to apply a watermark to images displayed in ImageSlider. Although ImageSlider does not provide the functionality to apply watermarks out of the box, this task can be done by creating an item template that contains the BinaryImage extension. The main idea is to create System.Drawing.Image and System.Drawing.Graphics instances from images, apply a watermark to the Graphics instance, and then convert the resulting image to an array of bytes. The PhotoUtils and ImageHelper classes are used for this.

[C#]
Html.DevExpress().BinaryImage(bi=>{byte[]image=ImageSliderWithWatermark.Code.ImageHelper.GetImageWithWatermark(t.EvalDataItem("ImageUrl").ToString(),"ImageSlider","Arial");bi.ContentBytes=image;}).Render();
[VB.NET]
Html.DevExpress().BinaryImage(Sub(bi)Dim image AsByte() = ImageSliderWatermark.ImageHelper.GetImageWithWatermark(
        t.EvalDataItem("ImageUrl").ToString(),"ImageSlider","Arial")
bi.ContentBytes = imageEndSub).Render()
↧

GridView - How to bind a combo box column to Enum

September 4, 2018, 2:05 pm
$
0
0

Files to look at:

• CS • _GridViewPartial.cshtml
• Order.cs

• VB • _GridViewPartial.vbhtml
• Order.vb

This example illustrates how to bind a combo box column to Enum using the Enum.GetNames method:

[C#]
settings.Columns.Add(m=>m.Status,column=>{column.ColumnType=MVCxGridViewColumnType.ComboBox;varcomboBoxProperties=(ComboBoxProperties)column.PropertiesEdit;comboBoxProperties.DataSource=Enum.GetNames(typeof(ComboBoxColumnBoundToEnum.Models.OrderHelper.OrderStatus));});
[VB.NET]
settings.Columns.Add(Function(m) m.Status, Sub(column)
        column.ColumnType = MVCxGridViewColumnType.ComboBoxDim properties = CType(column.PropertiesEdit, ComboBoxProperties)
        properties.DataSource = [Enum].GetNames(GetType(ComboColumnBoundToEnum.OrderHelper.OrderStatus))EndSub)
↧

How to Create a Model for a Custom Chart Element

December 17, 2019, 1:54 am
$
0
0

This example illustrates how to create and register a model (the CustomPointColorizerModel class in this example) for a custom chart element (the CustomPointColorizer class in this example).

A user configures chart element model properties when modifying chart element properties in the Chart Designer. Model changes apply to a corresponding chart element when the user clicks OK. The Chart Control provides models for existing chart elements. If you create a custom element (a colorizer in this example), you should create and register a model for this element to allow users to edit its options.

See the Chart Designer for End-Users help document for more information.

Files to look at:

• MainForm.cs (VB: MainForm.vb)
• CustomColorizerEditor.cs (VB: CustomColorizerEditor.vb)
↧
Search

Mobile UI for Xamarin.Forms: Feature Demos

December 17, 2019, 7:33 am
↧
↧

Diagram for Web Forms - Node and Edge data sources - How to bind the control to in-memory data sources

December 24, 2019, 7:25 am
$
0
0

Unlike declarative *DataSource controls (such as AccessDataSource, SqlDataSource, LinqDataSource, EntityDataSource, and so on), custom in-memory data sources (such as List<T>, DataTable and so on) do not allow you to automatically perform CRUD operations. These custom CRUD operations' logic can be implemented with the help of ObjectDataSource. This example demonstrates how to bind the Diagram control to ObjectDataSource and implement custom CRUD operations at the data source level.

In this example, the Diagram control loads a graph structure from two data sources: one for shapes (NodeDataSourceID) and the other for shape connectors (EdgeDataSourceID). You need to add mapping information for a shape Key and a connector Key, FromKey and ToKey properties.

See also:
Diagram for Web Forms - Tree from Linear Data Structure - How to bind the control to in-memory data sources

Files to look at:

• TypedListDataBinding.aspx (VB: TypedListDataBinding.aspx)
• NodesTypedListDataProvider.cs (VB: NodesTypedListDataProvider.vb)
• EdgesTypedListDataProvider.cs (VB: EdgesTypedListDataProvider.vb)
• DataTableDataBinding.aspx (VB: DataTableDataBinding.aspx)
• NodesDataTableDataProvider.cs (VB: NodesDataTableDataProvider.vb)
• EdgesDataTableDataProvider.cs (VB: EdgesDataTableDataProvider.vb)
↧

How to use the CustomCellValues event to display the original values and Running Total values

December 31, 2000, 4:00 pm
$
0
0

The original brunch of this example version 13.1+ demonstrates how to show running totals for one field, while displaying typical total summaries for another using the CustomCellValue event. Note that this event is used only to customize displayed values. Thus, running total values will be used by other operations that use Data Fields: Sorting by Summary, Unbound Expression, etc.

Starting with version 19.2 it is possible to use the new Optimize data processing engine to enable the RunningTotals feature in specific data fields. To enable the Optimized engine, use the OptionsData.DataProcessingEngine property. Then you will be able to bind fields to data using the PivotGridField.DataBinding property. The following code snippet demonstrates how to define two data fields bound to the same data source column and display running summary values in one of them:

[C#]
newPivotGridField(){Caption="Amount",ID="fieldAmount",// or Name = "fieldAmount",  Area=DevExpress.XtraPivotGrid.PivotArea.DataArea,DataBinding=newDataSourceColumnBinding("ProductAmount")};newPivotGridField(){Caption="Running Amount",ID="fieldRunningAmount",// or Name = "fieldRunningAmount"  Area=DevExpress.XtraPivotGrid.PivotArea.DataArea,DataBinding=newRunningTotalBinding(newDataSourceColumnBinding("ProductAmount"),DevExpress.XtraPivotGrid.CalculationPartitioningCriteria.RowValue,DevExpress.Data.PivotGrid.PivotSummaryType.Sum)};

See Also:
Add the capability to specify data fields for the RunningTotals feature

Files to look at:

• Default.aspx (VB: Default.aspx)
↧

Web Dashboard - How to get data from a clicked dashboard item

December 25, 2019, 7:03 am
$
0
0

This example shows how to get data from a clicked dashboard item using the client-side ASPxClientDashboard.ItemClick event.

The event handler receives arguments of the ASPxClientDashboardItemClickEventArgs type, which allows you to get data displayed in a clicked item: grid rows, series points, cards, etc.
Note that some dashboard items display multidimensional data. See the Obtaining Underlying and Displayed Data help topic for more information about the general data structure. Use these steps to get data in the following order:

• Call the GetData method to request the ASPxClientDashboardItemData
• ASPxClientDashboardItemData.GetAxisNames method.
• Get information about dimensions corresponding to each axis using the GetDimensions and GetAxisPoint methods.
• To get the last level measure values, divide data by displayed axis points using the GetSlice method and call the GetMeasureValue method.

Files to look at:

• Default.aspx
• Default.aspx.cs
↧

Diagram for Web Forms - Tree from Linear Data Structure - How to bind the control to in-memory data sources

December 25, 2019, 7:10 am
$
0
0

Unlike declarative *DataSource controls (such as AccessDataSource, SqlDataSource, LinqDataSource, EntityDataSource, and so on), custom in-memory data sources (such as List<T>, DataTable and so on) do not allow you to automatically perform CRUD operations. These custom CRUD operations' logic can be implemented with the help of ObjectDataSource. This example demonstrates how to bind the Diagram control to ObjectDataSource and implement custom CRUD operations at the data source level.

In this example, the Diagram control transforms a linear data structure to a tree-like diagram. The NodeDataSourceID property specifies which data source the control is bound to. To transform a linear data structure to hierarchical, the data source should contain two additional fields:

• The first field - assigned to the Key property and contains unique values.
• The second field - assigned to the ParentKey property and contains values that indicate the current node's parent nodes.

You can bind other node settings to the data source. Assign field values to the corresponding settings in the Mappings.Node property.

Files to look at:

• TypedListDataBinding.aspx (VB: TypedListDataBinding.aspx)
• DepartmentTypedListDataProvider.cs (VB: DepartmentTypedListDataProvider.vb)
• DataTableDataBinding.aspx (VB: DataTableDataBinding.aspx)
• DepartmentDataTableDataProvider.cs (VB: DepartmentDataTableDataProvider.vb)

See also:
Diagram for Web Forms - Node and Edge data sources - How to bind the control to in-memory data sources

↧
↧

How to Perform the JavaScript Report Designer Integration (with npm or Yarn package managers)

December 24, 2019, 9:06 am
$
0
0

This example demonstrates how to integrate the End-User Web Report Designer in JavaScript application based on the server-side model.

This example is created by performing the steps described in the Basic Report Designer 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.

• Report Designer 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 export ASPxSpreadsheet to PDF

October 3, 2014, 7:08 am
↧
Search

DataGrid - How to use FileUploader as a cell editor

December 26, 2019, 1:18 am
$
0
0

This example illustrates how to embed the dxFileUploader widget into the dxDataGrid's editing form to associate files with grid rows.

The grid has the Picture field which holds the associated image file name. We specify the cellTemplate to display the image as illustrated in the Column Template demo module.

To implement the file upload UI/logic, we handle the onEditorPreparing event and enable the dxFileUploader widget for the Picture field. We also handle the dxFileUploader.onValueChanged event to pass the current row key to the server.

The server part for the file uploading is implemented in the context of the EmployeesController.Upload method in the EmployeesController.cs code file.

Note: This example illustrtes the basic approach to upload files. It does not include any logic to handle file name conflicts or file preview functionality. You may need to implement special logic to save files with unique names. In this scenario, use the key argument passed to the EmployeesController.Upload method. You will also need to synchronize the client-side file name passed to the e.setValue method.

Take a look at the following files of this example to see the required code:

EmployeesController.cs

JQuerySample.cshtml

MVCSample.cshtml

↧

How to Add the Document Viewer to an ASP.NET Core Application

December 12, 2019, 5:28 am
$
0
0

This example is the resulting project if you follow the steps described in the Add the Document Viewer to an ASP.NET Core Application document.

The report in this example is created as the Create a Report in Visual Studio document describes. The report is bound to the Products table of the Northwind database attached to the localhost Microsoft SQL Server.

Restore packages (listed in the package.json file) before running this project.

Files to look at:

• Startup.cs
• Index.cshtml
↧
↧

DataGrid for Blazor - How to create DataGrid and its columns at runtime

December 25, 2019, 10:34 am
$
0
0

This example shows how to create DataGrid components at runtime and create its columns dynamically.
The easiest way to do so is to write a method that returns the RenderFragment<T> object, for example, in the following manner:

RenderFragment<DataItem> buildGridsWithColumns = (dataObject) =>
@<DxDataGrid Data="@dataObject.Data">
    @foreach (var column in dataObject.ColumnNames)
    {<DxDataGridColumn Field="@column" />
    }</DxDataGrid>;

The call of such a method creates a grid with columns.

Files to look at:

• Index.razor
↧

TreeView for Blazor - How to implement the Breadcrumb control based on a selected node

December 25, 2019, 1:04 pm
$
0
0

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:

• Index.razor
↧

How to implement CRUD operations via API controllers in an ASP.NET Core with Razor Pages project

December 26, 2019, 8:04 am
$
0
0

This example demonstrates how to bind dxDataGrid to a controller action and implement CRUD operations via an API controller in a Razor Pages project.
Set the Controller, LoadAction, UpdateAction, InsertAction and DeleteAction options so that dxDataGrid's data source can perform CRUD operations. In the corresponding controller, implement data operations in the corresponding actions.

Note that it is necessary to correctly setup routing to razor pages and controllers.

See also: Routing in ASP.NET Core

Files to look at:

• DataGridEmployeesController.cs
• Index.cshtml
↧
Viewing all 7205 articles
Browse latest View live
Search