This example demonstrates how to allow entering only numbers in dxNumberBox. For this task we need to handle the dxNumberBox.onKeyPress event and check whether the typed symbol is a number. If this is not a number, prevent the default action of the event by calling the preventDefault method of the event object that is passed to the onKeyPress event handler.

See also:
JavaScript RegExp

This example demonstrates how to add an image layer displaying map tiles from the OSM service and an information layer that searches for a place on the map using the OSM search service.

The example uses the following classes:

- ImageLayer - A layer that displays map images obtained from map image data providers.
- OpenStreetMapDataProvider - The provider that loads map images from a web resource that provides data in the OpenStreetMap format.
- InformationLayer - A layer that displays additional geo information above the map.
- OsmSearchDataProvider - Provides search using the Open Street Map service.

This example demonstrates how to add an image layer displaying map tiles from the OSM service and an information layer that searches for a place on the map using the OSM search service.

The example uses the following classes:

- ImageLayer - A layer that displays map images obtained from map image data providers.
- OpenStreetMapDataProvider - The provider that loads map images from a web resource that provides data in the OpenStreetMap format.
- InformationLayer - A layer that displays additional geo information above the map.
- OsmGeocodeDataProvider - Provides search using the Open Street Map service.

This example shows how to disable a custom set of dates in the DateEdit control.

The main idea of the approach is to add a collection of disabled dates to the DateEdit's Tag property and disable corresponding calendar buttons by using a DataTrigger with a custom MultiConverter. This MultiConverter checks if a date associated with a certain button exists in the collection of disabled dates. If so, the button's IsEnabled property is set to False.

To avoid posting disabled data when the keyboard is used instead of the mouse, the implementation of the DateEditCalendar class and its OnCellButtonClick method was also changed. This custom DateEditCalendar is used in DateEdit's popup with the help of an implicit style for the DateEdit type.

You can use a similar approach for disabling dates based on another rule, for example, prohibit selecting weekends. For this, modify the CellEnabledConverter class to implement the required logic.

This example illustrates our brand new design for demos, which was implemented in version 17.2.
It contains all the functionality with searching and navigation between different items that are represented in our main demo site.
The main sections are:
- Header
- Sidebar - Navigation and Search panels
- Main Content
The header panel is placed on the Default page and contains a button to show/collapse the sidebar and some info about the page that is selected from the sidebar is shown.
The sidebar contains user controls - Navigation and Search user controls. Navigation is implemented using ASPxTreeView and bound to an XML source to show what section the site contains. The Search user control is implemented using ASPxNavBar in which search results are shown. Search and navigation functionalities are implemented using the client-side code in the ~/Content/Site.js" file.

