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

ASPxGridView - Batch Edit - How to change a cell value based on another cell value

$
0
0

The sample illustrates how to change the Price column value when the Percentage column is changed and vice versa.

ASPxClientGridView provides the ASPxClientGridView.batchEditApi property to work with grid in batch mode on the client side. In the ASPxClientGridViewBatchEditApi class, there are two methods to get and set a cell value respectfully: ASPxClientGridViewBatchEditApi.GetCellValueASPxClientGridViewBatchEditApi.SetCellValue(Int32,String,Object).

In the ASPxClientGridView.BatchEditEndEditing event handler, the GetCellValue method returns a correct cell value when a cell is not in editing mode. If a cell is in editing mode and a value is changed, the GetCellValue method returns the previous value, not a new entered value. To get a new entered value that is still in editing mode, it's necessary to use the ASPxClientGridViewBatchEditEndEditingEventArgs.rowValues property. 

In the attached sample, a focused column is saved in the ASPxClientGridView.BatchEditStartEditing event handler:

[JavaScript]
var fieldName;function OnBatchEditStartEditing(s, e){ fieldName = e.focusedColumn.fieldName;}

When column editing is over, the ASPxClientGridView.BatchEditEndEditing event is raised. To get a new entered value, the rowValues property is used. To update the next column, the SetCellValue is used as a new column is not yet in editing mode

[JavaScript]
function OnBatchEditEndEditing(s, e){var cPrice = s.GetColumnByField("Price");var cPercentage = s.GetColumnByField("Percentage");var cost = s.batchEditApi.GetCellValue(e.visibleIndex, "Cost");if(fieldName == "Price"){var price = e.rowValues[cPrice.index].value; s.batchEditApi.SetCellValue(e.visibleIndex, "Percentage", (price - cost) / (cost), null, true);}if(fieldName == "Percentage"){var percentage = e.rowValues[cPercentage.index].value; s.batchEditApi.SetCellValue(e.visibleIndex, "Price", cost + (cost * percentage), null, true);}}

ASPxGridView - Batch Edit - How to calculate values on the fly

$
0
0

This example demonstrates how to create an unbound column that calculates the sum of other columns and changes its values on the fly when end-user changes any grid values using Batch edit mode. 

You can find detailed steps by clicking below the "Show Implementation Details" link .

See Also:

ASPxGridView - How to update total summaries on the client side in Batch Edit mode
ASPxGridView - Batch Edit - How to calculate unbound column and total summary values on the fly 
ASPxGridView - Batch Edit - How to change a cell value based on another cell value

ASP.NET MVC Example:
GridView - Batch Edit - How to calculate values on the fly

How to show a hyper link (URL, email, etc.) for a business class property

$
0
0

Scenario
The following basic functionality is implemented in the HyperLinkPropertyEditor.Win,HyperLinkPropertyEditor.Web and HyperLinkPropertyEditor.Mobile modules:

