Mini Kabibi Habibi
<Demos xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="Demos.xsd">
<DemoProduct Key="MVC" Url="" IsMvc="true" IsMvcRazor="true" Title="DevExpress Extensions for ASP.NET MVC" NavItemTitle="Over 45 MVC Extensions" SeoTitle="DevExpress Extensions for ASP.NET MVC">
<DownloadUrl>
http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
</DownloadUrl>
<BuyUrl>
http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
</BuyUrl>
<DocUrl>
http://go.devexpress.com/DevExpress_AspDemos_Mvc_Doc.aspx
</DocUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET MVC Extensions">
<BannerTitle>
High-Performance Lightweight MVC Extensions
</BannerTitle>
<BannerText>
Native MVC design with lightweight semantic rendering powered by the jQuery.
</BannerText>
<BannerImageUrl>
~/Content/VideoBanner.png
</BannerImageUrl>
<BannerUrl>
http://go.devexpress.com/DevExpress_AspDemos_Mvc_Video.aspx
</BannerUrl>
<DescriptionTitle>
DevExpress MVC Extensions Online Demos
</DescriptionTitle>
<Description>
<![CDATA[
<p>
The samples on this webpage demonstrate many of the features and capabilities available to you
when using DevExpress <b>ASP.NET MVC Extensions</b>. Key features include:
</p>
]]>
</Description>
<DescriptionFooter>
<![CDATA[
<p>
To view any of the demos within these web pages, use the menu on the left hand side of this page. To learn more about the DevExpress Extensions for ASP.NET MVC, please refer to the following documents:
</p>
<ul>
<li>
<a href="http://documentation.devexpress.com/#AspNet/CustomDocument8161">Introduction to DevExpress Extensions for ASP.NET MVC</a>
</li>
<li>
<a href="http://documentation.devexpress.com/#AspNet/CustomDocument8163">How to Start Using DevExpress Extensions in an MVC Web Application</a>
</li>
<li>
<a href="http://documentation.devexpress.com/#AspNet/CustomDocument8164">System Requirements for DevExpress MVC Extensions</a>
</li>
</ul>
<p>
If you want to explore the capabilities of these libraries further, we offer a free evaluation version and
all our products are backed by a 60 day no questions asked money back guarantee.
For assistance, feel free to contact us at <a href="mailto:support@devexpress.com">support@devexpress.com</a>.
</p>
]]>
</DescriptionFooter>
</Intro>
<DemoGroup Key="Common" Title="Common Features">
<Demo Key="ModelValidation" Title="Model Validation" SeoTitle="Data Editors for ASP.NET MVC - Model Validation">
<Description>
<![CDATA[
<p><b>What is "Model Validation"?</b>
See this MSDN article to learn how the model validation works: <a href="http://msdn.microsoft.com/en-us/library/ee256141(v=vs.100).aspx">How to: Validate Model Data Using DataAnnotations Attributes</a>.</p>
<p>This demo illustrates how user input can be easily validated using a model-based ASP.NET MVC validation approach. DevExpress MVC Extensions can be seamlessly integrated into the ASP.NET MVC validation infrastructure.</p>
<p>DevExpress MVC Editors have their own container for displaying validation error messages, which can be enabled via the <b>ShowModelErrors</b> property. This container allows you to manipulate validation messages more flexibly, then via the standard <b>Html.ValidationMessageFor</b> helper. You can control how errors should be displayed within editors by using settings exposed via the editor <b>ValidationSettings</b> property, such as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorDisplayModetopic">ValidationSettings.ErrorDisplayMode</helplink>.</p>
]]>
</Description>
<SourceFile>~/Models/Validation.cs</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
</Demo>
<Demo Key="UnobtrusiveValidation" Title="Unobtrusive Client Validation" SeoTitle="Data Editors for ASP.NET MVC - Unobtrusive Client Validation">
<Description>
<![CDATA[
<p><b>What is "Unobtrusive Client Validation"?</b>
See this blog post to learn how unobtrusive client validation works: <a href="http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html">Unobtrusive Client Validation in ASP.NET MVC 3</a>.</p>
<p>This demo illustrates how user input can be easily validated using an unobtrusive ASP.NET MVC validation approach. DevExpress MVC Extensions can be seamlessly integrated into the ASP.NET MVC validation infrastructure.</p>
<p>DevExpress MVC Editors have their own container for displaying validation error messages, which can be enabled via the <b>ShowModelErrors</b> property. This container allows you to manipulate validation messages more flexibly, then via the standard <b>Html.ValidationMessageFor</b> helper. You can control how errors should be displayed within editors by using settings exposed via the editor <b>ValidationSettings</b> property, such as <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorDisplayModetopic">ValidationSettings.ErrorDisplayMode</helplink>.</p>
]]>
</Description>
<SourceFile>~/Models/Validation.cs</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
</Demo>
<Demo Key="jQueryValidation" Title="jQuery Client Validation" SeoTitle="Data Editors for ASP.NET MVC - jQuery Client Validation">
<Description>
<![CDATA[
<p>This demo illustrates how user input can be easily validated using the jQuery Validation library. DevExpress MVC extensions provide you with full jQuery Client Validation support.</p>
<p>In this demo, the jQuery Validation methods are used to specify validation rules for individual model fields on the client. You can find a full list of the validation methods on the jQuery Documentation page: <a href="http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods">Plugins/Validation - jQuery Wiki - List of built-in Validation methods</a>.</p>
<p>The <b>rules:{...}</b> block contains field names with validation atributes.</p>
<p>The <b>messages:{...}</b> block contains field names with related error messages that should be displayed to the end-users when the validation fails.</p>
<p>The DevExpress MVC <helplink href="http://help.devexpress.com/#AspNet/CustomDocument12360">ValidationSummary</helplink> extension is used to summarize validation errors from multiple editors and then display them in a single block.</p>
]]>
</Description>
<SourceFile>~/Models/Validation.cs</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Callbacks" Title="jQuery Callbacks" SeoTitle="ASP.NET MVC Extensions - jQuery Callbacks">
<Description>
<![CDATA[
<p>DevExpress MVC extensions fully support jQuery AJAX callbacks. This demo shows how to load partial views containing DevExpress MVC extensions within a jQuery ajax callback.</p>
<p>The Menu extension contains three items. When the end-user selects an item from the menu, the OnSelectingMenuItem function is called. This function contains an ajax request, which causes the <b><div></b> container to be updated with the rendered DevExpress MVC extension from the partial view.</p>
<p>Ajax requiest settings:</p>
<ul>
<li><b>data</b> - defines the data to be sent on the server. In this demo, the selected menu item name is sent to the server.</li>
<li><b>beforeSend</b> - defines a pre-request callback function. In this demo, the pre-request callback function invokes loading panel.</li>
<li><b>success</b> - defines a function to be called if the request succeeds. In this demo, the called function hides the loading panel and puts the rendered extension code into the required container.</li>
</ul>
<p>You can find more available settings here: <a href="http://api.jquery.com/jQuery.ajax/">jQuery.ajax() – jQuery API</a>.</p>
]]>
</Description>
<SourceFile>~/Views/Common/CallbacksCalendarPartial.cshtml</SourceFile>
<SourceFile>~/Views/Common/CallbacksDataMiningPartial.cshtml</SourceFile>
<SourceFile>~/Views/Common/CallbacksVisualizationPartial.cshtml</SourceFile>
</Demo>
<Demo Key="AjaxForm" Title="Ajax Form" SeoTitle="ASP.NET MVC Extensions - Ajax Form">
<Description>
<![CDATA[
<p>DevExpress MVC extensions fully support Ajax Forms. </p>
<p>This demo shows how to process a form asynchronously with results without a page reload. The partial view that contains DevExpress MVC Editors is reloaded only.</p>
<p>When end user clicks the "Process" button, the form is sent to a server via an ajax callback without page reloading.</p>
<p>In this demo, the Ajax Form is created using the <b>Ajax.BeginForm()</b> helper method.</p>
<p>You can find more information about Ajax Forms at MSDN Reference: <a href="http://msdn.microsoft.com/en-us/library/dd492974(v=vs.108).aspx">AjaxExtensions.BeginForm Method</a>.</p>
]]>
</Description>
<SourceFile>~/Models/Validation.cs</SourceFile>
<SourceFile>~/Views/Common/AjaxFormPartial.cshtml</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
</Demo>
<Demo Key="AjaxActionLink" Title="Ajax ActionLink" SeoTitle="ASP.NET MVC Extensions - Ajax ActionLink">
<Description>
<![CDATA[
<p>DevExpress MVC Extensions support the <b>Ajax.ActionLink()</b> helper method.</p>
<p>The <b>Ajax.ActionLink()</b> helper method returns an anchor element that contains the URL to the specified action method; when the action link is clicked, the action method is invoked asynchronously by using JavaScript.</p>
<p>In this demo, the <b>Ajax.ActionLink()</b> is used to render a link that allows end-users to load information about the GridView item's category.</p>
<p>You can learn more about the <b>Ajax.ActionLink()</b> helper from MSDN Reference: <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink(v=vs.108).aspx">AjaxExtensions.ActionLink Method</a>.</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/Common/AjaxActionLinkPartial.cshtml</SourceFile>
<SourceFile>~/Views/Common/AjaxActionLinkCategoryPartial.cshtml</SourceFile>
</Demo>
<Demo Key="EditorTemplates" Title="Editor Templates" SeoTitle="Data Editors for ASP.NET MVC - Editor Templates">
<Description>
<![CDATA[
<p>DevExpress MVC extensions support standard the ASP.NET MVC templating system. This demo illustrates how to use DevExpress MVC Data Editors for building custom editor templates.</p>
<p>The <b>Html.EditorFor()</b> method is used to display data editors for model data fields using the required template. This method consults the <b>UIHint</b> attribute value or data type to determine which template to render for the given property.</p>
<p>All the custom editor template files are located in the <b>EditorTemplates</b> subfolder in the <b>~\Views\Shared</b> project folder. Each template file has the same name as a corresponding data type or <b>UIHint</b> attribute value. The template view code in this demo contains the label that displays the property name and the data editor that allows you to edit the required field.</p>
]]>
</Description>
<SourceFile>~/Models/Validation.cs</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccess.cshtml</SourceFile>
<SourceFile>~/Views/Common/ValidationSuccessPartial.cshtml</SourceFile>
<SourceFile>~/Views/Common/EditorTemplates/String.cshtml</SourceFile>
<SourceFile>~/Views/Common/EditorTemplates/FuelType.cshtml</SourceFile>
<SourceFile>~/Views/Common/EditorTemplates/Mileage.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="GridView" Title="Grid View" SeoTitle="ASP.NET MVC Extensions - Grid View">
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
<Description>
<![CDATA[<p>
This demo illustrates how the DevExpress MVC Grid View can be bound to a Model passed to a View from the Controller. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_Bindtopic">Bind</helplink> method is used to bind the MVC Grid View to the Model. As a Model for this demo, we use a message list retrieved from our twitter page.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomColumnDisplayTexttopic">CustomColumnDisplayText</helplink> method's delegate is used to change the text within the text column cells. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_SetStatusBarTemplateContenttopic">SetStatusBarTemplateContent</helplink> method is utilized to create a template for the grid's status bar and to display a refresh message within it.
</p>]]>
</Description>
<SourceFile>~/Models/Tweets.cs</SourceFile>
<SourceFile>~/Views/GridView/DataBindingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="DataBindingToLargeDatabase" Title="Data Binding to Large Database" SeoTitle="Data Binding to Large Database"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Grid.png" HighlightedTitle="Data Grid">
<Description>
<![CDATA[
<p>This demo illustrates how the DevExpress MVC Grid View can be bound to a large databases using LINQ to SQL.</p>
<p>With the MVC Grid View, you can easily bind to LINQ to SQL data sources via the extension's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_BindToLINQtopic">BindToLINQ</helplink> method. Simply call the method, pass the DataContext and table name as method parameters, and specify the key field via the GridView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_KeyFieldNametopic">KeyFieldName</helplink> property. Internally, the <b>BindToLINQ</b> method uses our <b>LinqServerModeDataSource</b> component, which was specifically designed to allow the Grid View MVC Extension to efficiently process large amounts of data. The <b>LinqServerModeDataSource</b> component automatically enables server mode to optimize the execution of all LINQ queries initiated by the Grid View. In this mode, the Grid View loads records on demand and performs data-aware operations (sorting, filtering, grouping, etc.) on the data server. This technique significantly improves the Grid View's speed and responsiveness.</p>
<p>You can explore the performance of the DevExpress MVC Grid View by executing data shaping operations against it (sorting, filtering, and grouping). Note how quickly the Grid View calculates summaries against 300,000 records.</p>
]]>
</Description>
<HighlightedDescription>The DevExpress GridView extension for ASP.NET MVC is a feature-complete grid with built-in data editors. With blazing fast data loading, efficient memory footprint, extensive data shaping options and integrated touch support for iOS and Android, the grid allows you to deliver elegant and highly functional Outlook inspired end-user experiences with ease - for both desktop and mobile web browsers.</HighlightedDescription>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/DataBindingToLargeDatabasePartial.cshtml</SourceFile>
<SourceFile>~/Views/GridView/PerformanceTestPartial.cshtml</SourceFile>
</Demo>
<Demo Key="SimpleCustomBinding" Title="Custom Binding (Simple)" SeoTitle="Simple Custom Data Binding">
<Description>
<![CDATA[
<p>
GridView supports custom data binding that allows you to perform all data operations, such as paging, sorting, filtering, grouping and summary calculation, completely by yourself.
</p>
<p>
In this mode, you handle data operations in corresponding Action methods; the correspondence is defined by populating the grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomBindingRouteValuesCollectiontopic">CustomBindingRouteValuesCollection</helplink>.
</p>
<p>
In each specified Action, the processed operation related state information, such as a column state (i.e., which column is sorted and in which direction) or a pager state (which page is selected), is passed automatically. The grid's current state (view model) can be obtained via the static <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_GetViewModeltopic">GridViewExtension.GetViewModel</helplink> method and can be updated with the processed operation state. Then, the required data should be provided for the grid view model via a call to its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewModel_ProcessCustomBindingtopic">ProcessCustomBinding</helplink> method.
</p>
<p>
The <b>ProcessCustomBinding</b> method has several overloads. You can select a particular one depending on which data operations you need to handle.
</p>
<p>
Generally, this method provides the following parameters representing typed method delegates:
</p>
<p>
getDataRowCountMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataRowCountHandlertopic">GridViewCustomBindingGetDataRowCountHandler</helplink> type<br/>
Provide implementation for this method to return the total number of data rows.
</p>
<p>
getDataMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataHandlertopic">GridViewCustomBindingGetDataHandler</helplink> type<br/>
Provide implementation for this method to return the required data rows to the grid.
</p>
<p>
getSummaryValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetSummaryValuesHandlertopic">GridViewCustomBindingGetSummaryValuesHandler</helplink> type<br/>
Provide implementation for this method to calculate and return values of summaries required within the grid.
</p>
<p>
getGroupingInfoMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetGroupingInfoHandlertopic">GridViewCustomBindingGetGroupingInfoHandler</helplink> type<br/>
Provide implementation for this method to return data rows for visible and expanded groups in the required order that depends on the applied grouping and sorting.
</p>
<p>
getUniqueHeaderFilterValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetUniqueHeaderFilterValuesHandlertopic">GridViewCustomBindingGetUniqueHeaderFilterValuesHandler</helplink> type<br/>
Provide implementation for this method to return unique values to be displayed in the header filter popup list invoked for a column.
</p>
<p>
The resulting grid state (view model) is returned as a model to a view that contains GridView. To bind GridView to this view model, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_BindToCustomDatatopic">BindToCustomData</helplink> method.
</p>
<p>
This demo shows a simple implementation of custom data binding - only sorting and paging operations are processed.
</p>
]]>
</Description>
<SourceFile>~/Models/GridViewCustomBindingModel.cs</SourceFile>
<SourceFile>~/Views/GridView/SimpleCustomBindingPartial.cshtml</SourceFile>
<SourceFile>~/Views/GridView/PerformanceTestPartial.cshtml</SourceFile>
</Demo>
<Demo Key="AdvancedCustomBinding" Title="Custom Binding (Advanced)" SeoTitle="Advanced Custom Data Binding">
<Description>
<![CDATA[
<p>
GridView supports custom data binding that allows you to perform all data operations, such as paging, sorting, filtering, grouping and summary calculation, completely by yourself.
</p>
<p>
In this mode, you handle data operations in corresponding Action methods; the correspondence is defined by populating the grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_CustomBindingRouteValuesCollectiontopic">CustomBindingRouteValuesCollection</helplink>.
</p>
<p>
In each specified Action, the processed operation related state information, such as a column state (i.e., which column is sorted and in which direction) or a pager state (which page is selected), is passed automatically. The grid's current state (view model) can be obtained via the static <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_GetViewModeltopic">GridViewExtension.GetViewModel</helplink> method and can be updated with the processed operation state. Then, the required data should be provided for the grid view model via a call to its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewModel_ProcessCustomBindingtopic">ProcessCustomBinding</helplink> method.
</p>
<p>
The <b>ProcessCustomBinding</b> method has several overloads. You can select a particular one depending on which data operations you need to handle.
</p>
<p>
Generally, this method provides the following parameters representing typed method delegates:
</p>
<p>
getDataRowCountMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataRowCountHandlertopic">GridViewCustomBindingGetDataRowCountHandler</helplink> type<br/>
Provide implementation for this method to return the total number of data rows.
</p>
<p>
getDataMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetDataHandlertopic">GridViewCustomBindingGetDataHandler</helplink> type<br/>
Provide implementation for this method to return the required data rows to the grid.
</p>
<p>
getSummaryValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetSummaryValuesHandlertopic">GridViewCustomBindingGetSummaryValuesHandler</helplink> type<br/>
Provide implementation for this method to calculate and return values of summaries required within the grid.
</p>
<p>
getGroupingInfoMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetGroupingInfoHandlertopic">GridViewCustomBindingGetGroupingInfoHandler</helplink> type<br/>
Provide implementation for this method to return data rows for visible and expanded groups in the required order that depends on the applied grouping and sorting.
</p>
<p>
getUniqueHeaderFilterValuesMethod of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewCustomBindingGetUniqueHeaderFilterValuesHandlertopic">GridViewCustomBindingGetUniqueHeaderFilterValuesHandler</helplink> type<br/>
Provide implementation for this method to return unique values to be displayed in the header filter popup list invoked for a column.
</p>
<p>
The resulting grid state (view model) is returned as a model to a view that contains GridView. To bind GridView to this view model, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewExtension_BindToCustomDatatopic">BindToCustomData</helplink> method.
</p>
<p>
This demo shows an advanced implementation of custom data binding - all data operations are processed (in particular: sorting, paging, grouping, summary calculations and filtering including column header filter invocation).
</p>
]]>
</Description>
<SourceFile>~/Models/GridViewCustomBindingModel.cs</SourceFile>
<SourceFile>~/Views/GridView/AdvancedCustomBindingPartial.cshtml</SourceFile>
<SourceFile>~/Views/GridView/PerformanceTestPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Sorting" Title="Sorting" SeoTitle="Sorting Against Multiple Columns">
<Description>
<![CDATA[
<p>
The DevExpress MVC Grid View allows you to sort data against an unlimited number of columns. The column's current sort order is indicated by a sort glyph displayed at the column header's rightmost edge.
</p><p>
Click the column's header to sort data against a given data column or change the column's sort order. To sort data against multiple columns, click column headers while holding the SHIFT key.
</p><p>
Set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSorttopic">SettingsBehavior.AllowSort</helplink> option to true to enable end-user sorting.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/SortingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Grouping" Title="Grouping" SeoTitle="Outlook Style Data Grouping">
<Description>
<![CDATA[
<p>
The DevExpress MVC Grid View provides numerous data shaping options – including the ability to group records against an unlimited number of columns.
</p><p>
Grouping is allowed if the following properties are set to true:
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowGrouptopic">SettingsBehavior.AllowGroup</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSorttopic">SettingsBehavior.AllowSort</helplink></li>
</ul><p>
End-users can group data by dragging column headers to the Group Panel. This panel's visibility is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowGroupPaneltopic">Settings.ShowGroupPanel</helplink> option.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/GroupingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="EditModes" Title="Edit Modes" SeoTitle="Edit Modes">
<Description>
<![CDATA[
<p>
This demo illustrates the Grid View's built-in data editing functionality.
</p>
<p>
To enable data editing operations, the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_KeyFieldNametopic">KeyFieldName</helplink> property must be specified. For each allowed data operation (such as inserting, updating or deleting), provide an associated controller action that will apply data changes to Model and return the grid's partial view. You can reference these controller actions by their names using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewEditingSettings_AddNewRowRouteValuestopic.aspx">SettingsEditing.AddNewRowRouteValues</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewEditingSettings_UpdateRowRouteValuestopic.aspx">SettingsEditing.UpdateRowRouteValues</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewEditingSettings_DeleteRowRouteValuestopic.aspx">SettingsEditing.DeleteRowRouteValues</helplink> properties. Note that in actions that handle update and insert operations, you can obtain the edited object using our specific DevExpressEditorsBinder model binder. In the actions handling delete operations, you can get the key value of the deleted row.
</p>
<p>
To allow end-users to manipulate grid data, add a command column to the grid's column collection and specify which commands (New, Edit, Delete, Update, Cancel) can be used by end-users. To switch a grid row to edit mode, end-users should be allowed to click the Edit command.
</p>
<p>
The following list highlights built-in edit modes available for the Grid View, from the simplest to the most sophisticated (use the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewEditingSettings_Modetopic.aspx">SettingsEditing.Mode</helplink> property to specify edit mode):
</p>
<ul>
<li>
<p><b>In-Cell Editing</b></p>
<p>When a row is switched to edit mode, its cells display appropriate editors.</p>
</li>
<li>
<p><b>Edit Form</b></p>
<p>When a row is switched to edit mode, an edit form appears under or instead of the edited row.</p>
<p>Edit Form displays label-editor pairs that correspond to data columns, and the Update/Cancel commands that allow end-users to save or discard the changes made. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewDataColumn_EditFormSettingstopic">EditFormSettings</helplink> property of data columns contains different settings to arrange label-editor pairs. This provides you with a flexible data editor arrangement mechanism. The default layout of the Edit Form is generated automatically.</p>
</li>
<li>
<p><b>Popup Edit Form</b></p>
<p>When a row is switched to edit mode, Edit Form is displayed as a popup window, which can be dragged and used in modal mode, if required.</p>
</li>
</ul>
<p>
By default, if the data entered and submitted by an end-user is invalid due to the Model validation rules, error texts are automatically displayed next to corresponding data field editors within the Grid View. This behavior is controlled by the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewEditingSettings_ShowModelErrorsForEditorstopic.aspx">SettingsEditing.ShowModelErrorsForEditors</helplink> property.
In addition, if Model data is invalid or an error occurs during data changes, you can use the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_SetEditErrorTexttopic.aspx">SetEditErrorText</helplink> method to display a common error text in a special row at the bottom of the grid's edit form.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/EditModesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="EditFormTemplate" Title="Edit Form Template" SeoTitle="Edit Form Template">
<Description>
<![CDATA[
<p>
Grid View allows you to provide a custom edit mode layout by creating an appropriate template for particular edited row cells or an entire Edit Form.
</p>
<p>
This demo describes how a template for the grid's Edit Form can be defined using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetEditFormTemplateContenttopic.aspx">SetEditFormTemplateContent</helplink> method. Within a template, custom label-editor pairs and Update/Cancel buttons are explicitly created using helpers from DevExpress Data Editors Extensions (such as the Label, TextBox, ComboBox, SpinEdit, Button, etc.).
</p>
<p>
Editors used within a template are customized in the following simple manner: they are bound to corresponding model data fields (via the <b>Bind</b> method), are named according to these fields (via the <b>Name</b> property), and their ability to automatically visualize model errors when validation fails is enabled (via the <b>ShowModelErrors</b> property).
</p>
<p>
Editors bind to values of the model's currently edited data object. Note that this object is passed into a template either automatically (as a template container's <b>DataItem</b> property - when a grid row is just switched to edit mode) or manually (as a ViewData data object passed from a controller - when data modifications cannot be accomplished due to input validation fail and it is required to return the edited data object back to the view's Edit Form without losing user changes). To correctly transfer values from DevExpress editors back to corresponding data model fields, the DevExpressEditorsBinder model binder is used within controller actions.
</p>
<p>
Buttons that represent the Update and Cancel links are customized so that their <b>Text</b> properties are defined ("Update" and "Cancel" texts) and the <b>Click</b> client events are handled to call the grid's respective client methods - <b>UpdateEdit</b> and <b>CancelEdit</b>.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/EditFormTemplatePartial.cshtml</SourceFile>
</Demo>
<Demo Key="ExternalEditForm" Title="External Edit Form" SeoTitle="Data Editing">
<Description>
<![CDATA[
<p>
This demo illustrates data editing options available to you when using the DevExpress MVC Grid View.
</p><p>
The MVC Grid View can include a column with links that execute Delete, Insert and Edit operations. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcMVCxGridViewColumn_SetDataItemTemplateContenttopic">SetDataItemTemplateContent</helplink> method is used to assign a specific template to the column. Editing data is performed within a specially designed page. This page contains the appropriate DevExpress editors for each Grid View column. Note that this demo also illustrates how model validation can be used together with DevExpress MVC Editors. The data model is decorated with custom validation attributes and both server-side and client-side validation code is added - allowing error messages to be automatically displayed in the browser near editors when client-side validation fails.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcGridViewSettings_ClientLayouttopic">ClientLayout</helplink> method delegate is used to maintain the Grid View's state as a user navigates between the grid and the data edit page.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/ExternalEditFormPartial.cshtml</SourceFile>
<SourceFile>~/Views/GridView/EditingForm.cshtml</SourceFile>
</Demo>
<Demo Key="Filtering" Title="Filtering" SeoTitle="Excel Style Data Filtering">
<Description>
<![CDATA[
<p>
The DevExpress MVC Grid View allows end-users to filter data with ease and simplicity. When filtering is enabled, grid column headers display filter buttons. Pressing the button invokes a filter dropdown, which lists unique values within the column. To execute a filter, end-users need only to select a value within the dropdown.
</p>
<p>
By default, filtering is disabled. To enable the MVC Grid's filter buttons, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowHeaderFilterButtontopic.aspx">Settings.ShowHeaderFilterButton</helplink> property to true.
</p>
<p>
Two list modes are available for filter dropdowns - List and CheckedList. A particular filter mode can be specified for individual columns via a column's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewDataColumnSettings_HeaderFilterModetopic.aspx">Settings.HeaderFilterMode</helplink> property. If this property is set to CheckedList for a column, the column's header filter dropdown contains a check box list, allowing end-users to select multiple items to be included in the filter criteria.
</p>
<p>
In addition to default filtering, the MVC Grid allows you to create custom filter values, define the desired filter, and display these values within the column's filter dropdown (via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_HeaderFilterFillItemstopic.aspx">HeaderFilterFillItems</helplink> method delegate). In this demo, custom filter values are displayed within the 'Total' and 'Quantity' column filter dropdowns.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/FilteringPartial.cshtml</SourceFile>
</Demo>
<Demo Key="FilterRow" Title="Filter Row" SeoTitle="Filter Row">
<Description>
<![CDATA[
<p>
In addition to filters executed via the column header, the DevExpress MVC Grid View allows you to enable filtering via its “Filter Row” UI element. When active, the Filter Row allows end-users to filter grid data by entering text within its cells or by selecting values from its dropdown lists.
</p><p>
To display the Filter Row within the Grid View, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterRowtopic.aspx">Settings.ShowFilterRow</helplink> property to <b>true</b>.
</p><p>
In this demo, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterRowMenutopic.aspx">Settings.ShowFilterRowMenu</helplink> property is also enabled so that end-users can specify filter conditions via a menu. This menu can be invoked by clicking the Filter Row button displayed within Filter Row cells.
</p><p>
Once a filter has been applied, it can be cleared by pressing the Clear button within the Filter Row. Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewCommandColumnButton_Visibletopic.aspx">ClearFilterButton.Visible</helplink> property to activate this feature.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/FilterRowPartial.cshtml</SourceFile>
</Demo>
<Demo Key="FilterBuilder" Title="Filter Builder" SeoTitle="Built-in Filter Builder">
<Description>
<![CDATA[
<p>
The DevExpress MVC Grid View implements the built-in Filter Builder. You can use it to allow end-users to visually build complex filter criteria with an unlimited number of filter conditions, combined by logical operators.
</p>
<p>
End-users can open the Filter Builder popup window by clicking the image or filter expression link within a specific Filter Bar that can be displayed at the grid bottom. By default, the Filter Bar isn't displayed. You can use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterBartopic.aspx">Settings.ShowFilterBar</helplink> property to control its display mode (Hidden, Visible, Auto).
</p>
<p>
The Filter Bar displays the following elements:
</p>
<ul>
<li><b>Filter Check Box</b> - Enables or temporarily disables the current filter.</li>
<li><b>Filter Image</b> - Click this image to invoke the Filter Builder.</li>
<li><b>Filter Expression Link</b> - A string representation of the currently applied filter criteria. A click on this link invokes the Filter Builder.</li>
<li><b>Clear Command</b> - Clears the current filter.</li>
</ul>
<p>
When the Filter Builder popup window is invoked, end-users are allowed to create and customize filter criteria as follows.
</p>
<ul>
<li>
<b>Add/Remove Conditions</b><br/>
To create and customize filter criteria, use the Add and Remove buttons.
</li>
<li>
<b>Change a Column in a Filter Condition</b><br/>
To change a condition's column, invoke the column list and choose the required column.
</li>
<li>
<b>Change an Operator in a Filter Condition</b><br/>
To change a condition's operator, invoke the operator list and choose the required operator.
</li>
<li>
<b>Edit a Condition's Value</b><br/>
To edit a condition's value, click the operand value and type text. To discard changes to the value and close the active edit box, press ESC.
</li>
</ul>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/FilterBuilderPartial.cshtml</SourceFile>
</Demo>
<Demo Key="FocusedRow" Title="Focused Row" SeoTitle="Focused Row">
<Description>
<![CDATA[
<p>
This demo dynamically displays detailed information for the selected row outside the MVC Grid View. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_FocusedRowChangedtopic">FocusedRowChanged</helplink> client event is handled via the <b>OnGridFocusedRowChanged()</b> JavaScript function. This function queries the server by using the Grid View's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetRowValuestopic.aspx">GetRowValues</helplink> client method, to return the current employee's ID and Notes. The returned array is passed to the <b>OnGetRowValues()</b> JavaScript function, that assigns the obtained values to corresponding controls (DevExpress Image and Memo Editors).
</p><p>
To enable the capabilities of Focused Row, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowFocusedRowtopic.aspx">SettingsBehavior.AllowFocusedRow</helplink> property to true. Appearance of the Focused Row can be specified using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewStyles_FocusedRowtopic">Styles.FocusedRow</helplink> property.
</p><p>
End-users can move row focus by clicking the desired row. To respond to a change in row selection, handle the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_FocusedRowChangedtopic">FocusedRowChanged</helplink> client event. To identify the currently focused row, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetFocusedRowIndextopic.aspx">GetFocusedRowIndex</helplink> client method.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/FocusedRowPartial.cshtml</SourceFile>
</Demo>
<Demo Key="RowSelection" Title="Row Selection" SeoTitle="Row Selection">
<Description>
<![CDATA[
<p>
This demo displays contact names selected in the Grid View within the 'Selected values' list box.
</p><p>
To allow row selection, add a command column to the Grid View and set its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_ShowSelectCheckboxtopic.aspx">ShowSelectCheckBox</helplink> property to <b>true</b>. The column will display check boxes within its cells. End-users can check or uncheck these check boxes to select or de-select corresponding data rows.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_SelectionChangedtopic">SelectionChanged</helplink> client-side event is handled to display selected contacts within the list box and the number of selected contacts below it. Contact names are obtained using the Grid View's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetSelectedFieldValuestopic">GetSelectedFieldValues</helplink> client method. The number of selected rows is returned by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetSelectedRowCounttopic.aspx">GetSelectedRowCount</helplink> client method.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/RowSelectionPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Paging" Title="Paging" SeoTitle="Paging">
<Description>
<![CDATA[
<p>
The GridView automatically splits large content across multiple pages and provides a built-in pager that enables end-users to navigate through data.
</p>
<p>
The pager can be customized using settings of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SettingsPagertopic.aspx">SettingsPager</helplink> property. This demo demonstrates the following settings:
</p>
<ul>
<li>The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_Positiontopic.aspx">Position</helplink> setting controls the pager's position within a grid. The available options are: at the element's top, bottom, or both.</li>
<li>The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPagerButtonProperties_Visibletopic.aspx">PageSizeItemSettings.Visible</helplink> setting controls page size item visibility. This element is used to specify a page size, i.e. the number of items placed on a page.</li>
<li>The <b>FirstPageButton.Visible</b> and <b>LastPageButton.Visible</b> settings control the first and last button's visibility. The buttons allows end-users to navigate to the first or the last page, respectively.</li>
</ul>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/PagingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="EndlessPaging" Title="Endless Paging" SeoTitle="Endless Paging" IsNew="true">
<Description>
<![CDATA[
<p>The MVC <b>GridView</b> extension supports an endless paging mode that allows for the loading of grid rows on demand. To enable this functionality, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_Modetopic">SettingsPager.Mode</helplink> property to <b>EndlessPaging</b>, and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollBarModetopic">Settings.VerticalScrollBarMode</helplink> property to <b>Visible</b> or <b>Auto</b>. In this mode, the grid loads more rows automatically when the end-user scrolls down to the bottom of extension content.</p>
<p>The loading panel is displayed while data is loading.</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/EndlessPagingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Preview" Title="Preview" SeoTitle="Outlook Style Row Preview">
<Description>
<![CDATA[
<p>
The DevExpress MVC Grid View gives you the ability to display detail information for a given row within its Preview Row region. These are non-editable rows that allow large memo fields or custom data to be displayed across all the columns within the Grid View.
</p><p>
Preview Rows are displayed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowPreviewtopic.aspx">Settings.ShowPreview</helplink> option is set to true. By default, Preview Rows are empty. Set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_PreviewFieldNametopic.aspx">PreviewFieldName</helplink> property to the required field in the data source to bind the preview rows with data. Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewStyles_PreviewRowtopic.aspx">Styles.PreviewRow</helplink> property to access style settings used to paint preview rows.
</p><p>
To provide a template for rendering preview rows, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetPreviewRowTemplateContenttopic.aspx">SetPreviewTemplateContent</helplink> method.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/PreviewPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Scrolling" Title="Scrolling" SeoTitle="Scrolling">
<Description>
<![CDATA[
<p>
The MVC Grid View offers both vertical and horizontal scrolling. By default, the grid's height is determined by the number of rows displayed within a page and is controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_PageSizetopic.aspx">SettingsPager.PageSize</helplink> property. To reduce the grid's height, you can display a vertical scrollbar by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollBarModetopic.aspx">Settings.VerticalScrollBarMode</helplink> property, and specify the height of the scrollable area (in pixels) via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollableHeighttopic.aspx">Settings.VerticalScrollableHeight</helplink> property.
</p>
<p>
The grid's width is dependent upon the number of visible columns by default. If there are too many columns within the grid, you can enable horizontal scrolling via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_HorizontalScrollBarModetopic.aspx">Settings. HorizontalScrollBarMode</helplink> property and define the desired scrollable area width by using the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Widthtopic.aspx">Width</helplink> property. </p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/ScrollingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Summary" Title="Data Summaries Via Aggregate Functions" SeoTitle="Automatic Summary Calculation">
<Description>
<![CDATA[
<p>
Total summaries are aggregate function values calculated across all rows within the DevExpress MVC Grid View and displayed within its footer. The footer is visible if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFootertopic.aspx">Settings.ShowFooter</helplink> property is set to true.
</p><p>
The Grid View stores total summary items within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_TotalSummarytopic.aspx">TotalSummary</helplink> collection. Individual items are represented by <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxSummaryItemtopic">ASPxSummaryItem</helplink> objects.
</p><p>
A group summary represents the value of an aggregate function calculated across all data rows within a group. Group summaries are displayed within group rows. The Grid View stores its group summaries within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_GroupSummarytopic.aspx">GroupSummary</helplink> collection. Individual items are represented by <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxSummaryItemtopic">ASPxSummaryItem</helplink> objects.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/SummaryPartial.cshtml</SourceFile>
</Demo>
<Demo Key="MasterDetail" Title="Master-Detail" SeoTitle="Master-Detail Relationship">
<Description>
<![CDATA[
<p>
The MVC Grid View supports master-detail data presentation of any complexity.
</p>
<p>
This demo shows how to create a simple master-detail relationship between two tables. All you have to do is to:
</p>
<ul>
<li>
Use two Grid View extensions.
</li>
<li>
Bind the first grid (master grid) to the master data source and enable the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_ShowDetailRowtopic.aspx">SettingsDetail.ShowDetailRow</helplink> option.
</li>
<li>
Place the second grid (detail grid) into the master grid's detail row template created via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetDetailRowTemplateContenttopic.aspx>SetDetailRowTemplateContent</helplink> method.
</li>
<li>
Assign a unique (dynamically generated) name to the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink> property of the detail grid and set its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewDetailSettings_MasterGridNametopic.aspx">SettingsDetail.MasterGridName</helplink> property to the master grid's name.
</li>
<li>
Bind the detail grid to the detail data source whose data is retrieved in a controller action based upon the corresponding master row ID passed via a ViewData parameter.
</li>
</ul>
<p>
By default, end-users can expand several master rows simultaneously.
This behavior is controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_AllowOnlyOneMasterRowExpandedtopic.aspx">SettingsDetail.AllowOnlyOneMasterRowExpanded</helplink> option.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/MasterDetailDetailPartial.cshtml</SourceFile>
<SourceFile>~/Views/GridView/MasterDetailMasterPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Bands" Title="Multi-Row Headers (Bands)" SeoTitle="Multi-Row Headers (Bands)">
<Keywords>multi-column, multi-column headers, multu-column bands, bands</Keywords>
<Description>
<![CDATA[
<p>
The GridView's multi-row headers feature allows you to organize grid columns in logical groups (bands). This demo illustrates basic band functionality.
</p>
<p>
A band is visually represented by a header displayed above headers of the columns it combines. Each band is realized as a specific column type - <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebMvcMVCxGridViewBandColumntopic">MVCxGridViewBandColumn</helplink>. A band column is a different kind of column - it is designed not to display data values directly, but to contain other (child) columns within its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewBandColumn_Columnstopic.aspx">Columns</helplink> collection. Therefore, it is possible to have a hierarchy of nested bands. Moreover, you can place a data column and a band column at the same hierarchy level. To add a data column use a column collection's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewColumnCollection_Addtopic.aspx">Add</helplink> method to add a band column - the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxGridViewColumnCollection_AddBandtopic.aspx">AddBand</helplink> method.
</p>
<p>
Bands are not only used for display purposes. They can be dragged by end-users to re-order columns. This is extremely useful if you need to provide a quick way to re-arrange columns while preserving their logical grouping. Note that columns (and bands) are only allowed to move within their parent bands - you cannot move a child column from one parent band to another. This prevents end-users from breaking column grouping logic.
</p>
<p>
Resizing and column freezing features also work fine with bands. The only note is that column freezing (controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewGridViewColumn_FixedStyletopic.aspx">FixedStyle</helplink> property) can be applied only to columns and bands located at the root hierarchy level (i.e. within the grid's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_Columnstopic.aspx">Columns</helplink> collection).
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/BandsPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CustomizationWindow" Title="Customization Window" SeoTitle="Outlook Style Field Chooser">
<Description>
<![CDATA[
<p>
The <b>customization window</b> displays hidden column headers.
</p>
<ul>
<li>
To hide a grid column, drag its header to the customization window.
</li>
<li>
To make a column visible, drag its header from the customization window back to the Grid View's header panel.
</li>
</ul>
<p>
Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewASPxGridViewPopupControlSettings_CustomizationWindowtopic.aspx">SettingsPopup.CustomizationWindow</helplink> property to specify the customization window's availability and position.
</p>
<p>
The following self-explanatory client-side methods allow you to manage the customization window:
</p>
<ul>
<li>
ShowCustomizationWindow()
</li>
<li>
HideCustomizationWindow()
</li>
<li>
IsCustomizationWindowVisible()
</li>
</ul>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/CustomizationWindowPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates" SeoTitle="Templates">
<Description>
<![CDATA[
<p>
This demo describes ways to use Templates within the DevExpress Grid View – in particular, this sample uses Templates for the pager bar and individual data rows.
</p><p>
Templates are defined by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetPagerBarTemplateContenttopic.aspx">SetPagerBarTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewSettings_SetDataRowTemplateContenttopic.aspx">SetDataRowTemplateContent</helplink> methods, respectively. These methods contain a parameter that represents specific template container objects. Template children are represented by combinations of HTML elements and DevExpress Editors.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/TemplatesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Export" Title="Exporting Data" SeoTitle="Data Export to PDF, XLS, RTF">
<Description>
<![CDATA[
<p>
The MVC Grid View allows you to export its data with ease. Using specific static methods provided at the GridViewExtension class level, the GridView's data can be exported to a file or stream in the following formats:
</p><ul><li>
PDF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WritePdftopic.aspx">WritePdf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToPdftopic.aspx">ExportToPdf</helplink>)
</li><li>
XLS (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WriteXlstopic.aspx">WriteXls</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToXlstopic.aspx">ExportToXls</helplink>)
</li><li>
XLSX (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WriteXlsxtopic.aspx">WriteXlsx</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToXlsxtopic.aspx">ExportToXlsx</helplink>)
</li><li>
RTF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_WriteRtftopic.aspx">WriteRtf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcGridViewExtension_ExportToRtftopic.aspx">ExportToRtf</helplink>)
</li></ul><p>
This demo illustrates how data within the Grid View can be exported to different formats - based on the Grid View's current settings (defined in a single location - within the Controller). These settings are passed to a View containing the grid’s markup - 'View(partial)' and they are also used by export methods.
</p>]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/GridView/ExportPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="PivotGrid" Title="Pivot Grid" SeoTitle="ASP.NET MVC Pivot Grid">
<Demo Key="SampleReports" Title="Sample Reports" SeoTitle="Sample Reports">
<Description>
<![CDATA[
<p>
This demo includes a set of reports for analyzing business data. Use Radio buttons to switch between reports.
</p><ul><li>
<b>Customers</b> - in this report, MVC Pivot Grid summarizes orders made by customers during a specific time period. The volume of orders is given for each product bought by a customer by quarters.
</li><li>
<b>Products(Filtering)</b> - in this report, MVC Pivot Grid displays products bought by customers within a year. Use the Year and Quarter combo boxes to specify which period should be displayed.
</li><li>
<b>Top 2 Products</b> - in this report, MVC Pivot Grid lists the most two popular products for each customer (those that attract the biggest interest). Clicking the 'Product Name' field header reverses the current sort order and the control displays the least popular products for each customer.
</li><li>
<b>Top 10 Customers</b> - MVC Pivot Grid lists top 10 customers, who purchased the biggest number of items. Clicking the 'Customer' field header reverses the sort order and displays those customers who purchased the smallest number of items.
</li></ul>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/SampleReportsPartial.cshtml</SourceFile>
</Demo>
<Demo Key="SortBySummary" Title="Sort By Summary" SeoTitle="Sort By Summary">
<Description>
<![CDATA[
<p>
This demo illustrates the Sorting By Summary feature that allows you to sort column or row field values by summary values calculated against a specific data field. In this example, the values of the 'Sales Person' field are actually sorted by summary values calculated against another data field. You can select this data field via the combo box at the top of the pivot grid. Clicking the 'Sales Person' field will reverse the current sort order.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/SortBySummaryPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Groups" Title="Field Groups" SeoTitle="Field Groups">
<Description>
<![CDATA[
<p>
This demo shows the capability to group fields so that they are always kept together. For instance, if you drag a field from a group to another position, the entire group is moved.
</p><p>
End-users cannot break created groups. They can only expand and collapse groups at any level to show or hide data related to particular fields.
</p><p>
In this demo, fields located within the Row, Column and Data areas are joined into groups. You can drag them, expand and collapse individual fields.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/GroupsPartial.cshtml</SourceFile>
</Demo>
<Demo Key="FieldsCustomization" Title="Fields Customization" SeoTitle="Field Chooser Window">
<Description>
<![CDATA[
<p>
This example shows the Fields Customization Window. It allows you to temporarily hide specific fields and then restore them again when needed. You can show and hide the Fields Customization Window both on the server (using C# or VB code) and on the client (using JavaScript).
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/FieldsCustomizationPartial.cshtml</SourceFile>
</Demo>
<Demo Key="OLAP" Title="OLAP" SeoTitle="OLAP">
<Description>
<![CDATA[
<p>
It is likely that the most important MVC Pivot Grid functionality is OLAP support. MVC Pivot Grid supports both Microsoft Analysis Services 2000, 2005, 2008 and 2008 R2. It can use an ordinary server, http server or cube file as a datasource. The OLAP connection reduces the computing load on the web server by passing it to an OLAP server.
</p><p>
No model is required to establish an OLAP connection. All you need is to provide a connection string using the BindToOLAP method.
</p><p>
To connect to OLAP cubes, you should have Microsoft SQL Server 2005 Analysis Services 9.0 OLE DB Provider installed on your system. You can get the latest version of this provider here: <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=50b97994-8453-4998-8226-fa42ec403d17">http://www.microsoft.com/downloads/details.aspx?FamilyID=50b97994-8453-4998-8226-fa42ec403d17</a>.
</p>
]]>
</Description>
<SourceFile>~/Views/PivotGrid/OLAPPartial.cshtml</SourceFile>
</Demo>
<Demo Key="DrillDown" Title="Drill Down" SeoTitle="Drill Down">
<Description>
<![CDATA[
<p>
MVC Pivot Grid includes the drill-down capability that enables you to retrieve a list of records that were used to calculate a particular summary.
</p><p>
In this demo, click a summary cell to view the records from the control's underlying datasource associated with this cell. The obtained data is displayed by the GridView extension within a popup window.
</p>
]]>
</Description>
<SourceFile>~/Views/PivotGrid/DrillDownPivotGridPartial.cshtml</SourceFile>
<SourceFile>~/Views/PivotGrid/DrillDownGridViewPartial.cshtml</SourceFile>
</Demo>
<Demo Key="ChartsIntegration" Title="Charts Integration" SeoTitle="Charts Integration">
<Description>
<![CDATA[
<p>
The MVC Pivot Grid allows data it displays to be visualized using the Chart extension. The pivot grid provides currently visible data and acts as a datasource for the chart.
</p><p>
If you display data horizontally, the Chart extension uses row values as series and column values as arguments, or vice versa if you wish to visualize data vertically. In this demo, you can control this via the 'Generate Series from Columns' check box.
</p><p>
To specify whether Grand Totals are included in the chart, use the 'Show Column Grand Totals' and 'Show Row Grand Totals' check boxes.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/ChartsIntegrationPivotPartial.cshtml</SourceFile>
<SourceFile>~/Views/PivotGrid/ChartsIntegrationChartPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CompactLayout" Title="Compact Layout" SeoTitle="Compact Layout">
<Description>
<![CDATA[
<p>
By default, MVC Pivot Grid shows all rows in a hierarchical way, which is common for pivot tables (<b>Full Layout</b>). However, when there are a lot of fields in the Row Area, this kind of presentation may produce a cumbersome layout. To avoid this, the PivotGrid extension allows you to arrange row headers in a tree-like manner (<b>Compact Layout</b>), as shown in this demo.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/CompactLayoutPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates" SeoTitle="Templates">
<Description>
<![CDATA[
<p>
This demo shows a share of sales per product and per category. This report contains absolute and percent values, and their graphical representation.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/TemplatesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Export" Title="Export" SeoTitle="Data Export to PDF, XLS, HTML">
<Description>
<![CDATA[
<p>
MVC Pivot Grid allows you to export its content to the PDF, Excel, MHT, Plain Text and RTF formats. This demo shows how to export MVC Pivot Grid to a stream, providing a user an option to open the report or save it to a disk.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/PivotGrid/ExportPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Report" Title="Report" SeoTitle="ASP.NET MVC Report" IsUpdated="true">
<Demo Key="MasterDetailReport" Title="Master-Detail Report" SeoTitle="Master-Detail Report" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Report.png" HighlightedTitle="Report">
<Description>
<![CDATA[
<p>This demo illustrates the simplest way to create a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1466">master-detail report</helplink> in a single report class.</p><p>To do this, you can use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIDetailReportBandtopic">Detail Report</helplink> bands instead of employing the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRSubreporttopic">XRSubreport</helplink> controls.</p><p>The resulting report represents data from a <b>Northwind</b> database. It consists of three levels of information on products and their suppliers, with the product orders grouped by their prices.</p>
]]>
</Description>
<HighlightedDescription>The award-winning banded report designer and viewer for ASP.NET MVC. The XtraReports Suite is a no-compromise reporting platform and includes native integration with DevExpress components for an unequalled design-time experience and unmatched runtime flexibility.</HighlightedDescription>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="TableReport" Title="Table Report" SeoTitle="Table Report">
<Description>
<![CDATA[
<p>This demo illustrates a way of creating a simple tabular report using the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRTabletopic">XRTable</helplink> control that allows you to quickly add a table to a report and then easily maintain its rows along with their cells.</p><p>This example creates a report with details on customer orders. In this demo, you can enter an appropriate order ID to filter a report's data source according to a specified value.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/TableReportParametersPartial.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="ReportMerging" Title="Report Merging" SeoTitle="Report Merging">
<Description>
<![CDATA[
<p>This demo illustrates how different reports can be combined into one report. This may be useful, for instance, to print multiple documents as a single printer job, or to export many reports into a single PDF file.</p><p>Note that page orientation in the resulting document may be different for different pages, as well as the page size and other settings (e.g. watermarks, etc.) All this can be correctly previewed and exported with XtraReports.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="SideBySideReport" Title="Side-by-side Reports" SeoTitle="Side-by-side Reports">
<Description>
<![CDATA[
<p>XtraReports allows you to print multiple subreports <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5315">side-by-side</helplink> within one document. <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRSubreporttopic">Subreports</helplink> can be completely independent from each other, and can even be bound to their own datasource.</p><p>In this demo, a report is constructed by two identical subreports that are designed to show employee information. You can control which employee is to be shown on each report side, and this employee's name is passed to a subreport as a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument4812">parameter</helplink> to filter its data.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SideBySideReportParametersPartial.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="IListDataSourceReport" Title="IList DataSource" SeoTitle="Binding to IList DataSource">
<Description>
<![CDATA[
<p>This demo illustrates how to bind a report to <helplink href="http://msdn.microsoft.com/library/system.collections.ilist.aspx">IList</helplink> data created and populated at runtime.</p><p>XtraReports works with all the data objects supported by <b>Visual Studio .NET</b> - OleDb, SQL, etc. And also it's possible to bind a report to XML data or to any data object implementing the <b>IList</b> interface.</p><p>This example creates a simple <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5162">table report</helplink> containing information on different kinds of fish. This information is stored in a text file and loaded at runtime when a report is created. The application reads this file line by line and creates a collection used as a datasource for creating data bindings.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="VerticalAnchoringReport" Title="Vertical Anchoring" SeoTitle="Vertical Anchoring">
<Description>
<![CDATA[
<p>This demo illustrates how report controls can be vertically anchored to top, bottom, or both sides of a band, which contains these controls. Use the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRControl_AnchorVerticaltopic">XRControl.AnchorVertical</helplink> property to accomplish this task.</p><p>In this demo, you can see two columns. The right column displays a car description, which is different for each car, and the left column contains a car image, which is anchored to top and bottom band sides. This allows its background to fill all empty space between top and bottom labels.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="ChartReport" Title="Chart" SeoTitle="Report with Charts">
<Description>
<![CDATA[
<p>This demo illustrates how to use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCharttopic">XRChart</helplink> control in XtraReports. In this report, every detail band contains a Bar chart, which shows <b>Products</b> for a specific <b>Category</b>. To create such report, a master-detail datasource is assigned to a report, and a chart's <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRChart_DataMembertopic">DataMember</helplink> property is set to the <b>Categories.CategoriesProducts</b> ADO.NET relation.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="XRPivotGridReport" Title="Pivot Grid" SeoTitle="Pivot Grid">
<Description>
<![CDATA[
<p>This demo shows how to create a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5314">cross-tab report</helplink>. To accomplish this, use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRPivotGridtopic">XRPivotGrid</helplink> control (which can be added to any <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument2590">report band</helplink>) and then bind it to a report's (or its own) datasource to display data in a matrix form.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="PivotGridAndChartReport" Title="Pivot Grid and Chart" SeoTitle="Report with Pivot Grid and Chart">
<Description>
<![CDATA[
<p>This demo illustrates how you can use a linked pair of the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRPivotGridtopic">XRPivotGrid</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCharttopic">XRChart</helplink> controls in your report. In this demo, a Pivot Grid instance is assigned to a Chart's <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRChart_DataSourcetopic">DataSource</helplink> property, and the options of this bridging are adjusted for best performance. In this demo, you can adjust some of these options in the <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument9623">Parameters</helplink> panel.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="FormattingRulesReport" Title="Conditional Formatting" SeoTitle="Conditional Formatting">
<Description>
<![CDATA[
<p>This demo illustrates the use of <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5167">conditional formatting</helplink> in XtraReports.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/FormattingRulesReportParametersPartial.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="FallCatalogReport" Title="Fall Catalog" SeoTitle="Fall Catalog" IsUpdated="true">
<Description>
<![CDATA[
<p>This demo illustrates how to create complex real-life reports with XtraReports. It introduces such basic XtraReports features as <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1298">data grouping</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument7789">sorting groups by summary</helplink>. This example represents the <b>Fall Catalog</b> report, which simulates the <b>Northwind Traders</b> reporting system.</p><p>In this demo, you can modify the <b>Sort Categories By</b> and <b>Sort Order</b> parameters and click <b>Submit</b> to see how these settings affect the demo report.</p>
]]>
</Description>
<SourceFile>~/Views/Report/SampleViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/FallCatalogReportParametersPartial.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
<Demo Key="ThumbnailsReport" Title="Thumbnails" SeoTitle="Thumbnails">
<Description><![CDATA[ <p>This demo illustrates how to create an alternative <b>Bookmarks List</b> for a web report.</p><p>In this example, every detail record is associated with an employee photo, and all photos are visible on the right panel.</p><p>You're able to click on any photo in the list, and a report viewer will automatically navigate to the appropriate employee's detail information.</p>]]></Description>
<SourceFile>~/Views/Report/ThumbnailsViewer.cshtml</SourceFile>
<SourceFile>~/Views/Report/SampleViewerPartial.cshtml</SourceFile>
<SourceFile>~/Models/Reports.cs</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Chart" Title="Chart" SeoTitle="ASP.NET MVC Chart">
<Demo Key="BarViews" Title="Bar/Column Views" SeoTitle="Bar/Column Views" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Chart.png" HighlightedTitle="Chart">
<Description>
<![CDATA[
<p>Bar/column series views are intended to display data points as vertical bars (or columns) that are grouped by category. In this case, category labels are displayed on the X-axis, while values are represented by the length of the bars as measured by the Y-axis.</p>
<p>DevExpress MVC Chart supports a wide range of bar chart types (including side-by-side, stacked, full-stacked, etc.), both in 2D and 3D. You can see all of them in this demo by choosing the required view using the <b>View Type</b> combo-box.</p>
<p>Other options include:</p>
<ul>
<li><b>Show Labels</b>. Indicates whether series labels should be visible on a chart.</li>
<li><b>Rotated Diagram</b>. When unchecked, data points are represented as columns. Setting this option to true will rotate a diagram, so that data points are represented as horizontal bars.</li>
</ul>
]]>
</Description>
<HighlightedDescription>Visualize the information relevant to your end-users via dozens of high-fidelity 2D and 3D chart types. The DevExpress Charts for ASP.NET MVC can be used in a nearly endless number of business scenarios, be it real-time charting or analysis of pivot grid data.</HighlightedDescription>
<SourceFile>~/Views/Chart/BarViewsPartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/BarViewsSideBySideStackedPartial.cshtml</SourceFile>
<SourceFile>~/Models/GreatLakesStateProduct.cs</SourceFile>
<SourceFile>~/Models/PopulationAgeStructure.cs</SourceFile>
</Demo>
<Demo Key="PointLineViews" Title="Point/Line Views" SeoTitle="Point/Line Views">
<Description>
<![CDATA[
<p>Point and line series views are used to show trends for several series on the same diagram, either as simple markers, or as markers connected by lines. These views include point, line, spline and other chart types, both in 2D and 3D. To see the entire list of available point/line views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>Also you can show or hide series labels by toggling the <b>Show Labels</b> checkbox in this demo's options.</p>
]]>
</Description>
<SourceFile>~/Views/Chart/PointLineViewsPartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/PointLineViewsBubblePartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/PointLineViewsFullStackedLinePartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/PointLineViewsScatterLinePartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/PointLineViewsStackedLinePartial.cshtml</SourceFile>
<SourceFile>~/Models/Movies.cs</SourceFile>
<SourceFile>~/Models/MathematicsFunctions.cs</SourceFile>
<SourceFile>~/Models/Architectures.cs</SourceFile>
<SourceFile>~/Models/GreatLakesStateProduct.cs</SourceFile>
<SourceFile>~/Models/CorporationsMarketValue.cs</SourceFile>
</Demo>
<Demo Key="AreaViews" Title="Area Views" SeoTitle="Area Views">
<Description>
<![CDATA[
<p>Area series views are intended to show filled areas on a diagram. In these series, values are represented by heights of peaks and hollows in each data point. Values can be used either separately (simple areas) or in an aggregated manner (stacked and full-stacked areas). To see the entire list of available area views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>Also you can show or hide series labels by toggling the <b>Show Labels</b> checkbox in this demo's options.</p>
]]>
</Description>
<SourceFile>~/Views/Chart/AreaViewsPartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/AreaViewsStackedPartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/AreaViewsFullStackedPartial.cshtml</SourceFile>
<SourceFile>~/Models/Architectures.cs</SourceFile>
<SourceFile>~/Models/CorporationsMarketValue.cs</SourceFile>
</Demo>
<Demo Key="PieDoughnutViews" Title="Pie/Doughnut Views" SeoTitle="Pie/Doughnut Views">
<Description>
<![CDATA[
<p>Pie and doughnut series views are intended to compare the percentage values of different point arguments in the same series. These charts may be useful to determine the most significant point value in the series, as well as the least significant. To see the entire list of available pie/doughnut views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>In this demo's options you can choose whether or not it is necessary to show series labels (<b>Show Labels</b>), whether they display absolute values or percents (<b>Values As Percent</b>) and adjust their position (<b>Label Position</b>).</p>
<p>Also, you can select what pie slices should be expanded. For this, use the <b>Exploded Points</b> option.</p>
]]>
</Description>
<SourceFile>~/Models/Countries.cs</SourceFile>
</Demo>
<Demo Key="FunnelViews" Title="Funnel Views" SeoTitle="Funnel Views">
<Description>
<![CDATA[
<p>Funnel series views are intended to compare the values of different point arguments in the same series. These charts may be useful to determine the most significant point value in the series, as well as the least significant. To see the entire list of available funnel views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>Also, in this demo's options you can chose whether or not it is necessary to show series labels (<b>Show Labels</b>), whether they display absolute values or percents (<b>Values As Percent</b>) and adjust their position (<b>Label Position</b>).</p>
]]>
</Description>
<SourceFile>~/Models/WebSiteVisitors.cs</SourceFile>
</Demo>
<Demo Key="RadarPolarViews" Title="Radar/Polar Views" SeoTitle="Radar/Polar Views">
<Description>
<![CDATA[
<p>Radar series views (also called as Spider or Star charts) and Polar series views are intended to display data as a circular graph. The Radar view is drawn on a circular grid and has multiple axes along which data can be plotted. The Polar view is similar to the Radar view, but displays values on the basis of angles (from 0 to 360 degrees).</p>
<p>There can be different kinds of Polar and Radar views - Point, Line and Area. To see the entire list of available radar and polar views or to switch your current view to another, please use the View Type combo-box on the top of this demo.</p>
<p>Other options include:</p>
<ul>
<li><b>Diagram Type.</b> Specifies whether a diagram should have a circular or a polygon shape.</li>
<li><b>Show Labels.</b> Indicates whether or not series labels should be visible on a chart.</li>
<li><b>Marker Kind.</b> Specifies the shape of data point markers.</li>
<li><b>Marker Size.</b> Specifies the size of data point markers.</li>
</ul>
]]>
</Description>
<SourceFile>~/Views/Chart/RadarPolarViewsRadarPartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/RadarPolarViewsPolarPartial.cshtml</SourceFile>
<SourceFile>~/Models/Weather.cs</SourceFile>
<SourceFile>~/Models/MathematicsFunctions.cs</SourceFile>
</Demo>
<Demo Key="RangeViews" Title="Range Views" SeoTitle="Range Views">
<Description>
<![CDATA[
<p>Range series views are intended to visualize data points that have two values - minimum and maximum. These views can represent data either as bars or as a filled area. To see the entire list of available range views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
]]>
</Description>
<SourceFile>~/Models/OilPrices.cs</SourceFile>
</Demo>
<Demo Key="GanttViews" Title="Gantt Views" SeoTitle="Gantt Views">
<Description>
<![CDATA[
<p>Gantt series views are intended to track different activities during a time frame. These charts are similar to Range Bar charts, yet always display the horizontal bars along the time axis. Gantt charts also provide support for displaying task links (arrowed lines) to indicate the workflow of a task represented on a chart.</p>
<p>Gantt charts can be either side-by-side or overlapped. To switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>In addition, this demo demonstrates how to make a Gantt chart interactive. For example, you can try to drag & drop the <b>Progress Line</b> to change its current position and to modify the state of the <b>Completed</b> bar series.</p>
<p>Note: This interactivity is implemented using client-side events. To be able use these events on a client side, set the <b>ChartControlSettings.EnableClientSideAPI</b> property to <b>True.</b></p>
]]>
</Description>
<SourceFile>~/Views/Chart/GanttViewsPartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/GanttViewsSideBySidePartial.cshtml</SourceFile>
<SourceFile>~/Models/Projects.cs</SourceFile>
</Demo>
<Demo Key="FinancialViews" Title="Financial Views" SeoTitle="Financial Views">
<Description>
<![CDATA[
<p>Stock and Candle-Stick series views (a.k.a. Low-High-Open-Close series) are often used in financial charts. These charts show variations in stock prices over the course of a day and are very useful in analyzing stock prices, bond prices and commodities behavior.</p>
<p>To see the entire list of available financial series views or to switch your current view to another, please use the <b>View Type</b> combo-box on the top of this demo.</p>
<p>Other options include:</p>
<ul>
<li><b>Show Labels.</b> Indicates whether or not series labels should be visible on a chart.</li>
<li><b>Reduction Level.</b> Specifies a price value that is taken into account when analyzing the price action to ascertain whether or not a price reduction has taken place.</li>
<li><b>Label Level.</b> Specifies which value should be shown in point labels.</li>
<li><b>Show Only Work Days.</b> Indicates whether or not it is necessary to exclude holidays and weekends from the X-axis scale.</li></ul>
]]>
</Description>
<SourceFile>~/Models/Dell.cs</SourceFile>
</Demo>
<Demo Key="SeriesBinding" Title="Binding Individual Series" SeoTitle="Binding Individual Series">
<Description>
<![CDATA[
<p>DevExpress MVC Chart allows its series to be bound to data in two ways:</p>
<ul><li>All <b>Series</b> objects are manually added to the <b>ChartControlSettings.Series</b> collection, and each series is independently bound to appropriate data members from a chart's datasource.</li>
<li>All <b>Series</b> objects are generated dynamically from a chart's data source based on template settings specified via the <b>ChartControlSettings.SeriesTemplate</b> property.</li></ul>
<p>This demo illustrates how to use the <u>first</u> approach when each series is bound to data.</p>
<p>In this demo you can choose the category that has the products that should be displayed on a chart (via the <b>Filter By Category</b> option), as well as specify sorting rules (<b>Sort By</b> and <b>Sort Order</b> options). In addition, you can toggle the visibility of series labels via the <b>Show Labels</b> option.</p>
<p>Note that at the top-left of the chart there is information about the selected category, its minimum, maximum and average prices, dynamically updated every time you choose another category. This is implemented using the <b>BoundDataChanged</b> event that is raised after a new filter is applied.</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
</Demo>
<Demo Key="SeriesTemplateBinding" Title="Using Series Template" SeoTitle="Using Series Template">
<Description>
<![CDATA[
<p>DevExpress MVC Chart allows its series to be bound to data in two ways:</p>
<ul><li>All <b>Series</b> objects are manually added to the <b>ChartControlSettings.Series</b> collection, and each series is independently bound to appropriate data members from a chart's datasource.</li>
<li>All <b>Series</b> objects are generated dynamically from a chart's data source based on template settings specified via the <b>ChartControlSettings.SeriesTemplate</b> property.</li></ul>
<p>This demo illustrates how to use the <u>second</u> approach, when all series are auto-generated from a datasource according to a specified series template.</p>
<p>In this demo, you can use the <b>Series Data Member</b> drop-down list to select a data field whose values are used to generate and populate series. If the "Year" field is selected, the chart shows GSP per Region for each Year. Otherwise, if "Region" is selected, the chart shows GSP per Year for each Region.</p>
]]>
</Description>
<SourceFile>~/Models/GSP.cs</SourceFile>
</Demo>
<Demo Key="HitTesting" Title="Hit-testing" SeoTitle="Hit-testing">
<Description>
<![CDATA[
<p>This demo illustrates the interactive capabilities of the DevExpress MVC Chart extension, in particular, a capability to access any chart's element via hit-testing. </p>
<p>In this demo, after the mouse cursor crosses over a chart's element, the detailed information is shown over the chart. This information describes the highlighted object and shows its underlying data (if any). If there are multiple objects layered under a test point, their hierarchy is reflected.</p>
<p>Note: To enable this feature, the <b>ChartControlSettings.EnableClientSideAPI</b> must be set to <b>True</b>.</p>
]]>
</Description>
<SourceFile>~/Models/Weather.cs</SourceFile>
</Demo>
<Demo Key="DrillDown" Title="Drill Down" SeoTitle="Drill Down">
<Description>
<![CDATA[
<p>This demo illustrates how to create a drill-down chart.</p>
<p>The main chart is <b>Pie</b>, whose series points display the minimum price for each category. Clicking on any pie slice invokes the <b>Bar</b> chart, which displays all product prices in the selected category.</p>
<p>In the detail chart you can click the <b>Back to the main view...</b> hyperlink and the initial <b>Pie</b> chart will be restored.
Note: the <b>ChartControlSettings.EnableClientSideAPI</b> must be set to <b>true</b> to enable this feature.</p>
]]>
</Description>
<SourceFile>~/Views/Chart/DrillDownPartial.cshtml</SourceFile>
<SourceFile>~/Views/Chart/DrillDownCategoryPartial.cshtml</SourceFile>
<SourceFile>~/Models/Northwind.cs</SourceFile>
</Demo>
<Demo Key="PrintingAndExporting" Title="Printing and Exporting" SeoTitle="Printing and Exporting">
<Description>
<![CDATA[
<p>This demo illustrates how to print and export MVC Chart on the client side. This is done by using the <b>Print</b>, <b>SaveToDisk</b> and <b>SaveToWindow</b> methods of the <b>MVCxClientChart</b>.</p>
<p>To explore this feature, you can click the corresponding buttons of the custom toolbar, which is shown at the top of the chart.</p>
]]>
</Description>
<SourceFile>~/Views/Chart/PrintingAndExportingPartial.cshtml</SourceFile>
<SourceFile>~/Models/MicrosoftAnnualRevenue.cs</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="HtmlEditor" Title="HTML Editor" SeoTitle="ASP.NET MVC HTML Editor">
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
The DevExpress HTML Editor is a rich-text WYSIWYG HTML editor extension for ASP.NET MVC. Its intuitive user interface enables even the least experienced users to edit HTML page content with ease. This demo describes some of the features available to you when using the MVC HTML Editor. HTML code entered into the HTML Editor's HTML View can be automatically validated and transformed into XHTML 1.0 Transitional compliant markup. The HTML Editor exposes several options, allowing you to control required transformations.
</p><p>
In this demo, the HTML Editor has been customized so you can modify its numerous settings and see results in real time.
</p><p>
Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowScriptstopic.aspx">AllowScripts</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowIFramestopic.aspx">AllowIFrames</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowFormElementstopic.aspx">AllowFormElements</helplink> properties to control whether predefined tags and attribute types - scripts, IFRAME and form elements - are allowed within the editor's HTML code.
</p><p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_UpdateDeprecatedElementstopic.aspx">UpdateDeprecatedElements</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_UpdateBoldItalictopic.aspx">UpdateBoldItalic</helplink> properties specify replacement of deprecated elements with valid analogs and converting <b>B</b> and <b>I</b> elements into the <b>STRONG</b> and <b>EM</b> elements, respectively.
</p><p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_EnterModetopic.aspx">EnterMode</helplink> property allows you to specify the editor's behavior when the ENTER key is pressed by an end-user - you can choose between a paragraph or line break rendering.
</p><p>
If Design View is active within the HTML Editor, a context menu can be displayed for end-users, which is controlled by the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowContextMenutopic.aspx">AllowContextMenu</helplink> property.
</p><p>
With the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowHtmlViewtopic.aspx">AllowHtmlView</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowPreviewtopic.aspx">AllowPreview</helplink> properties, the HTML Editor's functionality can be further customized for your end-users.
</p><p>
Note: The demos presented here illustrate the use of custom images (which are uploaded to the server via callbacks) and ways to process/save them on the server. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorImageUploadSettings_UploadImageFoldertopic.aspx">SettingsImageUpload.UploadImageFolder</helplink> property is set to a Controller variable, specifying the server folder used to store uploaded images, and the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxHtmlEditorImageUploadSettings_UploadCallbackRouteValuestopic.aspx">SettingsImageUpload.UploadCallbackRouteValues</helplink> property is used to reference the Controller's method that processes each uploaded image. This method calls the HTMLEditorExtension.SaveUploadedImage static method in order to validate the image and save it to the specified server folder.
</p>]]>
</Description>
<SourceFile>~/Views/HtmlEditor/FeaturesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CustomCss" Title="Custom CSS" SeoTitle="Custom CSS">
<Description>
<![CDATA[
<p>
The DevExpress MVC HTML Editor provides Custom CSS options that allow you to deliver custom formats as defined by custom CSS classes - exposed to end-users and applied to the content selected within the editor. By using the Custom CSS feature of the DevExpress MVC HTML Editor, logical elements (such as titles, headers, text blocks, etc) can be formatted using individual formatting styles, defined by names of the associated CSS class and HTML tag.
</p><p>
In this demo, custom styles are defined for content text elements such as article title, headers, the main content text and image titles. To apply any of the predefined styles to the text selected within the Design View, choose the desired style item within the "Apply CSS" bar item.
</p><p>
The standard toolbar's "Apply CSS" dropdown editor (ToolbarCustomCssEdit type) allows you to list available custom CSS styles and make them available to end-users.
</p>]]>
</Description>
<SourceFile>~/Views/HtmlEditor/CustomCssPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CustomDialogs" Title="Custom Dialogs" SeoTitle="Custom Dialogs">
<Description>
<![CDATA[
<p>This demo illustrates ways in which you can add custom dialogs to the DevExpress MVC HTML Editor. In addition to the built-in dialogs available within the Html Editor, you can use any number of custom dialogs, which can be easily added at both design and runtime. To add custom dialogs to the editor, use its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorSettings_CustomDialogstopic.aspx">CustomDialogs</helplink> collection. A custom dialog is represented by an <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebMvcMVCxHtmlEditorCustomDialogtopic">HtmlEditorCustomDialog</helplink> object, which provides the following settings:</p>
<ul>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_Captiontopic.aspx">Caption</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_Nametopic.aspx">Name</helplink>. Use these properties to specify the dialog’s caption and name.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxHtmlEditorCustomDialog_FormActiontopic.aspx">FormAction</helplink>. Use this property to provide a path to the user control representing a dialog's form. In this demo, the form contains a Grid View extension bound to the InsertTemplateData.xml file, which provides predefined content templates.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_OkButtonTexttopic.aspx">OkButtonText</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_OkButtonVisibletopic.aspx">OkButtonVisible</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_CancelButtonTexttopic.aspx">CancelButtonText</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_CancelButtonVisibletopic.aspx">CancelButtonVisible</helplink>. These options allow you to specify the visibility and caption of two standard dialog buttons. By default, these buttons are labeled "Ok" and "Cancel". You can customize default button captions as necessary. In this demo, the Ok button's caption is modified to reflect the dialog's functionality.</li>
</ul>
<p>You can associate a custom dialog with a toolbar item - which when clicked invokes the dialog. To accomplish this, add a <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarCustomDialogButtontopic">ToolbarCustomDialogButton</helplink> toolbar item to the HTML Editor, and assign the dialog's name to the toolbar item's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDialogButton_Nametopic.aspx">Name</helplink> property.</p>
<p>In this demo, you can click the Insert Template button to invoke the custom dialog. Within the dialog, select the desired template and click the Insert button (or simply double click the template) to insert it into the editor. You may de-activate the dialog's "Overwrite content" option in order to preserve current content when inserting templates.</p>
<p>The MVC HTML Editor offers events that allow you to respond to end-user actions within custom dialogs and dialog button clicks on the client side. Events include:</p>
<ul>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogOpenedtopic.aspx">CustomDialogOpened</helplink>. You can handle this event to initialize a custom dialog. In the demo, the <b>OnCustomDialogOpened</b> JavaScript function represents the <b>CustomDialogOpened</b> event handler. This function calls the <b>RestoreInsertTemplateFormDialogState</b> function to focus the recently selected template in the dialog and restore the checked state of the "Overwrite content" option.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogClosingtopic.aspx">CustomDialogClosing</helplink>. You can handle this event to respond to closing a custom dialog (initiated via a click on a dialog button or the header's close button). To identify a dialog and an element being clicked, use the event parameter's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorCustomDialogEventArgs_nametopic.aspx">name</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorCustomDialogCloseEventArgsBase_statustopic.aspx">status</helplink> properties. To prevent default processing when closing a dialog, assign true to the event parameter's handled property. In this demo, the <b>OnCustomDialogClosing</b> JavaScript function represents the <b>CustomDialogClosing</b> event handler. This function retrieves the selected template's text when the Insert dialog button is clicked (it's the Ok dialog button labeled "Insert"), and closes the dialog via a <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogCompletetopic.aspx">ASPxClientHtmlEditor.CustomDialogComplete</helplink> method call. Since the dialog is closed programmatically, the function prevents the default closing of the dialog. Note that you can also double click a template to select it, and close the dialog. This is accomplished by handling the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_RowDblClicktopic.aspx">RowDblClick</helplink> client event of the Grid View extension use within the dialog (see the <b>OnGridRowDblClick</b> function).</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogClosedtopic.aspx">CustomDialogClosed</helplink>. You can handle this event to perform specific actions based upon the dialog button that has been clicked or any other suitable condition. In this demo, the <b>OnCustomDialogClosed</b> JavaScript function represents the <b>CustomDialogClosed</b> event handler. This function inserts the selected template's text into the editor after pressing the dialog's Insert button or double-clicking the template. In addition, this function calls the <b>SaveInsertTemplateFormDialogState</b> function to store the dialog's selected template and the checked state of the "Overwrite content" option for future use.</li>
</ul>
]]>
</Description>
<SourceFile>~/Views/HtmlEditor/CustomDialogsPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CustomToolbarItems" Title="Custom Toolbar Items" SeoTitle="Custom Toolbar Items">
<Description>
<![CDATA[
<p>This demo illustrates how you can extend the MVC HTML Editor’s toolbar with custom items and implement item-specific functionality.</p>
<p>In addition to standard items available within built-in toolbars, the HTML Editor allows you to add custom items and provide specific functionality for them. The following custom item types are shipped with the MVC HTML Editor:</p>
<ul>
<li><b>Combo Box</b> (<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarComboBoxtopic">ToolbarComboBox</helplink> item). A combo box provides a standard dropdown list of individual items. In this demo, you can apply a specific font size to the currently selected content by picking an appropriate combo box item.</li>
<li><b>Dropdown Item Picker</b> (<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarDropDownItemPickertopic">ToolbarDropDownItemPicker</helplink> item). A dropdown item picker represents a button with a dropdown and contains a list of selectable items. To select an item, users can hover the mouse pointer over a button or click it to activate its dropdown list and then select an item within the list. In this demo, you can insert smilies within the editor via a dropdown item picker.</li>
<li><b>Dropdown Menu</b> (<helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxHtmlEditorToolbarDropDownMenutopic.aspx">ToolbarDropDownMenu</helplink> item). A dropdown menu item represents a button that displays a dropdown menu when clicked. In this demo, you can insert the current date and time into the editor by selecting the desired date/time format within the dropdown menu.</li>
</ul>
<p>To ensure ease of use, these item types provide a common API. Open the demo's Code page to see how you can populate dropdown lists with items and respond to item clicks.</p>
]]>
</Description>
<SourceFile>~/Views/HtmlEditor/CustomToolbarItemsPartial.cshtml</SourceFile>
</Demo>
<Demo Key="SpellChecking" Title="Spell Checking" SeoTitle="Spell Checking">
<Description>
<![CDATA[
<p>
This demo illustrates the spell checking capabilities of the DevExpress MVC HTML Editor. Spell checking is based upon the selected dictionary (ISpell and OpenOffice dictionaries are supported), culture and grammar. These settings can be defined via HTML Editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorSettings_SettingsSpellCheckertopic.aspx">SettingsSpellChecker</helplink> property.
</p><p>
To start spell checking, click the default 'Check Spelling' button.
</p>]]>
</Description>
<SourceFile>~/Views/HtmlEditor/SpellCheckingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Tables" Title="Tables" SeoTitle="Tables" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/HtmlEditor.png" HighlightedTitle="HTML Editor">
<Description>
<![CDATA[
<p>
This demo illustrates the MVC HTML Editor’s built-in support of HTML tables. The HTML Editor allows end-users to create, customize, and delete tables and associated elements by using a set of predefined commands. The commands associated with table editing are available as a separate toolbar (<b>TableToolbar</b>) or by using an individual toolbar button (<helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxHtmlEditorToolbarTableOperationsDropDownButtontopic.aspx">ToolbarTableOperationsDropDownButton</helplink>) with a dropdown list of individual commands. By default, the <b>ToolbarTableOperationsDropDownButton</b> toolbar type button belongs to a standard toolbar (<b>StandardToolbar1</b>).
</p><p>
In this demo, HTML table operation commands are represented within a manually created toolbar of the <b>TableToolbar</b> type. The necessary toolbar buttons are created using the toolbar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorToolbar_CreateDefaultItemstopic.aspx">CreateDefaultItems</helplink> method.
</p>]]>
</Description>
<HighlightedDescription>The HtmlEditor allows you to enable rich text editing on web sites. In addition to being a WYSIWYG editor, the HtmlEditor component supports HTML input. You don't have to choose which input method to use, because there's two-way synchronization between the visual editor and HTML code. End-users can switch to the code view and edit documents, by manually controlling every tag and attribute.</HighlightedDescription>
<SourceFile>~/Views/HtmlEditor/TablesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Validation" Title="Validation" SeoTitle="Validation">
<Description>
<![CDATA[
<p>This demo illustrates the content validation capabilities available to you within the DevExpress MVC HTML Editor. You can define Editor content validation logic - both on the client and server - via any of the following methods:</p>
<ul>
<li>Check if content is empty. Enable the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorHtmlEditorValidationSettings_RequiredFieldtopic.aspx">SettingsValidation.RequiredField</helplink> property to force the editor to require input and display a prompt message when validation fails.</li>
<li>Provide custom validation logic by handling the Editor’s <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_Validationtopic.aspx">Validation</helplink> client event or passing the delegate method as a parameter to the extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorExtension_GetHtmltopic.aspx">GetHtml</helplink> function, called within the <b>Validation</b> action. Open the Code tab within this demo to see how this is accomplished.</li>
</ul>
<p>You are free to combine these methods together to augment validation rules when required. Additional validation options can be specified via the Editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorSettings_SettingsValidationtopic.aspx">SettingsValidation</helplink> property. Among others, there are options for an error frame, which is displayed within the editor's Design View when the Editor fails validation. These options allow you to specify both error description and appearance settings. In addition, you can dynamically customize error descriptions within validation event handlers.</p>
]]>
</Description>
<SourceFile>~/Views/HtmlEditor/ValidationPartial.cshtml</SourceFile>
<SourceFile>~/Views/HtmlEditor/ValidationSuccess.cshtml</SourceFile>
</Demo>
<Demo Key="ImportExport" Title="Import/Export" SeoTitle="Data Import/Export from/to RTF, MHT, ODT, DOCX, PDF">
<Description>
<![CDATA[
<p>This demo illustrates how to import and export contents of the DevExpress MVC HTML Editor.</p>
<p>With the HTML Editor, you can import and export editor contents from/to various document formats, including:</p>
<ul>
<li>Rich Text (.rtf)</li>
<li>Office Open XML (.docx)</li>
<li>MIME HTML (.mht)</li>
<li>Open Document (.odt)</li>
<li>Plain Text (.txt)</li>
<li>Portable Document (.pdf). Available for export only.</li>
</ul>
<p>To import or export in code, call the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorExtension_Importtopic.aspx">HtmlEditorExtension.Import</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcHtmlEditorExtension_Exporttopic.aspx">HtmlEditorExtension.Export</helplink> static method. You can allow end-users to export editor contents via a specially designed toolbar item (<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarExportDropDownButtontopic">ToolbarExportDropDownButton</helplink>) that provides all the required functionality out of the box. All you have to do is add it to the editor's toolbar and customize output document formats available for end-users via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarExportDropDownButton_Itemstopic">Items</helplink> collection.
</p>
]]>
</Description>
<SourceFile>~/Views/HtmlEditor/ImportExportPartial.cshtml</SourceFile>
</Demo>
<Demo Key="ContextMenu" Title="Context Menu" SeoTitle="Context Menu">
<Description>
<![CDATA[
<p>An <b>HtmlEditor</b> context menu is a popup menu, displayed when an end-user right-clicks the content within the editor. You can select the context menu type that you wish to be displayed for end-users: a browser's context menu (for IE, Opera, etc.) that provides commands specific to this browser, or the editor's menu that provides common (Cut, Copy, Paste, Select All) and context-specific (Modify Table, Change Image, etc.) operations. It is also possible to disable the context menu.</p>
<p>By default, <b>HtmlEditor</b> provides a set of context menu items. You can customize the default items or add your custom items. Additionally a context menu content can be easily customizable at run time by changing an items' visibility. Visibility of default items is switched based on the currently selected element (text, image, table, etc.) automatically.</p>
<p>In this demo three custom context menu items are added to the default item collection. The custom item is shown provided that an image is selected.</p>
]]>
</Description>
<SourceFile>~/Views/HtmlEditor/ContextMenuPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Scheduler" Title="Scheduler" SeoTitle="ASP.NET MVC Scheduler">
<Demo Key="Grouping" Title="Grouping" SeoTitle="Grouping">
<Description>
<![CDATA[
<p>
The DevExpress MVC Scheduler allows you to group appointments by resources or dates. Date value or resource caption is displayed in the column heading.
</p><p>
To navigate through resources and change the number of visible resources, use the built-in Resource Navigator (buttons with arrows, plus and minus signs, and a drop-down list of resources), which is shown on the top of the scheduler.
</p><p>
Set the <b>SchedulerSettings.GroupType</b> option to <b>SchedulerGroupType.Resource</b> or to the <b>SchedulerGroupType.Date</b> value to enable grouping.
</p><p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/GroupingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="AppointmentsSelection" Title="Appointments Selection" SeoTitle="Appointments Selection">
<Description>
<![CDATA[
<p>
The DevExpress MVC Scheduler provides a client-side API that can be used to obtain information on the currently selected appointment.
</p><p>
The <b>SchedulerSettings.ClientSideEvents.AppointmentsSelectionChanged</b> property specifies a function that will handle the appointment selection. Within that function the client-side <b>ASPxClientScheduler.GetAppointmentProperties</b> method is used to obtain appointment property values.
</p><p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/AppointmentsSelectionPartial.cshtml</SourceFile>
</Demo>
<Demo Key="ICalendar" Title="iCalendar" SeoTitle="iCalendar">
<Description>
<![CDATA[
<p>
The DevExpress MVC Scheduler allows you to exchange scheduling data between your application and the most popular calendars. Appointments can be saved to .ics file and loaded from a stream containing data in iCalendar format.
</p><p>
The SchedulerExtension provides you with <b>ExportToICalendar</b> and <b>ImportFromICalendar</b> methods allowing you to save and load iCalendar data with ease.
</p><p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/ICalendarPartial.cshtml</SourceFile>
</Demo>
<Demo Key="TimeZones" Title="Time Zones" SeoTitle="Time Zones">
<Description>
<![CDATA[
<p>
The DevExpress MVC Scheduler allows you to specify a client time zone that is different from the time zone in which a server is located. This demo shows multiple time rulers in the Day View.
</p><p>
Each time ruler displays the time using a specific time zone.
</p>
<ul>
<li>
The first time ruler uses GMT (Greenwich Mean Time)
</li>
<li>The second time ruler uses server time
</li>
<li>
The third time ruler uses client time, which can be changed in the drop-down box at the top of the page
</li>
</ul>
<p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/TimeZonesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Editing" Title="Editing" SeoTitle="Editing">
<Description>
<![CDATA[
<p>
This demo illustrates appointment editing options available to you when using the DevExpress MVC Scheduler.
</p><p>
Double click an appointment to invoke a simple editor that allows editing appointment subject in inline mode. Right-click an appointment and select <b>Open</b> to invoke the standard appointment editing form. To create a new appointment, select time cells, right-click and select an appropriate menu item to display the appointment editing form.
</p><p>
Insert, update and delete operations for appointment are implemented in the <b>SchedulerDataHelper</b> class of the demo application. The implementation is dependent on the data model chosen and reflects its specifics.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/EditingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CustomForms" Title="Custom Forms" SeoTitle="Custom Forms">
<Description>
<![CDATA[
<p>
The DevExpress MVC Scheduler allows you to easily substitute default dialogs with custom forms tailored to suit your requirements. This demo illustrates how to invoke a custom appointment editing form and to display a custom inline editing form.
</p><p>
Double-click an appointment for inline editing form. Right-click an appointment and select <b>Open</b> to show a custom appointment editing form. Note that this form allows you to edit custom appointment properties obtained via custom mappings (Price and Contact Information).
</p><p>
The <b>SchedulerSettings.OptionsForms</b> property allows access to the MVCxSchedulerOptionsForms object which provides you with methods such as the <b>SetAppointmentFormTemplateContent</b> and the <b>SetAppointmentInplaceEditorFormTemplateContent</b>. You can implement partial views which represent custom forms, render and pass them to these methods.
</p>
]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/CustomFormsPartial.cshtml</SourceFile>
<SourceFile>~/Views/Scheduler/CustomAppointmentFormPartial.cshtml</SourceFile>
<SourceFile>~/Views/Scheduler/CustomInplaceEditorFormPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CustomWorkTime" Title="Custom Work Time" SeoTitle="Custom Work Time">
<Description>
<![CDATA[
<p>
This demo illustrates the DevExpress MVC Scheduler capability to specify custom work time intervals. To see this feature in action, toggle the Custom Work Time checkbox and observe that different days of week have different work time intervals indicated by color shading.
</p><p>
The technique utilizes the <b>SchedulerSettings.QueryWorkTime</b> event handler. It allows you to get information about the current resource and date for which the work time interval is requested and specify work time as required.
</p><p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/CustomWorkTimePartial.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates" SeoTitle="Templates">
<Description>
<![CDATA[
<p>
The DevExpress MVC Scheduler allows you to easily customize the appearance of visual elements by providing custom templates.
</p><p>
In this demo the <b>SetVerticalAppointmentTemplateContent</b> and the <b>SetHorizontalAppointmentTemplateContent</b> methods are used to specify custom appointment templates. The <b>SetHorizontalResourceHeaderTemplateContent</b> method enables you to include a picture in the resource header.
</p><p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/TemplatesPartial.cshtml</SourceFile>
<SourceFile>~/Views/Scheduler/TemplatesVerticalAppointmentPartial.cshtml</SourceFile>
<SourceFile>~/Views/Scheduler/TemplatesHorizontalAppointmentPartial.cshtml</SourceFile>
</Demo>
<Demo Key="ReportTemplates" Title="Report Templates" SeoTitle="Report Templates">
<Description>
<![CDATA[
<p>
This demo illustrates how to create reports which correspond to different Scheduler views by loading report templates. You can load a previously saved template and instantly preview a report filled with data retrieved from the current Scheduler control.
</p><p>
Click Show Preview button to invoke the ReportViewer control that allows you to navigate pages, print the report and export it to common formats.
</p><p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/ReportTemplatesPartial.cshtml</SourceFile>
<SourceFile>~/Views/Scheduler/ReportTemplatesPreviewPartial.cshtml</SourceFile>
<SourceFile>~/Views/Scheduler/ReportTemplatesViewerPartial.cshtml</SourceFile>
</Demo>
<Demo Key="DateNavigator" Title="Date Navigator" SeoTitle="Date Navigator">
<Description>
<![CDATA[
<p>
This demo illustrates how to use the MVCxDateNavigator control to select the visible date interval of the Scheduler. Days with appointments are shown in bold.
</p><p>
Click and drag within the Date Navigator to select an interval of dates. Note that the Scheduler changes its view for better display of the chosen interval. You can also select a discontinuous interval by holding the Ctrl key.
</p><p>
<i>Note:</i> The Scheduler is in read-only mode. You cannot modify appointments, delete them or create new appointments.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/DateNavigatorPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Reminders" Title="Reminders" SeoTitle="Reminders">
<Description>
<![CDATA[
<p>
The DevExpress MVC Scheduler allows you to easily set up a reminder for an appointment. Click "Create appointment with reminder" button to create an appointment with a reminder due in 5 minutes time. Then, a reminder alert window will be invoked to provide a notification about the event.
</p><p>
The appointment's <b>HasReminder</b> property is used to add a reminder to an appointment. The <b>Reminder</b> property provides accesss to the reminder and allows changing its characteristics.
</p>]]>
</Description>
<SourceFile>~/Models/Cars.cs</SourceFile>
<SourceFile>~/Views/Scheduler/RemindersPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="TreeList" Title="TreeList" SeoTitle="ASP.NET MVC TreeList">
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
<Description>
<![CDATA[
<p>This demo shows how to bind the TreeList to a <b>List</b> object. Since the TreeList is designed to display information in a tree structure, its data source should meet certain requirements. Two additional fields are necessary to build a tree structure.</p><p>The first field must contain unique values. This field must be assigned to the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_KeyFieldNametopic.aspx">KeyFieldName</helplink> property. The second field must contain values that indicate parent nodes for the current node. It should be assigned to the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_ParentFieldNametopic.aspx">ParentFieldName</helplink> property. Columns bound to these fields are called Service columns.</p><p>In this demo, toggle the '<b>Show service columns</b>' check box to display or hide service columns.</p>
]]>
</Description>
<SourceFile>~/Models/Departments.cs</SourceFile>
<SourceFile>~/Views/TreeList/DataBindingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="DataBindingToXML" Title="Data Binding To XML" SeoTitle="Data Binding To XML">
<Description>
<![CDATA[
<p>This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to populate the TreeList with node information taken from an XML file. The source XML file contains hierarchical information about a set of website pages.</p>
<p>The MVC TreeList can be bound to an XML file with the following data binding methods:</p>
<ul>
<li>BindToXML(string fileName);</li>
<li>BindToXML(string fileName, string xPath);</li>
<li>BindToXML(string fileName, string xPath, string transformFileName);</li>
</ul>
<p>In this demo, a column is added to the tree list. This column <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListDataColumn_FieldNametopic.aspx">FieldName</helplink> property value defines a name of the corresponding data source field.</p>
]]>
</Description>
<SourceFile>~/Views/TreeList/DataBindingToXMLPartial.cshtml</SourceFile>
</Demo>
<Demo Key="UnboundMode" Title="Unbound Mode" SeoTitle="Unbound Mode">
<Description>
<![CDATA[
<p>The TreeList supports the unbound mode. In this mode, you need to manually create a tree in code. The TreeList stores its nodes within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_Nodestopic.aspx">Nodes</helplink> collection. The tree list nodes store child nodes within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListNode_ChildNodestopic.aspx">ChildNodes</helplink> collection.</p>
]]>
</Description>
<SourceFile>~/Views/TreeList/UnboundModePartial.cshtml</SourceFile>
</Demo>
<Demo Key="VirtualMode" Title="Virtual Mode" SeoTitle="Virtual Mode">
<Description>
<![CDATA[
<p>In addition to bound and unbound modes, the TreeList extension can operate in a Virtual Mode, which greatly reduces both the server load and start-up time when working with complex or dynamically created data. In a virtual mode, a tree is created on demand. In this instance, child nodes are created and initialized when their parent node is expanded. </p>
<p>To implement a virtual mode for the TreeList extension, a specifically parameterized <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_BindToVirtualDatatopic.aspx">BindToVirtualData</helplink> method can be used. The method's parameters refer to delegate methods that can be declared as static methods within a model class. Within the first delegate method, create a list of business objects that correspond to the child nodes owned by the processed node. The second one enables you to specify the node's key value and cell values.</p>
<p>In this demo, the TreeList extension uses this data binding method to display the file/folder tree of this demo's website. </p>
]]>
</Description>
<SourceFile>~/Models/VirtualMode/TreeListVirtualModeHelper.cs</SourceFile>
<SourceFile>~/Views/TreeList/VirtualModePartial.cshtml</SourceFile>
</Demo>
<Demo Key="Sorting" Title="Sorting" SeoTitle="Sorting">
<Description>
<![CDATA[
<p>Automatic column sorting for any data source allows you to sort against an unlimited number of columns, without writing a single line of code. A column's current sort order is indicated by a sort glyph displayed at the column header's right edge. If the column isn't sorted, the sort glyph is hidden.</p><p>Click a column's header to sort data against a data column or change the column's sort order. To sort data against multiple columns, click column headers with the SHIFT key pressed down. Clicking a column header with the CTRL key pressed down removes sorting by column's values but preserves other sort conditions.</p><p>Set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsBehavior_AllowSorttopic.aspx">SettingsBehavior.AllowSort</helplink> option to <b>true</b> to enable end-user sorting.</p><p>The TreeList provides a Client-Side API that enables you to apply sorting on the client. To do this, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_SortBytopic.aspx">SortBy</helplink> client method.</p>
]]>
</Description>
<SourceFile>~/Models/Departments.cs</SourceFile>
<SourceFile>~/Views/TreeList/SortingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="NodePreview" Title="Node Preview" SeoTitle="Node Preview">
<Description>
<![CDATA[
<p>The TreeList extension provides a preview feature that allows each node to display a preview.</p>
<p>Preview areas allow large memo fields or custom data to be displayed across all the columns within the TreeList.</p>
<p>To enable the Preview feature, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowPreviewtopic.aspx">Settings.ShowPreview</helplink> property to <b>true</b>.</p>
<p>You can specify the required data source field via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_PreviewFieldNametopic.aspx">PreviewFieldName</helplink> property to bind node previews to data.</p>
<p>Use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListStyles_Previewtopic.aspx">Styles.Preview</helplink> property to access the style settings used to paint previews.</p>
]]>
</Description>
<SourceFile>~/Models/FishCatalog.cs</SourceFile>
<SourceFile>~/Views/TreeList/NodePreviewPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates" SeoTitle="Templates">
<Description>
<![CDATA[
<p>The TreeList provides a set of templates that allow you to create custom layouts for its visual elements (column headers, data and footer cells, etc.).</p>
<p>This sample uses Temlplates for individual nodes.</p>
<p>The <b>DataBinder.Eval</b> method is used to define one-way (read-only) binding. The <b>DataBinder.Eval</b> method takes the name of a data field and returns an object containing the value of that field from the current record in the data source.</p>
<p>You can also use Template Containers to obtain cell values, display text, etc.</p>
<p>In this demo, the template contains a link labeled 'Show notes...'. Clicking this link or a picture displays a popup panel with additional information about an item. This information is obtained using a custom data callback.</p>
]]>
</Description>
<SourceFile>~/Models/FishCatalog.cs</SourceFile>
<SourceFile>~/Views/TreeList/TemplatesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="InlineEditing" Title="Inline Editing" SeoTitle="Inline Editing">
<Description>
<![CDATA[
<p>This demo describes the TreeList extension inline edit mode. In this edit mode, cell values are edited within the in-line edit node.</p>
<p>For each allowed data operation (such as inserting, updating, deleting or node dragging), provide an associated controller action that will apply data changes to the Model and return the tree list's partial view. You can reference these controller actions by their names using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_AddNewNodeRouteValuestopic.aspx">SettingsEditing.AddNewNodeRouteValues</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_UpdateNodeRouteValuestopic.aspx">SettingsEditing.UpdateNodeRouteValues</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_DeleteNodeRouteValuestopic.aspx">SettingsEditing.DeleteNodeRouteValues</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxTreeListSettingsEditing_NodeDragDropRouteValuestopic.aspx">SettingsEditing.NodeDragDropRouteValues</helplink> properties. Note that node dragging is an editing operation, because while changing the node's position, its parent row identificator changes.</p>
<p>To allow end-users to manipulate tree list data, add a <b>Command column</b> to the TreeList's column collection and specify which commands (New, Edit, Delete) can be used by end-users. To switch a tree list node to the edit mode, end-users should be allowed to click the <b>Edit</b> command.</p>
]]>
</Description>
<SourceFile>~/Models/NewsGroups.cs</SourceFile>
<SourceFile>~/Views/TreeList/InlineEditingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="InlineEditingWithTemplate" Title="Inline Editing (Templates)" SeoTitle="Inline Editing (Templates)">
<Description>
<![CDATA[
<p>The TreeList allows you to provide a custom edit mode layout by creating an appropriate template for particular edited node cells or an entire Edit Form.</p>
<p>This demo describes how a template for the TreeList's Edit Form can be defined using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_SetEditFormTemplateContenttopic.aspx">SetEditFormTemplateContent</helplink> method. Within a template, custom label-editor pairs and Update/Cancel buttons are explicitly created using helpers from DevExpress Data Editors Extensions (such as the Label, TextBox, ComboBox, SpinEdit, Button, etc.).</p>
<p>Editors used within a template are customized in the following simple manner: they are bound to corresponding model data fields (via the <b>Bind</b> method), are named according to these fields (via the <b>Name</b> property), and their ability to automatically visualize model errors when validation fails is enabled (via the <b>ShowModelErrors</b> property).</p>
<p>Editors are bound to values of the model's currently edited data object. Note that this object is passed into a template either automatically (as a template container's <b>DataItem</b> property - when a tree list node is just switched to the edit mode) or manually (as a <b>ViewData</b> data object passed from a controller - when data modifications cannot be accomplished due to an input validation fail and returning the edited data object back to the view's Edit Form without losing user changes is required). To correctly transfer values from DevExpress editors back to corresponding data model fields, the <b>DevExpressEditorsBinder</b> model binder is used within controller actions.</p>
<p>Buttons that represent the Update and Cancel links are customized so that their <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsHyperLinkProperties_Texttopic.aspx">Text</helplink> properties are defined ("Update" and "Cancel" texts) and the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientStaticEdit_Clicktopic.aspx">Click</helplink> client events are handled to call the TreeList's respective client methods - <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_UpdateEdittopic.aspx">UpdateEdit</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_CancelEdittopic.aspx">CancelEdit</helplink>.</p>
]]>
</Description>
<SourceFile>~/Models/NewsGroups.cs</SourceFile>
<SourceFile>~/Views/TreeList/InlineEditingWithTemplatePartial.cshtml</SourceFile>
<SourceFile>~/Views/TreeList/InlineEditFormTemplatePartial.cshtml</SourceFile>
</Demo>
<Demo Key="Export" Title="Exporting Data" SeoTitle="Exporting Data to PDF, XLS, XLSX, RTF">
<Description>
<![CDATA[
<p>The TreeList extension allows you to export data with ease.</p><p>Data can be exported to a file or stream in the following formats:</p>
<ul>
<li>PDF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToPdftopic.aspx">TreeListExtension.ExportToPdf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WritePdftopic.aspx">TreeListExtension.WritePdf</helplink>)</li>
<li>XLS (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToXlstopic.aspx">TreeListExtension.ExportToXls</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WriteXlstopic.aspx">TreeListExtension.WriteXls</helplink>)</li>
<li>XLSX (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToXlsxtopic.aspx">TreeListExtension.ExportToXlsx</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WriteXlsxtopic.aspx">TreeListExtension.WriteXlsx</helplink>)</li>
<li>RTF (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_ExportToRtftopic.aspx">TreeListExtension.ExportToRtf</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListExtension_WriteRtftopic.aspx">TreeListExtension.WriteRtf</helplink>)</li></ul>
]]>
</Description>
<SourceFile>~/Models/Departments.cs</SourceFile>
<SourceFile>~/Views/TreeList/ExportPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Summary" Title="Data Summary Via Built-in Functions" SeoTitle="Data Summary Via Built-in Functions">
<Description>
<![CDATA[
<p>The TreeList enables you to calculate summary values for all values within a column or within a group of nodes, and display the result inside footer cells. The TreeList provides five built-in aggregate functions (count, max, min, etc.).</p>
<p>Summaries can be displayed within Footer or Group Footer cells. The TreeList allows multiple summaries to be displayed within individual footer or group footer cells.</p>
<p>For instance, in this demo, two summaries are displayed within the Budget column's footer cells. The first summary displays the maximum budget in this column and individual node groups (a tree branch). The second summary displays the sum of all values within the Budget column and individual node groups.</p>
<p>The Footer is displayed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowFootertopic.aspx">Settings.ShowFooter</helplink> property is set to <b>true</b>. Group Footers are displayed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowGroupFootertopic.aspx">Settings.ShowGroupFooter</helplink> option is enabled.</p>
<p>The TreeList stores its summary items within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_Summarytopic.aspx">Summary</helplink> collection.</p>
]]>
</Description>
<SourceFile>~/Models/Departments.cs</SourceFile>
<SourceFile>~/Views/TreeList/SummaryPartial.cshtml</SourceFile>
</Demo>
<Demo Key="MultipleNodeSelection" Title="Multiple Node Selection" SeoTitle="Multiple Node Selection">
<Description>
<![CDATA[
<p>To allow end-users to select nodes, enable the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Enabledtopic.aspx">SettingsSelection.Enabled</helplink> option. Nodes will display selection cells that contain check boxes. End-users can check or uncheck these check boxes to select or unselect the corresponding nodes.</p><p>To enable end-users to select all nodes displayed within the TreeList, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_AllowSelectAlltopic.aspx">SettingsSelection.AllowSelectAll</helplink> property to true. This displays a check box within the column header panel used to select/de-select all nodes. In this demo, to show/hide this check box, use 'Show Select All check box'.</p><p>The TreeList supports recursive node selection, which is enabled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Recursivetopic.aspx">SettingsSelection.Recursive</helplink> option. When recursive selection is enabled:</p><ul><li>a parent node is automatically selected, if all its child nodes are selected. Deselecting a child node automatically unselects its parent node(s);</li><li>selecting a parent node automatically selects all its children.</li></ul><p>In this demo, use the 'Recursive' check box to enable/disable recursive selection.</p>
]]>
</Description>
<SourceFile>~/Models/Departments.cs</SourceFile>
<SourceFile>~/Views/TreeList/MultipleNodeSelectionPartial.cshtml</SourceFile>
</Demo>
<Demo Key="ConditionalFormatting" Title="Conditional Formatting" SeoTitle="Conditional Formatting">
<Description>
<![CDATA[
<p>The TreeList extension enables you to provide custom style settings used to paint individual data cells or entire nodes depending upon the contents of the TreeList. To do this, you should handle the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_HtmlDataCellPreparedtopic.aspx">HtmlDataCellPrepared</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeListSettings_HtmlRowPreparedtopic.aspx">HtmlRowPrepared</helplink> events, respectively. This gives you unlimited capabilities to flag data as needed.</p>
]]>
</Description>
<SourceFile>~/Models/Departments.cs</SourceFile>
<SourceFile>~/Views/TreeList/ConditionalFormattingPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Editors" Title="Data Editors" SeoTitle="Data Editors for ASP.NET MVC" IsUpdated="true">
<Demo Key="CheckBoxList" Title="Check Box List" SeoTitle="Check Box List">
<Description>
<![CDATA[
<p>
The DevExpress Check Box List is a check box group that provides end-users with the ability to select multiple items. Its contents can be generated dynamically by binding the editor to a data source. You can also create items explicitly by manually populating the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditProperties_Itemstopic.aspx">Properties.Items</helplink> collection. For each list item, you can specify its caption and associated value.
</p>
<p>
To define the Check Box List's selected items on the server side, you can use a list item's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic.aspx">Selected</helplink> property. On the client side, the editor exposes specific methods allowing you to manipulate item selection states with ease (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectItemstopic.aspx">SelectItems</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectItemstopic.aspx">UnselectItems</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectIndicestopic.aspx">SelectIndicies</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectIndicestopic.aspx">UnselectIndicies</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectValuestopic.aspx">SelectValues</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectValuestopic.aspx">UnselectValues</helplink>). You can also easily select/unselect all editor items by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_SelectAlltopic.aspx">SelectAll</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientCheckBoxList_UnselectAlltopic.aspx">UnselectAll</helplink> client methods.
</p>
<p>
The Check Box List layout is flexibly customized. You can display check box items in several columns (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatColumnstopic.aspx">Properties.RepeatColumns</helplink>), set a direction of items within the editor (horizontal or vertical through the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatDirectiontopic.aspx">Properties.RepeatDirection</helplink> property), and specify whether items are aligned within a table or rendered without any table structure (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatLayouttopic.aspx">Properties.RepeatLayout</helplink>).
</p>
]]>
</Description>
</Demo>
<Demo Key="ComboBox" Title="Combo Box" SeoTitle="Combo Box">
<Description>
<![CDATA[
<p>
This demo illustrates the key features of the DevExpress MVC Combo Box – combining the functionality of a single-line text editor, button editor and dropdown list editor. Users can change the editor's value by selecting an item from the dropdown list or by entering new values into the editor's text box (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_DropDownStyletopic.aspx">Properties.DropDownStyle</helplink>).
</p><p>
The MVC Combo Box can be populated manually (using <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_Itemstopic.aspx">Properties.Items</helplink>) or generated dynamically via data binding (using <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcComboBoxExtension_BindListtopic.aspx">BindList</helplink>). To determine the selected item, you can use the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcComboBoxSettings_SelectedIndextopic.aspx">SelectedIndex</helplink> property. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsEditPropertiesBase_DisplayFormatStringtopic.aspx">Properties.DisplayFormatString</helplink> property can be used to specify the pattern used to format edit box display values when not focused.
</p><p>
The MVC Combo Box allows end-users to filter list items dynamically based upon text entered into the editor's text box on the client side (find-as-you-type filtering). Three filter modes are available - <b>None</b>, <b>StartsWith</b> and <b>Contains</b> (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_IncrementalFilteringModetopic.aspx">Properties.IncrementalFilteringMode</helplink>).
</p><p>
MVC Combo Box list items can be loaded from the server on demand (via callbacks) when the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_EnableCallbackModetopic.aspx">Properties.EnableCallbackMode</helplink> property is set to true. For instance, list items that are not currently displayed within the editor's dropdown window can be dynamically loaded if an end-user scrolls the list. In this mode, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_CallbackPageSizetopic.aspx">Properties.CallBackPageSize</helplink> property defines the number of items to be obtained from the server each time it's required. This mode ensures that the first page loads faster - only a few items need to be loaded initially.
</p><p>
The MVC ComboBox Editor allows list data to be represented across multiple columns. Multi-column mode is available for editors that obtain items from a data source. An editor's column collection can be defined and customized through <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_Columnstopic.aspx">Properties.Columns</helplink>. Each column within this collection must be bound to a data source field via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListBoxColumn_FieldNametopic.aspx">FieldName</helplink> property. You can also define a column's header caption, width, visibility state and other settings via column properties. All advanced features of the Combo Box Editor, such as incremental filtering and loading items on demand via callbacks are fully supported in multi-column mode. The selected item is represented within the Combo Box Editor's edit box, using a value whose format is based upon <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_TextFormatStringtopic.aspx">Properties.TextFormatString</helplink>.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/Editors/ComboBoxPartial.cshtml</SourceFile>
<SourceFile>~/Views/Editors/MultiColumnComboBoxPartial.cshtml</SourceFile>
</Demo>
<Demo Key="LargeDataComboBox" Title="Combo Box with Large Database" SeoTitle="Combo Box with Large Database">
<Description>
<![CDATA[
<p>
This demo shows how a specifically parameterized <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcComboBoxExtension_BindListtopic1800.aspx">BindList</helplink> method of the ComboBox editor can be used to display and filter the editor's data source containing a large amount of records (about 20 000). The <b>BindList</b> method's parameters refer to delegate methods that are declared as static methods within a model class. By providing implementation of these methods you can populate the editor's dropdown list with the required item portions (based on the currently applied filter criteria and the performed list scrolling) and obtain the data item corresponding to the editor's selected item.
</p>
<p>
In this demo, the ComboBox doesn't perform filter operations on the entire database by itself. Instead, all the necessary data processing is delegated to the database server, which returns only small portions of the required data, displayed by the editor.
</p>
<p>
This technique minimizes the application server's workload, and significantly reduces the application's response time. Using this technique, together with the 'Contains' filter mode of the ComboBox editor, allows you to deliver your customers with the ability to quickly and efficiently search against a huge amount of data.
</p>
<p>
Being in an incremental filtering mode, the ComboBox has the capability to start filtering only after an end-user has typed a specific number of symbols in the editor's text box. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsComboBoxProperties_FilterMinLengthtopic.aspx">FilterMinLength</helplink> property can be used to define the minimum length for the filter string input, after which filtering operations are initiated.
</p>
<p>
This behavior is extremely useful when the ComboBox works with a large amount of data. In this case, performing filtration on each new symbol typed might not be sensible, due to the large size of the resulting data set, which might affect application performance. Thus, pausing the start of filter operations allows you to provide end-users with more sensible results, and to improve the performance of your page.
</p>
]]>
</Description>
<SourceFile>~/Models/LargeDatabase.cs</SourceFile>
<SourceFile>~/Views/Editors/LargeDataComboBoxPartial.cshtml</SourceFile>
</Demo>
<Demo Key="DateEdit" Title="Date Edit" SeoTitle="Date and Time Editor">
<Description>
<![CDATA[
<p>
The DevExpress MVC Date Edit extension combines the functionality of a single-line text editor, button editor, dropdown calendar, and time editor.
</p>
<p>
Specifying a date and time (by selecting it on the calendar or by manually typing it into the text box) changes the editor's edit value. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDateEditSettings_Datetopic.aspx">Date</helplink> property specifies the currently selected date.
</p>
<p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_DisplayFormatStringtopic.aspx">Properties.DisplayFormatString</helplink> property is used to specify the format pattern used to display the editor's value within the edit box when the editor is not focused.
</p>
<p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_NullTexttopic.aspx">NullText</helplink> property allows you to display a prompt in the edit box. The prompt is displayed if the editor's value is null and the editor is not focused, and it disappears when the editor receives focus.
</p>
<p>
Set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_UseMaskBehaviortopic.aspx">Properties.UseMaskBehavior</helplink> property to <b>true</b> to support the masked input in the MVC Date Edit extension. Masks can be defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_EditFormatStringtopic.aspx">Properties.EditFormatString</helplink> property if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditProperties_EditFormattopic.aspx">EditFormat</helplink> property is set to Custom.
</p>
<p>
By default, the editor's dropdown displays a calendar that allows end-users to select dates and navigate through individual months and years. Additionally, the drop-down can display the time section if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsDateEditTimeSectionProperties_Visibletopic.aspx">TimeSectionProperties.Visible</helplink> property is set to true. The time section displays the fully customizable clock and time editor. The time edit value can be formatted using a pattern specified via the <b>EditFormatString</b> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="DropDownEdit" Title="Dropdown Edit" SeoTitle="Dropdown Editor">
<Description>
<![CDATA[
<p>
This demo illustrates the use of the DevExpress MVC Dropdown Edit and List Box editors to emulate a combo box - allowing end-users to select multiple items from a dropdown list. The MVC Dropdown Edit includes an edit box to display editor values (defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDropDownEditSettings_Texttopic.aspx">Text</helplink> property) and a button to activate a dropdown whose contents can be templated (using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDropDownEditSettings_SetDropDownWindowTemplateContenttopic.aspx">SetDropDownWindowTemplateContent</helplink> method).
</p><p>
In this demo, the DropDown Edit's <b>SetDropDownWindowTemplateContent</b> method creates an instance of the ListBox editor, whose <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListBoxProperties_SelectionModetopic.aspx">SelectionMode</helplink> property is set to <b>CheckColumn</b>. The DropDownEdit's <b>Text</b> property stores a list containing selected items (<b>Text</b> property values), delimited by semicolons. In addition to selecting items within the dropdown list, this demo allows you to select items by entering a semicolon-separated series of text items in the DropDown Edit's text box. If the entered text does not exist in the list, it is deleted from the text box.
</p>]]>
</Description>
</Demo>
<Demo Key="Calendar" Title="Calendar" SeoTitle="Calendar">
<Description>
<![CDATA[
<p>
The <b>Calendar</b> editor allows you to conditionally change the manner with which you render calendar days. The following properties enable you to customize a day cell appearance and functionality:
</p>
<ul>
<li>
the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcCalendarSettings_DayCellInitializetopic.aspx">DayCellInitialize</helplink> property allows you to specify whether or not the processed day is a weekend day; this also allows you to change the day text, and set the cell's hyperlink and target;
</li>
<li>
the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcCalendarSettings_DayCellCreatedtopic.aspx">DayCellCreated</helplink> property allows you to populate the cell with custom controls;
</li>
<li>
the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcCalendarSettings_DayCellPreparedtopic.aspx">DayCellPrepared</helplink> property allows you to customize cell appearance.
</li>
</ul>
<p>
In this demo, a calendar displays information about notes scheduled on October. A list of October notes is stored within an xml file. The <b>DayCellInitialize</b> property is used to set hyperlinks for calendar days, which correspond to one or more associated notes. A click on a hyperlink sends a callback to the server to obtain the corresponding note information. The obtained information is then displayed within a popup window. The <b>DayCellPrepared</b> property specifies special style settings for the days with notes.
</p>
]]>
</Description>
<SourceFile>~/Views/Editors/CalendarPartial.cshtml</SourceFile>
<SourceFile>~/Views/Editors/CalendarPopupPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Captcha" Title="Captcha" SeoTitle="Captcha" IsNew="true">
<Description>
<![CDATA[
<p>This demo illustrates the primary features of the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument15104">Captcha</helplink> extension for ASP.NET MVC.</p>
<p>The <b>Captcha</b> is a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) extension used to verify that submitted data come from a human and not a robot or script. The Captcha can be, for instance, used to effectively prevent comment spam on blogs, automated voting in online polls, automatic creation of user accounts.</p>
<p>The main functional elements of the Captcha extension are the <b>Challenge Image</b>, the <b>Refresh Button</b> and the <b>Text Box</b>. Captcha offers a flexible way to customize its appearance and layout by setting up these individual elements.</p>
<p>The <b>Challenge Image</b> is an automatically generated image representation of a random text. It presents a challenge to an end-user, which can be easily solvable by a human, but difficult for a computer. The Challenge Image's settings can be customized using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_ChallengeImagetopic">ChallengeImage</helplink> property. To define a set of characters from which a random text should be generated, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_CharacterSettopic">CharacterSet</helplink> property. You can control the number of characters to be displayed within the Challenge Image by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_CodeLengthtopic">CodeLength</helplink> property.</p>
<p>Captcha's <b>Refresh Button</b> allows an end-user to change a challenge code displayed by the Challenge Image. This might be helpful if the currently displayed code is not quite clear to the user and cannot be easily recognized. To control the Refresh Button's content and appearance, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_RefreshButtontopic">RefreshButton</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCaptchaCaptchaStyles_RefreshButtontopic">Styles.RefreshButton</helplink> properties. If the callback route values are defined, a click on the Refresh Button sends a callback to generate and display another challenge code. To specify settings of a loading panel displayed during callbacks, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_LoadingPaneltopic">LoadingPanel</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_LoadingPanelImagetopic">LoadingPanelImage</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_LoadingPanelStyletopic">LoadingPanelStyle</helplink> properties.</p>
<p>The <b>Text Box</b> element of Captcha allows end-users to input text recognized from the Challenge Image. Entering the correctly recognized text proves a human interaction, when the submitted form is processed on the server. To customize the content and layout of the Text Box element, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_TextBoxtopic">TextBox</helplink> property. The element's appearance can be defined using properties available via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCaptchaCaptchaStyles_TextBoxtopic">Styles.TextBox</helplink> property. The text box element has a built-in validation mechanism whose behavior can be customized using the settings accessed via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcCaptchaSettings_ValidationSettingstopic">ValidationSettings</helplink> property.</p>
]]>
</Description>
<SourceFile>~/Views/Editors/CaptchaPartial.cshtml</SourceFile>
</Demo>
<Demo Key="RadioButtonList" Title="Radio Button List" SeoTitle="Radio Button List">
<Description>
<![CDATA[
<p>
The DevExpress Radio Button List is a radio button group that provides end-users with the ability to select a single item at a time. Its contents can be generated dynamically by binding the editor to a data source. You can also create items explicitly by manually populating the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditProperties_Itemstopic.aspx">Properties.Items</helplink> collection. For each list item, you can specify its caption and associated value.
</p>
<p>
To define the Radio Button List's selected item on the server side, you can use a list item's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic.aspx">Selected</helplink> property. On the client side, the editor exposes specific methods allowing you to manipulate the selected item with ease (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_GetSelectedItemtopic.aspx">GetSelectedItem</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_SetSelectedItemtopic.aspx">SetSelectedItem</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_GetSelectedIndextopic.aspx">GetSelectedIndex</helplink>/<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_SetSelectedIndextopic.aspx">SetSelectedIndex</helplink>).
</p>
<p>
The Radio Button List layout is flexibly customized. You can display check box items in several columns (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatColumnstopic.aspx">Properties.RepeatColumns</helplink>), set a direction of items within the editor (horizontal or vertical through the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatDirectiontopic.aspx">Properties.RepeatDirection</helplink> property), and specify whether items are aligned within a table or rendered without any table structure (<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsCheckListPropertiesBase_RepeatLayouttopic.aspx">Properties.RepeatLayout</helplink>).
</p>
]]>
</Description>
<SourceFile>~/Views/Editors/RadioButtonList.cshtml</SourceFile>
</Demo>
<Demo Key="SpinEdit" Title="Spin Edit" SeoTitle="Numeric Spin Editor">
<Description>
<![CDATA[
<p>
This demo illustrates the primary features of the DevExpress Spin Edit - allowing end-users to edit numeric values with ease. The editor consists of an edit region and one or two pairs of spin buttons which can be used to adjust the numerical value. The editor's value is specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSpinEditSettings_Numbertopic.aspx">Number</helplink> property.
</p><p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_MinValuetopic.aspx">Properties.MinValue</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_MaxValuetopic.aspx">Properties.MaxValue</helplink> properties can be used to define the editor's minimum and maximum allowed values, limiting end-user input to a specified range. These properties limit the <b>Number</b> property value.
</p><p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_DisplayFormatStringtopic.aspx">Properties.DisplayFormatString</helplink> property is used to specify the format pattern used to represent the editor's value within the edit box when the editor is not focused. By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_NullTexttopic.aspx">Properties.NullText</helplink> property, a prompt can be displayed in the editor's edit box. The specified text is displayed if the editor's value is null and the editor is not focused. The prompt text disappears when the editor receives focus.
</p><p>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_NumberTypetopic.aspx">Properties.NumberType</helplink> determines whether the MVC Spin Edit uses float or integer editing mode. In integer mode, float value input is disabled and float values displayed within the editor are automatically rounded once modified. In float mode, culture specific separators are supported, allowing decimal separators to display unique values.
</p><p>
When an end-user presses a small or large spin button, the <b>Number</b> property value is incremented or decremented by the amount specified via <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_Incrementtopic.aspx">Properties.Increment</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinEditProperties_LargeIncrementtopic.aspx">Properties.LargeIncrement</helplink> properties respectively. The visibility of small and large spin buttons is managed using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinButtons_ShowIncrementButtonstopic.aspx">SpinButtons.ShowIncrementButtons</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsSpinButtons_ShowLargeIncrementButtonstopic.aspx">SpinButtons.ShowLargeIncrementButtons</helplink> properties.
</p>]]>
</Description>
</Demo>
<Demo Key="TextBox" Title="Text Box" SeoTitle="Text Box">
<Description>
<![CDATA[
<p>
This demo illustrates the primary features of the DevExpress MVC <b>Text Box</b> - a single-line text input editor.
</p>
<p>
The text displayed in the edit box can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTextBoxSettings_Texttopic.aspx">Text</helplink> property.
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsEditPropertiesBase_DisplayFormatStringtopic.aspx">DisplayFormatString</helplink> property specifies the pattern used to format an editor's value for display purposes when not focused.
</p>
<p>
The <b>Text Box</b> editor supports masked input - mask settings can be accessed via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTextBoxProperties_MaskSettingstopic.aspx">MaskSettings</helplink> property.
A mask expression can be specified via <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsMaskSettings_Masktopic.aspx">MaskSettings.Mask</helplink>.
</p>
]]>
</Description>
</Demo>
<Demo Key="TrackBar" Title="Track Bar" SeoTitle="Track Bar">
<Description>
<![CDATA[
<p>
TrackBar is a slider that provides end-users with fast and easy visual data selection capabilities. With TrackBar, end-users can select single values or value ranges by positioning drag handles within a span of values limited by a developer. End-users can position a drag handle over the required editor value in the following manner:
</p>
<ul>
<li>By clicking on the track or scale,</li>
<li>By clicking on decrement or increment buttons,</li>
<li>Via the mouse wheel,</li>
<li>By dragging the handle and dropping it on the required position,</li>
<li>By pressing arrow keys.</li>
</ul>
<p>
This demo illustrates the primary features of TrackBar.
</p>
<ul>
<li>
<b>Value limits and position</b><br/>
You can define a value range to be visualized in TrackBar (within which end-users are allowed to select values) by specifying the minimum and maximum limits via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_MinValuetopic.aspx">Properties.MinValue</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_MaxValuetopic.aspx">Properties.MaxValue</helplink> properties. The current editor value (that is the drag handle position) can be controlled by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTrackBarSettings_Positiontopic.aspx">Position</helplink> property.
</li>
<li>
<b>Scale customization</b><br/>
TrackBar's scale visualizes a value span limited by the <b>Properties.MinValue</b> and <b>Properties.MaxValue</b> properties. The scale is fully customizable. You can display it on both sides of the track or just on one track side, or even hide the scale - via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ScalePositiontopic.aspx">Properties.ScalePosition</helplink> property. The scale can display tick marks (large and small) and their labels (scale labels). Using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_LargeTickIntervaltopic.aspx">Properties.LargeTickInterval</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_SmallTickFrequencytopic.aspx">Properties.SmallTickFrequency</helplink> properties you can flexibly define the interval between large ticks and specify how frequently small ticks should fill a single large interval, respectively. You can also control whether or not all tick marks should be of the same size, by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_EqualTickMarkstopic.aspx">Properties.EqualTickMarks</helplink> property.
</li>
<li>
<b>Items mode</b><br/>
Within TrackBar, you can display custom items instead of automatically generated scale marks. Populate the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_Itemstopic.aspx">Properties.Items</helplink> collection to activate TrackBar's items display mode. This collection can be filled manually or populated automatically through binding the editor to a data source. For each item, the text and associated value can be defined (via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarItem_Texttopic.aspx">TrackBarItem.Text</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarItem_Valuetopic.aspx">TrackBarItem.Value</helplink> properties). You can specify the type of item values by using the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ValueTypetopic.aspx">Properties.ValueType</helplink> property. Items from the <b>Properties.Items</b> collection define the possible positions to which end-users can move drag handles within TrackBar. When an end-user selects an item, the item's index is assigned to the editor's <b>Position</b> property.
</li>
<li>
<b>Range Selection</b><br/>
TrackBar supports a range selection mode. The editor can display two draggable handles, thus allowing end-users to easily select a range of values. Range selection is allowed if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_AllowRangeSelectiontopic.aspx">Properties.AllowRangeSelection</helplink> property is enabled. In this mode, you can use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTrackBarSettings_PositionStarttopic.aspx">PositionStart</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTrackBarSettings_PositionEndtopic.aspx">PositionEnd</helplink> properties to obtain or define the selected range limits.
</li>
<li>
<b>Orientation and direction</b><br/>
Track bar supports two orientation modes - horizontal and vertical. This can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_Orientationtopic.aspx">Properties.Orientation</helplink> property. TrackBar elements can be rendered in a normal or reversed mode that is controlled by the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_Directiontopic.aspx">Properties.Direction</helplink> property. In the reversed mode, the TrackBar direction (from <b>Properties.MinValue</b> to <b>Properties.MaxValue</b>) turns from left to right to right to left (or from up to down to down to up if TrackBar's orientation is vertical).
</li>
<li>
<b>Value tooltip</b><br/>
When an end-user changes the editor value, TrackBar is able to automatically display a tooltip indicating the current value (or value range). You can control the visibility of value tooltips and even define at which track bar side they should appear, by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ValueToolTipPositiontopic.aspx">Properties.ValueToolTipPosition</helplink> property. The value tooltip text content's format is fully customizable through the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsTrackBarProperties_ValueToolTipFormatStringtopic.aspx">Properties.ValueToolTipFormatString</helplink> property.
</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="BuiltInValidation" Title="Built-in Validation" SeoTitle="Built-in Validation">
<Description>
<![CDATA[
<p>
This demo illustrates the built-in flexibility and efficiency of our MVC data validation engine, allowing you to easily implement different validation scenarios. Validation settings can be customized for a given editor by using the editor's <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsValidationSettingstopic">Properties.ValidationSettings</helplink> property.
</p><p>
To define editor validation logic, use the following (can be combined together whenever required):
</p><ul><li>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_RequiredFieldtopic.aspx">ValidationSettings.RequiredField</helplink> property can be used to force an editor to require input and give you the ability to display an error message if input is not received.
</li><li>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_RegularExpressiontopic.aspx">ValidationSettings.RegularExpression</helplink> property allows you to validate an editor's value based upon a regular expression.
</li><li>
An editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_Validationtopic.aspx">Validation</helplink> client event can be handled to setup custom editor validation. Review the code sample tabs within this demo, to learn how easy this really is.
</li></ul><p>
Editor validation is automatically triggered by changing the editor's value whenever the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ValidateOnLeavetopic.aspx">ValidationSettings.ValidateOnLeave</helplink> option is enabled. You can manually initiate editor validation by using the editor's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_Validatetopic.aspx">Validate</helplink> client method or specific static client methods (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateEditorsInContainertopic.aspx">ASPxClientEdit.ValidateEditorsInContainer</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateEditorsInContainerByIdtopic.aspx">ASPxClientEdit.ValidateEditorsInContainerById</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateGrouptopic.aspx">ASPxClientEdit.ValidateGroup</helplink>).
</p><p>
When an editor fails validation logic, a specific error frame containing the error’s description can be displayed. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_Displaytopic.aspx">ValidationSettings.Display</helplink> property controls how the error frame occupies space around the editor. The error frame's appearance is customized via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorFrameStyletopic.aspx">ValidationSettings.ErrorFrameStyle</helplink> property. Based upon <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorDisplayModetopic.aspx">ValidationSettings.ErrorDisplayMode</helplink> settings, the description of an error can be represented within the error frame using an error image or text (or both). To define an error image, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorImagetopic.aspx">ValidationSettings.ErrorImage</helplink> property. The error text can be specified by using either the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorTexttopic.aspx">ValidationSettings.ErrorText</helplink> property or in the <b>Validation</b> event's handler.
</p>]]>
</Description>
<SourceFile>~/Models/Validation.cs</SourceFile>
<SourceFile>~/Views/Editors/BuiltInValidationSuccess.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="CallbackPanel" Title="Callback Panel" SeoTitle="ASP.NET MVC Callback Panel Extension">
<Demo Key="Example" Title="Example" SeoTitle="MVC AJAX Container" >
<Description>
<![CDATA[
<p>
This demo illustrates the ease with which you can update page content in response to client-side events via callbacks.
</p>
<p>
With the MVC Callback Panel, updating page contents (including our extensions) via callbacks is no longer a tedious task. To simplify things, this extension offers unified callback management, allowing its child elements to be updated in one shot. In addition, the Callback Panel extension provides a built-in Loading Panel and Loading Div elements that provide visual feedback whenever a callback is processed. You can customize the appearance of these elements as your needs dictate by using the extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagesBase_LoadingPaneltopic.aspx">Images.LoadingPanel</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcCallbackPanelSettings_LoadingPanelImagePositiontopic.aspx">LoadingPanelImagePosition</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxCallbackPanelCallbackPanelStyles_LoadingPaneltopic.aspx">Styles.LoadingPanel</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcCallbackPanelSettings_LoadingPanelTexttopic.aspx">LoadingPanelText</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxCallbackPanelCallbackPanelStyles_LoadingDivtopic.aspx">Styles.LoadingDiv</helplink> properties.
</p>
<p>
In this demo, the Callback Panel extension (see the "ExamplePartial" partial view) contains elements that are used to display personal information on an employee selected within a list box. The Callback Panel's contents are updated on a callback - initiated by the list box's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsEditClientSideEvents_ValueChangedtopic.aspx">ValueChanged</helplink> client-side event handler. The callback routing logic is specified via the panel's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxListBox_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property. Here's how it works. When the selected employee is changed, the panel's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_PerformCallbacktopic.aspx">PerformCallback</helplink> client method is called, passing the selected employee's ID as its parameter. The model is then updated with the employee information that corresponds to the passed ID (see the GetEmployee function). As a result, the CallbackPanel's content is updated with the newly retrieved employee information.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/CallbackPanel/ExamplePartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="DataView" Title="Data View" SeoTitle="ASP.NET MVC Data View Extension">
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
<Description>
<![CDATA[
<p>
This demo illustrates the ability of the DevExpress DataView extension to bind to a data source. In this sample, the extension is bound to the XmlDataSource component, which obtains data from an xml file with the following structure.
</p>
<p>
<code lang="xml">
<Contacts>
<Contact Name="..." Address="..." Phone ="..." PhotoUrl ="..." />
...
</Contacts>
</code>
</p>
<p>
The appearance of DataView data items is templated utilizing the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDataViewSettings_SetItemTemplateContenttopic.aspx">SetItemTemplateContent</helplink> method.
</p>
]]>
</Description>
<SourceFile>~/Views/DataView/DataBindingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="EndlessPaging" Title="Endless Paging" SeoTitle="Endless Paging" IsNew="true">
<Description>
<![CDATA[
<p>The DataView extension supports an endless paging mode that allows loading items on demand. To enable this functionality, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewDataViewPagerSettings_EndlessPagingModetopic">EndlessPagingMode</helplink> property should be set to <b>OnClick</b>. In this mode, the DataView extension loads more items dynamically when the 'Show more items...' button is clicked.</p>
<p>Switch the <b>Endless Paging mode</b> option to "OnScroll" to see how the DataView automatically loads items on page scrolling.</p>
<p>Note that in this example, we purposely pause callback processing on the server side for half a second in order to make the loading panel visible during this time.</p>
]]>
</Description>
<SourceFile>~/Views/DataView/EndlessPagingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="SEOFriendlyPaging" Title="SEO Friendly Paging" SeoTitle="SEO Friendly Paging">
<Description>
<![CDATA[
<p>
A known problem is that of search engines simply ignore pagers. When indexing a site, they only use the information contained within the first page. The reason for this is that pager links are usually not represented as hyperlinks to other pages. Instead, they simply respond to click events to raise data update callbacks.
</p>
<p>
The DataView allows you to make it SEO-friendly. Use the <b>PagerSettings.SEOFriendly</b> property to accomplish this.
</p>
<p>
If this property is set to <b>CrawlerOnly</b>, hyperlinks are rendered in the pager when a web-crawler is detected. For other visitors, standard pager links are generated. So, search engines can index the entire content, while site visitors experience the same callback functionality.
</p>
<p>
If the property is set to <b>Enabled</b> or <b>Disabled</b>, automatic web crawler detection is disabled. The pager renders either SEO-friendly or standard links respectively.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/DataView/SEOFriendlyPagingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="CustomCallback" Title="Custom Callback" SeoTitle="Custom Callback">
<Description>
<![CDATA[
<p>
The DataView provides the ability to initiate a custom callback on demand by using the client <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMVCScriptsMVCxClientDataView_PerformCallbacktopic.aspx">PerformCallback</helplink> method and then performs required server-side processing. Typically, calling custom callbacks may be useful to solve a sorting or filtering data task displayed by the DataView extension.
</p>
<p>
This demo shows how DataView data can be sorted using custom callbacks. The data field used for sorting and the sort order can be selected using two combo boxes on the top right. The <b>PerformCallback</b> method of the DataView is called when there is a change to the combo box's selected value. Then, a specific SQL query is formed on the server side depending on current combo box values.
</p>
]]>
</Description>
<SourceFile>~/Models/Cameras.cs</SourceFile>
<SourceFile>~/Views/DataView/CustomCallbackPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Docking" Title="Docking" SeoTitle="ASP.NET MVC Docking Extension">
<Demo Key="Widgets" Title="Widgets" SeoTitle="Widgets">
<Description>
<![CDATA[
<p>This demo illustrates how a typical scenario - implementation of web gadgets on a page - can be realized using docking components provided by the DevExpress MVC Docking Extension suite.</p>
<p>The Docking suite offers three extensions - DockPanel, DockZone, and DockManager. They allow you to manage content placeholders (dock panels), which can be moved by end-users between particular areas (dock zones) within a web page. A dock panel can either be docked to a dock zone or made floating. Dock zones can be placed on any part of a page and their orientation and size are fully customizable. DockManager allows you to provide centralized programmatic control of all dock panels and dock zones contained within a page.</p>
]]>
</Description>
<SourceFile>~/Views/Docking/CalendarWidgetPartial.cshtml</SourceFile>
<SourceFile>~/Views/Docking/DateTimeWidgetPartial.cshtml</SourceFile>
<SourceFile>~/Views/Docking/MailWidgetPartial.cshtml</SourceFile>
<SourceFile>~/Views/Docking/TradingWidgetPartial.cshtml</SourceFile>
<SourceFile>~/Views/Docking/WeatherWidgetPartial.cshtml</SourceFile>
<SourceFile>~/Models/Trading.cs</SourceFile>
<SourceFile>~/Models/WeatherWidget.cs</SourceFile>
</Demo>
<Demo Key="ForbiddenZones" Title="Forbidden Zones" SeoTitle="Forbidden Zones">
<Description>
<![CDATA[
<p>This example demonstrates the forbidden zones feature allowing you to control a panel's ability to selectively dock to particular zones.</p>
<p>Using a dock panel's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockPanelSettings_ForbiddenZonestopic.aspx">ForbiddenZones</helplink> property, you can specify disallowed zones for the panel - the zones to which the panel cannot be docked. It is also possible to provide different appearances for the allowed and forbidden zone states by using a dock zone's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingDockZoneStyles_DockingAllowedStyletopic.aspx">DockingAllowedStyle</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingDockZoneStyles_DockingForbiddenStyletopic.aspx">DockingForbiddenStyle</helplink> properties. These appearances are used to highlight zones during panel dragging and to indicate whether a particular zone is allowed or disallowed for panel docking.</p>
]]>
</Description>
</Demo>
<Demo Key="Callbacks" Title="AJAX" SeoTitle="AJAX">
<Description>
<![CDATA[
<p>The DockPanel extension has the capability to load panel content on demand via callbacks. Several content loading modes are available via the following settings of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockPanelSettings_LoadContentViaCallbacktopic.aspx">LoadContentViaCallback</helplink> property.</p>
<ul>
<li>None - The content is always (initially) rendered inside a dock panel (the default behavior).</li>
<li>OnPageLoad - Loading of panel contents starts immediately after an entire page has been loaded.</li>
<li>OnFirstShow - Loading of panel contents starts when a dock panel is invoked for the first time.</li>
<li>OnDock - Loading of panel contents starts every time a panel has been docked to a dock zone.</li>
<li>OnDockStateChange - Loading of panel contents starts every time a panel's dock state has been changed (that is a docked panel starts floating or a floated panel docks to a zone).</li>
<li>OnFloating - Loading of panel contents starts every time a panel has been made floated.</li>
</ul>
<p>Using a delayed load of panel contents, you can enhance the response time of your web page on its initial load. You can also update the content of a dock panel programmatically on demand.</p>
<p>Note that in this example, we purposely pause callback processing on the server side for half a second in order to make the loading panel visible during this time.</p>
]]>
</Description>
<SourceFile>~/Views/Docking/CallbacksPartial.cshtml</SourceFile>
<SourceFile>~/Views/Docking/DesignDepartmentEmployeesPartial.cshtml</SourceFile>
<SourceFile>~/Views/Docking/DevelopmentDepartmentEmployeesPartial.cshtml</SourceFile>
<SourceFile>~/Views/Docking/FloatModeContentPartial.cshtml</SourceFile>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events" SeoTitle="Client-Side Events">
<Description>
<![CDATA[
<p>This sample demonstrates the capabilities of our client-side event management technology. Play with dock panels to initiate client-side events. The main extension-specific client events related to panel docking are traced in this demo.</p>
<p>All extensions included in the Docking suite (i.e. DockPanel, DockZone and DockManager) provide advanced client-side event support. Client-side events are triggered in response to specific actions or events on the client, and cover all the key elements of the panel docking functionality. So, they give you the ability to completely control the client-side behavior of dock panels and zones.</p>
<p>The following client events are demonstrated in this demo:</p>
<ul>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic.aspx">Init</helplink> (common for DockPanel, DockZone and DockManager) - Occurs on the client side after a client object has been initialized, but prior to its display on the browser.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_StartDraggingtopic.aspx">StartDragging</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_EndDraggingtopic.aspx">EndDragging</helplink> (specific to DockPanel); <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_StartPanelDraggingtopic.aspx">StartPanelDragging</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_EndPanelDraggingtopic.aspx">EndPanelDragging</helplink> (specific to DockManager) - Allow you to respond to the corresponding end-user actions performed on a panel.</li>
<li><b>BeforeDock</b>, <b>AfterDock</b> (common for DockPanel, DockZone and DockManager) - Fire before and after a panel is docked to a zone; you are able to cancel panel docking, if required.</li>
<li><b>BeforeFloat</b>, <b>AfterFloat</b> (common for DockPanel and DockManager) - Fire before and after a panel is made floating; you are able to cancel making a panel floating if required.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_PopUptopic.aspx">PopUp</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_CloseUptopic.aspx">CloseUp</helplink> (specific to DockPanel); <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PanelPopUptopic.aspx">PanelPopUp</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PanelCloseUptopic.aspx">PanelCloseUp</helplink> (specific to DockManager) - Allow you to respond to invoking or closing a dock panel.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality" SeoTitle="Client-Side Functionality">
<Description>
<![CDATA[
<p>This example demonstrates how to manipulate dock panels programmatically on the client using our extended client-side functionality. Client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_EnableClientSideAPItopic.aspx">EnableClientSideAPI</helplink> property is set to <b>true</b>, or if there is a handler assigned to any client-side event. Once set, an individual client control object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.</p>
<p>This demo allows the selected dock panel's characteristics to be dynamically modified via client code depending upon the rightmost panel's settings.</p>
<p>In this demo, an individual dock panel's visibility and visible index are modified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetVisibletopic.aspx">SetVisible</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_SetVisibleIndextopic.aspx">SetVisibleIndex</helplink> client methods. A panel's dock state (docked or float) is obtained using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_IsDockedtopic.aspx">IsDocked</helplink> method. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_Docktopic.aspx">Dock</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_MakeFloattopic.aspx">MakeFloat</helplink> client methods are used to dock a panel or make it floating.</p>
]]>
</Description>
</Demo>
<Demo Key="LayoutManagement" Title="Layout Management" SeoTitle="Layout Management">
<Description>
<![CDATA[
<p>
The DockManager extension allows you to respond to end-user operations on panels and zones on a page and manage the layout.
</p>
<p>
In this demo, extensions from the Docking suite are used for two different purposes: to visualize data blocks on a page using a fixed layout, and to customize the layout of these data blocks via an external page. Both pages (presentation and customization) use the same set of DevExpress docking extensions. The dock panel layout defined in the customization page is preserved and synchronized with the presentation page using the DockManager's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockManagerSettings_ClientLayouttopic.aspx">ClientLayout</helplink> event.
</p>
<p>
To save layout changes, the client-side <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PerformCallbacktopic.aspx">PerformCallback</helplink> method should be called in the client-side <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_AfterDocktopic.aspx">AfterDock</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_AfterFloattopic.aspx">AfterFloat</helplink> events. In this demo, only the <b>AfterDock</b> event is handled, because panels can only be in a docked state (the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcDockPanelSettings_AllowedDockStatetopic.aspx">AllowedDockState</helplink> property is set to <b>DockedOnly</b>).
</p>
<p>Note:</p>
<ul>
<li>The DockManager that sends a callback to the server for saving a layout should be defined in a separate partial view, like all callback-aware extensions.</li>
<li>To obtain complete information about all DockPanel and DockZone extensions on the page, DockManager should be rendered after these extensions.</li>
</ul>
]]>
</Description>
<SourceFile>~/Views/Docking/EditLayout.cshtml</SourceFile>
<SourceFile>~/Views/Docking/EditLayoutPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="FileManager" Title="File Manager" SeoTitle="ASP.NET MVC File Manager Extension" IsNew="true">
<Demo Key="Features" Title="Features" SeoTitle="Features">
<Description>
<![CDATA[
<p>
FileManager represents an Explorer-like extension providing your end-users with the capability to manage files and folders. This extension allows end-users to easily upload and select files and even change the folder structure (by renaming, moving and deleting files or folders). File and folder management capabilities are fully customizable and can be switched off, if necessary.
</p>
<p>
The FileManager extension consists of the following main elements: a toolbar, a folder container, a file container, and an upload panel. Settings of these elements and common extension settings can be customized via the corresponding properties such as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_Settingstopic">Settings</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsEditingtopic">SettingsEditing</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsToolbartopic">SettingsToolbar</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsFolderstopic">SettingsFolders</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsUploadtopic">SettingsUpload</helplink>.
</p>
<p>
The main features of the FileManager extension are listed below (together with the corresponding extension settings):
</p>
<ul>
<li>
Showing folder and file structure (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerExtension_BindToFoldertopic">BindToFolder</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettings_InitialFoldertopic">Settings.InitialFolder</helplink>);
</li>
<li>
Auto-sorting folders and files based on their names;
</li>
<li>
Automatically generating and displaying thumbnails for image files (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettings_ThumbnailFoldertopic">Settings.ThumbnailFolder</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListThumbnailsViewSettings_ThumbnailSizetopic">SettingsFileList.ThumbnailsViewSettings.ThumbnailSize</helplink>);
</li>
<li>
Capability to rename, move, and delete files and folders (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowRenameButtontopic">SettingsToolbar.ShowRenameButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowMoveButtontopic">SettingsToolbar.ShowMoveButton</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowDeleteButtontopic">SettingsToolbar.ShowDeleteButton</helplink>);
</li>
<li>
Capability to create new folders (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowCreateButtontopic">SettingsToolbar.ShowCreateButton</helplink>);
</li>
<li>
Capability to download a selected file (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowDownloadButtontopic">SettingsToolbar.ShowDownloadButton</helplink>);
</li>
<li>
Uploading files using a built-in upload panel (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerSettings_SettingsUploadtopic">SettingsUpload</helplink>);
</li>
<li>
Capability to select multiple files for upload (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsUpload_UseAdvancedUploadModetopic">SettingsUpload.UseAdvancedUploadMode</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerUploadAdvancedModeSettings_EnableMultiSelecttopic">SettingsUpload.AdvancedModeSettings.EnableMultiSelect</helplink>);
</li>
<li>
Updating the file list dynamically via callbacks;
</li>
<li>
Response to file selection and submission (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileChangedtopic">SelectedFileChanged</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileOpenedtopic">SelectedFileOpened</helplink> client events);
</li>
<li>
Quick search for a file within a list, using a built-in filter box (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsToolbar_ShowFilterBoxtopic">SettingsToolbar.ShowFilterBox</helplink>);
</li>
<li>
Customizable layout (based on a built-in splitter);
</li>
<li>
Keyboard support for main file operations.
</li>
</ul>
<p>
This demo illustrates FileManager primary features. Use the options in the top panel to change the values of corresponding FileManager properties, and see the result within the extension.
</p>
]]>
</Description>
<SourceFile>~/Views/FileManager/FeaturesPartial.cshtml</SourceFile>
</Demo>
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
<Description>
<![CDATA[
<p>This demo illustrates how you can enable the <b>FileManager</b> to retrieve its content from a database.</p>
<p>With the <b>FileManager</b> you can visualize file system data that is available in a database. All you have to do is to bind the file manager to a model via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcFileManagerExtension_BindToFileSystemProvidertopic">BindToFileSystemProvider</helplink> method. This method parameter is a data model object.</p>
<p>In this demo, the <b>FileManager</b> is bound to an object of the <b>ArtsFileSystemProvider</b> class, which is derived from the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxFileManagerFileSystemProviderBasetopic">FileSystemProviderBase</helplink> class and overrides its methods that implement file management operations, e.g. GetFiles, GetFolders, CreateFolder, etc. (See the Model code)</p>
]]>
</Description>
<SourceFile>~/Models/Arts.cs</SourceFile>
<SourceFile>~/Views/FileManager/DataBindingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="AccessControl" Title ="Access Control" SeoTitle="Access Control">
<Description>
<![CDATA[
<p>This demo shows how to set up folder and file access permissions, grant them to security roles and enforce specific roles on <b>FileManager</b>.</p>
<p><b>FileManager</b> allows you to define access permissions for folders and files using a set of folder/file access rules (see the file manager's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsPermissions_AccessRulestopic">SettingsPermissions.AccessRules</helplink> collection). An access rule specifies a path to which it is applied and lists permissions (allowed or denied actions) associated with this rule. You can easily set up access rules for folders (including their files and child folders) and individual files using <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxFileManagerFileManagerFolderAccessRuletopic">FileManagerFolderAccessRule</helplink> and <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxFileManagerFileManagerFileAccessRuletopic">FileManagerFileAccessRule</helplink> elements.</p>
<p>In addition, you can associate any number of access rules with specific security roles to group related permissions together. To associate an access rule with a security role, assign the role's name to the rule's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerAccessRuleBase_Roletopic">Role</helplink> property. Related access rules should be assigned matching role names.</p>
<p>Any created role can be enforced on the <b>FileManager</b> via its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsPermissions_Roletopic">SettingsPermissions.Role</helplink> property. After that, the file manager will display folder and files and provide access permissions to them based on the assigned role.</p>
<p>In the demo, you can select one of the security roles listed above to enforce it on <b>FileManager</b>. File and folder permissions granted to each role are listed below.</p>
<ul>
<li><b>Default User</b>. This role allows users only to browse folder contents. Any file/folder modifications and file upload are prohibited. The System folder is hidden in a folder tree.</li>
<li><b>Document Manager</b>. This role allows users to browse folder contents and perform any folder/file operations (including file upload) within the Documents folder only. Any file/folder modifications and file upload within other folders are prohibited. The System folder is hidden in a folder tree.</li>
<li><b>Media Moderator</b>. This role allows users to browse folder contents and perform any folder/file operations (except for file upload) within the Music and Video folders only. Any file/folder modifications and file upload within other folders are prohibited. The System folder is hidden in a folder tree.</li>
<li><b>Administrator</b>. This role allows users to browse folder contents and perform any folder/file operations (including file upload). The System folder is shown in a folder tree. This folder is also fully accessible for any file/folder modifications and file upload.</li>
</ul>
]]>
</Description>
<SourceFile>~/Views/FileManager/AccessControlPartial.cshtml</SourceFile>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events" SeoTitle="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event management technology. All available extension-specific client-side events are traced in this demo. Play with the FileManager's interface elements to initiate client-side events.
</p>
<p>
The FileManager extension provides advanced client-side event support. Client-side events are triggered in response to specific actions or events on the client, and cover all the key elements of the FileManager extension's functionality. So, they give you the ability to completely control the client-side behavior of the extension.
</p>
<p>
The following client events are available for the FileManager:
</p>
<ul>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink> - Occurs on the client side after the extension has been initialized, but prior to its display on the browser.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemMovingtopic">ItemMoving</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemMovedtopic">ItemMoved</helplink>; <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemRenamingtopic">ItemRenaming</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemRenamedtopic">ItemRenamed</helplink>; <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemDeletingtopic">ItemDeleting</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ItemDeletedtopic">ItemDeleted</helplink> - Allow you to respond to the corresponding actions performed on a file or folder.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FileUploadingtopic">FileUploading</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FileUploadedtopic">FileUploaded</helplink> - Fire before and after a new file has been uploaded to the server.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FolderCreatingtopic">FolderCreating</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FolderCreatedtopic">FolderCreated</helplink> - Fire before and after a new folder has been created.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_ErrorOccurredtopic">ErrorOccurred</helplink> - Enables you to properly respond to an error occurring as a result of end-user manipulations.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileChangedtopic">SelectedFileChanged</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectedFileOpenedtopic">SelectedFileOpened</helplink> - Allow you to respond to file selections and openings.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_CurrentFolderChangedtopic">CurrentFolderChanged</helplink> – Fires after the current folder has been changed.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_FileDownloadingtopic">FileDownloading</helplink> – Fires on the client side before a file download starts and allows you to cancel the action.
</li>
</ul>
<p>
To learn more on client-side events, refer to the <helplink href="http://documentation.devexpress.com/#AspNet/CustomDocument9150">Client-Side API</helplink> help topic.
</p>
]]>
</Description>
<SourceFile>~/Views/FileManager/ClientSideEventsPartial.cshtml</SourceFile>
</Demo>
<Demo Key="DetailsViewMode" Title="Details View" SeoTitle="Details View">
<Description>
<![CDATA[
<p>
This demo demonstrates the FileManager's <b>Details</b> view mode.
</p>
<p>
The FileManager supports two file list view modes: Thumbnails and Details. The thumbnails view is displayed by default. Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsFileList_Viewtopic">SettingsFileList.View</helplink> property to enable the Details mode.
</p>
<p>
In the Details view mode, a file list is represented by a grid containing information about files. You can use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettingsFileList_DetailsViewSettingstopic">SettingsFileList.DetailsViewSettings</helplink> property settings to customize the mode functionality.
</p>
<ul>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_AllowColumnResizetopic">AllowColumnResize</helplink> property specifies whether the columns can be resized by end-users.
</li><li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_AllowColumnDragDroptopic">AllowColumnDragDrop</helplink> property specifies whether end-users can reorder columns by dragging their headers.
</li><li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_AllowColumnSorttopic">AllowColumnSort</helplink> property specifies whether end-users can sort data by clicking column headers.
</li><li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerFileListDetailsViewSettings_ShowHeaderFilterButtontopic">ShowHeaderFilterButton</helplink> property specifies whether column headers display filter buttons allowing end-users to filter files.
</li>
</ul>
]]>
</Description>
<SourceFile>~/Models/Arts.cs</SourceFile>
<SourceFile>~/Views/FileManager/DetailsViewModePartial.cshtml</SourceFile>
</Demo>
<Demo Key="MultipleFilesSelection" Title="Multiple Files Selection" SeoTitle="Multiple Files Selection">
<Description>
<![CDATA[
<p>
This demo illustrates the FileManager's multiple file selection capability. It allows end-users to choose several files and to perform actions on them simultaneously.
</p>
<p>
Multi-file selection is disabled by default. To enable it, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettings_EnableMultiSelecttopic">Settings.EnableMultiselect</helplink> property to true.
</p>
<p>
The multi-file selection is available in the both – detail and thumbnail file list modes. You can switch them using the 'View Mode' combo box.
</p>
<p>
In this demo, the FileManager's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_SelectionChangedtopic">SelectionChanged</helplink> client event is handled to demonstrate how you can obtain information about selected files using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerScriptsASPxClientFileManager_GetSelectedItemstopic">GetSelectedItems</helplink> client method.
</p>
]]>
</Description>
<SourceFile>~/Views/FileManager/MultipleFilesSelectionPartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="ImageSlider" Title="Image Slider" SeoTitle="ASP.NET MVC Image Slider Extension" IsNew="true">
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
The ImageSlider is an ASP.NET MVC extension used to display images and navigate among them. The extension supports three different ways to data bind: to a data source, loading images from a specified folder, or creating image items manually. Image thumbnails are created for you automatically or you can manually create them and increase the extension's performance.
</p>
<p>
The ImageSlider extension consists of the image area and navigation bar. The both elements can be fully customized via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SettingsImageAreatopic">SettingsImageArea</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SettingsNavigationBartopic">SettingsNavigationBar</helplink> properties respectively.
</p>
<p>
This demo allows you to set one of the predefined scenarios using the 'Predefined Scenarios' combo box. A scenario provide the presets properties that you can further customize using the options below the extension.
</p>
<p>
<b>Image Area Settings</b>
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_ImageSizeModetopic">ImageSizeMode</helplink>. Allows you to specify how an image is fit to image area.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_AnimationTypetopic">AnimationType</helplink>. Contains a value specifying the animation type used to change images. If the slide animation type is used, images can be changed using the swipe gesture.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_NavigationDirectiontopic">NavigationDirection</helplink>. The direction of image sliding.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_ItemTextVisibilitytopic">ItemTextVisibility</helplink>. Specifies the visibility mode of the item text area.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderImageAreaSettings_NavigationButtonVisibilitytopic">NavigationButtonsVisibility</helplink>. Specifies the visibility mode of image area navigation button.</li>
</ul>
<p>
<b>Navigation Bar Settings</b>
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_Positiontopic">Position</helplink>. This property allows to specify the position of navigation bar relative to image area.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_Modetopic">Mode</helplink>. Specifies the appearance of navigation bar items: dots or image thumbnails.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_ThumbnailsModeNavigationButtonVisibilitytopic">ThumbnailsModeNavigationButtonVisibility</helplink>. Specifies the visibility mode of navigation buttons within the navigation bar. This property is in effect for Thumbnails mode only.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_PagingModetopic">PagingMode</helplink> - Specifies how the navigation bar scrolls when an end-user clicks page navigation buttons.</li>
</ul>
<p>
<b>Behavior Settings</b>
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_EnablePagingGesturestopic">EnablePagingGestures</helplink>. This option specifies whether an end-user can switch pages with a swipe gesture.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_EnablePagingByClicktopic">EnablePagingByClick</helplink>. This option specifies whether paging by click is enabled.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_ImageLoadModetopic">ImageLoadMode</helplink>. This option specifies the image loading mode.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_ExtremeItemClickModetopic">ExtremeItemClickMode</helplink> - Specifies the effect that is produced when an end-user clicks an extreme item.</li>
</ul>
<p>
<b>Appearance</b>
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_ShowNavigationBartopic">ShowNavigationBar</helplink>. This option specifies the navigation bar visibility.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="PhotoGallery" Title="Photo Gallery" SeoTitle="Photo Gallery">
<Description>
<![CDATA[
<p>
This demo demonstrates how to create a photo gallery using the ImagerSlider.
</p>
<p>
Photos are displayed in a table using our DataView. Click a photo to open a popup window containing photo gallery. The gallery is implemented using the ImagerSlider extension. Users can view photos using the special navigation buttons or by swipe gesture within the image slider. Additionally, the demo demonstrates how to provide the key support for the gallery: press the Space to see the next photo or press the Escape to close the gallery and return to the data view table.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderScriptsASPxClientImageSlider_ActiveItemChangedtopic">ActiveItemChanged</helplink> client-side event is handled to add an anchor to the current image link. Thereby the demo shows how to create a link to the particular photo. So you can get the url to the current image from an address bar.
</p>
]]>
</Description>
</Demo>
<Demo Key="FolderBinding" Title="Folder Binding" SeoTitle="Folder Binding">
<Description>
<![CDATA[
<p>
This demo demonstrates how you can use the ImagerSlider extension after specifying just one property. All you need to start working with our image slider is to pass the required folder path as a parameter to the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderExtension_BindToFoldertopic">BindToFolder</helplink> property and the extension is ready for use. Images are scaled and thumbnails are created automatically.
</p>
]]>
</Description>
</Demo>
<Demo Key="BindingToBinaryData" Title="Binding To Binary Data" SeoTitle="Binding To Binary Data">
<Description>
<![CDATA[
<p>The ImageSlider extension provides you with the ability to display binary images. In this demo, the ImageSlider is bound to data model via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderExtension_Bindtopic">Bind</helplink> method. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_ImageContentBytesFieldtopic">ImageContentBytesField</helplink> property specifies the data source field from which binary images should be retrieved. The ImageSlider extension caches the images to the folder specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_BinaryImageCacheFoldertopic">BinaryImageCacheFolder</helplink> property.</p>
]]>
</Description>
<SourceFile>~/Models/BinaryImages.cs</SourceFile>
</Demo>
<Demo Key="SlideShow" Title="Slide Show" SeoTitle="Slide Show">
<Description>
<![CDATA[
<p>The ImageSlider has a built-in ability to display an image slide show. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SettingsSlideShowtopic">SettingsSlideShow</helplink> property provides access to the following properties.</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_AutoPlaytopic">AutoPlay</helplink> – specifies whether or not the slide show is initially enabled.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_Intervaltopic">Interval</helplink> – specifies the time interval between changing images.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_PausePlayingWhenMouseOvertopic">PausePlayingWhenMouseOver</helplink> – specifies whether or not the image playing stops when mouse is over extension.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_PlayPauseButtonVisibilitytopic">PlayPauseButtonVisibility</helplink> – specifies the Play/Pause button visibility.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderSlideShowSettings_StopPlayingWhenPagingtopic">StopPlayingWhenPaging</helplink> – specifies whether or not the image playing stops when end-user change images manually.</li>
</ul>
<p>In this demo, you can use editors in the "Slide Show Settings" panel to play with the values of the properties above, so you can see them in action.</p>
]]>
</Description>
</Demo>
<Demo Key="NavigationBarMode" Title="Navigation Bar Mode" SeoTitle="Navigation Bar Mode">
<Description>
<![CDATA[
<p>This demo illustrates how you can use the image slider navigation bar as a standalone extension. For this purpose, the image area is hidden by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_ShowImageAreatopic">ShowImageArea</helplink> property to <b>false</b>. Item thumbnails are templated to display an image with a caption and serve as a link.</p>
]]>
</Description>
</Demo>
<Demo Key="VideoGallery" Title="Templates (Video Gallery)" SeoTitle="Templates (Video Gallery)">
<Description>
<![CDATA[
<p>The <b>ImageSlider</b> extension supports template technology, allowing you to completely customize a extension's appearance and layout.</p>
<p>The look of the <b>ImageSlider</b> extension's default elements can be completely modified by creating a specific template, which defines how an element will be rendered by a client browser. The <b>ImageSlider</b> extension allows you to create templates for the following elements: item, item text, and item thumbnail. You can apply templates for all identical elements within the extension (using extension level templates) or for a particular element (using item level templates).</p>
<p>In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SetItemTemplateContenttopic">SetItemTemplateContent</helplink> property is used to display video files within an extension image area. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebMvcImageSliderSettings_SetItemThumbnailTemplateContenttopic">SetItemThumbnailTemplateContent</helplink> property is used to display information about items: text and time.</p>
]]>
</Description>
</Demo>
<Demo Key="FullscreenSample" Title="Fullscreen Sample" SeoTitle="Fullscreen Sample">
<Description>
<![CDATA[
<p>This demo illustrates how to use the ImageSlider extension in a full-screen mode when an extension fills an entire page and can be resized together with the browser window. The client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_AdjustControltopic">AdjustControl</helplink> method is used to recalculate the size of the extension's client object to correctly display it when the window is resized.</p>
<p>Additionally, the demo illustrates the ability to customize the navigation dots and item text area using cascading style sheets.</p>
]]>
</Description>
<SourceFile>~/Views/ImageSlider/FullscreenSamplePage.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="LoadingPanel" Title="Loading Panel" SeoTitle="ASP.NET MVC Loading Panel Extension">
<Demo Key="Example" Title="Example" SeoTitle="Example">
<Description>
<![CDATA[
<p>
This demo demonstrates the use of the DevExpress MVC LoadingPanel Extension working in modal mode.
</p>
<p>
Depending on the check box setting, the loading panel can be displayed over either the entire page or a specified HTML element, which is controlled by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcLoadingPanelSettings_ContainerElementIDtopic.aspx">ContainerElementID</helplink> property.
</p>
<p>
In this demo, the loading panel is displayed and hidden dynamically via client code in response to clicking the 'Show Loading Panel' button.
</p>
]]>
</Description>
<SourceFile>~/Views/LoadingPanel/ExamplePartial.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Menu" Title="Menu" SeoTitle="ASP.NET MVC Menu Extension">
<Demo Key="Features" Title="Features" SeoTitle="Features">
<Description>
<![CDATA[
<p>
This demo illustrates the key features of the DevExpress MVC Menu Extension. Use the items on the right to modify Menu properties.
</p><p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_AllowSelectItemtopic.aspx">AllowSelectItem</helplink> property can be used to enable menu item selection on the client side. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_EnableHotTracktopic.aspx">EnableHotTrack</helplink> property allows you to specify whether menu items can visually respond to mouse hovering. By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_EnableAnimationtopic.aspx">EnableAnimation</helplink> property, you can specify whether an animation effect is used when invoking/hiding submenus.
</p><p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_AppearAftertopic.aspx">AppearAfter</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_DisappearAftertopic.aspx">DissapearAfter</helplink> properties allow you to specify the delay (in milliseconds) used for the display of submenus within a Menu control.
</p><p>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_MaximumDisplayLevelstopic.aspx">MaximumDisplayLevels</helplink> can be used to specify a menu control's depth - the number of menu levels rendered by the Menu.
</p>]]>
</Description>
</Demo>
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
<Description>
<![CDATA[
<p>
This demo illustrates how the MVC Menu can be bound to a Model passed to a View from the Controller. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuExtension_Bindtopic.aspx">Bind</helplink> method is used to bind the Menu to the Model. Note that the MVC Menu can only be bound to hierarchal data sources, and as such, a Model object passed to the <b>Bind</b> method must support the <b>IHierarchicalEnumerable</b> interface.
</p>
<p>
The DevExpress MVC Menu Extension ships with following data binding methods:
</p>
<ul>
<li>Bind(object dataObject);</li>
<li>BindToSiteMap(string fileName);</li>
<li>BindToSiteMap(string fileName, bool showStartingNode);</li>
<li>BindToXML(string fileName);</li>
<li>BindToXML(string fileName, string xPath);</li>
</ul>
]]>
</Description>
<SourceFile>~/Models/Categories.cs</SourceFile>
</Demo>
<Demo Key="DataBindingToSiteMap" Title="Data Binding to SiteMap" SeoTitle="Data Binding to SiteMap">
<Description>
<![CDATA[
<p>
This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuExtension_BindToSiteMaptopic.aspx">BindToSiteMap</helplink> method can be used to easily populate the Menu for ASP.NET MVC with item information taken from a SiteMap file.
</p>
<p>
Note that the Menu for ASP.NET MVC is able to automatically retrieve item information by binding to data fields whose names coincide with property names of an item object (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_Texttopic.aspx">Text</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_Imagetopic.aspx">Image</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ToolTiptopic.aspx">ToolTip</helplink>). In this demo, the image path of items is obtained automatically from the corresponding attributes of data source nodes. The texts and navigation locations of items are retrieved from the standard attributes of a SiteMap file - the 'url' and 'title'.
The texts of items of the last nested level are composed dynamically, by concatenating the values of the 'result' and 'title' attributes. This processing is performed within a delegate of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettingsBase_ItemDataBoundtopic.aspx">ItemDataBound</helplink> method, which allows you to manipulate the values being assigned to the properties of a menu item during its data binding.
</p>
]]>
</Description>
</Demo>
<Demo Key="PopupMenu" Title="Popup Menu" SeoTitle="Popup Menu">
<Description>
<![CDATA[
<p>
This demo demonstrates some of the features available to you within the DevExpress MVC PopupMenu Extension.
</p>
<p>
A popup menu can be associated with a specific web element using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupElementIDtopic.aspx">PopupElementID</helplink> property. The menu is invoked automatically when a specific action (a left or right mouse click or mouse hovering) defined by the PopupAction property is performed within the associated element.
</p>
<p>
In this example, PopupMenu is linked to an image. The popup menu is displayed by an action specified within the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupActiontopic.aspx">PopupAction</helplink> dropdown editor. The menu's precise display position with respect to the associated web element can be defined by the <b>HorizontalAlign</b> and <b>VerticalAlign</b> combo boxes that control the values of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupHorizontalAligntopic.aspx">PopupHorizontalAlign</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupMenuSettings_PopupVerticalAligntopic.aspx">PopupVerticalAlign</helplink> properties, respectively.
</p>
<p>
The popup menu can be invoked programmatically as well. In this demo, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientPopupMenu_ShowAtPostopic.aspx">ShowAtPos</helplink> client method is used to display PopupMenu over the grid in response to a right mouse click instead of a client browser's standard context menu.
</p>
<p>
Note that in this demo, menu items are arranged into a logical group using their <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_GroupNametopic.aspx">GroupName</helplink> property. In this case, the items function as radio buttons - checking an item unchecks the one previously selected. So, only one menu item in a group can be checked at a time.
</p>
]]>
</Description>
<SourceFile>~/Models/PopulationAreaStructure.cs</SourceFile>
<SourceFile>~/Views/Menu/PopupMenuGridViewPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Scrolling" Title="Scrolling" SeoTitle="Scrolling">
<Description>
<![CDATA[
<p>This demo illustrates the DevExpress MVC Menu’s ability to display scroll buttons for submenus whose content does not fit within the visible area. To describe the capabilities of the MVC Menu effectively, it is displayed within an IFRAME element thus simulating window boundaries.</p>
<p>By default, submenus are automatically rendered to accommodate their entire content. If a submenu contains a large number of items, it might not fit vertically in the visible area. This occurs when a submenu's height exceeds the browser window's height (or the height of an IFRAME containing the menu). In such instances, scroll buttons are needed within the submenus. If scroll buttons are enabled, a submenu that does not fit the visible area automatically adjusts its height to fit the area and displays scroll buttons, allowing submenu items to be scrolled vertically. To scroll, hover the mouse pointer over a scroll button or click it to scroll faster.</p>
<p>To enable scroll buttons for all submenus in a menu, set the menu's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMenuSettings_EnableSubMenuScrollingtopic.aspx">EnableSubMenuScrolling</helplink> property to true. To enable scroll buttons for specific submenus, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_EnableScrollingtopic.aspx">EnableScrolling</helplink> property of a submenu's parent menu item. You can customize the appearance of scroll buttons by providing custom images via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ScrollButtonStyletopic.aspx">ScrollButtonStyle</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ScrollDownButtonImagetopic.aspx">ScrollDownButtonImage</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_ScrollUpButtonImagetopic.aspx">ScrollUpButtonImage</helplink> properties.</p>
]]>
</Description>
<SourceFile>~/Views/Menu/ScrollingFrame.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates" SeoTitle="Templates">
<Description>
<![CDATA[
<p>
This sample demonstrates the use of templates within the DevExpress MVC Menu.
</p><p>
A submenu template and an item template are used. These templates are assigned by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxMenuItem_SetSubMenuTemplateContenttopic.aspx">SetSubMenuTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcMVCxMenuItem_SetTemplateContenttopic.aspx">SetTemplateContent</helplink> methods of the Menu's item objects, respectively They contain a parameter that represents the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxMenuMenuItemTemplateContainertopic.aspx">MenuItemTemplateContainer</helplink> object providing settings for a templated item.
</p>]]>
</Description>
<SourceFile>~/Views/Menu/TemplatesItem.cshtml</SourceFile>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events" SeoTitle="Client-Side Events">
<Description>
<![CDATA[
<p>
This example demonstrates the capabilities of our client-side event technology. All client-side events exposed by the DevExpress MVC Menu are traced in this demo. Click any menu item or move the mouse pointer over the parent menu items within the menu to initiate client-side events.
</p><p>
The Menu provides advanced client-side event support. Client-side events are triggered in response to specific actions or events on the client, and cover all key functional elements of the menu control. As such, they give you the ability to fully control the client-side behavior of the Menu.
</p><p>
Client-side event handlers represent code written in JavaScript. In order to handle a client-side event, the sender web control provides a property that accepts either handling code directly or the name of a handling function. This function must be defined directly in the page's HTML code or in a separate js file. For each client-side event, there is a specific object with both server and client-side representations. This object automatically renders the necessary JavaScript code to the page and assign it as a handler to the web control on the client side.
</p>]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality" SeoTitle="Client-Side Functionality">
<Description>
<![CDATA[
<p>
This example demonstrates available ways to manipulate the DevExpress MVC Menu programmatically on the client using our extended client-side functionality. The client object of the Menu can be accessed on the client by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
</p><p>
In this demo, each Menu item is identified using its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuMenuItem_Nametopic.aspx">Name</helplink> property. In order to obtain a specific menu item by its name on the client, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_GetItemByNametopic.aspx">GetItemByName</helplink> method is used. A specific menu item can be selected using <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_SetSelectedItemtopic.aspx">SetSelectedItem</helplink>, by passing it the required item.
</p><p>
The <b>MenuItemClick</b> function that is a handler of the Menu's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_ItemClicktopic.aspx">ItemClick</helplink> client event demonstrates how to synchronize the dropdown editor's value with the name of the clicked menu item.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="NavBar" Title="NavBar" SeoTitle="ASP.NET MVC Navigation Pane Extension">
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
This demo illustrates the key features available to you within the DevExpress MVC NavBar Extension. Use the controls on the right to change individual property values and see the associated results within the NavBar.
</p><p>
In order to disable the expansion/collapse of groups within the NavBar, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AllowExpandingtopic.aspx">AllowExpanding</helplink> property should be set to false. To enable selection of NavBar items on the client side, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AllowSelectItemtopic.aspx">AllowSelectItem</helplink> property to true.
</p><p>
To force the MVC NavBar Extension to display only one expanded group at any point in time, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AutoCollapsetopic.aspx">AutoCollapse</helplink> property value should be set to true. This behavior emulates a SideBar control.
</p><p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_EnableHotTracktopic.aspx">EnableHotTrack</helplink> property allows you to specify whether NavBar items and groups can visually respond to mouse hover events. By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SaveStateToCookiestopic.aspx">SaveStateToCookies</helplink> property, you can control whether information about the expansion state of groups is preserved between site visits.
</p>]]>
</Description>
</Demo>
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
<Description>
<![CDATA[
<p>
This demo illustrates how the DevExpress MVC NavBar can be bound to a Model passed to a View from the Controller. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarExtension_Bindtopic.aspx">Bind</helplink> method is used to bind the NavBar to the Model. Note that the NavBar can only be bound to hierarchal data sources, and as such, a Model object passed to the <b>Bind</b> method must support the <b>IHierarchicalEnumerable</b> interface.
</p>
<p>
The MVC NavBar Extension ships with following data binding methods:
</p>
<ul>
<li>Bind(object dataObject);</li>
<li>BindToSiteMap(string fileName);</li>
<li>BindToSiteMap(string fileName, bool showStartingNode);</li>
<li>BindToXML(string fileName);</li>
<li>BindToXML(string fileName, string xPath);</li>
</ul>]]>
</Description>
<SourceFile>~/Models/Categories.cs</SourceFile>
</Demo>
<Demo Key="DataBindingToXML" Title="Data Binding to XML">
<Description>
<![CDATA[
<p>
This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to easily populate the DevExpress MVC NavBar with group and item information taken from an xml file. The xml file has the following structure:
</p><code lang="Xml">
<Cameras>
<Brand Text="...">
<Camera Model="..." Pixels="..." NavigateUrl="..." ImageUrl="..." />
...
</Brand>
...
</Cameras>
</code><p>
The MVC NavBar is able to automatically retrieve group and item information by binding to data fields whose names coincide with property names of a group and item objects (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_Texttopic.aspx">Text</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://documentation.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">ImageUrl</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_ToolTiptopic.aspx">ToolTip</helplink>). In this demo, the group text, and both the navigation location and image path of items are obtained automatically from the corresponding attributes of data source nodes. The texts used for individual items are composed dynamically by concatenating the values of the Model and Pixels attributes. This processing is performed within a delegate of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_ItemDataBoundtopic.aspx">ItemDataBound</helplink> method, which allows you to manipulate values being assigned to the properties of a NavBar item during data binding.
</p>]]>
</Description>
<SourceFile>~/Views/NavBar/DataBindingToXMLPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Callbacks" Title="AJAX">
<Description>
<![CDATA[
<p>
This sample illustrates use of AJAX-based callbacks implemented by DevExpress MVC NavBar.
</p><p>
The MVC NavBar supports AJAX with the ability to load a group's content from the server via a callback when the group is expanded. This approach allows the NavBar to avoid the initial transfer of all group data to the client, thus improving page load times.
</p><p>
In order to activate use of callbacks, the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property should contain the path to an action that handles a callback request. The best way to handle such callbacks is to use a partial view that only contains a NavBar.
</p><p>
In this sample, we momentarily pause callback processing on the server side, so that the Loading Panel is visible during processing.
</p>]]>
</Description>
<SourceFile>~/Views/NavBar/CallbacksPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[
<p>
This sample demonstrates the use of templates within the DevExpress MVC NavBar.
</p><p>
Templates for the header, collapsed header and the content of a group are used in this demo. These templates are assigned by using the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SetGroupHeaderTemplateContenttopic.aspx">SetGroupHeaderTemplateContent</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SetGroupHeaderTemplateCollapsedContenttopic.aspx">SetGroupHeaderTemplateCollapsedContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_SetGroupContentTemplateContenttopic.aspx">SetGroupContentTemplateContent</helplink> methods, respectively. These methods contain a parameter that represents the NavBarGroupTemplateContainer object, providing settings of a templated element.
</p>]]>
</Description>
<SourceFile>~/Views/NavBar/TemplatesContent.cshtml</SourceFile>
<SourceFile>~/Views/NavBar/TemplatesHeader.cshtml</SourceFile>
<SourceFile>~/Views/NavBar/TemplatesHeaderCollapsed.cshtml</SourceFile>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event technology. All client-side events exposed by the DevExpress MVC NavBar are traced in this demo. Click any item or expand/collapse a group within the NavBar to initiate client-side events.
</p><p>
Client-side events are triggered in response to specific actions or events on the client side (in particular, to expanding/collapsing a group). Client-side event handlers represent code written in JavaScript. In order to handle a client-side event, the sender web control provides a property that accepts either handling code directly or the name of a handling function. This function should be defined directly in the page's HTML code or in a separate js file. For each client-side event, there is a specific object, which has both server-side and client-side representations. This object will automatically render the necessary JavaScript code to the page and assign it as a handler to the web control on the client side.
</p>]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>
This example demonstrates available ways to manipulate the DevExpress MVC NavBar programmatically on the client using our extended client-side functionality. The client object of the NavBar can be accessed on the client-side by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
</p><p>
In this demo, each NavBar group or item is identified using its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarNavBarItem_Nametopic.aspx">Name</helplink> property. In order to obtain a specific group or item by its name on the client, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_GetGroupByNametopic.aspx">GetGroupByName</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_GetItemByNametopic.aspx">GetItemByName</helplink> method is used respectively. In this demo, the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcNavBarSettings_AutoCollapsetopic.aspx">AutoCollapse</helplink> mode is enabled, specifying that only one group can be expanded within the NavBar at any one time. In this mode, a group's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBarGroup_SetExpandedtopic.aspx">SetExpanded</helplink> method can be used to expand the desired group.
</p><p>
A given NavBar item can be selected within each group via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_SetSelectedItemtopic.aspx">SetSelectedItem</helplink> method by passing it the required item.
</p><p>
The <b>GroupExpandedChanged</b> function that is a handler of the NavBar's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_ExpandedChangedtopic.aspx">ExpandedChanged</helplink> event demonstrates how to synchronize values of the dropdown editors with the expanded group and the group's selected item, if any.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="PopupControl" Title="Popup Window" SeoTitle="ASP.NET MVC Popup Window Extension">
<Demo Key="Features" Title="Features">
<Description>
<![CDATA[
<p>
This demo allows you to use many of the features provided by the DevExpress MVC Popup Extension.
Use options on the right to change various layout and behavior property settings and click Apply to assign them.
To invoke the MVC Popup Extension, click the PopupElement button displayed on the left.
</p>
<p>
Available options include:
</p>
<ul>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowCloseButtontopic.aspx">ShowCloseButton</helplink>. This option specifies whether a button is displayed within a popup window's header allowing end-users to close the window.
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowShadowtopic.aspx">ShowShadow</helplink>. This option applies a shadow effect to popup windows.
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowFootertopic.aspx">ShowFooter</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowHeadertopic.aspx">ShowHeader</helplink>. Use these options to toggle the visibility of a popup window's header and footer.
</li>
<li>
<p>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupHorizontalAligntopic.aspx">PopupHorizontalAlign</helplink>. This option specifies the horizontal alignment of a popup window relative to the corresponding web control/HTML element. Option values include:
</p>
<ul>
<li>
<b>NotSet</b>. A popup window is displayed on the x-coordinate of the mouse cursor position.
</li>
<li>
<b>OutsideLeft</b>. A popup window is displayed to the left of the corresponding HTML element, so that the x-coordinate of the window's right border equals the x-coordinate of the element's left border.
</li>
<li>
<b>LeftSides</b>. A popup window is displayed, so that the left border x-coordinates of the window and its corresponding element are equal.
</li>
<li>
<b>RightSides</b>. A popup window is displayed, so that the right border x-coordinates of the window and its corresponding element are equal.
</li>
<li>
<b>OutsideRight</b>. A popup window is displayed to the right of the corresponding HTML element, so that the x-coordinate of the window's left border equals the x-coordinate of the element's right border.
</li>
</ul>
</li>
<li>
<p>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupVerticalAligntopic.aspx">PopupVerticalAlign</helplink>. This option specifies the vertical alignment of a popup window with respect to the corresponding web control/HTML element. Choose one of the following option values:
</p>
<ul>
<li>
<b>NotSet</b>. A popup window is displayed on the y-coordinate of the mouse cursor position.
</li>
<li>
<b>Above</b>. A popup window is displayed above the corresponding HTML element, so that the y-coordinate of the window's bottom border equals the y-coordinate of the element's top border.
</li>
<li>
<b>TopSides</b>. A popup window is displayed, so that the top border y-coordinates of the window and its corresponding element are equal to one another.
</li>
<li>
<b>BottomSides</b>. A popup window is displayed, so that the bottom border y-coordinates of the window and its corresponding element are equal.
</li>
<li>
<b>Below</b>. A popup window is displayed below the corresponding HTML element so that the y-coordinate of the window's top border equals the y-coordinate of the element's bottom border.
</li>
</ul>
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupHorizontalOffsettopic.aspx">PopupHorizontalOffset</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupVerticalOffsettopic.aspx">PopupVerticalOffset</helplink>. Use these options to specify a popup window's horizontal and vertical offsets.
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_Opacitytopic.aspx">Opacity</helplink>. This option allows you to customize the level of transparency for a popup window and its controls. The option accepts values ranging from 0 (the window is transparent and so it's completely invisible) to 100 (the window is opaque).
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_EnableAnimationtopic.aspx">EnableAnimation</helplink>. Use this option to enable predefined popup animation effects.
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_PopupAnimationTypetopic.aspx">PopupAnimationType</helplink>. This property specifies the type of animation used to show a popup window.
<ul>
<li><b>Fade</b>. A popup window is displayed using a fade-in effect.</li>
<li><b>Slide</b>. A popup window is displayed using a slide effect.</li>
</ul>
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_AllowDraggingtopic.aspx">AllowDragging</helplink>. Activate this option to allow a popup window to be dragged within the bounds of the client browser's window.
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_DragElementtopic.aspx">DragElement</helplink>. Choose which portion of the popup window starts the drag operation: header (a popup window can be dragged by its header) or window (dragging can be started by clicking anywhere within a popup window's client area).
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_AllowResizetopic.aspx">AllowResize</helplink>. Activate this option to allow a popup window sizing. Use the option in conjunction with the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ResizingModetopic.aspx">ResizingMode</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowSizeGriptopic.aspx">ShowSizeGrip</helplink> options. A popup window's size limits can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MinHeighttopic.aspx">MinHeight</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MinWidthtopic.aspx">MinWidth</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MaxHeighttopic.aspx">MaxHeight</helplink>, and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_MaxWidthtopic.aspx">MaxWidth</helplink> properties.
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ResizingModetopic.aspx">ResizingMode</helplink>. This option controls whether a popup window is redrawn dynamically during resizing operations
(the <b>Live</b> value), or the window is redrawn after the resizing operation is completed (the <b>Postponed</b> value).
</li>
<li>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_ShowSizeGriptopic.aspx">ShowSizeGrip</helplink>. Use this option to toggle the visibility of a size grip element - that when dragged - allows end-users to size a popup window. The size grip can be displayed at all times (<b>True</b>), never (<b>False</b>) or dependent upon the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_AllowResizetopic.aspx">AllowResize</helplink> property setting (<b>Auto</b>).
</li>
<li>
<p>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_CloseActiontopic.aspx">CloseAction</helplink>. Use this option to specify the client action that closes a popup window. Option values include:
</p>
<ul>
<li>
<b>None</b>. A popup window can be closed only in code, via a specific client script method.
</li>
<li>
<b>CloseButton</b>. A popup window can only be closed by pressing the Close button displayed within the window's header.
</li>
<li>
<b>OuterMouseClick</b>. A popup window is closed by a click outside the window's region.
</li>
<li>
<b>MouseOut</b>. A popup window is closed if the mouse pointer moves out of the window's region.
To specify the hide delay (in milliseconds), use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_DisappearAftertopic.aspx">DisappearAfter</helplink> option.
</li>
</ul>
</li>
<li>
<p>
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupActiontopic.aspx">PopupAction</helplink>. Use this option to specify the client action that invokes a popup window. Choose one of the following option values:
</p>
<ul>
<li>
<b>None</b>. A popup window can be invoked only in code, via a specific client script method.
</li>
<li>
<b>LeftMouseClick</b>. A popup window can be invoked by left-clicking a corresponding web control or
HTML element, specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_PopupElementIDtopic.aspx">PopupElementID</helplink> property.
</li>
<li>
<b>RightMouseClick</b>. A popup window can be invoked by right-clicking a corresponding web control or
HTML element, specified via the <b>PopupElementID</b> property.
</li>
<li>
<b>MouseOver</b>. A popup window is invoked when the mouse pointer enters the region occupied by a
corresponding web control or HTML element, specified via the <b>PopupElementID</b> property.
To specify the display delay (in milliseconds), use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_AppearAftertopic.aspx">AppearAfter</helplink> option.
</li>
</ul>
</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="DataBinding" Title="Data Binding">
<Description>
<![CDATA[
<p>
This demo illustrates the XML binding options available to you when using the DevExpress MVC Popup Extension.
To invoke a popup window, move the mouse pointer over menu items displayed on the left.
</p>
<p>
The MVC Popup Extension provides a number of data binding methods, including <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlExtension_Bindtopic.aspx">Bind</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlExtension_BindToSiteMaptopic.aspx">BindToSiteMap</helplink>, and
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlExtension_BindToXMLtopic.aspx">BindToXML</helplink>. In this demo, the MVC Popup Extension uses the <b>BindToXML</b> method to bind to a Charts.xml
file and obtain data from its <Charts> element.
</p>
<p>
Our ASP.NET MVC controls allow you to bind their template controls directly to the corresponding fields of a
data source's data object (<b>DataItem</b>). To accomplish this, use the <b>DataBinder.Eval</b> method,
and pass <b>Container.Window.DataItem</b> and a field name as method parameters.
In the demo, the <b>DataBinder.Eval</b> method is used to bind template controls of a popup window's
content region and footer, via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_SetWindowContentTemplateContenttopic.aspx">SetWindowContentTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_SetWindowFooterTemplateContenttopic.aspx">SetWindowFooterTemplateContent</helplink>
methods. For the content region, the <b>BigImageUrl</b> field provides the <b>Image</b> control with <b>ImageUrl</b>
property values. For the footer, the View bound field provides a label's text.
</p>
]]>
</Description>
<SourceFile>~/Models/Categories.cs</SourceFile>
</Demo>
<Demo Key="ModalMode" Title="Modal Mode">
<Description>
<![CDATA[
<p>
This demo illustrates how you can display a modal MVC Popup Extension - useful when you need display a
dialog in a modal window. To enable modal mode for a popup or specific popup window, set its
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_Modaltopic.aspx">Modal</helplink> property to <b>true</b>. You can show any number of nested modal windows.
</p>
]]>
</Description>
</Demo>
<Demo Key="LoadOnDemand" Title="Load Content on Demand">
<Description>
<![CDATA[
<p>
The DevExpress MVC Popup Extension has a capability to load the content of popup windows on demand. Several content loading modes are available via the following settings of the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettings_LoadContentViaCallbacktopic.aspx">LoadContentViaCallback</helplink> property.
</p>
<ul>
<li>Default - The content is always (initially) rendered inside popup windows (the default behavior).</li>
<li>OnPageLoad - Loading of popup window contents starts immediately after the entire page has been loaded.</li>
<li>OnFirstShow - Loading of popup window contents starts when a popup window is invoked for the first time.</li>
</ul>
<p>
Using the postponed load of popup window contents, you can enhance the response time of your web page on its initial load
</p>
<p>
Note that in this example we purposely pause callback processing on the server side for a second in order to make the Loading Panel visible during this time.
</p>
]]>
</Description>
<SourceFile>~/Views/PopupControl/LoadOnDemandPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[
<p>
This demo illustrates the use of templates within the DevExpress MVC Popup Extension.
</p>
<p>
Templates allow you to fully customize the appearance and layout of control elements.
The MVC Popup Extension allows you to specify templates for its popup window headers and footers, via the
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_SetHeaderTemplateContenttopic.aspx">SetHeaderTemplateContent</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_SetFooterTemplateContenttopic.aspx">SetFooterTemplateContent</helplink> methods.
In this demo, the Help and Close buttons are added to the window header.
The window footer is extended with a label (which is displayed or hidden in response to Help button clicks)
and a color palette (which allows users to change the background color of the window's content region).
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This demo illustrates the capabilities of our client-side event technology.
All available client-side events are traced in this demo.
Click an icon next to a product name to invoke an associated popup window.
</p>
<p>
Client-side events are triggered in response to specific user actions executed on the client side
(in particular, when invoking or hiding a popup window).
Client-side event handlers represent code written in JavaScript.
In order to handle a client-side event, the sender web control provides a property that accepts
either code handling directly or the name of a handling function.
This function should be defined either directly in the page's HTML code or in a separate js file.
For each client-side event, there is a specific object, which has both server-side and client-side representations.
This object will automatically render the necessary JavaScript code to the page,
and assign it as the handler to the web control on the client side.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side technology.
Client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPopupControlSettingsBase_EnableClientSideAPItopic.aspx">EnableClientSideAPI</helplink> property is set to <b>true</b>,
or if there is a handler assigned to any client-side event. Once set, an individual client control
object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
</p>
<p>
In this demo, each popup window is identified using its <b>Name</b> property.
In order to obtain a specific popup window by its name on the client side, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_GetWindowByNametopic.aspx">GetWindowByName</helplink> method is used.
A popup window can be invoked or hidden on the client side by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_ShowWindowtopic.aspx">ShowWindow</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_HideWindowtopic.aspx">HideWindow</helplink> method
(see the <b>SetHintVisible</b> function).
</p>
<p>
In order to show or hide a default window, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_Showtopic.aspx">Show</helplink> or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_Hidetopic.aspx">Hide</helplink> method can be used
(see the <b>SetWindowErrorVisible</b> function).
</p>
<p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_SetContentHtmltopic.aspx">SetContentHtml</helplink> method is used in this demo to display the HTML code representing the default
popup window's content (see the <b>SetWindowErrorString</b> function).
The content of a specific popup window can be obtained on the client side via the
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_GetWindowContentHtmltopic.aspx">GetWindowContentHtml</helplink> method and defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_SetWindowContentHtmltopic.aspx">SetWindowContentHtml</helplink> method.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="RoundPanel" Title="Round Panel" SeoTitle="ASP.NET MVC Rounded Panel">
<Demo Key="Features" Title="Features">
<Description>
<![CDATA[<p>
This demo illustrates the key features available in the DevExpress MVC Round Panel Extension, including the display of the panel header, its content and the content of the panel itself.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Splitter" Title="Splitter" SeoTitle="ASP.NET MVC Splitter Extension">
<Demo Key="Resizing" Title="Resizing">
<Description>
<![CDATA[
<p>
The DevExpress MVC Splitter Extension allows you to create sizable webpage content,
by embedding them into splitter panes. In this demo, splitter panes contain a DevExpress
MVC <b>Grid View</b>, <b>List Edit</b>, <b>Text Box</b>, and <b>Memo</b> Extensions.
Splitter panes display separators and collapse buttons, allowing users to resize embedded controls.
</p>
<p>
Moving any splitter separator raises the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneResizedtopic.aspx">PaneResized</helplink> client event,
which can be handled to modify the size of embedded extensions.
In this demo, size adjustments are accomplished via the embedded control's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetWidthtopic.aspx">SetWidth</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetHeighttopic.aspx">SetHeight</helplink> methods.
</p>
]]>
</Description>
<SourceFile>~/Models/Northwind.cs</SourceFile>
<SourceFile>~/Views/Splitter/ResizingPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Scrolling" Title="Scrolling">
<Description>
<![CDATA[
<p>
During sizing operations, a splitter pane can be reduced so that its content no longer fits within the allocated region.
The DevExpress MVC Splitter Extension allows you to display scroll bars within a pane to prevent content clipping,
via the pane's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterSplitterPane_ScrollBarstopic.aspx">ScrollBars</helplink> property. The following options are available to you when using scroll bars:
</p>
<ul>
<li>
<b>None</b>. Scrollbars are no available.
</li>
<li>
<b>Horizontal</b>. Only a horizontal scroll bar is available within the splitter pane.
</li>
<li>
<b>Vertical</b>. Only a vertical scroll bar is available within the splitter pane.
</li>
<li>
<b>Both</b>. Both vertical and horizontal scroll bars are visible within the splitter pane.
</li>
<li>
<b>Auto</b>. The splitter automatically displays a horizontal or/and vertical scroll bar within the
splitter pane, depending upon the pane's content.
</li>
</ul>
<p>
In this demo, the splitter contains two panes. The left pane displays only a vertical scroll bar
(the <b>ScrollBar</b> property is set to <b>Vertical</b>), the second pane's scroll bars are displayed automatically
(the <b>ScrollBar</b> property is set to <b>Auto</b>).
To see how scroll bars work in this demo, start sizing panes using the splitter separator.
</p>
]]>
</Description>
</Demo>
<Demo Key="FullscreenMode" Title="Fullscreen Mode">
<Description>
<![CDATA[
<p>
This demo illustrates how to use the Splitter extension for ASP.NET MVC in full-screen mode, when a control fills an entire page and can be resized together with the browser window. To enable this mode, set the corresponding setting to true, as shown below.
</p>
<code lang="Html">
Html.DevExpress().Splitter(
settings =>
{
...
settings.FullscreenMode = true;
...
}
</code>
]]>
</Description>
<SourceFile>~/Views/Splitter/FullscreenModePage.cshtml</SourceFile>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This demo illustrates the capabilities of our client-side event technology.
All client-side events available in the DevExpress MVC Splitter Extension are traced in the demo.
To trigger these events, start to resize panes or collapse/expand them.
In this demo, you can toggle options to specify whether corresponding client-side events are traced.
</p>
<p>
Client-side events are triggered in response to specific user actions performed on the client side
(in particular, when sizing panes or toggling their collapsed state).
Client-side event handlers represent code written in JavaScript.
In order to handle a client-side event, the sender web control provides a property that accepts
either code handling directly, or the name of a handling function.
This function must be defined either directly in the page's HTML code or in a separate js file.
For each client-side event, there is a specific object, which has both server-side and client-side representations.
This object will automatically render the necessary JavaScript code to the page, and assign it as
the handler to the web control on the client side.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>
This demo illustrates how to manipulate the DevExpress MVC Splitter programmatically on the client using
our extended client-side functionality. An individual client control object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
</p>
<p>
In this demo, the splitter's visibility and size (the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSplitterSettings_AllowResizetopic.aspx">AllowResize</helplink> property)
settings can be toggled on the client via corresponding options. Option values are passed as a parameter to the
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetVisibletopic.aspx">SetVisible</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_SetAllowResizetopic.aspx">SetAllowResize</helplink> client methods.
You can expand or collapse splitter panes by using a button whose caption is changed automatically depending upon the action
(see the <b>UpdateButtonState</b> function).
On the client side, the button's functionality is based on a pane's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_Expandtopic.aspx">Expand</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_Collapsetopic.aspx">Collapse</helplink> methods.
</p>
<p>
You can also change a splitter pane's content and width via the pane's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_SetContentUrltopic.aspx">SetContentUrl</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_SetSizetopic.aspx">SetSize</helplink>
client methods.
</p>
]]>
</Description>
<SourceFile>~/Views/Splitter/SamplePage1.cshtml</SourceFile>
<SourceFile>~/Views/Splitter/SamplePage2.cshtml</SourceFile>
<SourceFile>~/Views/Splitter/SamplePage3.cshtml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="TabControl" Title="Tab Strip" SeoTitle="ASP.NET MVC Tab Panel Extension">
<Demo Key="Features" Title="Features">
<Description>
<![CDATA[
<p>
This demo describes some of the features available to you when using the DevExpress MVC Tab Extension.
</p>
<p>
Tab position (Left, Right, Top, Bottom) can be defined via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabPositiontopic.aspx">TabPosition</helplink> property.
In order to align tabs in the defined position, use the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabAligntopic.aspx">TabAlign</helplink> property.
When tabs are positioned to the left or right of the control, TabAlign defines their vertical alignment.
In this instance, the Left value is treated as Top, and the Right value is always treated as Bottom.
</p>
<p>
The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_EnableHotTracktopic.aspx">EnableHotTrack</helplink> property allows you to specify whether tabs can visually respond to mouse hover events.
</p>
<p>
By using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_SaveStateToCookiestopic.aspx">SaveStateToCookies</helplink> property, you can control whether information about the active tab
is preserved between site visits.
</p>
]]>
</Description>
</Demo>
<Demo Key="DataBindingToXML" Title="Data Binding to XML">
<Description>
<![CDATA[
<p>
This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to populate the DevExpress MVC Tab Extension
with information taken from an xml file. The xml file has the following structure:
</p>
<code lang="Xml">
<Products>
<Product name="..." text="..." id="..." />
...
</Products>
</code>
<p>
MVC Tab Extension provides the following binding methods:
</p>
<ul>
<li>
Bind(object dataObject);
</li>
<li>
BindToSiteMap(string fileName);
</li>
<li>
BindToSiteMap(string fileName, bool showStartingNode);
</li>
<li>
BindToXML(string fileName);
</li>
<li>
BindToXML(string fileName, string xPath);
</li>
</ul>
<p>
The MVC Tab Extension implements specific properties that point to the data fields containing the necessary data.
These are the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_NameFieldtopic.aspx">NameField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_NavigateUrlFieldtopic.aspx">NavigateUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_TabImageUrlFieldtopic.aspx">TabImageUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_ActiveTabImageUrlFieldtopic.aspx">ActiveTabImageUrlField</helplink>,
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_TextFieldtopic.aspx">TextField</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_ToolTipFieldtopic.aspx">ToolTipField</helplink> properties.
If these properties are not defined, the MVC Tab Extension is able to automatically bind to data fields whose
names coincide with property names of a tab object (such as the
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_Nametopic.aspx">Name</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTab_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">TabImageUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">ActiveTabImageUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_Texttopic.aspx">Text</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_ToolTiptopic.aspx">ToolTip</helplink>).
</p>
<p>
In this demo, tab navigation locations are generated by formatting values of the 'id' data field.
The 'id' data field is specified by the <b>NavigateUrlField</b> property, and a format string is defined
via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettings_NavigateUrlFormatStringtopic.aspx">NavigateUrlFormatString</helplink> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="Callbacks" Title="AJAX">
<Description>
<![CDATA[
<p>
This sample illustrates use of the AJAX-based callbacks implemented by the DevExpress MVC Tab Extension.
</p>
<p>
The Tab Extension supports AJAX with the ability to load a tab’s content from the server via a callback when the tab becomes active.
This approach allows the Tab Extension to avoid the initial transfer of all its inactive pages, thus improving page load times.
</p>
<p>
In order to activate the use of callbacks, the Tab Extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property should contain the
path to an action that handles a callback request. The best way to handle such callbacks is to use a partial view
that only contains a Tab Extension.
</p>
<p>
In this sample, we momentarily pause callback processing on the server side, so that the
Loading Panel is visible during processing.
</p>
]]>
</Description>
<SourceFile>~/Views/TabControl/CallbacksPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Scrolling" Title="Tab Scrolling">
<Description>
<![CDATA[
<p>
This demo illustrates the DevExpress MVC Tab Extension’s support for scroll buttons within its tab header.
To enable tab scrolling, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_EnableTabScrollingtopic.aspx">EnableTabScrolling</helplink> property to <b>true</b>.
Once set, if the control's size doesn't allow all tabs to be displayed within the tab header simultaneously,
scroll buttons are appear allowing end-users to scroll tabs.
Scroll button position can be specified via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabAligntopic.aspx">TabAlign</helplink> property.
</p>
<p>
Note that tab scrolling is only available when the tab header is positioned on the control's top or bottom -
the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTabControlSettingsBase_TabPositiontopic.aspx">TabPosition</helplink> property is set to <b>TabPostition.Top</b> or <b>TabPosition.Bottom</b>.
</p>
]]>
</Description>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[
<p>
This sample demonstrates the use templates within the DevExpress MVC Tab Extension.
</p>
<p>
A tab template and an active tab template are used in this demo.
These templates are assigned by using the Tab Extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_SetTabTemplateContenttopic.aspx">SetTabTemplateContent</helplink> and
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcPageControlSettings_SetActiveTabTemplateContenttopic.aspx">SetActiveTabTemplateContent</helplink> methods, respectively.
These methods contain a parameter that represents the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxTabControlTabControlTemplateContainertopic.aspx">TabTemplateContainer</helplink> object,
providing settings for a templated tab object.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event technology.
All client-side events exposed by the DevExpress MVC Tab Extension are traced in this demo.
Click an inactive tab to initiate client-side events.
</p>
<p>
Client-side events are triggered in response to specific actions or events on the client side
(in particular, to an active tab change). Client-side event handlers represent code written in JavaScript.
In order to handle a client-side event, the sender web control provides a property that accepts either handling
code directly or the name of a handling function.
This function must be defined either directly in the page's HTML code or in a separate js file.
For each client-side event, there is a specific object, which has both server-side and client-side representations.
This object will automatically render the necessary JavaScript code to the page and assign it as a
handler to the web control on the client side.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>
This example demonstrates available ways to manipulate the DevExpress MVC Tab Extension programmatically
on the client using enhanced client-side functionality.
The client object of the Tab Extension can be accessed on the client-side by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>.
</p>
<p>
The Tab Extension allows a tab’s content to be changed dynamically on the client side by using the
<helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientPageControl_SetTabContentHTMLtopic.aspx">SetTabContentHTML</helplink> method. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_GetActiveTabtopic.aspx">GetActiveTab</helplink> method can be used to access the currently active tab.
</p>
<p>
The <b>ShowTabContent</b> function displays (in a specific text region) the HTML code which represents
the active tab’s content. The content of the active tab is obtained via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientPageControl_GetTabContentHTMLtopic.aspx">GetTabContentHTML</helplink> method.
</p>
<p>
The <b>ActiveTabChanged</b> function represents the hander for the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_ActiveTabChangedtopic.aspx">ActiveTabChanged</helplink> client event.
The event's argument contains information on the active tab which is used to synchronize the value of the dropdown editor.
</p>
<p>
A tab can be activated by using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_SetActiveTabtopic.aspx">SetActiveTab</helplink> method.
In this demo, each tab is identified using its server-side <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlTabBase_Nametopic.aspx">Name</helplink> property.
In order to obtain a specific tab by its name on the client side, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_GetTabByNametopic.aspx">GetTabByName</helplink> method is used.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="TreeView" Title="TreeView" SeoTitle="ASP.NET MVC Tree View Extension">
<Demo Key="Features" Title="Features">
<Description>
<![CDATA[
<p>This demo illustrates the key features of the DevExpress MVC TreeView. Use the options in the right panel to change values of corresponding TreeView settings and view result of your changes within the TreeView.</p>
<p>Property Descriptions:</p>
<ul>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_AllowSelectNodetopic.aspx">AllowSelectNode</helplink> - Activates node selection. If this option is enabled, clicking a node selects it. Only one node can be selected at a time.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_EnableAnimationtopic.aspx">EnableAnimation</helplink> - Specifies whether nodes are expanded/collapsed with animation effects.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_EnableHotTracktopic.aspx">EnableHotTrack</helplink> - Specifies whether nodes are hot-tracked when the mouse pointer is positioned over them.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ShowTreeLinestopic.aspx">ShowTreeLines</helplink> - Toggles tree line visbility.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ShowExpandButtonstopic.aspx">ShowExpandButtons</helplink> - Toggles the visibility of expand buttons. End-users can always expand or collapse nodes by double-clicking them.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_AllowCheckNodestopic.aspx">AllowCheckNodes</helplink> - Specifies whether end-users can check nodes using corresponding check boxes. Disabling thgis option hides check boxes.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_CheckNodesRecursivetopic.aspx">CheckNodesRecursive</helplink> - If node checking is enabled, use this option to allow end-users to recursively check nodes. In this mode, checking a node automatically checks all its immediate child nodes and vice versa.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="DataBindingToXML" Title="Data Binding to XML">
<Description>
<![CDATA[
<p>This demo illustrates how the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewExtension_BindToXMLtopic.aspx">BindToXML</helplink> method can be used to populate the DevExpress MVC TreeView with node information taken from an xml file. The source XML file contains hierarchical information about a set of classes and their members (properties, methods, events).</p>
<p>The MVC TreeView ships with the following data binding methods:</p>
<ul>
<li>Bind(object dataObject);</li>
<li>BindToSiteMap(string fileName);</li>
<li>BindToSiteMap(string fileName, bool showStartingNode);</li>
<li>BindToXML(string fileName);</li>
<li>BindToXML(string fileName, string xPath);</li>
<li>BindToXML(string fileName, string xPath, string transformFileName);</li>
</ul>
<p>TreeView implements specific properties that point to the data fields containing necessary data. These are the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_TextFieldtopic.aspx">TextField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ImageUrlFieldtopic.aspx">ImageUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_NavigateUrlFieldtopic.aspx">NavigateUrlField</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_NameFieldtopic.aspx">NameField</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_ToolTipFieldtopic.aspx">ToolTipField</helplink> properties. If these properties are not defined, the TreeView is able to automatically bind to data fields whose names coincide with property names of a <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebMvcMVCxTreeViewNodetopic.aspx">MVCxTreeViewNode</helplink> object (such as the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_Texttopic.aspx">Text</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic.aspx">ImageUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_NavigateUrltopic.aspx">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_Nametopic.aspx">Name</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewTreeViewNode_ToolTiptopic.aspx">ToolTip</helplink>).</p>
<p>In this demo, the <b>TextField</b>, <b>ImageUrlField</b>, and <b>NavigateUrlField</b> properties are used to specify the names of data item attributes from which corresponding node settings are obtained. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_NodeDataBoundtopic.aspx">NodeDataBound</helplink> property is used to define a delegated method, changing the text style of nodes which represent classes (text is displayed in bold).</p>
]]>
</Description>
</Demo>
<Demo Key="Callbacks" Title="AJAX">
<Description>
<![CDATA[
<p>This sample demonstrates the use of the AJAX-based callbacks implemented by the DevExpress MVC TreeView.</p>
<p>The MVC TreeView supports AJAX with the ability to load the content of parent nodes from the server via callbacks. This approach allows the TreeView to avoid the initial transfer of all node data to the client, thus improving page load times.</p>
<p>In order to activate use of callbacks, the TreeViews's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property should contain the path to an action that handles a callback request. The best way to handle such callbacks is to use a partial view that only contains a TreeView. In this instance, the contents of the collapsed nodes are not represented on the client. When a parent node is expanded for the first time, its content is retrieved from the server and then cached on the client. The next time the node is expanded, its content is taken from the client and no callback to the server is performed.</p>
<p>In this example, we momentarily pause callback processing on the server side, so that the Loading Panel is visible during processing.</p>
]]>
</Description>
<SourceFile>~/Views/TreeView/CallbacksPartial.cshtml</SourceFile>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[
<p>This sample demonstrates the use of templates within the DevExpress MVC TreeView.</p>
<p>Templates for the content of parent nodes and the child nodes are used in this demo. These templates are assigned by using the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_SetNodeTemplateContenttopic.aspx">SetNodeTemplateContent</helplink> method. This method contains a parameter that represents the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxTreeViewTreeViewNodeTemplateContainertopic.aspx">TreeViewNodeTemplateContainer</helplink> object, providing settings of a templated element.</p>
]]>
</Description>
</Demo>
<Demo Key="VirtualMode" Title="Virtual Mode">
<Description>
<![CDATA[
<p>In addition to bound and unbound modes, the TreeView extension can operate in a Virtual Mode, which greatly reduces both the server load and start-up time when working with complex or dynamically created data. In a virtual mode, a tree is created on demand. In this instance, child nodes are created and initialized when their parent node is expanded. </p>
<p>To implement a virtual mode for the TreeView extension, you should use a specifically parameterized <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewExtension_BindToVirtualDatatopic.aspx">BindToVirtualData</helplink> method. The method's parameter refers to the delegate method that can be declared as a static method within a model class. Within this delegate method, create a list of business objects that correspond to the child nodes owned by the processed node.</p>
<p>In this demo, the TreeView extension uses this data binding method to display the file/folder tree of this demo's website.</p>
]]>
</Description>
<SourceFile>~/Models/VirtualMode/TreeViewVirtualModeHelper.cs</SourceFile>
<SourceFile>~/Views/TreeView/VirtualModePartial.cshtml</SourceFile>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events">
<Description>
<![CDATA[
<p>This demo traces all client-side events available in the DevExpress MVC TreeView.</p>
<p>Client-side events are triggered in response to specific user actions performed on the client side (in particular, when clicking nodes or changing their expanded state). Client-side event handlers represent code written in JavaScript. In order to handle a client-side event, a property is provided via ClientSideEvents, accepting either code handling directly or the name of a handling function.</p>
<p>In this demo, the following client events are traced by default:</p>
<ul>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic.aspx">Init</helplink>. Occurs after the TreeView has been initialized, but prior to it being displayed within the browser.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangingtopic.aspx">ExpandedChanging</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangedtopic.aspx">ExpandedChanged</helplink>. Fires before and after a node's expansion state has been changed.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CheckedChangedtopic.aspx">CheckedChanged</helplink>. Fires after a node's checked state has been changed.</li>
<li><helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_NodeClicktopic.aspx">NodeClick</helplink>. Fires after a node has been clicked.</li>
</ul>
<p>You can toggle options to specify whether corresponding client-side events are traced.</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>This demo describes how you can manipulate the DevExpress MVC TreeView programmatically on the client, using extended client-side functionality.</p>
<p>The client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcTreeViewSettings_EnableClientSideAPItopic.aspx">EnableClientSideAPI</helplink> property is set to true or if there is a handler assigned to any client-side event. Once set, an individual client control object can be referenced directly by its <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcSettingsBase_Nametopic.aspx">Name</helplink>. In the demo, the MVC TreeView’s client-side API is used to do the following:</p>
<ul>
<li>Toggle the visibility of the TreeView via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetVisibletopic.aspx">SetVisible</helplink> client method.</li>
<li>Synchronize the currently selected TreeView node with the combo box, providing a list of nodes via the TreeView’s <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_NodeClicktopic.aspx">NodeClick</helplink> client event handler.</li>
<li>Display node properties and synchronize them with corresponding options displayed within the right-hand panel. Nodes are identified using names assigned via the corresponding property. A node's client object is accessed via the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_GetNodeByNametopic.aspx">GetNodeByName</helplink> client method. To change a TreeView’s node state, the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_SetSelectedNodetopic.aspx">SetSelectedNode</helplink> option values in response to expanded and checked state changes via the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangedtopic.aspx">ExpandedChanged</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CheckedChangedtopic.aspx">CheckedChanged</helplink> client event handlers. client method and the node's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetEnabledtopic.aspx">SetEnabled</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetVisibletopic.aspx">SetVisible</helplink>, <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetCheckedtopic.aspx">SetChecked</helplink>, or <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetExpandedtopic.aspx">SetExpanded</helplink> client methods are used.</li>
<li>Update option values in response to expanded and checked state changes via the TreeView's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangedtopic.aspx">ExpandedChanged</helplink> and <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CheckedChangedtopic.aspx">CheckedChanged</helplink> client event handlers.</li>
</ul>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="UploadControl" Title="File Upload" SeoTitle="ASP.NET MVC File Uploader">
<Demo Key="MultiFileSelection" Title="Multi-File Selection">
<Description>
<![CDATA[
<p>
This demo illustrates UploadControl's multi-file selection capability. It allows end-users to choose several files to upload within a single file open dialog. This demo also shows how a custom popup progress panel can be implemented to display upload progress information for both the currently processed file and the entire uploaded data.
</p><p>
By default, the multi-file selection mode is disabled. To enable it, switch the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadAdvancedModeSettings_EnableMultiSelecttopic.aspx">AdvancedModeSettings.EnableMultiSelect</helplink> property to true.
</p><p>
When multi-file selection is on, the UploadControl text box is used to display information about the current file selection. When selecting a single file, the text box contains the selected file name. When multiple files are selected, the text box displays the total number of selected files. In this case, the text box' tooltip will contain a list of the selected files.
</p><p>
A list of files selected for upload can be easily cleared by using the "Clear file selection" button. By default, this button automatically appears within the text box when any file is selected. To disable the button functionality, set the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_ShowClearFileSelectionButtontopic.aspx">ShowClearFileSelectionButton</helplink> property to false.
</p><p>
In this demo, you will learn how to handle the UploadControl's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControl_UploadingProgressChangedtopic.aspx">UploadingProgressChanged</helplink> client event to obtain information about file upload progress, and to use this information to calculate the speed of an upload and forecast the estimated upload time.
</p>]]>
</Description>
<SourceFile>~/Views/UploadControl/MultiFileSelectionPartial.cshtml</SourceFile>
</Demo>
<Demo Key="MultiFileUpload" Title="Multi-File Upload">
<Description>
<![CDATA[
<p>
This demo illustrates the DevExpress MVC Upload Extension’s ability to upload more than one file at a time. The Upload Extension allows end-users to upload files to the web application's server.
</p><p>
The Upload Extension allows any number of file input elements to be added or removed dynamically via the extension’s user interface. The <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_ShowAddRemoveButtonstopic.aspx">ShowAddRemoveButtons</helplink> property controls the availability of corresponding user interface elements. The initial number of file input elements can be defined using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_FileInputCounttopic.aspx">FileInputCount</helplink> property.
</p><p>
All file input element manipulations are executed on the client side. Corresponding server-side synchronization is executed on the first round-trip to the server.
</p><p>
On the server, uploaded files can be accessed using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlExtension_GetUploadedFilestopic.aspx">UploadControlExtension.GetUploadedFiles</helplink> static method. Each uploaded file can be validated using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadedFile_IsValidtopic.aspx">UploadedFile.IsValid</helplink> property and can be saved via the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadedFile_SaveAstopic.aspx">UploadedFile.SaveAs</helplink> method.
</p><p>
In this demo, clicking the 'Add images to collection' button initiates a round-trip for multi-file upload. All valid uploaded images are displayed within the bottom panel.
</p>]]>
</Description>
</Demo>
<Demo Key="Callbacks" Title="AJAX Uploading">
<Description>
<![CDATA[
<p>
The DevExpress MVC File Upload Extension allows end-users to upload files to an application server. In this demo, both client and server capabilities are used to upload an image file to the server via a callback, create the image's thumbnail, and display the thumbnail within a specific placeholder on the web page.
</p><p>
A callback for file upload is initiated by using the Upload Extension’s <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControl_Uploadtopic.aspx">Upload</helplink> client method - called in response to a button click. In order to process callbacks properly, the Upload Extension's <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlSettings_CallbackRouteValuestopic.aspx">CallbackRouteValues</helplink> property is used to specify the path to a controller action used to handle a callback request. In the action's implementation, the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebMvcUploadControlExtension_GetUploadedFilestopic.aspx">UploadControlExtension.GetUploadedFiles</helplink> static method with specific parameters is used to process the uploaded file. One of the parameters identifies a delegate method that receives the <helplink href="http://help.devexpress.com/AspNet/clsDevExpressWebASPxUploadControlFileUploadCompleteEventArgstopic.aspx">FileUploadCompleteEventArgs</helplink> argument. Using this argument, the delegate method implements all the logic to save the uploaded file (using the <helplink href="http://help.devexpress.com/AspNet/DevExpressWebASPxUploadControlUploadedFile_SaveAstopic.aspx">e.UploadedFile.SaveAs</helplink> method) and display its thumbnail in a placeholder.
</p>]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<Search>
<Synonyms>
<Group>datasource, databinding, binding, database, databind</Group>
<Group>grid, gridview, gridviewcontrol, aspxgridview</Group>
<Group>eXpress, Persistent, xpo</Group>
</Synonyms>
<Exclusions>
<Words>devexpress, dx, asp, devex, asp.net, demo, demos, web</Words>
<Prefixes>aspx, asp, xtra, client, dx, web</Prefixes>
<Postfixes>s, ing, control, e</Postfixes>
</Exclusions>
</Search>
</Demos>