This is a counterpart of the How to filter resources in ASPxScheduler via ASPxListBox code example but for ASP.NET MVC platform. The implementation for this platform is quite different. As a starting point, we are using the data-bound Scheduler in the partial view (see Note section in the Using Callbacks help article). You can find a similar logic in Lesson 2 - Implement Insert-Update-Delete Appointment Functionality. But our code is more extensible and reliable for the following reason.

We use the SchedulerHelper class to initialize Scheduler settings for both view and controller. This allows us to implement a reliable solution according to the Lesson 3 - Use Scheduler in Complex Views. This is preferable implementation, which should operate correctly in any possible scenarios.

It is not necessary to isolate the CheckBoxList in a partial view because it is not operating in callback mode. Thus, we place it in the main view:

[C#]
@modelSchedulerFilterResourcesDataLevelMvc.Models.SchedulerDataObject<scripttype="text/javascript">// <![CDATA[  functionOnSelectedIndexChanged(s,e){scheduler.PerformCallback();}functionOnBeginCallback(s,e){e.customArgs['SelectedResources']=cbResources.GetSelectedValues().join(',');}// ]]>  </script><table><tr><tdvalign="top">@Html.DevExpress().CheckBoxList(settings=>{settings.Name="cbResources";settings.Width=System.Web.UI.WebControls.Unit.Pixel(200);settings.Properties.ClientSideEvents.SelectedIndexChanged="OnSelectedIndexChanged";settings.Properties.ValueField="ID";settings.Properties.TextField="Model";}).BindList(Model.Resources).GetHtml()</td><td>@Html.Partial("SchedulerPartial",Model)</td></tr></table>

The OnBeginCallback function name is assigned to the 'settings.ClientSideEvents.BeginCallback' attribute of the Scheduler settings initialized in the SchedulerHelper class. Thus, this function is called before callback occurs. We pass parameters to the corresponding controller's action in this function as described in the Passing Values to Controller Action Through Callbacks help section. This action is defined as follows:

[C#]
publicActionResultSchedulerPartial(){returnPartialView("SchedulerPartial",SchedulerDataHelper.GetDataObject(GetSelectedResourceIds()));}...List<int>GetSelectedResourceIds(){stringrequest=(Request.Params["SelectedResources"]!=null)?(Request.Params["SelectedResources"]):string.Empty;return(request!=string.Empty)?request.Split(',').Select(n=>Convert.ToInt32(n)).ToList<int>():newList<int>();}

The SchedulerDataHelper.GetDataObject() method is implemented so that the returned object resources are filtered by a list of Ids passed to this method. Note that we use this method in the EditAppointment action either.

See Also:

Scheduler - How to filter appointments by resources

Files to look at:

This example illustrates the simplest possible implementation of custom appointment editing form. This form in our example is defined in the ~/Home/CustomAppointmentFormPartial.cshtml view and has only several fields:

- Subject, Start, and End regular attributes;

- Price custom field,

Other features are skipped/disabled for the sake of clarity.

Here are some important points concerning the implementation:

a) We use the SchedulerHelper class to initialize Scheduler settings for its view. This class has the following extension method that allows you to utilize it in the view's code:

[C#]
publicstaticSchedulerSettingsCreateSchedulerSettings(thisHtmlHelperhtmlHelper)

Note that the RenderPartial() and ViewData members of an HtmlHelper Class instance are used to render a custom form and pass parameters to it respectively.

b) Scheduler settings are passed to SchedulerExtension.GetAppointmentTo*() methods according to the Lesson 3 - Use Scheduler in Complex Views help section.

c) As usual, the Scheduler is rendered in a separate partial view. Refer to the ASP.NET MVC Extensions > Common Concepts > Using Callbacks help section to see why it is important.

See Also:

Scheduler - Custom Forms

Scheduler - How to implement a custom Edit Appointment Form with custom fields

Files to look at:

