Callback-Based Functionality

• Feb 17, 2023
• 6 minutes to read

Some DevExpress MVC extensions can work in callback mode by requesting the server via their own callbacks. Using callbacks is an efficient way to load/update extension content on demand (to minimize the initial data transfer) or to perform some lengthy functional operations (such as file uploads).

The following requirements should be met for an extension that is used in callback mode.

• An extension should be defined in a separate Partial View (.cshtml or .vbhtml).

  Note

  It is required that a Partial View contains only the extension definition code, without any additional markup.

• The SettingsBase.Name property value should be the same between callbacks.

• A Controller should contain an additional Action method to handle extension callbacks and route them directly to a Partial View containing the extension. This allows the extension render to be conditionally updated in response to the end-user action performed.
• Callback routing logic should be defined using a CallbackRouteValues property of an extension’s settings object (the [_ExtensionName_]Settings.CallbackRouteValues property). This property allows the names of the callback handling Controller and Action to be specified.

Note that these requirements are not required for all extensions that support the use of callbacks. For instance, the UploadControl extension might not be declared within a Partial View - it is enough for it to properly implement a callback handler Action method and reference this method in the CallbackRouteValues property’s value.

Extensions That Can Use Callbacks

The table below lists DevExpress MVC extensions that support the use of callbacks.

Extension	Callback Mode Availability	Requirements for Callback Mode Realization
Calendar	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the CalendarSettings.CallbackRouteValues property.
CallbackPanel	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the CallbackPanelSettings.CallbackRouteValues property.
Charting	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the ChartControlSettings.CallbackRouteValues property.
ComboBox	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the AutoCompleteBoxBaseSettings.CallbackRouteValues property.
DataView	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the DataViewSettings.CallbackRouteValues property.
DateEdit	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the DateEditSettings.CallbackRouteValues property.
DockManager	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the DockManagerSettings.CallbackRouteValues property.
DockPanel	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the PopupControlSettingsBase.CallbackRouteValues property.
Gantt	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the GanttSettings.CallbackRouteValues property.
GridView	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the GridSettingsBase.CallbackRouteValues property.
HtmlEditor	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the HtmlEditorSettings.CallbackRouteValues property.
ListBox	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the ListBoxSettings.CallbackRouteValues property.
Menu	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the MenuSettings.CallbackRouteValues property.
NavBar	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the NavBarSettings.CallbackRouteValues property.
PageControl	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the PageControlSettings.CallbackRouteValues property.
PivotGrid	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the PivotGridSettings.CallbackRouteValues property.
PopupControl	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the PopupControlSettingsBase.CallbackRouteValues property.
PopupMenu	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the PopupMenuSettings.CallbackRouteValues property.
RichEdit	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the RichEditSettings.CallbackRouteValues property.
Scheduler	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the SchedulerSettings.CallbackRouteValues property.
Spreadsheet	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the SpreadsheetSettings.CallbackRouteValues property.
TreeList	Always	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the TreeListSettings.CallbackRouteValues property.
TreeView	Optional	Define extension in a separate Partial View. Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the TreeViewSettings.CallbackRouteValues property.
UploadControl	Optional	Implement an Action method within the Controller to handle extension callbacks. Specify the Controller and Action names via the UploadControlSettings.CallbackRouteValues property.

jQuery AJAX callbacks

View Example: How to use the jQuery.ajax function with DevExpress MVC Extensions Run Demo: jQuery AJAX Callbacks

The following example illustrates how to load a GridView to a div element on a callback.

JS

function OnClick(s, e) {
    $.ajax({
        type: "POST",
        url: "@Url.Action("GridViewPartial")",
        success: function(response) {
            $("#container").html(response);
        }
    });
}   

ASPX

@Html.DevExpress().Button(settings => {
    settings.Name = "MyButton";
    settings.Text = "Click Me!!!";
    settings.ClientSideEvents.Click = "OnClick";
}).GetHtml()

<div id="container" class="container">
</div>  

Example

This example demonstrates how the use of callbacks can be implemented for the TreeView extension.

View (Callbacks.cshtml)

@Html.Partial("CallbacksPartial")

Partial View (CallbacksPartial.cshtml)

@Html.DevExpress().TreeView(
    settings => {
        settings.Name = "tvCallbacks";
        settings.CallbackRouteValues = new { Controller = "TreeView", Action = "CallbacksPartial" };
    }).BindToSiteMap("~/App_Data/Feature.sitemap", false).GetHtml()

Controller (TreeViewController.cs)

public class TreeViewController: Controller {
    public ActionResult Callbacks() {
        return DemoView("Callbacks");
    }
    public ActionResult CallbacksPartial() {
        return PartialView("CallbacksPartial");
    }
}