1. Custom PropertyEditor classes for WinForms, ASP.NET and Mobile are based on the HyperLinkEdit, ASPxHyperLink and LinkComponent controls that can be used for representing object fields, containing email address, a URL or phone number (only for a Mobile application) in the UI.
2. To validate an input, a combined RexEx mask is used in both ListView and DetailView of WinForms and ASP.NET applications. The default regular expression is the following:
(((http|https|ftp)\://)?[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&%\$#\=~])*)|([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6})
You can use it as is or modify it per your specific needs. Look for Regular Expressions in MSDN for more information on how to do this.
In Mobile applications, the CalculatedField.Getter property is used to determine whether or not the field value is a ten-digit phone number, email address or a URL, as it is shown in the MobileHyperLinkStringPropertyEditor.xx file.
3. The default email client, browser window or application for calling (only for a Mobile application) is opened after a single click on the hyperlink if it represents a valid email, web address or phone number. For end-users convenience, in DetailView of WinForms projects, a double-click is necessary to be able to easily edit the field.



Steps to implement

1. Copy and include the HyperLinkPropertyEditor.Web,HyperLinkPropertyEditor.Winand HyperLinkPropertyEditor.Mobile projects into your solution and make sure it is built successfully. Feel free to modify the settings of the underlying controls according to their documentation to better meet your business needs, e.g. provide a custom display text instead of the raw URL via the RepositoryItemHyperLinkEdit.Caption, ASPxHyperLink.Text and LinkComponent.Text options.

2. Invoke the Application Designer for the YourSolutionName/WinApplication.xx file by double-clicking it in Solution Explorer. Invoke the Toolbox (Alt+X+T) and then drag & drop the HyperLinkPropertyEditorWindowsFormsModule component into the modules list on the left.

3. Invoke the Application Designer for the YourSolutionName/WebApplication.xx file by double-clicking it in Solution Explorer. Invoke the Toolbox (Alt+X+T) and then drag & drop the HyperLinkPropertyEditorAspNetModule component into the modules list on the left.

4. Invoke the Application Designer for the YourSolutionName/MobileApplication.xx file by double-clicking it in Solution Explorer. Invoke the Toolbox (Ctrl+Alt+X) and then drag & drop the HyperLinkPropertyEditorMobileModule component into the modules list on the left.

5. Define a string persistent property within your business class and decorate it with the DevExpress.Persistent.Base.EditorAliasAttribute passing the "HyperLinkStringPropertyEditor" string as a parameter. See the E2096.Module\HyperLinkDemoObject.xx file for an example.


Frequently Asked Questions
E2096 - How to specify a display text for the hyper link based on a different business class property

Question Comments

Added By: Salter at: 9/25/2017 9:11:14 AM    I follow the steps.

For #4, the HyperLinkPropertyEditorMobileModul does not appear in my toolbox

I tried to put the MobileHyperLinkStringPropertyEditor both in the same project or in another project. It does not appear in the Toolbox
 

How to handle a double click on appointments and time cells

$
0
0

This example illustrates how to handle a double click on appointments and time cells. There is a simple solution in case of appointments. You just need to handle the built-in ASPxClientScheduler.AppointmentDoubleClick Event. You might also need to set the e.handled parameter to true if it is necessary to suppress an appointment's in-place editor. 

Starting from v17.1, the ASPxClientScheduler.CellDoubleClick event is introduced to handle a mouse double-click for a time cell. 


In case of the time cells, you will need to utilize a more complex approach because there is no appropriate built-in event. Attach the dblclick event handler to the root HTML element of ASPxClientScheduler

How to: Change the application logo

How to get data validation errors count

$
0
0
This example demonstrates how to get data validation errors count after executing the "Circle Invalid Data" command in the SpreadsheetControl's Ribbon.

How to obtain data for Web Dashboard from online spreadsheets

$
0
0

This is a sample project that connects Dashboard to a Google Drive spreadsheet. Follow the steps below to create a data source based on the online spreadsheet:
1. Set MvcDashboard as a startup project and launch the application.
2. Click the 'Sign in GoogleDrive' button to sign into the Google Account and allow the current application to view files in your Google Drive.
3. After redirection click the 'Add New ExcelDataSource' button to select the required spreadsheet file and data (like sheets, tables, or named ranges).
The created data source is now available for your dashboards.

Note that this sample project is a prototype that shows the possibility of using a third-party API to extend the Web Dashboard functionality. We do not plan to make access to Google Drive a built-in feature in Web Dashboard in the near future, but you can use the provided project as a starting point to implement this functionality in your project. 

See also
DevExpress Blogs - Connect Dashboard to a Google Drive Spreadsheet

How to implement the drag and drop functionality for the Token Editor

$
0
0
This example demonstrates how to implement the drag and drop functionality for tokens in controls that support the Token mode. This functionality is implemented as a custom DragDropBehavior which is defined in a style using the Interaction.BehaviorsTemplate attached property.

How to save and share custom view settings

$
0
0

In XAF applications, View settings are stored in Model Differences individually for each user. When the user changes the View (e. g., adds a column to a List View or groups View Items in a Detail View layout), these settings are saved in the user's Model Differences and applied to this View the next time it is displayed.
The built-in View Variants Module allows creating multiple predefined view settings using the Model Editor or in code and provides the end user with the capability to select a view variant at runtime.

 

Scenario

We want to provide the capability to save customized view settings as new view variants at runtime, share them, and allow any user having the corresponding permission to select a variant and apply these settings.

 

Solution

In this example, we use a persistent class to store view settings in the database and a view controller with actions to manage these settings (creating, applying and deleting). Each user can create his/her own view variants. Each view variant can be optionally marked as shared, so that other users can see and apply it to their views.


First, create the SettingsStore class with the following properties to store the View settings:
1. Xml - a string where serialized view settings are stored;
2. Name - the name of the View Variant;
3. OwnerId - an identifier of the user who created this Variant;
4. IsShared - specifies whether this Variant is shared with other users, or not;
5. ViewId - an identifier of the View for which this variant is created.

 

Then, create the ViewController with the following behavior:
1. There are Shared Model Settings available for each user, which cannot be edited by them.
2. Each user has his/her own default settings saved in the user's Model and used when there are no variants.
3. The SaveAsNewViewVariant action creates a new View Variant based on current view customizations. If this is the first Variant created for the view, two new Variants are created: a Variant that stores default settings (named "Default") and a Variant that stores customized view settings. If at least one Variant already exists, only the latter View Variant (with current customizations) is created. This variant becomes current.
4. The SelectViewVariant action makes the View Variant selected in the combo box current. This action is available when at least one variant exists. When the current View Variant is changed, customizations applied to the previous View Variant are lost. Only the "Default" View Variant customizations are saved in the Model when the current variant is changed.
5. The UpdateCurrentViewVariant action saves customizations to the currently selected View Variant.
6. The DeleteViewVariant action deletes the current View Variant. After deletion, the "Default" view variant becomes current and its settings are applied.
7. The UpdateDefaultViewVariant action saves customizations made to the current view in the "Default" Variant.

 

Actions provided by the ViewVariantsController controller may look as follows:


This example demonstrates the basic functionality, which you can expand or customize according to your requirements. For example, you can prevent certain users from deleting View Variants using the Security System facilities. Also, you can store the current Variant in the Model (see the Extend and Customize the Application Model in Code topic in our documentation) or in a property of the user object and apply it when the corresponding View is opened.

Note that the approach demonstrated by this example may be inappropriate or too complicated for certain use cases. So, we cannot guarantee that it will work in all possible scenarios. Should you face any issue using this solution or difficulty implementing it in your project, please submit a separate ticket and describe your scenario in detail. We will research this information to make the functionality better.

Question Comments

Added By: Michael Bogaerts at: 8/24/2017 3:14:06 AM    Modified it a little to match my EF project.
Works very wel for me except for deleting the variants.
The ObjectSpace of the CurrentLayoutItem is null in the
DeleteViewVariantAction_Execute 
 action I wil investigate this a bit further to figure out what is going wrong... Added By: Michael Bogaerts at: 8/24/2017 4:01:27 AM    this fixes it for me
[C#]
privatevoidDeleteViewVariantAction_Execute(objectsender,SimpleActionExecuteEventArgse){IObjectSpaceLinkcurrentLayoutItem=SelectViewVariantAction.SelectedItem.DataasIObjectSpaceLink;if(TryLoadViewVariantFromXML(defaultUserSettings)){IObjectSpaceos=currentLayoutItem.ObjectSpace;os.Delete(currentLayoutItem);os.CommitChanges();UpdateActions(null);}}

Added By: Alex Gn (DevExpress) at: 8/24/2017 7:06:33 AM    

Hello Michael,

Thank you for the feedback. I have updated the sample.

Added By: Zoltan Etelvari at: 8/25/2017 3:16:05 AM    Hi DevExpress Team !

To share views between users is a COOL feature that I suggested about a year ago.
(thanks for the implementation).

Another idea :
To extend SettingStore class :
IsUpdated - specifies, where the user can updated another user's shared view,- I mean I make RO the view, but I share.
If IsUpdated = false , - view is read only,- user simply save the view with another name, and modify it. that's it.


So I think, this is a small modifying in code, and I think, with this features would be this solution perfect.


thanks

Zoltan

Added By: Alex Gn (DevExpress) at: 8/25/2017 4:12:39 AM    

Hello Zoltan,

Thank you for your feedback. We will take this scenario into account. Currently, you can disable unwanted actions in the UpdateActionsActive method based on property values of a selected variant.

Added By: Michael Bogaerts at: 8/25/2017 4:34:12 AM    Hi Alex,

How far in details would like the feedback to go? should i report i there in the comments of do you prefer different tickets?Added By: Alex Gn (DevExpress) at: 8/25/2017 5:30:07 AM    

Hello Michael,

Would you please describe the scenarios you'd expect to have in the sample and the problems you faced during the implementation. A new ticket would be more preferred.

Added By: Lenny Sorey at: 10/2/2017 10:44:32 AM    This is very close to what I need, but I have a question regarding the Application Model.

I am using the DB as the UserModelDifferenceStore, AND I am using a version of the SettingsStore class in this example.
What I'd like to be able to do is to prevent any user from updating the model for a list view (so that I have a universal default for that view).  I'd also like to have any and all variants be diff'ed against that default view.

So now my question:  How can I prevent users from storing changes to the model for a particular view in the UserModelDifferenceStore?  I have created an extender for list views that allows me to get;set whether I am planning to use this custom view variants store, but the application model is getting saved in the database with the design changes, so that subsequent instances of the view are built with the DB settings instead of the "default" settings.

I guess I'm looking to trap the View.ModelSaving event and make sure the changes apply to the Settings store and NOT to the user's base Application Model.  Is there another event I should be interested in, 'cause I can't that one to prevent the update.

How to enable snap to the middle in the ZoomTrackBarControl 

$
0
0

This example demonstrates how to add snap to the middle in the the ZoomTrackBarControl control. 

First, we added two properties in the custom RepositoryItemZoomTrackBar: SnapToMiddleValue that allows you to enable or disable snapping and MiddleDistance that gives you the opportunity to change the distance (as a percent) from the middle of a trackbar when snapping takes effect.

How to make the DXGrid view row template editable (the small sample of the DXGrid>Layout>Row Templates demo module)

$
0
0

The main idea is to create a DataRowTemplate that allows editing. In the sample, a row template is specified for several editors. To provide correct tabbing between editors, it's necessary to create a custom TableView where you override OnKeyDown and OnKeyUp methods.

How to sort a nested ListView at the business objects level, in code

$
0
0

This example demonstrates how to provide hidden and permanent sorting by a property in a nested ListView. Suppose we have Order and OrderItem classes that participate in an aggregated One-To-Many relationship.
We want to sort the collection of OrderItem objects by the ModifiedOn property, but do it in a way that end-users won't be able to see that the grid is sorted. Please see the sources of the Order class for more details on how to accomplish this. With this solution, sorting is implemented on the business objects level. Another variant is to use the approach from the How to sort a ListView in code example. This solution uses a specific ViewController.
Alternatively, you can use the Sorting property of the ListView application model element.

See Also:
How to prevent sorting and grouping by certain columns in a ListView

How to update a WebChartControl based on the selected data in the ASPxPivotGrid

$
0
0

This example demonstrates how to display a series in the WebChartControl based on a selected column/row in the ASPxPivotGrid.

The most important features:

1) Once a user somehow modified the ASPxPivotGrid (e. g. sorted or filtered its data) a callback is raised. Then the selected data is handled on the server and displayed in the WebChartControl.
2) The color of ASPxPivotGrid cells is customized in the server ASPxPivotGrid.CustomCellStyle event handler.
3) A callback for the ASPxPivotGrid is initiated via the client ASPxClientPivotGrid.PerformCallback() method called from the ASPxClientPivotGrid.CellClick event handler. The e.RowIndex and e.ColumnIndex parameters of this event are persisted in JS variables and then passed to the ASPxClientPivotGrid.PerformCallback() method.
4) A callback for the WebChartControl is initiated via the client ASPxClientWebChartControl.PerformCallback() method called from the ASPxClientPivotGrid.AfterCallback event handler. This will update the WebChartControl each time the ASPxPivotGrid is updated.
5) Both the WebChartControl.EnableViewState and WebChartControl.SaveStateOnCallbacks properties are set to false, because the chart's data is populated at runtime.