This example illustrates the most reliable approach to define the Scheduler extension in your MVC application with the capability to perform CRUD operations.

The main principal is isolation of extension settings. They are isolated to a separate SchedulerHelper class. The SchedulerPartial view and SchedulerExtension.GetAppointmentTo* methods (e.g., SchedulerExtension.GetAppointmentsToInsert) use it. It is mandatory for scenarios when CRUD operations are required (e.g., see Lesson 3 - Use Scheduler in Complex Views ). Moreover, it is good practice to always use this design because it guarantees reliable extension operation. Note that it is applicable for other extensions such as GridView (see T191698 - How to isolate extension settings into separate helper class and share a single partial view to display multiple extensions), HtmlEditor (see T280805: HtmlEditor - Insert media content buttons are disabled), etc.

In addition, we define the SchedulerHelper.CreateSchedulerSettings method as an extension method (e.g., see How to: Implement and Call a Custom Extension Method) for the HtmlHelper class. This allows us to access HtmlHelper facilities in the extension method (by default, they are available in the View context only). The  T191698 - How to isolate extension settings into separate helper class and share a single partial view to display multiple extensions code example illustrates a more universal approach (the WebViewPage class is used instead of the HtmlHelper class).

Files to look at:

This example shows how to access a single item by using method.

Updated:

The**ASPxFormLayout.FindItemByPath** method and the **LayoutItem.LayoutItemNestedControlContainer**property are obsolete. It is recommended to use the **ASPxFormLayout.FindItemOrGroupByName**method and the **LayoutItem.Controls**property instead.

Files to look at:

This example illustrates how to show a conformation message to overwrite an existing file in the ASPxFileManager.

The conformation message is shown in the client-side ASPxClientFileManager.FileUploading event and gives an option to the user to either overwrite the existing file or cancel the operation. User's selection is then transferred to the server-side via an ASPxHiddenField. If the user chooses to overwrite the file, the existing file will be deleted.

This example is also available in MVC:
FileManager - How to show a confirmation dialog to overwrite an existing file

This scenario should be implemented using a custom file system provider along with the ASPxFileManager.FileUploading event.

In the ASPxFileManager.FileUploading event handler, fetch a value from the ASPxHiddenField control and see if a user confirmed that he/she wants to override the existing file. Set the custom file system provider's flag accordingly. Implement the Exists and UploadFile methods of the custom file system provider in the following manner:

