[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Collapse]Common Concepts
    Web Application Project Templates
    Insert Extension Wizard
    Data Binding
   [Expand]Applying Themes
    Client-Side API
    Declaring Server-Side Event Handlers
    Templates
    Using Callbacks
    Passing Values to a Controller Action through Callbacks
    Supported Attributes for Model Validation
    Using Extensions in Razor Views
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Client-Side API

DevExpress ASP.NET MVC extensions provide an advanced client-side API that enables you to combine server-side and client-side functionality.

The DevExpress MVC extensions provide client-side APIs that are implemented using JavaScript. Extension-relative assemblies (DLLs) include JavaScript files that implement an extension's client-side APIs as embedded resources.

Expanded Attach Scripts

You should attach script files that implement extensions’ client-side APIs to an application.

The DevExpress ASP.NET Project Wizard automatically attaches the JavaScript files to the application's Site.Master page if you use a DevExpress Project Template to create an MVC application. If you do not use a DevExpress project template, you need to manually attach necessary DevExpress client script files using the ExtensionsFactory.RenderScripts extension method within a view page's HEAD or BODY tag.

View (or Master Page) Code (ASPX):

View (or layout View) Code (Razor):

Expanded Extension's Available Client API

Set an extension's EnableClientSideAPI (or Properties.EnableClientSideAPI) property to true to make the extension's client-side API available for developers. If a DevExpress MVC Extension does not provide the EnableClientSideAPI property, its client-side API is always available for this extension on the client side.

Note that an extension's client-side API is automatically available if you handle any of its client-side events.

Expanded Access an Extension on the Client Side

Use the SettingsBase.Name property to specify an extension's name to access its client object.

View code (ASPX):

View code (Razor):

Note

Refer to the KA18687 KB article for information on how to access an extension's client object if the SettingsBase.Name property contains special characters (for example, the "." dot).

Expanded Client-Side Events

Each DevExpress ASP.NET MVC Extension provides a set of client-side events. Use the ClientSideEvents property at the level of the extension's settings (Settings.ClientSideEvents) or properties (Properties.ClientSideEvents) to access the available client-side events.

Note

Register JavaScript functions at the top of the page. In this case, the browser executes these scripts before it renders the DevExpress ASP.NET MVC extensions. Refer to the Defer Client Object Initialization topic for information how to enable the browser to load and execute scripts asynchronously when loading a page.

The following code demonstrates how to handle an extension's client-side events:

View code (ASPX):

View code (Razor):

See Also: DevExpress ASP.NET Controls Client-Side Events

Expanded Client-Side API

The table below lists the DevExpress MVC Extensions, their client objects and corresponding namespaces that implement their client-side functionality:

Extension Name Client Object Client Namespace
GridView MVCxClientGridView DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
PivotGrid MVCxClientPivotGrid DevExpress.Web.MVC.Scripts,
DevExpress.Web.ASPxPivotGrid.Scripts
TreeList MVCxClientTreeList DevExpress.Web.MVC.Scripts,
DevExpress.Web.ASPxTreeList.Scripts
HtmlEditor MVCxClientHtmlEditor DevExpress.Web.MVC.Scripts,
DevExpress.Web.ASPxHtmlEditor.Scripts
Navigation Extensions:    
Menu ASPxClientMenu DevExpress.Web.Scripts
NavBar MVCxClientNavBar DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
PageControl MVCxClientPageControl DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
PopupControl ASPxClientPopupControl DevExpress.Web.Scripts
Splitter ASPxClientSplitter DevExpress.Web.Scripts
TabControl ASPxClientTabControl DevExpress.Web.Scripts
TreeView MVCxClientTreeView DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
Data Editors Extensions:    
BinaryImage ASPxClientBinaryImage DevExpress.Web.Scripts
Button ASPxClientButton DevExpress.Web.Scripts
ButtonEdit ASPxClientButtonEdit DevExpress.Web.Scripts
Calendar MVCxClientCalendar DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
CheckBox ASPxClientCheckBox DevExpress.Web.Scripts
CheckBoxList ASPxClientCheckBoxList DevExpress.Web.Scripts
ColorEdit ASPxClientColorEdit DevExpress.Web.Scripts
ComboBox MVCxClientComboBox DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
DateEdit ASPxClientDateEdit DevExpress.Web.Scripts
DropDownEdit ASPxClientDropDownEdit DevExpress.Web.Scripts
HyperLink ASPxClientHyperLink DevExpress.Web.Scripts
Image ASPxClientImage DevExpress.Web.Scripts
Label ASPxClientLabel DevExpress.Web.Scripts
ListBox MVCxClientListBox DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
Memo ASPxClientMemo DevExpress.Web.Scripts
ProgressBar ASPxClientProgressBar DevExpress.Web.Scripts
RadioButton ASPxClientRadioButton DevExpress.Web.Scripts
RadioButtonList ASPxClientRadioButtonList DevExpress.Web.Scripts
SpinEdit ASPxClientSpinEdit DevExpress.Web.Scripts
TextBox ASPxClientTextBox DevExpress.Web.Scripts
TimeEdit ASPxClientTimeEdit DevExpress.Web.Scripts
TokenBox MVCxClientTokenBox DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
TrackBar ASPxClientTrackBar DevExpress.Web.Scripts
Utilities Extensions:    
CallbackPanel MVCxClientCallbackPanel DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
RoundPanel ASPxClientRoundPanel DevExpress.Web.Scripts
UploadControl MVCxClientUploadControl DevExpress.Web.MVC.Scripts,
DevExpress.Web.Scripts
Chart Extension:    
Chart MVCxClientChart DevExpress.Web.MVC.Scripts,
DevExpress.XtraCharts.Web.Scripts
Report Extension:    
DocumentViewer MVCxClientDocumentViewer DevExpress.Web.MVC.Scripts,
DevExpress.XtraReports.Web.Scripts
Scheduler Extension:    
SchedulerControl MVCxClientScheduler DevExpress.Web.MVC.Scripts,
DevExpress.Web.ASPxScheduler.Scripts

Is this topic helpful?​​​​​​​