How to plot XY-series individually in a multiple pane chart

$
0
0

This example demonstrates the capability of XY-series to be plotted individually in a multiple pane chart.


dxValidator - How to display validation errors only on a button click

$
0
0
This example illustrates how to avoid validating an editor after its value was changed. Validation is performed on a button click only. The main idea is to extend the default adapter and override the  bypass function to complete this task. For this, create a global variable to determine if validation was raised on a button click.

You can find related code by clicking below the "Show Implementation Details" link .
Question Comments

Added By: Richard Winstanley 1 at: 10/3/2017 2:27:19 AM    Could you please give an example of how to achieve the same in Angular 2?

 How to create cascaded ComboBoxes in a report's Parameters panel in an ASP.NET WebForm application

$
0
0

This example demonstrates how to add cascaded ComboBox parameters to the XtraReport by using a report's built-in functionality. As the built-in report functionality is used, this task can be completed in the Visual Studio report designer at design time and it is not necessary to write any custom code. 

To accomplish this task, use the approach demonstrated in the How to: Assign a List of Values to a Report Parameter help topic to assign a collection of values to the report parameter. Then use the LookUpSettings.FilterString property to filter your report parameter's values collection by another report parameter value. In this code example, the following filter expression is used to filter the ProductID parameter's values collection (by the CategoryID data field) by using the CategoryID parameter value:
[CategoryID] = ?CategoryID