[C#]
publicoverrideboolExists(FileManagerFilefile){if(ProviderOptions.AllowOverwrite)returnfalse;returnbase.Exists(file);}publicoverridevoidUploadFile(FileManagerFolderfolder,stringfileName,Streamcontent){base.UploadFile(folder,fileName,content);ProviderOptions.AllowOverwrite=false;}

The main point of the approach is to explicitly specify that the file that is being uploaded does not exist if a user decided to override a file. The rest of the logic is implemented by the default PhysicalFileSystemProvider's methods.

Files to look at:

This example demonstrates how to implement a table of contents with the scrollable area using the ASPxNavBar control. An xml file is used as a data source here, however it is possible to do the same with any other data source.
The main idea is to add items both in ASPxNavBar and the scrollable area when you process an entry from the data source.

Once items are added, implement the function that will:

[JavaScript]
var firstFullyVisibleIndex = 0;

$(".section").each(function(){var scrollOffset = $(document).scrollTop();var elementOffset = $(this).offset().top;if(scrollOffset < elementOffset){
        firstFullyVisibleIndex = $(this).index();returnfalse;}});

[JavaScript]
if(selectedSectionIndex != firstFullyVisibleIndex){
    selectedSectionIndex = firstFullyVisibleIndex;var group = navbar.GetActiveGroup();var newlySelectedItem = group.GetItem(selectedSectionIndex);
    navbar.SetSelectedItem(newlySelectedItem);}

Call this function in two event handlers: when the page loads and when the page is scrolled:

[JavaScript]
$(window).scroll(function(){
    SyncNavbar();});
$().ready(function(){
    navbar.SetActiveGroup(navbar.GetGroupByName(navbar.cpActiveGroup));
    SyncNavbar();});

Files to look at:

When the ASPxNavBar is bound to XmlDataSource, the latter should suit the following structure:

[XML]
<Root><GroupText="Reports"><ItemText=" ... "NavigateUrl="..."ImageUrl="..."/></Group></Root>

In this case, XmlDataSource can retrieve and synchronize the Text, NavigateUrl and ImageUrl XML attributes with ASPxNavBar properties. However, in real applications, data seldom suits this structure. Most often, an XML schema contains several sub- nodes that describe some element. For instance:

[XML]
<Menus><Menutext="abc1"><ProductID>193</ProductID><ProductName>090 - Introduction</ProductName><PTName>Video</PTName></Menu></Menus>

XmlDataSource cannot parse such a schema. However, XmlDataSource allows specifying an XSLT file where you can define a transformation that will be applied to the specified DataFile. In this case, it is necessary to utilize the GroupContentTemplate. For example:

[XML]
<xsl:stylesheetversion="1.0"xmlns:xsl="<a href="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform</a>">;<xsl:templatematch="/"><Menus><xsl:for-eachselect="//Menus/*"><MenuText="{ProductName}"ProductID="{ProductID}"></Menu></xsl:for-each></Menus></xsl:template></xsl:stylesheet><GroupContentTemplate>
   ProductID:  <asp:LabelID="Label1"runat="server"Text='<%# DataBinder.Eval(Container.Group.DataItem, "ProductID") %>'></asp:Label></GroupContentTemplate>

You can learn more about XML transformation files from the following sources:

Using XSLT files with the new XMLDataSource control
XSLT - Transformation

Files to look at:

To bind the ASPxDataView control to the data source declaratively, use one of the data source controls. Assign its ID to the ASPxDataView.DataSourceID property value and configure the item template to display the data source information in data items.
In this example, the data view is bound to the XmlDataSource control.

See Also:
ASPxDataView — Binding to Data
How to bind the ASPxDataViewcontrolto the datasourceat runtime
How to fill the unbound ASPxDataView control with data items at runtime‌

Files to look at:

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 Document Server subscription license is required to implement the demonstrated approach.

Files to look at:

This example demonstrates how to manipulate objects inside ASPxPopupControl with a specified ContentUrl property.
To access/manipulate client-side programmatic objects inside a ASPxPopupControl perform the following steps:

Note: Iframe isn't fully loaded in the Shown event when the popup is shown for the first time. It is necessary to handle the load event of iframe and call the necessary functions in the event handler.

Default.aspx:

[ASPx]
<dx:ASPxLoadingPanelID="ASPxLoadingPanel1"ClientInstanceName="loadingPanel"Modal="true"runat="server"></dx:ASPxLoadingPanel><dx:ASPxComboBoxID="cmb"runat="server"ClientInstanceName="clientCmb"><Items>
       ...  </Items><ClientSideEventsSelectedIndexChanged="OnSelectedIndexChanged"/></dx:ASPxComboBox><dx:ASPxPopupControlID="popup"runat="server"ContentUrl="~/ContentPageWithTextBox.aspx"Top="100"ClientInstanceName="clientPopup"CloseAction="CloseButton"><ClientSideEventsShown="OnShown"/></dx:ASPxPopupControl>

[JavaScript]
var iframeLoaded = false;function OnPopUp(s, e){
    loadingPanel.Show();}function OnSelectedIndexChanged(s, e){if(clientPopup.IsVisible())
        SetTbText();else clientPopup.Show();}function OnInit(s, e){var iframe = s.GetContentIFrame();
    iframe.onload = function(){
        iframeLoaded = true;
        SetTbText();}}function OnShown(s, e){if(iframeLoaded)
    SetTbText();}function SetTbText(){var contentIFrameWindow = clientPopup.GetContentIFrameWindow();var contentTextBox = contentIFrameWindow.clientTb;if(contentTextBox)
        contentTextBox.SetText(clientCmb.GetText());
    loadingPanel.Hide();}

ContentPageWithTextBox.aspx:

[ASPx]
<dx:ASPxTextBoxID="tb"runat="server"Width="150px"ClientInstanceName="clientTb"></dx:ASPxTextBox>

See Also:
E3098: How to return values from the ASPxPopupControl's ContentUrl page and close the popup on both client and server sides

Files to look at:

Note

In v20.1 the RichEditDocumentServer component implements the IBasePrintable interface (not IPrintable), which includes cross-platform functionality extracted from the IPrintable interface.
We introduced these changes to eliminate platform dependencies in the Printing.Core assembly.

This example is a simplified implementation of the DXDocs demo that illustrates how to create a file thumbnail based on the first page of the document.
The ASPxFileManager.CustomThumbnail event is used for defining a custom value for the FileManagerItem.ThumbnailUrl property. Since this solution does not provide a cashing mechanism, previews are generated on each request. To increase application performance, refer to the FileSystemService class of the DXDocs demo.

Important Note:

The Document Server product license is required for using this approach. Please refer to the Subscriptions page for more information.

Files to look at:

[C#]
publicstaticclassSpreadsheetSettingsHelper{publicstaticSpreadsheetSettingsGetSpreadsheetSettings(){SpreadsheetSettingssettings=newSpreadsheetSettings();settings.Name="SpreadsheetName";settings.CallbackRouteValues=new{Controller="Home",Action="SpreadsheetPartial"};...returnsettings;}}

[C#]
settings.Saving=(s,e)=>{byte[]docBytes=SpreadsheetExtension.SaveCopy("SpreadsheetName",DocumentFormat.Xlsx);DataHelper.SaveDocument(docBytes);e.Handled=true;};

[C#]
@Html.DevExpress().Spreadsheet(SpreadsheetSettingsHelper.GetSpreadsheetSettings()).Open(Model.DocumentId,Model.DocumentFormat,()=>{returnModel.Document;}).GetHtml()

[C#]
publicActionResultSpreadsheetPartial(){// Spreadsheet's CallbackRouteAction method  returnSpreadsheetExtension.GetCallbackResult(SpreadsheetSettingsHelper.GetSpreadsheetSettings());}

See Also:
WebForms Version:
T190812: ASPxSpreadsheet - How to save and load documents from a database

16.1:

Spreadsheet allows handling certain actions in the Controller now. So, it is possible to save a document to a database using the Spreadsheet ribbon's 'Save' button.

15.1: Now you can use the SpreadsheetExtension.Open method to load a document and call the SpreadsheetExtension.SaveCopy method to save changes.

For Older Versions:
Use ISpreadsheetComponent.LoadDocument to load a document and ISpreadsheetComponent.SaveDocument - to save it.

Files to look at:

This example demonstrates how to resize a DevExpress ASP.NET control (for example, ASPxPageControl) to occupy the entire browser window (a Full Screen mode)

[CSS]
body,html{padding:0;margin:0;}

[ASPx]
<dx:ASPxPageControl...Height="100px"Width="100%">

[ASPx]
<dx:ASPxPageControl...><PaddingsPadding="0px"/>
    ...  </dx:ASPxPageControl>

- the control is initialized for the first time (handle the client-side ASPxClientControl.Init event);

- the browser window size is changed/resized (subscribe to the "resize" event and handle it via the client-side ASPxClientUtils.AttachEventToElement method):

[ASPx]
<dx:ASPxPageControl...><ClientSideEventsInit="OnInit"/>...  </dx:ASPxPageControl>

[JavaScript]
function OnInit(s, e){
    AdjustSize();
    ASPxClientUtils.AttachEventToElement(window, "resize", function(evt){AdjustSize();});}function AdjustSize(){var height = document.documentElement.clientHeight;
    pc.SetHeight(height);}

See Also:

E1081: How to use the ASPxGridView control (with the enabled vertical scrollbar) in a Full Screen mode (100% browser Width and Height)

Splitter - Fullscreen Mode

Files to look at:

This new feature (FileManagerItemProperties.Metadata Property, starting from the release 17.2) provides access to a collection of an item's metadata. You could view metadata by clicked "Properties" in the corresponding item context menu. For this, create a custom file system provider, override base GetFiles and GetFolders methods, add key-value dictionary pairs to properties of a corresponding FileManagerFile or a FileManagerFolder object. Handle the client-side event SelectionChanged to get the currently selected element. Use the client-side method GetMetadata to get the metadata dictionary of the element. Then, compose a text from keys and values and assign it as the ASPxPopupControl content.

Files to look at:

This example demonstrates how to use ASPxClientEdit methods to clear editors located on the page or inside a specific container.

Once the “Clear Editors” button is clicked, all editors located on the page and inside the ASPxPopupControl are cleared. The ASPxClientEdit.ClearEditorsInContainer method is used to create this functionality. The value “null” is passed as the method’s parameter to clear all visible editors on the page.

In addition, once the popup control is closed, only editors within the Popup control are cleared. To achieve this, ASPxClientEdit.ClearEditorsInContainerById method is used. Controls inside the Popup are wrapped within a <div>. The “id” of the <div> is passed to the method as its parameter to clear all visible editors inside the Popup.   

Note – Since GetMainElement() function always returns Null for ASPxPopupControl, it cannot be passed to the ASPxClientEdit.ClearEditorsInContainer method to clear the editors inside the Popup.

Files to look at:

This example demonstrates an alternative way of how to track server-side processing. In this example, a custom HttpModule is used instead of HttpHandler as demonstrated in the How to track progress of server side processing on the client side (using HttpHandler) example. The use of the HttpModule has multiple advantages, and here are some of them:

- The module will be called earlier than the handler;

- At this stage, a user can close the predefined request from the client.
In contrast to the previous example where a session object is used to store a progress value, a simple static class is defined. Note this class has a global scope and should be made thread-safe.

For more information about the difference between the use of HttpModule and HttpHandler, follow this article: HTTP Handlers and HTTP Modules Overview

This example extends the following one: How to display progress information about server-side callback processing

You can find more information on HttpModule basic concepts here: Walkthrough: Creating and Registering a Custom HTTP Module

See Also:
How to track progress of server side processing on the client side (using WebMethods)
ASPxGridView - How to show a lengthy operation's progress and allow canceling such operations

Files to look at:

This example demonstrates one of many possible scenarios when a client should be notified of the progress of a server process. The sample includes a class declaration of a custom HttpHandler; the latter processes the simplest request from the client and returns information that can be restored and used to display current progress, without refreshing the whole page. The other defined class emulates long-time processing, which starts with a standalone thread and is executed in the background. This is an advantage because a callback is performed on the server side quickly if a client requests a new process.

Note that any custom HttpHandler should be registered via the IIS Console Manager or manually through the web.config file. More details are available here: How to register HTTP Handlers.

Please refer to the following links to know more:
Creating an Asynchronous HTTP Handler
Creating a Synchronous HTTP Handler

This example extends the following one: How to display progress information about server-side callback processing.

See also:
How to track progress of server side processing on the client side (using HttpModule)
How to track progress of server side processing on the client side (using WebMethods)
ASPxGridView - How to show a lengthy operation's progress and allow canceling such operations

Files to look at:

This example illustrates how to enable the Native rendering mode (by setting the Native property to True) in order to produce the raw HTML elements and apply the Bootstrap Form (form-control, btn, etc.) style.
There is also a side-by-side comparison with the same set if editors in the DevExprss Moderno theme (applied in the Web.config) that has a similar color schema as the Bootstrap.

The main requirement is to set the editor's Native property in order to produce the raw HTML rendering and apply the Bootstrap style via the CssClass property:

[ASPx]
<dx:ASPxTextBox...Native="true"CssClass="form-control"></dx:ASPxTextBox><dx:ASPxMemo...Native="true"CssClass="form-control"></dx:ASPxMemo><dx:ASPxButton...Native="true"CssClass="btn btn-primary"></dx:ASPxButton>

Optionally, it may be necessary to specify the editor's Width and Height dimensions (in percent or pixels) in order to achieve a consistent/custom layout.

MVC Version:
How to apply a Bootstrap Form (form-control, btn, etc.) style to the DevExpress editors in Native mode

Files to look at:

This example illustrates how to enable the Native rendering mode (by setting the Native property to True) in order to produce the raw HTML elements and apply the Bootstrap Form (form-control, btn, etc.) style.
There is also a side-by-side comparison with the same set if editors in the DevExprss Moderno theme (applied in the Web.config) that has a similar color schema as the Bootstrap.

The main requirement is to set the editor's Native property in order to produce the raw HTML rendering and apply the Bootstrap style via the CssClass property:

[C#]
@Html.DevExpress().TextBox(settings=>{...settings.ControlStyle.CssClass="form-control";settings.Properties.Native=true;}).GetHtml()@Html.DevExpress().Memo(settings=>{...settings.ControlStyle.CssClass="form-control";settings.Properties.Native=true;}).GetHtml()@Html.DevExpress().Button(settings=>{...settings.ControlStyle.CssClass="btn btn-primary";settings.Styles.Native=true;}).GetHtml()

Optionally, it may be necessary to specify the editor's Width and Height dimensions (in percent or pixels) in order to achieve a consistent/custom layout.

WebForms Version:
How to apply a Bootstrap Form (form-control, btn, etc.) style to the DevExpress editors in Native mode

Files to look at:

This example illustrates how to catch and handle

Global.asax:

[C#]
voidApplication_Start(objectsender,EventArgse){// Assign Application_Error as a callback error handler  ASPxWebControl.CallbackError+=newEventHandler(Application_Error);}

[VB.NET]
Sub Application_Start(ByVal sender AsObject, ByVal e As EventArgs)  ' Assign Application_Error as a callback error handler  AddHandler ASPxWebControl.CallbackError, AddressOf Application_Error  EndSub

[C#]
voidApplication_Error(objectsender,EventArgse){// Use HttpContext.Current to get a Web request processing helper  Exceptionexception=HttpContext.Current.Server.GetLastError();if(exceptionisHttpUnhandledException)exception=exception.InnerException;// Log an exception  AddToLog(exception.Message,exception.StackTrace);}

[VB.NET]
Sub Application_Error(ByVal sender AsObject, ByVal e As EventArgs)  ' Use HttpContext.Current to get a Web request processing helper  Dim exception As Exception = HttpContext.Current.Server.GetLastError()  If TypeOf exception Is HttpUnhandledException Then
        exception = exception.InnerException  EndIf' Log an exception  
    AddToLog(exception.Message, exception.StackTrace)  EndSub

By default, an unhandled exception occurs while a callback is displayed using the "alert" message.
In order to execute redirect to a custom error page, specify the callbackErrorRedirectUrl configuration option:

Web.config:

[XML]
<configuration><devExpress><errorscallbackErrorRedirectUrl="~/ErrorPage.aspx"/></devExpress></configuration>

Note: some controls (for example ASPxUploadControl) utilize the capabilities of the DevExpress.Web.ASPxUploadProgressHttpHandler handler to perform actions on a callback. System-level exceptions (request timeout, session timeout, etc.) that occur while executing the DevExpress.Web.ASPxUploadProgressHttpHandler handler can't be handled using the ASPxWebControl.CallbackError event. Use the default Application_Error event handler for this purpose.

MVC Version:
How to use the ASPxWebControl.CallbackError event to handle application-level errors occurred inside ASPxWebControls during callback processing

Files to look at: