This example is an illustration of the K18561: Using jQuery / jQuery UI libraries with DevExpress ASP.NET Controls / MVC Extensions KB Article. Refer to the Article for an explanation.

This example illustrates how to attach the jQuery AutoComplete plugin to the ASPxTextBox editor.

Usually when it is necessary to attach jQuery selectors to any existing HTML content, it is recommended to use the $(document).ready function that can be employed for handling the state when DOM is fully loaded.

When using DevExpress ASP.NET Controls, it is recommended to handle the client-side ASPxClientGlobalEvents.ControlsInitialized event that is raised after client object models of all DevExpress web controls contained within the page have been initialized or the client-side ASPxClientControl.Init event (rather than the use of the jQuery $(document).ready function) of the required DevExpress ASP.NET control to ensure that a corresponding client-side control's programmatic object is initialized.

GlobalEvents.aspx:
This example illustrates how to use an invisible ASPxGlobalEvents component to initialize the required DevExpress ASP.NET control on the client side:
To get access to the client-side programmatic object of a particular DevExpress ASP.NET control, use the ClientInstanceName property (refer to the Client-Side API Availability for a Web Control topic in our documentation to learn more about the client-side API availability).

ControlEvents.aspx:
This example demonstrates how to use the control's client-side Init event where the client-side control's programmatic object is available directly via the "s" (sender) object (refer to the Client-Side Events topic in our documentation to learn more about common concepts of how to use client-side events of the DevExpress ASP.NET Controls).

Files to look at:

UPDATED:

Starting with v18.2, if a grid contains modified data, it displays a confirmation message before a grid performs a postback or a callback. The KeepChangesOnCallbacks property specifies whether the grid supports callbacks and allows you to use the 'Preview changes' button to preview and modify inserted, deleted and edited rows before you click 'Save changes'.

UPDATED:

Starting with v16.1, this feature is available out of the box. Please refer to the ASPxGridView, ASPxCardView - Change Save and Cancel buttons' enabled state when an end-user changes a value in BatchEdit mode thread for additional information.

This example demonstrates how to hide the Save changes and Cancel  changes buttons, and show them only when an end-user edits any cell or row.
See Also:
ASPxGridView - Batch Editing - How to use external buttons to update data and enable them only when a row/cell has been changed
MVC Example:
GridView - Batch Editing - How to show save and cancel buttons only when any row/cell has been changed

Files to look at:

Files to look at:

UPDATED:

Starting with v18.2, if a grid contains modified data, it displays a confirmation message before a grid performs a postback or a callback. The KeepChangesOnCallbacks property specifies whether the grid supports callbacks and allows you to use the 'Preview changes' button to preview and modify inserted, deleted and edited rows before you click 'Save changes'.

This example demonstrates how you can hide both Save changes and Cancel changes buttons, and to display them only when modifications have been made to a cell or row by an end-user.

See Also:
GridView - Batch Editing - How to use external buttons to update data and enable them only when a row/cell has been changed

ASP.NET WebForms example:
ASPxGridView - Batch Editing - How to show save and cancel buttons only when any row/cell has been changed