In this filter expression, the report's parameter name should start with the ? prefix.

Note: The parameter that is used in the filter should be added to the report's parameters collection before the filtered parameter. You can change the report's parameters  in the dialog box that can be edited by using the "Edit Parameters..." command in the Visual Studio Report Designer.

How to use HTML5 Document Viewer within a DevExtreme application

$
0
0

This example illustrates how to integrate the HTML5 Document Viewer into a DevExtreme-based Single Page Application project.
 
This example consists of two projects.
1. Frontend - a DevExtreme project that includes all necessary styles, scripts and HTML-templates required by the Document Viewer.
2. Backend - an ASP.NET MVC 5 application. At the backend, cross-domain requests are enabled (Access-Control-Allow-Origin) and a custom report storage is implemented.

For a step-by-step tutorial, refer to the following document: Integration of the Web Document Viewer into a DevExtreme application.

To learn about the previous implementation (prior to version 16.1.9), watch the following webinar video online: DevExpress Reports in Client-Side Web Apps.

See also:
How to use the Web Report Designer within a DevExtreme application

How to use the Web Report Designer in JavaScript with ReactJS

$
0
0
This example demonstrates how to use the End-User Web Report Designer in JavaScript with ReacJS.

The example consists of two parts:
1. A server (backend) project in ASP.NET MVC implementation (the ServerSide solution). At the backend, cross-domain requests are enabled (Access-Control-Allow-Origin) and a custom report storage is implemented.

