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.
↧
DxDataGrid for Blazor - How to create cascading grids
↧
DxDataGrid for Blazor - How to edit a row on a separate page
This example illustates 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.
↧
↧
DxDataGrid for Blazor - How to bind it to the Web API Service
DxDataGrid for Blazor - How to bind it to the Web API Service
2. DataGridWithWebApiService
MyTestWebService
There are two projects:
1. MyTestWebService2. 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).
DataGridWithWebApiServiceThis project uses the connection to the MyTestWebService web service. Deploy the MyTestWebService project, start it, and specify its address in this file
↧
How to prevent ASPxButton multiple clicks when a postback is sent
Some browsers allow multiple ASPxButton clicks when a postback is sent. This example shows how to prevent this by using the ASPxClientButton.Click event.
The approach illustrated in this example allows you to prevent the ASPxButton from sending several postbacks without disabling it. If you need to make the button disabled once it's clicked, you can use the solution illustrated in the ASPxButton - How to execute a postback and disable the button on the first click to prevent clicking it multiple times example.
↧
ASPxButton - How to execute a postback and disable the button on the first click to prevent clicking it multiple times
In some scenarios, it's necessary to allow a user to click a certain button just once and prevent processing subsequent clicks. This example illustrates how to disable ASPxButton after the first click and a postback sending to prevent clicking it multiple times.
It's possible to disable the button on the client side by using the SetEnabled method. However, ASPxButton doesn't send a postback when it's disabled in by using this approach. To achieve the desired result, disable the button by using SetEnabled in this client-side Click event handler and perform this button's postback programmatically via the __doPostBack method.
Note that in this case, it's necessary to additionally disable the button in the server-side Click event handler by setting its ClientEnabled property because the disabled state applied by using the client-side SetEnabled method will be lost after this postback.
The approach illustrated in there allows you to prevent ASPxButton from sending several postbacks and show it as disabled once it's clicked. If you don't need to make the button disabled and just need to prevent it from sending several postback requests, you can use the solution illustrated in the How to prevent ASPxButton multiple clicks when a postback is sent example.
↧
↧
How to show audit entries for a current object and its aggregated objects in one list
The AuditTrail module is not designed to show audit information about a current object and each object from its collection property.
However, you can implement this behavior manually, and this example demonstrates how to do this:
[C#]publicclassMyPerson:XPObject{publicMyPerson(Sessionsession):base(session){}publicstringFullName{get{returnGetPropertyValue<string>("FullName");}set{SetPropertyValue<string>("FullName",value);}}[Association,Aggregated]publicXPCollection<MyAddress>Addresses{get{returnGetCollection<MyAddress>("Addresses");}}privateBindingList<CustomAuditDataItem>auditTrail;publicBindingList<CustomAuditDataItem>AuditTrail{get{if(auditTrail==null){auditTrail=newBindingList<CustomAuditDataItem>();auditTrail.AllowEdit=false;auditTrail.AllowNew=false;auditTrail.AllowRemove=false;XPCollection<AuditDataItemPersistent>rootItems=AuditedObjectWeakReference.GetAuditTrail(Session,this);if(rootItems!=null){foreach(AuditDataItemPersistententryinrootItems){auditTrail.Add(newCustomAuditDataItem(entry,"Person"));}}foreach(MyAddressaddressinAddresses){XPCollection<AuditDataItemPersistent>addressItems=AuditedObjectWeakReference.GetAuditTrail(Session,address);if(addressItems!=null){foreach(AuditDataItemPersistententryinaddressItems){auditTrail.Add(newCustomAuditDataItem(entry,"Address - "+address.Oid.ToString()+", "+address.AddressLine));}}}}returnauditTrail;}}}[C#][NonPersistent,DomainComponent]publicclassCustomAuditDataItem{privateAuditDataItemPersistentsourceAuditDataItem;privatestringtargetObjectName;publicCustomAuditDataItem(AuditDataItemPersistentsourceAuditDataItem,stringtargetObjectName){this.sourceAuditDataItem=sourceAuditDataItem;this.targetObjectName=targetObjectName;}publicstringTargetObjectName{get{returntargetObjectName;}}publicstringDescription{get{returnsourceAuditDataItem.Description;}}publicDateTimeModifiedOn{get{returnsourceAuditDataItem.ModifiedOn;}}[Size(1024)]publicstringNewValue{get{returnsourceAuditDataItem.NewValue;}}[Size(1024)]publicstringOldValue{get{returnsourceAuditDataItem.OldValue;}}publicstringOperationType{get{returnsourceAuditDataItem.OperationType;}}publicstringPropertyName{get{returnsourceAuditDataItem.PropertyName;}}publicstringUserName{get{returnsourceAuditDataItem.UserName;}}}As a result, the application will look as follows (in addition, I have customized the layout to demonstrate items from the 'Addresses' and 'Audit' properties at once):
↧
DxFormLayout for Blazor - How to change the visibility of DxFormLayout's items and groups
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.
↧
How to make the scheduler take the entire container content
Starting with v19.1 you can use the SetHeight method to stretch ASPxScheduler dynamically on the client. Call this method in the ASPxClientScheduler.Init and ASPxClientScheduler.EndCallback events and on resizing the browser window. You can handle the ASPxClientGlobalEvents.BrowserWindowResized event to catch the moment of browser resizing.
For versions prior to 19.1
This example demonstrates how to make the ASPxScheduler take the entire container content. The scheduler lies inside the ASPxSplitter control. It automatically changes height depending on the window size.
The height is calculated on the client side. Then, the calculated value is applied to the ScrollAreaHeight property of the Day View, Work-Week View and Full Week View and
to the DateCellBody property of the Month View.
Review the How to: Set the Scheduler's Size article to get more information about these properties.
↧
How to show custom popup context menu items only for certain fields
This is an extended version of the How to add a custom popup menu item example. It demonstrates how to hide certain context menu items using the client-side ASPxClientMenuBase.PopUp and ASPxClientMenuBase.CloseUp events. It is possible to use the ASPxPivotGrid.JSProperties dictionary to pass additional information for client side processing.
To get the ID of a target Field Value item use the pivotGrid.fieldMenuFieldID property.
If the Header menu is shown, you can get the ID using the pivotGrid.headerMenuFieldID property.
See also:
How to show a popup context menu's custom items only for certain fields in an MVC solution
↧
↧
Blazor Data Grid - How to use icons instead of default command buttons
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 Date Edit - How to implement the date range selector
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.
↧
ASPxRichEdit - How to insert RTF text to a document
Starting with version 18.1, the ASPxRichEdit control provides the insertRtf command, which allows you to add formatted RTF content at the specified position.
In versions prior to 18.1, ASPxRichEdit doesn't provide a functionality to insert RTF formatted text on the client side so that this format is applied automatically. This example demonstrates a workaround that allows you to insert formatted RTF text to the current document on a button click via an ASPxRichEdit callback.
To implement this scenario, initiate an ASPxRichEdit custom callback via the client-side ASPxClientRichEdit.PerformCallback method and handle the server-side ASPxRichEdit.Callback event. To add the required text in this event handler, you can use the AppendRtfText method of our non-visual RichEditDocumentServer component.
To insert this text at the current caret position in the middle of a document text, obtain this position on the client side by using the RichEditSelection.intervals array object and pass it to the server as a parameter of the ASPxClientRichEdit.PerformCallback method. Then, access this passed value in the server-side Callback event handler and use it to modify the current document position via the Document.CreatePosition method before inserting RTF text.
↧
RichEdit - How to insert RTF text to a document
Starting with version 18.1, the RichEdit extension provides the insertRtf command, which allows you to add formatted RTF content at the specified position.
In versions prior to 18.1, RichEdit doesn't provide a functionality to insert RTF formatted text on the client side so that this format is applied automatically. This example demonstrates a workaround that allows you to insert formatted RTF text to the current document on a button click via a RichEdit callback.
To implement this scenario, initiate a RichEdit custom callback via the client-side MVCxClientRichEdit.PerformCallback method and define the RichEditSettings.CustomActionRouteValues property. To insert the required text into the specified position, you can use the SubDocument.InsertRtfText method.
To insert this text at the current caret position in the middle of a document text, obtain this position on the client side by using the RichEditSelection.intervals array object and pass it to the server as a parameter of the MVCxClientRichEdit.PerformCallback method. Then, access this passed value in the action method specified in CustomActionRouteValues and use it to modify the current document position via the Document.CreatePosition method before inserting RTF text.
See also:
ASPxRichEdit - How to insert RTF text to a document
↧
↧
OBSOLETE - How to manage users (register a new user, restore a password, etc.) from the logon form in ASP.NET
We no longer update and recommend this solution. The last version updated for https://www.devexpress.com/bcid=BC4471 is available at T705146.
We'd like to announce that we've published an example demonstrating an alternative and more recommended solution to managing user authentication, registration and related tasks:
How to: Use Google, Facebook and Microsoft accounts in ASP.NET XAF applications (OAuth2 authentication demo)
Instead of creating and maintaining a quite complex custom-tailored implementation for managing users from the logon form, we recommend delegating these routine tasks to OAuth2 providers. For instance, Microsoft or Google provide Office 365 and G Suite services for managing users (e.g., register and delete users, reset forgotten passwords), documents, apps and other things within an organization using standard and familiar for business people means. Your XAF application will just smoothly integrate these OAuth2 providers into the logon form after adding some boilerplate code.
Your feedback on this implementation and the approach in general is welcome.
====================
Scenario
This example contains a reusable Security.Extensions module that provides a possible solution for the following scenarios:
Security - provide the capability to register a new user from the logon form
Security.Authentication - provide a "Forgot Password" feature
Steps to implement
In order to use this module in your project, do the following:
2. Invoke the Module Designer for your platform-agnostic module and drag and drop the SecurityExtensionsModule from the Toolbox;
3. Add the following code into your platform-agnostic module class:
[C#]staticYourPlatformAgnosticModuleName(){SecurityExtensionsModule.CreateSecuritySystemUser=Updater.CreateUser;}where 'Updater.CreateUser' is your custom method that matches the following definition:
[C#]publicdelegateIAuthenticationStandardUserCreateSecuritySystemUser(IObjectSpaceobjectSpace,stringuserName,stringemail,stringpassword,boolisAdministrator);IMPORTANT NOTE
This module is currently ASP.NET only.
↧
How to force the grid to stay in Edit mode
This example demonstrates how to programmatically switch the grid into edit mode, and to save changes when the row focus moves.
See Also:
How to implement a single cell editing feature in the ASPxGridView
How to implement the multi-row editing feature in the ASPxGridView
How to implement instant editing in the ASPxTreeList
↧
OBSOLETE - How to customize the settings of a toolbar item created for an Action
====================================
This example is now obsolete. With XAF v16.2, the functionality demonstrated here is a part of the Feature Center demo: C:\Users\Public\Documents\DevExpress Demos 16.2\Components\eXpressApp Framework\FeatureCenter\CS. The complete description is still available in the How to: Customize Action Controls topic.
====================================
See Also:
How to create custom action type with custom control (BarCheckItem), associated with it
↧
WinForms Dashboards - How to use a custom format for axis labels in the Chart Item
Update: Starting with version 18.2, we introduced the capability to format any Numeric or Date-Time Value. So, you can set formats demonstrated in this example via the Dashboard Designer's UI using the following settings without writing additional code:
Numeric Format X-Axis Settings
Numeric Format Y-Axis Settings
However, you can still use approaches demonstrated in this example if you wish to implement your custom formatting not supported by the control.
Although our Dashboards do not provide a way to use custom formats and specify formats for axis labels in certain case, there is a way to format axis labels manually. This example illustrates how to format axis labels in a custom manner. For this access the underlying Chart Control in the DashboardItemControlCreated event handler and handle the CustomDrawAxisLabel event to modify the axis labels' content directly.
Note that printed or exported documents containing a dashboard/dashboard item do not reflect appearance settings applied using the events for accessing of underlying controls.
See also:
Access to Underlying Controls
Web Dashboards - How to use a custom format for axis labels in the Chart Item
The following three most frequently asked scenarios are represented in this example:
1. Add the currency sign.
[C#]privatevoiddashboardDesigner1_DashboardItemControlCreated(objectsender,DevExpress.DashboardWin.DashboardItemControlEventArgse){...e.ChartControl.CustomDrawAxisLabel+=ChartControl_CustomDrawAxisLabel1;...}privatevoidChartControl_CustomDrawAxisLabel1(objectsender,DevExpress.XtraCharts.CustomDrawAxisLabelEventArgse){if(e.Item.AxisisSecondaryAxisY)e.Item.Text="$"+e.Item.Text;}2. Use the ones unit format
[C#]privatevoiddashboardDesigner1_DashboardItemControlCreated(objectsender,DevExpress.DashboardWin.DashboardItemControlEventArgse){...e.ChartControl.CustomDrawAxisLabel+=ChartControl_CustomDrawAxisLabel2;...}privatevoidChartControl_CustomDrawAxisLabel2(objectsender,DevExpress.XtraCharts.CustomDrawAxisLabelEventArgse){if(e.Item.AxisisSecondaryAxisY)e.Item.Text=((double)e.Item.AxisValue).ToString("n0");}3. Remove the decimal part of numbers.
[C#]privatevoiddashboardDesigner1_DashboardItemControlCreated(objectsender,DevExpress.DashboardWin.DashboardItemControlEventArgse){...e.ChartControl.CustomDrawAxisLabel+=ChartControl_CustomDrawAxisLabel3;...}privatevoidChartControl_CustomDrawAxisLabel3(objectsender,DevExpress.XtraCharts.CustomDrawAxisLabelEventArgse){if(e.Item.AxisisAxisX)e.Item.Text=((double)e.Item.AxisValue).ToString("n0");}↧
↧
Web Dashboards - How to use a custom format for axis labels in the Chart Item
Update: Starting with version 18.2, we introduced the capability to format any Numeric or Date-Time Value. So, you can set formats demonstrated in this example via the Design mode's UI using the X and Y axis formatting settings without writing additional code.
However, you can still use approaches demonstrated in this example if you wish to implement your custom formatting not supported by the control.
Although our Dashboards do not provide a way to use custom formats and specify formats for axis labels in a certain case, there is a way to format axis labels manually. This example illustrates how to format axis labels in a custom manner. For this, access the underlying dxChart widget in the ItemWidgetCreated and ItemWidgetUpdated event handlers and customize axis labels in the dxChart.argumentAxis.label.customizeText or dxChart.valueAxis.label.customizeText callback function.
Note that printed or exported documents containing a dashboard/dashboard item do not reflect appearance settings applied using the events for accessing of underlying widgets.
See also:
Access to Underlying Widgets
WinForms Dashboards - How to use a custom format for axis labels in the Chart Item
The following two most frequently asked scenarios are represented in this example:
1. Add the currency sign.
[JavaScript]function onItemWidgetCreated(s, e){if(e.ItemName == "chartDashboardItem1"){var widget = e.GetWidget();var customizeText = widget.option('valueAxis[0].label.customizeText');
widget.option('valueAxis[0].label.customizeText', function(args){var defaultText = $.proxy(customizeText, args)(args);return'$' + defaultText;});}...}2. Use the ones unit format
[JavaScript]function onItemWidgetCreated(s, e){...if(e.ItemName == "chartDashboardItem2"){var widget = e.GetWidget();
widget.option('valueAxis[0].label.customizeText', function(args){return args.value.toLocaleString();});}}↧
Blazor Data Grid - How to bind a grid to a DataTable object
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.
↧
How to modify a dashboard before displaying it in a browser
This example demonstrates how to define a custom Dashboard Storage and override the LoadDashboard method that is used to load dashboards. From this method, you can edit the loaded dashboard and provide the updated version to the MVCxDashboard control. In this example, a custom descendant of the DashboardFileStorage class is created. It allows defining the default parameter value and customizing the data source query to filter displayed data.
↧