This example illustrates how to use the MVCxGridViewColumn.SetDataItemTemplateContent(Action`1) Method to display a hyperlink in a specific column. The hyperlink parameters (text, navigate url) are calculated based on the template's container. Here is the most important part of the code that is responsible for hyperlink creation:

[C#]
settings.Columns.Add(column=>{column.Caption="Details";column.SetDataItemTemplateContent(container=>{Html.DevExpress().HyperLink(hyperlink=>{varvisibleIndex=container.VisibleIndex;varkeyValue=container.KeyValue;varlastName=DataBinder.Eval(container.DataItem,"LastName");hyperlink.Name="hl"+keyValue.ToString();hyperlink.Properties.Text=lastName.ToString();hyperlink.NavigateUrl=Url.Action("Details","Home",new{id=keyValue});}).Render();});});

[VB.NET]
settings.Columns.Add( _  Sub(column)  
                           column.Caption = "Details"
                           column.SetDataItemTemplateContent( _  Sub(container)  
                                       Html.DevExpress().HyperLink( _  Sub(hl)  Dim visibleIndex = container.VisibleIndex  Dim keyValue = container.KeyValue  Dim lastName = DataBinder.Eval(container.DataItem, "LastName")  
                                                    hl.Name = "hl" + keyValue.ToString()  
                                                    hl.Properties.Text = lastName.ToString()  
                                                    hl.NavigateUrl = Url.Action("Details", "Home", NewWith {.id = keyValue})  EndSub).Render()  EndSub)  EndSub)

Files to look at:

SchedulerControl provides the AppointmentAdding and AppointmentEditing events. You can use them to implement validation. This example illustrates how you can show a warning message to users when an appointment intersects the lunch time.

The lunch time is defined as a recurrent Time Region Item:

[XAML]
<dxsch:SchedulerControl.TimeRegionItems><dxsch:TimeRegionItemType="Pattern"Start="1/1/2019 13:00:00"End="1/1/2019 14:00:00"RecurrenceInfo="{dxsch:RecurrenceDaily Start='1/1/2019 13:00:00', ByDay=WorkDays}"BrushName="{x:Static dxsch:DefaultBrushNames.TimeRegion3Hatch}"/></dxsch:SchedulerControl.TimeRegionItems>

The validation logic is implemented in the SchedulerValidationService class which is a DialogService class descendant. If an appointment intersects the lunch time, the service displays a dialog window and allows the user to cancel changes either in all appointments or only in the conflicted appointments. Users can also click the Ignore button to override validation and save changes:

[C#]
boolProcessAppointments(IReadOnlyList<AppointmentItem>appts,IList<AppointmentItem>itemsToCancel){vartoCancel=newList<AppointmentItem>();foreach(variteminappts){varrange=newDateTimeRange(item.Start,item.End);varstartLunchRange=newDateTimeRange(item.Start.Date.AddHours(13),item.Start.Date.AddHours(14));varendLunchRange=newDateTimeRange(item.End.Date.AddHours(13),item.End.Date.AddHours(14));if(range.Intersect(startLunchRange).Duration.Ticks!= 0 ||range.Intersect(endLunchRange).Duration.Ticks!= 0||range.Duration.Hours> 23)toCancel.Add(item);}if(toCancel.Count> 0){varCancel=newUICommand(){Caption="Cancel",IsDefault=true};varCancelConflicts=newUICommand(){Caption="Cancel Conflicts"};varIgnore=newUICommand(){Caption="Ignore",IsCancel=true};varresult=this.ShowDialog(newList<UICommand>(){Cancel,CancelConflicts,Ignore},"Warning","WarningUserControl","The following appointment(-s) intersects the lunch time:\n\n"+string.Join("\n",toCancel.Select(c=>c.Subject))+"\n\nClick 'Cancel' to discard all changes.\nClick 'Cancel Conflicts' to cancel changes only in these appointment(-s).");if(result==Cancel)returnfalse;if(result==CancelConflicts)foreach(varitemintoCancel)itemsToCancel.Add(item);}returntrue;}

When the ProcessAppointments method returns False, the e.Cancel property is set to True in the AppointmentAdding or AppointmentEditing event handlers. If the user chooses to cancel changes only for the conflicted appointments, these appointments are added to the e.CanceledAppointments or e.CanceledEditAppointments collections:

[C#]
privatevoidScheduler_AppointmentAdding(objectsender,AppointmentAddingEventArgse){e.Cancel=!ProcessAppointments(e.Appointments,e.CanceledAppointments);}privatevoidScheduler_AppointmentEditing(objectsender,AppointmentEditingEventArgse){e.Cancel=!ProcessAppointments(e.EditAppointments,e.CanceledEditAppointments);}

This example demonstrates how to display master-detail data in the same chart.

Image may be NSFW.
Clik here to view.

You can only use the Drill-Down functionality when chart series are generated by series templates.

This example illustrates how to add a new regular or recurrent appointment programmatically when the Scheduler is in bound mode.

NOTE:
It's essential that your data source type implements the INotifyCollectionChanged (e.g., ObservableCollection<T>). In this case, the Scheduler Control will receive notifications about its changes.

To add a new appointment, create a new data item instance, define its properties, and add it to your source. In this example, SchedulerControl's SelectedInterval property is bound to the Interval property from the view model. Its values are used in the data item's Start and End properties:

[C#]
protectedApptViewModelCreateAppt(stringsubj,DateTimestart,DateTimeend,stringdescription){ApptViewModelapptViewModel=newApptViewModel(){Subject=subj,Start=start,End=end,Description="[add description]"};returnapptViewModel;}

Set the item's Type property to AppoinementType.Pattern and define a corresponding recurrence rule in the RecurrenceInfo property to create a recurrent appointment. Use RecurrenceBuilder to generate this rule:

[C#]
[Command]publicvoidAddAppt(boolrecurrent=false){varappt=CreateAppt($"New Appt #{Appointments.Count}",Interval.Start,Interval.End,"[add description]");if(recurrent){appt.Type=(int)AppointmentType.Pattern;appt.RecurrenceInfo=RecurrenceBuilder.Daily(Interval.Start, 10).Build().ToXml();}else{appt.Type=(int)AppointmentType.Normal;}this.Appointments.Add(appt);this.SelectedAppointments.Clear();this.SelectedAppointments.Add(appt);}

Refer to the How to: Create Recurrence in Code article for more information about generating recurrence rules.

This example also illustrates how you can invoke EditAppointmentWindow for a newly created appointment. This functionality is implemented with the help of the CompositeCommandBehavior class. The first CommandItem's Command property is bound to a property from the view model. The second CommandItem's Command is bound to SchedulerControl's Commands.ShowAppointmentWindowCommand command:

[XAML]
<dxb:BarButtonItemContent="Add a regular appointment"><dxmvvm:Interaction.Behaviors><dxmvvm:CompositeCommandBehaviorCanExecuteCondition="AnyCommandCanBeExecuted"><dxmvvm:CommandItemCommand="{Binding AddApptCommand}"CommandParameter="false"/><dxmvvm:CommandItemCheckCanExecute="False"Command="{Binding ElementName=scheduler,
                                                  Path=Commands.ShowAppointmentWindowCommand}"/></dxmvvm:CompositeCommandBehavior></dxmvvm:Interaction.Behaviors></dxb:BarButtonItem>

The DevExpress ASP.NET MVC Diagram extension provides the Bind(object nodeDataObject, object edgeDataObject) method that allows you to load a tree or a graph structure from two data sources: the nodeDataObject for shapes and edgeDataObject for shape connectors.

While binding, the extension automatically creates shapes and connectors and retrieves their property values from the corresponding data items. The extension implements mapping properties that point to the data fields that contain the data:

You should add mapping information for a shape's Key and a connector's Key, FromKey, and ToKey properties.

The BatchUpdateRouteValues property specifies a Controller and Action that handle callbacks related to node and edge updates. When you update inserted items' data, use the MapInsertedItemKey method to provide key values for the items.

The SettingsAutoLayout property specifies the auto-layout algorithm and orientation the extension uses to build a diagram.

Files to look at:

This example demonstrates an approach that can be used to set the Binding property of a GridColumn generated from a template.

The DevExpress ASP.NET MVC Diagram extension can build a tree structure from a linear data structure. Use the Bind(object nodeDataObject) method to bind the Diagram to the data source.

To transform a linear data structure to hierarchical, the data source should contain two additional fields:

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

The BatchUpdateRouteValues property specifies a Controller and Action that handle callbacks related to node and edge updates. When you update inserted items' data, use the MapInsertedItemKey method to provide key values for the items.

The SettingsAutoLayout property specifies the auto-layout algorithm and orientation the extension uses to build a diagram.

Files to look at:

This example demonstrates to bind the Diagram control to an in-memory data source and wrap shapes in horizontal and vertical containers. You need to use the ContainerKey property to specify the name of a data source field that provides the key of a shape's parent container shape.

See also:
Diagram for MVC - Node and Edge data sources - How to bind the extension to in-memory data sources
Diagram for MVC - Tree from Linear Data Structure - How to bind the extension to an in-memory data source

Files to look at:

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

Documentation: Add RichEdit to an Angular Application

npm install

ng serve --open

Documentation:

Examples:

This example shows how to load an excel file from your computer to the server using ASPxUploadControl and then display its data in ASPxGridView.
To do this, you first need to place the ASPxGridView and ASPxUploadControl controls on a page and, secondly, handle the ASPxGridView.Init event and both the server-side and the client-side ASPxUploadControl.FileUploadComplete events.
After uploading the excel file from your computer, save it in the "~/XlsTables/" directory using the ASPxUploadControl.FileUploadControl event handler on the server-side. You may choose any filename and then save it in the Session["FileName"] object to use later.
In the ASPxGridView.Init event handler you need to check the value of the Session["FileName"] object. If it's null, do nothing. Otherwise create a new DataTable and DataTableExporter objects.

See also:
GridView - How to upload an Excel file via UploadControl and display its data in a grid
GridView - How to upload an Excel file via UploadControl and show its data in a grid

Note:
The DevExpress.Docs assembly is used in this example. So, the Office File API subscription license is required to implement the demonstrated approach.

Files to look at:

This example illustrates how to access the detail DataGrid instance from the onClick event handler of the button placed to the masterDetail template.

The main idea is to generate every detail grid's id dynamically so that we can address the grid's instance in the onClick event handler later. Although this example is focused on the DataGrid widget, the same approach is applicable for any other widget placed into the masterDetail template.

This example shows how to use DataItemTemplate and EditItemTemplate in Batch Edit mode. The templates use ASPxRatingControl as content.

[ASPx]
<dx:ASPxGridViewID="ASPxGridView1"runat="server"KeyFieldName="ID"ClientInstanceName="grid"DataSourceID="ObjectDataSource1">
	...<SettingsEditingMode="Batch"><BatchEditSettingsEditMode="Cell"AllowRegularDataItemTemplate="true"StartEditAction="FocusedCellClick"/></SettingsEditing><ClientSideEventsBatchEditStartEditing="OnBatchEditStartEditing"BatchEditEndEditing="OnBatchEditEndEditing"FocusedCellChanging="OnFocusedCellChanging"Init="OnGridInit"/></dx:ASPxGridView>

Note the values of the AllowRegularDataItemTemplate and StartEditAction properties.

[ASPx]
<DataItemTemplate><dx:ASPxRatingControlID="ratingControl"runat="server"ClientInstanceName='<%# "DataItemRateControl"+ Container.VisibleIndex %>'ItemCount="5"Value='<%# Convert.ToInt32(Eval("RatingValue")) %>'><ClientSideEventsItemClick="OnItemMouseClick_DataItem"ItemMouseOver="OnItemMouseOver_DataItem"ItemMouseOut="OnItemMouseOut_DataItem"/></dx:ASPxRatingControl></DataItemTemplate><EditItemTemplate><dx:ASPxRatingControlID="ratingControl"runat="server"ClientInstanceName="EditItemRateControl"ItemCount="5"><ClientSideEventsItemClick="OnItemMouseClick_EditItem"Init="OnRateControlInit_EditItem"/></dx:ASPxRatingControl></EditItemTemplate>

function OnBatchEditStartEditing(s, e) {
    EditItemRateControl.SetValue(e.rowValues[s.GetColumnByField("RatingValue").index].value);
}
function OnBatchEditEndEditing(s, e) {
    var templateColumn = s.GetColumnByField("RatingValue");
    if (!e.rowValues.hasOwnProperty(templateColumn.index))
        return;
    var cellInfo = e.rowValues[templateColumn.index];
    cellInfo.value = EditItemRateControl.GetValue();
    SetRateControlValueByRowIndex_DataItem(e.visibleIndex, cellInfo.value);
}

function OnItemMouseClick_EditItem(s, e) {
    grid.batchEditApi.EndEdit();
}
function OnItemMouseClick_DataItem(s, e) {
    grid.batchEditApi.SetCellValue(currentFocusedCell.itemVisibleIndex, currentFocusedCell.column.index, s.GetValue());
}

function OnGridInit(s, e) {
    ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "keydown", function (evt) {
        return OnKeyDown(evt, s);
    });
}
function OnGridViewKeyDown(evt, grid) {
    if (typeof (event) != "undefined" && event != null)
        evt = event;
    if (!grid.InCallback() && NeedProcessDocumentKeyDown(evt)) {
        if (evt.shiftKey && evt.keyCode == 9 /*Shift + tab */) {
            setTimeout(function () {
                grid.batchEditApi.MoveFocusBackward();
            }, 0);
        } else if (evt.keyCode == 9 /*Tab key*/) {
            setTimeout(function () {
                grid.batchEditApi.MoveFocusForward();
            }, 0);
        }  
    }
}

function OnRateControlInit_EditItem(s, e) {
    ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "keydown", function (evt) {
        return OnRatingControlKeyDown(evt, s);
    });
}
function OnRatingControlKeyDown(evt, ratingControl) {
    if (typeof (event) != "undefined" && event != null)
        evt = event;
    if (!ratingControl.InCallback() && NeedProcessDocumentKeyDown(evt)) {
        if (evt.keyCode == 32 /*Space bar*/) {
            setTimeout(function () {
                MoveFocusToNextStar();
            }, 0);
        }
    }
}

Files to look at:

Description:
How to display master-detail tables in two different grids? A master table should be displayed in one GridControl. Another GridControl should contain details for the selected master row in the first grid.

Solution:
The most popular way to visualize Master-Detail tables in an XtraGrid is by displaying the detail data embedded into master rows that then expand to show the detail view. However, sometimes it may be desirable to display the detail data in a Grid control of it's own, and as you navigate through the master data in a master grid the detail data in the detail grid displays all the related detail controls for the selected master record.

It is easy to implement this, if you are using an ADO.NET dataset (System.Data.DataSet). The GridControl object intended for displaying the detail data should be bound to an ADO.NET data relation. Please look at the attached sample. The DataMember property of GridControl2 is the name of a data relation for the Customers table, which is assigned to the DataSource property.

[C#]
//Bind to a relationgridControl2.DataSource=dataSet11.Customers;gridControl2.DataMember="CustomersOrders";

[VB.NET]
' Bind to a relation
GridControl2.DataSource = DataSet11.Customers
GridControl2.DataMember = "CustomersOrders"

If you are using a third-party data object or you have built your own, and it can contain master-detail data like System.Data.DataSet then you will probably be able to bind it's detail data to an XtraGrid as shown above.

See Also:
How to use two XtraGrid controls to display collections of persistent objects with a one-to-many association

Files to look at:

This example illustrates how to define items with templates:

First item uses the embedded dxTextBox editor with the capability to validate its value. Validation is implemented based on the syncronized dxForm.validationGroup and dxValidator.validationGroup. See also: Data Validation, Validate and Submit the Form.

Second item uses the static image.

This example includes the server-side (backend) application that is an ASP.NET MVC application created from the DevExpress Visual Studio template as described in the Report Designer's Server-Side Configuration (ASP.NET MVC) topic.

The client-side (front-end) application is created in JavaScript with npm as described in the Basic Report Designer Integration (with npm or Yarn Package Managers) document.

To run the example, perform the following steps:

npm install

Image may be NSFW.
Clik here to view.

This example includes the server-side (backend) application that is an ASP.NET MVC application created from the DevExpress Visual Studio template as described in the Report Designer's Server-Side Configuration (ASP.NET MVC) topic.

The client-side (front-end) application is created as described in the Report Designer Integration in Angular document.

To run the example, perform the following steps:

npm install

ng serve

Image may be NSFW.
Clik here to view.

See also:

The following example demonstrates how to combine fields into a group.

In this example, two fields ("Country" and "Customer") are combined into a new group at design time, and another two fields ("Category" and "Product") are combined into a new group at runtime, in this order. This ensures that the "Country" field is followed by "Customer", and the the "Category" field is followed by "Product". If you drag the "Region" field and drop it to another area, the "Customer" field accompanies it. This behavior is also true for the second group.

Image may be NSFW.
Clik here to view.

Files to look at: