Using Callbacks

  • 6 min 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.

  • 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. 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 CallbackRouteValues property. (CalendarSettings.CallbackRouteValues)

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 CallbackRouteValues property. (CallbackPanelSettings.CallbackRouteValues)

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 CallbackRouteValues property. (ChartControlSettings.CallbackRouteValues)

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 CallbackRouteValues property. (AutoCompleteBoxBaseSettings.CallbackRouteValues)

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 CallbackRouteValues property. (DataViewSettings.CallbackRouteValues)

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 CallbackRouteValues property. (DateEditSettings.CallbackRouteValues)

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 CallbackRouteValues property. (DockManagerSettings.CallbackRouteValues)

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 CallbackRouteValues property. (PopupControlSettingsBase.CallbackRouteValues)

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 CallbackRouteValues property. (GridSettingsBase.CallbackRouteValues)

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 CallbackRouteValues property. (HtmlEditorSettings.CallbackRouteValues)

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 CallbackRouteValues property. (ListBoxSettings.CallbackRouteValues)

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 CallbackRouteValues property. (MenuSettings.CallbackRouteValues)

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 CallbackRouteValues property. (NavBarSettings.CallbackRouteValues)

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 CallbackRouteValues property. (PageControlSettings.CallbackRouteValues)

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 CallbackRouteValues property. (PivotGridSettings.CallbackRouteValues)

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 CallbackRouteValues property. (PopupControlSettingsBase.CallbackRouteValues)

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 CallbackRouteValues property. (PopupMenuSettings.CallbackRouteValues)

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 CallbackRouteValues property. (RichEditSettings.CallbackRouteValues)

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 CallbackRouteValues property. (SchedulerSettings.CallbackRouteValues)

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 CallbackRouteValues property. (SpreadsheetSettings.CallbackRouteValues)

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 CallbackRouteValues property. (TreeListSettings.CallbackRouteValues)

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 CallbackRouteValues property. (TreeViewSettings.CallbackRouteValues)

UploadControl

Optional

Implement an Action method within the Controller to handle extension callbacks.

Specify the Controller and Action names via the CallbackRouteValues property. (UploadControlSettings.CallbackRouteValues)

jQuery AJAX callbacks

Note

DevExpress supports jQuery AJAX callbacks starting with v12.1. For older versions, you can use the How to load MVC extensions using the CallbackPanel extension example.

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

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

Online Demo

jQuery AJAX Callbacks

Online Example

How to use the jQuery.ajax function with DevExpress MVC Extensions

Example

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

View Code - "Callbacks" (ASPX)

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="ContentHolder" runat="server">
    <% 
        Html.RenderPartial("CallbacksPartial");
    %>
</asp:Content>

View Code - "Callbacks" (Razor)

@Html.Partial("CallbacksPartial")

PartialView code - "CallbacksPartial" (ASPX):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

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

PartialView code - "CallbacksPartial" (Razor):

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

Controller ("TreeViewController"):

    public class TreeViewController: Controller {

        public ActionResult Callbacks() {
            return DemoView("Callbacks");
        }

        public ActionResult CallbacksPartial() {
            return PartialView("CallbacksPartial");
        }

    }
See Also