2. A client (frontend) part (the ClientSide folder) that includes styles, scripts and HTML-templates.
To download all necessary client resources for this example, navigate to the ClienSide folder, open the console and run the following command:
bower install

See also
How to use the Web Document Viewer in JavaScript with ReactJS

How to use the Web Document Viewer in JavaScript with ReactJS

$
0
0
This example demonstrates how to use the HTML5 Document Viewer in JavaScript with ReacJS.

The example consists of two parts: 
1. A server (backend) project in ASP.NET MVC implementation (the ServerSide solution). At the backend, cross-domain requests are enabled (Access-Control-Allow-Origin) and a custom report storage is implemented.

2. A client (frontend) part (the ClientSide folder) that includes styles, scripts and HTML-templates. 
To download all necessary client resources for this example, navigate to the ClienSide folder, open the console and run the following command:
bower install

See also
How to use the Web Report Designer in JavaScript with ReactJS

How to use the Web Report Designer within a DevExtreme application

$
0
0
This example illustrates how to integrate the End-User Web Report Designer into a DevExtreme application.

The example consists of two projects: a server (backend) project in ASP.NET MVC implementation and a client (frontend) DevExtreme application, which includes all necessary styles, scripts, and HTML-templates.

For a step-by-step tutorial, refer to the following document: Integration of the Report Designer into a DevExtreme application.

See also:
How to use the HTML5 Document Viewer within a DevExtreme application

Viewing all 7205 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>