[C#]
usingDevExpress.ExpressApp.MobilepublicpartialclassBackgroundGeolocationMobileApplication:MobileApplication{publicBackgroundGeolocationMobileApplication(){AdditionalPhoneGapPlugins.Add(@"<plugin name=""cordova-background-geolocation-lt"" source=""npm"" spec=""2.7.3""><variable name=""LOCATION_ALWAYS_USAGE_DESCRIPTION"" value=""Background location-tracking is required"" /><variable name=""LOCATION_WHEN_IN_USE_USAGE_DESCRIPTION"" value=""Background location-tracking is required"" /><variable name=""MOTION_USAGE_DESCRIPTION"" value=""Using the accelerometer increases battery-efficiency by intelligently toggling location-tracking only when the device is detected to be moving"" /><variable name=""LICENSE"" value=""YOUR_LICENSE_KEY"" /></plugin>");AdditionalPhoneGapPlugins.Add(@"<plugin name=""cordova-plugin-device"" source=""npm"" spec=""1.1.6""></plugin>");// ...

[VB.NET]
Imports Microsoft.VisualBasicImports DevExpress.ExpressApp.MobilePartialPublicClass BackgroundGeolocationMobileApplicationInherits MobileApplicationPublicSubNew()
        AdditionalPhoneGapPlugins.Add("<plugin name=""cordova-background-geolocation-lt"" source=""npm"" spec=""2.7.3"">"& ControlChars.CrLf &"    <variable name=""LOCATION_ALWAYS_USAGE_DESCRIPTION"" value=""Background location-tracking is required"" />"& ControlChars.CrLf &"    <variable name=""LOCATION_WHEN_IN_USE_USAGE_DESCRIPTION"" value=""Background location-tracking is required"" />"& ControlChars.CrLf &"    <variable name=""MOTION_USAGE_DESCRIPTION"" value=""Using the accelerometer increases battery-efficiency by intelligently toggling location-tracking only when the device is detected to be moving"" />"& ControlChars.CrLf &"    <variable name=""LICENSE"" value=""YOUR_LICENSE_KEY"" />"& ControlChars.CrLf &"    </plugin>")
        AdditionalPhoneGapPlugins.Add("<plugin name=""cordova-plugin-device"" source=""npm"" spec=""1.1.6""></plugin>")' ...

[XML]
<addname="Geolocation"verb="GET,POST"path="GeolocationProcessingService.svc"type="YourSolutionName.Mobile.GeolocationHttpHandler"/>

[C#]
publicBackgroundGeolocationMobileApplication(){// ...stringgeolocationScript=ReadResourceString("BackgroundGeolocation.Mobile.Geolocation.GeolocationScript.js");RegisterClientScriptOnApplicationStart("GeolocationScript",geolocationScript);}publicstaticbyte[]ReadResource(stringresourceName){byte[]buffer=null;using(Streamstream=Assembly.GetExecutingAssembly().GetManifestResourceStream(resourceName)){if(stream!=null){buffer=newbyte[stream.Length];stream.Read(buffer, 0,(int)stream.Length);}}returnbuffer;}publicstaticstringReadResourceString(stringresourceName){byte[]resourceBytes=ReadResource(resourceName);//You need to escape CRLF characters in versions prior to version 18.1//return Encoding.UTF8.GetString(resourceBytes).Replace("\r\n", "\\r\\n");returnEncoding.UTF8.GetString(resourceBytes);}

[VB.NET]
PublicSubNew()' ...Dim geolocationScript AsString = ReadResourceString("GeolocationScript.js")
    RegisterClientScriptOnApplicationStart("GeolocationScript", geolocationScript)EndSubPublicSharedFunction ReadResource(ByVal resourceName AsString) AsByte()Dim buffer() AsByte = NothingUsing stream As Stream = System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(resourceName)If stream IsNot NothingThen
            buffer = NewByte(stream.Length - 1){}
            stream.Read(buffer, 0, CInt(stream.Length))EndIfEndUsingReturn bufferEndFunctionPublicSharedFunction ReadResourceString(ByVal resourceName AsString) AsStringDim resourceBytes() AsByte = ReadResource(resourceName)'You need to escape CRLF characters in versions prior to version 18.1'Return Encoding.UTF8.GetString(resourceBytes).Replace(ControlChars.CrLf, "\r\n")Return Encoding.UTF8.GetString(resourceBytes)EndFunction

The value passed to the ReadResourceString method consists of two parts in C# projects: the default assembly namespace ("BackgroundGeolocation.Mobile") and the path to the resource file ("Geolocation.GeolocationScript.js"). The first part may be different in your project. In VB.NET projects, the resource name will be much simpler: "GeolocationScript.js". 

6. In the YourSolutionName.Module.Web project, install the Newtonsoft.Json NuGet package and copy the BackgroundGeolocation.Module.Web\Controllers\DisplayGeolocationController.xx file to the Controllers folder.
This controller is intended to draw the client's route based on location points.

7. Build and deploy your mobile application following the steps described in the Install the Application to a Smartphone  help article, and ensure that the Geolocation services are enabled in the mobile device settings.
Once you get your mobile app running on your actual device, wait a few minutes and then run the Web version of your XAF application. Open the DeviceInfo List View, and you will see a record containing your mobile device information. If you click the ListView record, you will be navigated to the DetailView that contains the Map demonstrating the route tracked by the Background Geolocation module.

See Also:
eXpressApp Framework > Getting Started > XAF Mobile (CTP) Tutorial
How to: Use a Custom Plugin in a Mobile Application

XAF Mobile - Overview Video
FAQ: New XAF HTML5/JavaScript mobile UI (CTP)
Using Maps in a Mobile Application 
How to send push notifications to the XAF Mobile application using Azure Notifications Hub
How to use a Barcode Scanner in XAF Mobile

This example demonstrates how to add a row copy to a specific position of ASPxGridView. The FillContextMenuItems event handler is used to add a copy item to the context menu. When a user clicks the copy item, the CreateValuesDictionary method creates a copy of fields of the current row. Then, this copy is used to populate fields of the new row in the InsertNextToGridDataSet method. To keep the order of rows, it is necessary to set up an extra column to store order indexes; and then sort the ASPxGridView by this column.

It is an often situation when a developer should include sever field values in a hyperlink shown in a GridView column cells. The best solution to this problem is to use templates. The attached example shows how this can be done and suggests two similar approaches:
1) using ASPxHyperLink: the NavigateUrl property of ASPxHyperLink is defined by the KeyValue of the processed row

2) using the <a> element: the href parameter of the <a> element is defined in the server side GetRowValue method.

Update:
If you want to use GridViewDataHyperLinkColumn and preserve its functionality, use unbound columns instead of the DataItem template. Please refer to the ASPxGridView - How to create GridViewDataHyperLinkColumn whose URL depends on several column values example for more information. 

Very often when you perform any operation in a background thread, it can be very useful to indicate to an end-user the current state of progress. To display the progress, the ProgressBarControl can be used. This example illustrates how to perform a file copy operation in a background thread, and display the progress on a main form.

The sample provides two web user controls (ThemeSelector, ThemeParametersSelector) that can be used in your project. To use these controls in your solution, execute these steps:

1. Copy the following files, taking into account their location:

   a. An xml file with theme groups and themes: Themes.xml;
   b. Classes that are responsible for getting and presenting data from Themes.xml: ThemeGroupModel.cs, ThemeModel.cs, ThemeModelBase.cs, ThemesModel.cs;
   c. sprite.svg with images;
   d. sprite.css and StyleSheet.css with CSS classes;
   e. Script.js with client-side methods;   
   f. ThemeSelector.ascx, ThemeSelector.ascx.cs, ThemeParametersSelector.ascx and ThemeParametersSelector.ascx.cs;
   g. Utils.cs - a class that is responsible for manipulations with themes.

2. Register the ThemeSelector and ThemeParametersSelector web user controls in your web.config file:

[ASPx]
<pages><controls>
...<addsrc="~/UserControl/ThemeParametersSelector.ascx"tagName="ThemeParametersSelector"tagPrefix="dx"/><addsrc="~/UserControl/ThemeSelector.ascx"tagName="ThemeSelector"tagPrefix="dx"/></controls></pages>

3. In the sample, a chosen theme is written to a cookie. To apply this theme from the cookie, subscribe to the Application.PreRequestHandlerExecute event in your Global.asax file and handle it in the following manner:

[C#]
protectedvoidApplication_PreRequestHandlerExecute(objectsender,EventArgse){DevExpress.Web.ASPxWebControl.GlobalTheme=Utils.CurrentTheme;Utils.ResolveThemeParametes();}

4. Add the ThemeSelector and ThemeParametersSelector user controls to ASPxPanel of the master page:

[ASPx]
<formid="form1"runat="server"><header><dx:ASPxPanelrunat="server"ClientInstanceName="TopPanel"CssClass="header-panel"FixedPosition="WindowTop"EnableTheming="false"><PanelCollection><dx:PanelContent><aclass="right-button icon cog right-button-toggle-themes-panel"href="javascript:void(0)"onclick="DXDemo.toggleThemeSettingsPanel(); return false;"></a></dx:PanelContent></PanelCollection></dx:ASPxPanel></header><divclass="main-content-wrapper"><sectionclass="top-panel clearfix top-panel-dark"><dx:ASPxButtonrunat="server"Text="Change Theme Settings"CssClass="theme-settings-menu-button adaptive"EnableTheming="false"AutoPostBack="false"ImagePosition="Right"UseSubmitBehavior="false"><ImageSpriteProperties-CssClass="icon angle-down theme-settings-menu-button-image"/><FocusRectBorderBorderWidth="0"/><ClientSideEventsClick="DXDemo.toggleThemeSettingsPanel"/></dx:ASPxButton></section><dx:ASPxPanelrunat="server"ClientInstanceName="ThemeSettingsPanel"CssClass="theme-settings-panel"FixedPosition="WindowRight"Collapsible="true"EnableTheming="false"ScrollBars="Auto"><SettingsCollapsingAnimationType="Slide"ExpandEffect="PopupToLeft"ExpandButton-Visible="false"/><Styles><ExpandBarWidth="0"/><ExpandedPanelCssClass="theme-settings-panel-expanded"></ExpandedPanel></Styles><PanelCollection><dx:PanelContent><divclass="top-panel top-panel-dark clearfix"><dx:ASPxButtonrunat="server"Text="Change Theme Settings"CssClass="theme-settings-menu-button"EnableTheming="false"AutoPostBack="false"ImagePosition="Right"HorizontalAlign="Left"UseSubmitBehavior="false"><ImageSpriteProperties-CssClass="icon angle-down theme-settings-menu-button-image"/><FocusRectBorderBorderWidth="0"/><ClientSideEventsClick="DXDemo.toggleThemeSettingsPanel"/></dx:ASPxButton></div><divclass="theme-settings-panel-content"><dx:ThemeSelectorID="ThemeSelector"runat="server"/><%if(Utils.CanApplyThemeParameters){%><dx:ThemeParametersSelectorID="ThemeParametersSelector"runat="server"/><%}%></div></dx:PanelContent></PanelCollection></dx:ASPxPanel></div><divstyle="clear: both;"><asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server"></asp:ContentPlaceHolder></div></form>

See also:
How to implement a Theme Selector control similar to DevExpress Demo ThemeSelector web user control

The sample provides a web user control(ThemeSelector) that can be used in your project. To use this control in your solution, execute these steps:

1. Copy following files, taking into account their location:

   a. an xml file with theme groups and themes: Themes.xml.

   b. classes that are responsible for getting and presenting data from Themes.xml: ThemeGroupModel.cs, ThemeModel.cs, ThemeModelBase.cs, ThemesModel.cs.

   c. Sprite.png with images.

   d. ThemeSelector.css with css classes.

   e. ThemeSelector.ascx and ThemeSelector.ascx.cs.

2. Register the ThemeSelector web user control in your web.config file:

[ASPx]
<pages><controls><addsrc="~/UserControl/ThemeSelector.ascx"tagName="ThemeSelector"tagPrefix="dx"/></controls></pages>

3. In the sample, a chosen theme is written to a cookie. To apply this theme from the cookie, subscribe to the Application.PreRequestHandlerExecute in your Global.asax file and handle it

in the following manner:

[C#]
protectedvoidApplication_PreRequestHandlerExecute(objectsender,EventArgse){if(Request.Cookies["CurrentThemeCookieKey"]!=null){DevExpress.Web.ASPxWebControl.GlobalTheme=Request.Cookies["CurrentThemeCookieKey"].Value;}}

4. The ThemeSelector control allows you to show a popup left or right relative to the "Themes" anchor. Use the ThemeSelector.PopupAlign property. The default value is PopupAlign.Right. 

[ASPx]
<dx:ThemeSelectorrunat="server"ID="ts2"PopupAlign="Left"/>

Starting with v17.2 we have changed our Theme Selector implementation. Now, this user control is placed to ASPxPanel and is mobile friendly. A new sample can be found in the following thread: How to implement a Theme Selector control similar to DevExpress Demo

The following example demonstrates how to color dashboard item elements using the DashboardViewer.DashboardItemElementCustomColor event.
In this example, chart series points, whose values exceed specified thresholds, are colored in green. Chart series points, whose values fall below specified thresholds, are colored in red.
Pie segments, whose contributions in total fall below the specified threshold, are colored in orange.

See also:
T198119: How to color dashboard item elements in the Web Viewer

This example demonstrates how to implement a hyperlink in column items using the ListBoxColumnCellTemplateContainer. A click on an item's hyperlink invokes a popup window with additional information about the item.

This example demonstrates how to obtain a collection of layers supported by the Web Map Service.

This example demonstrates how to drag and drop entries between two GridControl views - TileView and GridView.

This example demonstrates how to use the Word Processing Document API to programmatically manage rich edit documents, without the need for Microsoft Word to be installed.

The application includes the RichEditControl used to display and edit the code. The code modifies the rich document created or loaded by the RichEditDocumentServer instance. To see the results, open the document in Microsoft Word by clicking the button.

You can modify the code and watch the result. If an error occurs during compilation or execution, the backcolor of the code window changes.

This sample introduces API properties and methods used to perform the following operations:

To use this example in production code, the Universal Subscription or an additional Document Server Subscription is not required.

This example demonstrates how to calculate routes to the destination point from major roads using the BingRouteDataProvider.CalculateRoutesFromMajorRoads method.

Before route calculation, specify destination point coordinates (GeoPoint.Latitude and GeoPoint.Longitude). In addition, you can specify optional parameters: the destination name, driving or walking route travel mode using the BingRouteOptions.Mode property and route optimization options to calculate an optimal route either by time or by distance via the BingRouteOptions.RouteOptimization property.

To start the application, click the Calculate Routes From Major Roads button. All parameters are passed to the CalculateMajorRouteRequest method, and you can see the results in the rich text box element and calculated routes on a map.

The requested results contain the total distance of a route, itinerary item (BingRouteResult.Distance, BingRouteLeg.Distance, BingItineraryItem.Distance), the time required to follow the calculated route (BingRouteResult.Time) and pass the rout leg and itinerary item (BingRouteLeg.Time, BingItineraryItem.Time). You can also see the maneuvers associated with the itinerary item (BingItineraryItem.Maneuver) and other parameters.

Note that if you run this sample as is, you will get a warning message informing that the specified Bing Maps key is invalid. To learn how to register a Bing Maps account and create a key for it, refer to the How to: Get a Bing Maps Key tutorial.

See also: Bing Maps - Information Data Providers (Search, Geocode, Routing) upgrade from SOAP to REST API.