Mini Kabibi Habibi
<?xml version="1.0" encoding="utf-8" ?>
<Demos xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="Demos.xsd">
<GlobalHeader LogoPlatformSubject="ASP.NET AJAX" LogoPlatformDescription="THE WEB, YOUR WAY">
</GlobalHeader>
<DemoProduct Key="Integration" Url="asp" IsRootDemo="true" Title="DevExpress ASP.NET AJAX Controls" SeoTitle="ASP.NET AJAX Control Demos" SupportsTheming="false" NavItemTitle="Over 90 ASP.NET Controls">
<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_Doc.aspx
</DocUrl>
<Intro Title="Online Demos" SeoTitle="ASP.NET AJAX Control Demos">
<BannerTitle>
DevExpress Controls for ASP.NET AJAX
</BannerTitle>
<BannerText>
A rich set of controls built on top of Microsoft ASP.NET AJAX framework to provide outstanding performance, unmatched reliability, and great customization capabilities.
</BannerText>
<BannerImageUrl></BannerImageUrl>
<BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of DevExpress ASP.NET controls
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates the features and capabilities available to you when using DevExpress controls for ASP.NET. The key features include:
</p>
]]>
</Description>
<ExternalDemo Title="Webmail Client" Url="http://demos.devexpress.com/RWA/WebmailClient/" ImageUrl="~/Content/DemoIcons/WebmailClient.png" />
<ExternalDemo Title="Hotel Booking" Url="http://demos.devexpress.com/RWA/HotelBooking/" ImageUrl="~/Content/DemoIcons/HotelBooking.png" />
<ExternalDemo Title="Video Portal" Url="http://demos.devexpress.com/RWA/VideoPortal/" ImageUrl="~/Content/DemoIcons/VideoPortal.png" />
<ExternalDemo Title="Event Registration" Url="http://demos.devexpress.com/RWA/EventRegistration/" ImageUrl="~/Content/DemoIcons/EventRegistration.png" />
<ExternalDemo Title="Home Realtor" Url="http://demos.devexpress.com/RWA/HomeRealtor/TabletViewer/" ImageUrl="~/Content/DemoIcons/HomeRealtor.png" />
<ExternalDemo Title="Touch Board" Url="http://demos.devexpress.com/RWA/TouchBoard/TabletViewer/" ImageUrl="~/Content/DemoIcons/TouchBoard.png" />
<ExternalDemo Title="Money Monkey" Url="http://demos.devexpress.com/RWA/MoneyMonkey/" ImageUrl="~/Content/DemoIcons/MoneyMonkey.png" />
<ExternalDemo Title="Tablet Money Monkey" Url="http://demos.devexpress.com/RWA/MoneyMonkey/Mobile/tabletviewer/" ImageUrl="~/Content/DemoIcons/MoneyMonkeyTablet.png" />
</Intro>
</DemoProduct>
<DemoProduct Key="XtraCharts" Url="XtraChartsDemos" Title="DevExpress XtraCharts" SeoTitle="ASP.NET AJAX Chart Control" SupportsTheming="false" NavItemTitle="Charting" OrderIndex="2" IntegrationHighlighted="true">
<Keywords>
Chart, Charts, XtraChart, Charting, ChartControl, Diagram, Visualization, Analyze, DataAnalyze, Analysis, DataAnalysis
</Keywords>
<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_DemoCenter_XtraChartsAsp_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Chart.png</IntegrationImageUrl>
<IntegrationDescription>
There are over 55 chart types for both 2D and 3D charting, featuring native integration with the DevExpress OLAP Data Mining Pivot Grid control and the DevExpress Reporting Platform.
</IntegrationDescription>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Chart Control">
<BannerTitle>
2D and 3D Charting Control for ASP.NET
</BannerTitle>
<BannerText>
There are over 55 chart types for both 2D and 3D charting, featuring native integration with the DevExpress OLAP Data Mining Pivot Grid control and the DevExpress Reporting Platform.
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the XtraCharts Suite
</DescriptionTitle>
<Description>
<![CDATA[
This website demonstrates some of the many features and capabilities available to you when using our <b>XtraCharts Suite</b>. These features include:
]]>
</Description>
</Intro>
<DemoGroup Key="BarViewTypes" Title="Bar Views">
<Keywords>BarViews, ViewBars</Keywords>
<Demo Key="BarSeries" Title="Bar" SeoTitle="2D Bar Chart">
<Keywords>2dbars, 2dchart</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates a <b>Side-By-Side Bar</b> series view, which is useful when it is necessary to compare both the point values and their aggregate for the same point arguments.</p>
<p>
In this demo, you can show the series point labels (when the Show Labels option is enabled), and adjust their position relative to Bars (via the Label Position and Orientation drop-down lists).</p>
<p>
When the labels are positioned inside the Bars, you can specify the inner indent from the corresponding Bar edge (via the Label Indent editor).</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPCharts2DBar">ASP.NET Charts - 2D Bar Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="BarStackedSeries" Title="Stacked Bar" SeoTitle="2D Stacked Bar Chart">
<Keywords>StackedBar, BarStacked, 2dbars, 2dchart</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates a <b>Stacked Bars</b> series view, which is useful when it is necessary to compare both the point values and their aggregate for the same point arguments.</p>
<p>
In this demo, you can show the series point labels (when the Show Labels option is enabled), and adjust their position relative to Bars (via the Label Position and Orientation drop-down lists).</p>
<p>
When the labels are positioned inside the Bars, you can specify the inner indent from the corresponding Bar edge (via the Label Indent editor).</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsStackedBar">ASP.NET Charts – Stacked Bar Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="BarFullStackedSeries" Title="Full-Stacked Bar" SeoTitle="2D Full-Stacked Bar Chart">
<Keywords>2dbars, 2dchart</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates a <b>Full-Stacked Bars</b> series view, which is useful when it is necessary to compare both the point values and their aggregate for the same point arguments.</p>
<p>
In this demo, you can show the series point labels (when the Show Labels option is enabled), and adjust their position relative to Bars (via the Label Position and Orientation drop-down lists).</p>
<p>
When the labels are positioned inside the Bars, you can specify the inner indent from the corresponding Bar edge (via the Label Indent editor).</p>
<p>
In addition, you can choose whether the labels reflect the real values, or percentages (via the Value As Percent check box).</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsFullStackedBar">ASP.NET Charts – Full Stacked Bar Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="BarStackedSideBySideSeries" Title="Side-by-Side Stacked Bar" SeoTitle="2D Side-by-Side Stacked Bar Chart">
<Keywords>2dbars, 2dchart</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Side-by-Side Stacked Bar</b> series view.
</p><p>This view allows you to stack series having a similar StackedGroup property value into the same bars. So, this view combines advantages of both the Side-by-Side Bar and Stacked Bar view types.</p><p>In this demo, you can group series either by sex or age.</p>]]>
</Description>
</Demo>
<Demo Key="BarFullStackedSideBySideSeries" Title="Side-by-Side Full-Stacked Bar" SeoTitle="2D Side-by-Side Full-Stacked Bar Chart">
<Keywords>2dbars, 2dchart, StackedGroup</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Side-by-Side Full-Stacked Bar</b> series view.
</p><p>This view allows you to stack series having a similar StackedGroup property value into the same bars. So, this view combines advantages of both the Side-by-Side Bar and Full-Stacked Bar view types.</p><p>In this demo, you can group series either by sex or age.</p>]]>
</Description>
</Demo>
<Demo Key="Bar3DSeries" Title="3D Bar" SeoTitle="3D Bar Chart">
<Keywords>3dbars, 3dchart</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Bars</b> series view.</p>
<p>
This view is also called the <b>Side-by-Side Bar View</b>, and is useful for showing the values of several series for the same points arguments.</p>
<p>
In this view the bars height indicates how much the values of one series differ from the values of another series at the same point.</p>
<p>
In this demo, you're able to change the visibility of point labels, and enable the top facet for flat-top 3D models by using the corresponding check boxes.</p>
<p>
To choose a 3D model used to draw series points, and to change the view’s transparency value, use the corresponding drop-down lists.</p>
<p>
In addition, you can use the <b>Perspective Angle</b> and <b>Zoom Percent</b> drop-down lists, to adjust the visual representation of the view.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPCharts3DBar">ASP.NET Charts – 3D Bar Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="Bar3DStackedSeries" Title="3D Stacked Bar" SeoTitle="3D Stacked Bar Chart">
<Keywords>3dbars, 3dchart, 3DStacked</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Stacked Bars</b> series view.</p>
<p>
This view is useful when it is necessary to compare both the points values and their aggregate for the same points arguments.</p>
<p>
In this demo, you're able to change the visibility of point labels, and enable the top facet for flat-top 3D models by using the corresponding check boxes.</p>
<p>
To choose a 3D model used to draw series points, and to change the view’s transparency value, use the corresponding drop-down lists.</p>
<p>
In addition, you can use the <b>Perspective Angle</b> and <b>Zoom Percent</b> drop-down lists, to adjust the visual representation of the view.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPCharts3DStackedBar">ASP.NET Charts - 3D Stacked Bar Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="Bar3DFullStackedSeries" Title="3D Full-Stacked Bar" SeoTitle="3D Full-Stacked Bar Chart">
<Keywords>3dbars, 3dchart</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Full-Stacked Bars</b> series view.
</p><p>This view is also called the 100% Stacked Bars view, and is useful for comparing the percent values of several series for the same points arguments.</p><p>
In this demo, you're able to change the visibility of point labels, and enable the top facet for flat-top 3D models by using the corresponding check boxes.
</p><p>
To choose a 3D model used to draw series points, and to change the view’s transparency value, use the corresponding drop-down lists.
</p><p>
In addition, you can use the <b>Perspective Angle</b> and <b>Zoom Percent</b> drop-down lists, to adjust the visual representation of the view.
</p>]]>
</Description>
</Demo>
<Demo Key="Bar3DStackedSideBySideSeries" Title="3D Side-by-Side Stacked Bar" SeoTitle="3D Side-by-Side Stacked Bar Chart">
<Keywords>3dbars, 3dchart</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Side-by-Side Stacked Bar</b> series view.
</p><p>This view allows you to stack series having a similar StackedGroup property value into the same bars. So, this view combines advantages of both the Side-by-Side Bar and Stacked Bar view types.</p><p>In this demo, you can group series either by sex or age.</p>]]>
</Description>
</Demo>
<Demo Key="Bar3DFullStackedSideBySideSeries" Title="3D Side-by-Side Full-Stacked Bar" SeoTitle="3D Side-by-Side Full-Stacked Bar Chart">
<Keywords>3dbars, 3dchart</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Side-by-Side Full-Stacked Bar</b> series view.
</p><p>This view which allows you to stack series having a similar StackedGroup property value into the same bars. So, this view combines advantages of both the Side-by-Side Bar and Full-Stacked Bar view types.</p><p>In this demo, you can group series either by sex or age.</p>]]>
</Description>
</Demo>
<Demo Key="ManhattanBarSeries" Title="3D Manhattan Bar" SeoTitle="3D Manhattan Bar Chart">
<Keywords>3dbars, 3dchart, 3DManhattan</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Manhattan Bars</b> series view.</p>
<p>
This view is useful to display series of individual bars, grouped by category.</p>
<p>
In this demo, you're able to change the visibility of point labels, and enable the top facet for flat-top 3D models by using the corresponding check boxes.</p>
<p>
To choose a 3D model used to draw series points, and to change the view’s transparency value, use the corresponding drop-down lists.</p>
<p>
In addition, you can use the <b>Perspective Angle</b> and <b>Zoom Percent</b> drop-down lists, to adjust the visual representation of the view.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPCharts3DManhattanBar">ASP.NET Charts - 3D Manhattan Bar Chart</a></p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="PointAndLineViewTypes" Title="Point/Line Views">
<Keywords>PointView, LineView</Keywords>
<Demo Key="PointSeries" Title="Point" SeoTitle="2D Point Chart">
<Keywords>2dchart, 2Dpoint</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Point</b> series view.
</p><p>This view is useful when it is necessary to show points from different series on the same chart plot.</p><p>Click the "Create Points" button to generate new random populations of explanatory points.</p><p>In this demo, you're able to change labels visibility, specify the type and size of series point markers and set the angle between labels and point markers.</p>]]>
</Description>
</Demo>
<Demo Key="BubbleSeries" Title="Bubble" SeoTitle="2D Bubble Chart">
<Keywords>2dchart, 2DBubble</Keywords>
<Description>
<![CDATA[<p>
This demo shows a <b>Bubble</b> series view.
</p><p>This chart, in addition to the XY point diagram capabilities, allows you to visually represent the Weight of a series point by a bubble's size.</p><p>In this demo, you can change labels' position, choose the kind of a marker and define the minimum and maximum bubble size.</p>]]>
</Description>
</Demo>
<Demo Key="LineSeries" Title="Line" SeoTitle="2D Line Chart">
<Keywords>2dchart, 2DLine</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Line</b> series view.
</p><p>This view is useful when you need to show line trends for several series on the same diagram and to compare the values of several series for the same points arguments.</p><p>In this demo, you're able to change labels visibility, specify the type and size of series point markers and set the angle between labels and point markers.</p>]]>
</Description>
</Demo>
<Demo Key="StackedLineSeries" Title="Stacked Line" SeoTitle="2D Stacked Line Chart">
<Keywords>2dchart, 2DStacked</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the <b>Stacked Line</b> series view, which is useful when it's necessary to compare how much each series adds to the total aggregate value for specific arguments.</p>
<p>
In this demo you can toggle the visibility of series labels, as well as change the kind and size of series markers.</p>]]>
</Description>
</Demo>
<Demo Key="FullStackedLineSeries" Title="Full-Stacked Line" SeoTitle="2D Full-Stacked Line Chart">
<Keywords>2dchart, 32StepLine</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the <b>Full-Stacked Line</b> series view, which is useful when it's necessary to compare how much each series adds to the total aggregate value for specific arguments (as percents).</p>
<p>
In this demo you can toggle the visibility of series labels, specify what should be displayed in series labels, as well as change the kind and size of series markers.</p>]]>
</Description>
</Demo>
<Demo Key="StepLineSeries" Title="Step Line" SeoTitle="2D Step Line Chart">
<Keywords>2dchart, 3dStepLine</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Step Line</b> series view.</p>
<p>
This view is useful when you need to show by how much values have changed for different points of the same series.</p>
<p>
In this demo, you're able to change labels visibility, specify the type and size of series point markers and set the angle between labels and point markers.</p>
<p>
Also you can toggle the "Inverted" option to specify whether these steps are shown as inverted or not.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsStepLine">ASP.NET Charts - Step Line Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="SplineSeries" Title="Spline" SeoTitle="2D Spline Chart">
<Keywords>2dchart, 3dSpline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Spline</b> series view.</p>
<p>
This view is similar to the Line chart, but plots a fitted curve through each data point in a series.</p>
<p>
In this demo, you're able to change labels visibility, specify the type and size of series point markers and set the angle between labels and point markers.</p><p>Also you can change the line tension percent using the corresponding combo-box.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsSpline">ASP.NET Charts - Spline Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="ScatterLineSeries" Title="Scatter Line" SeoTitle="2D Scatter Line Chart">
<Keywords>2dchart, 3dScatter</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates a Scatter Line series view, whose main characteristic is that the series' points are inter-connected by lines in the same sequence they have in the points' collection, without sorting and aggregating them by arguments. In other aspects, this view is similar to the Line view.</p>
<p>
In this demo, the series represents the well-known Archimedian spiral, and you also can make it display a cardioid, or a Cartesian folium, using the <b>"Function"</b> combo box. In addition, you can specify the kind and size of points' markers, disable markers, and display labels for series points.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsScatterLine">ASP.NET Charts - Scatter Line Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="Line3DSeries" Title="3D Line" SeoTitle="3D Line Chart">
<Keywords>3dchart, 3dline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Line</b> series view.</p>
<p>
This view is useful to display series of individual line, grouped by category.</p>
<p>
In this demo, you're able to change the visibility of point labels and specify the required perspective options using the Perspective Angle drop-down list.</p>
<p>
Also, use the Zoom Percent combo box to zoom into or out of the view.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPCharts3DLine">ASP.NET Charts - 3D Line Chart</a></p>]]>
</Description>
</Demo>
<Demo Key="StackedLine3DSeries" Title="3D Stacked Line" SeoTitle="3D Stacked Line Chart">
<Keywords>3dchart, 3DStacked</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the <b>3D Stacked Line</b> series view, which is useful when it's necessary to compare how much each series adds to the total aggregate value for specific arguments.</p>
<p>
In this demo, you're able to change the visibility of point labels and specify the required perspective options using the Perspective Angle drop-down list.</p>
<p>
Also, use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="FullStackedLine3DSeries" Title="3D Full-Stacked Line" SeoTitle="3D Full-Stacked Line Chart">
<Keywords>3dchart, 3dfullstacked, 3DStacked, 3dline</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the <b>3D Full-Stacked Line</b> series view, which is useful when it's necessary to compare how much each series adds to the total aggregate value for specific arguments (as percents).</p>
<p>
In this demo, you're able to change the visibility of point labels, specify what should be displayed in these labels, as well as specify the required perspective options using the Perspective Angle drop-down list.</p>
<p>
Also, use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="StepLine3DSeries" Title="3D Step Line" SeoTitle="3D Step Line Chart">
<Keywords>3dbars, 3dchart, 3DStepLine</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Step Line</b> series view.
</p><p>This view is useful when you need to show by how much values have changed for different points of the same series.</p><p>In this demo, you're able to change the visibility of point labels and specify the required perspective options using the Perspective Angle drop-down list.</p><p>Use the Zoom Percent combo box to zoom into or out of the view.</p><p>Also you can toggle the "Inverted" option to specify whether these steps are shown as inverted or not.</p>]]>
</Description>
</Demo>
<Demo Key="Spline3DSeries" Title="3D Spline" SeoTitle="3D Spline Chart">
<Keywords>3dchart, 3DSpline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Spline</b> series view.
</p><p>This view is similar to the 3D Line chart, but plots a fitted curve through each data point in a series.</p><p>In this demo, you're able to change the visibility of point labels and specify the required perspective options using the Perspective Angle drop-down list.</p><p>Also, use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="PieViewTypes" Title="Pie/Doughnut Views">
<Demo Key="PieSeries" Title="Pie" SeoTitle="2D Pie Chart">
<Keywords>2dchart, 2DPie</Keywords>
<Description>
<![CDATA[<p>
This demo shows the series' <b>Pie View</b>, which is used to compare percentage values of different point arguments in the same series.
</p><p>In this demo, you're able to change pie labels visibility and position, as well as to specify whether real values are shown for each point label or for the corresponding percentage.</p><p>
Also, you may choose which pie slices should be exploded. For this, either use the <b>Exploded Points</b> drop-down list, or manually click on the required pie slice within a chart, and it will be dynamically exploded or imploded using callbacks.
</p>]]>
</Description>
</Demo>
<Demo Key="DoughnutSeries" Title="Doughnut" SeoTitle="2D Donut Chart">
<Keywords>2dchart, 2DDonut</Keywords>
<Description>
<![CDATA[<p>
This demo shows the series' <b>Doughnut View</b>, which is similar to the <b>Pie View</b>, but displays a pie with a hole of a non-zero radius.
</p><p>In this demo, you're able to change pie labels visibility and position, as well as to specify whether real values are shown for each point label or for the corresponding percentage.</p><p>
In addition, you may change the chart hole's radius percentage via the <b>Hole Radius</b> drop-down list to see how this affects the chart's look.
</p><p>
Also, you may choose which pie slices should be exploded. For this, either use the <b>Exploded Points</b> drop-down list, or manually click on the required pie slice within a chart, and it will be dynamically exploded or imploded using callbacks.
</p>]]>
</Description>
</Demo>
<Demo Key="Pie3DSeries" Title="3D Pie" SeoTitle="3D Pie Chart">
<Keywords>3dchart, 3DPie</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D series' <b>Pie View</b>, which is used to compare percentage values of different point arguments in the same series.
</p><p>
Use the <b>Label Position</b> drop-down list to specify the way in which pie labels are positioned within pie slices.
</p><p>
Uncheck the <b>Show Labels</b> check box to hide point labels.
</p><p>
Leave the <b>Value as Percent</b> check box checked to display values in percents within point labels.
</p><p>
The <b>Exploded Points</b> and <b>Explode Distance</b> drop-down lists allow you to define which pie slices should be exploded and specify the explode distance, respectively.
</p>]]>
</Description>
</Demo>
<Demo Key="Doughnut3DSeries" Title="3D Doughnut" SeoTitle="3D Donut Chart">
<Keywords>3dchart, 3DDoughnut</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D series' <b>Doughnut View</b>, which is similar to the <b>Pie View</b>, but displays a pie with a hole of a non-zero radius.
</p><p>In this demo, you're able to change pie labels visibility and position, as well as to specify whether real values are shown for each point label or for the corresponding percentage.</p><p>In addition, you may change the chart hole's radius percentage to see how this affects the chart's look.</p><p>
Also, you may choose which pie slices should be exploded. For this, use the <b>Exploded Points</b> drop-down list.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="FunnelViewTypes" Title="Funnel Views">
<Demo Key="FunnelSeries" Title="Funnel" SeoTitle="2D Funnel Charts">
<Keywords>2dchart, 2DFunnel</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates a Funnel series view, typically used to represent stages in a sales process and show the amount of potential revenue for each stage. A funnel chart displays values as progressively decreasing proportions. The size of the area is determined by the series value as a percentage of the total of all values, which is normally equal to the maximum value among the points' collection.
</p><p>
In this demo, you can specify the position and text format of points' labels, enable auto-size for the series, or manually define its height-to-width ratio. In addition, you can check whether to align the series to center, and specify the distance between points.
</p>]]>
</Description>
</Demo>
<Demo Key="Funnel3DSeries" Title="3D Funnel" SeoTitle="3D Funnel Charts">
<Keywords>3dchart, 3DFunnel</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates a 3D Funnel series view, which is typically used to represent stages in a sales process and show the amount of potential revenue for each stage. A funnel chart displays values as progressively decreasing proportions. The size of the area is determined by the series value as a percentage of the total of all values, normally equal to the maximum value among the points' collection.
</p><p>
You can specify the position and text format of points' labels, define the ratio of the funnel's hole to its radius, the distance between points, the height-to-width ratio of the series, by using the appropriate editors.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="AreaViewTypes" Title="Area Views">
<Demo Key="AreaSeries" Title="Area" SeoTitle="2D Area Chart">
<Keywords>2dchart, 2darea</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Area</b> series view.
</p><p>This view is useful when you need to show trends for several series on the same diagram and also show the relationship of parts to a whole.</p><p>In this demo, you're able to change labels visibility, set the angle between labels and point markers, and specify the type and size of series point markers.</p><p>Also you may specify the transparency value to apply to all Area series simultaneously.
</p><p>NOTE: This demo is marked as 'Updated' because it demonstrates multi-line labels for the X-axis.</p>]]>
</Description>
</Demo>
<Demo Key="AreaStackedSeries" Title="Stacked Area" SeoTitle="2D Stacked Area Chart">
<Keywords>2dchart, 2dstacked, 2darea</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Stacked Area</b> series view.
</p><p>This view is useful when it is necessary to compare both the points values and their aggregate for the same points arguments.</p><p>In this demo, you're able to change the visibility of series points labels.</p>]]>
</Description>
</Demo>
<Demo Key="AreaFullStackedSeries" Title="Full-Stacked Area" SeoTitle="2D Full-Stacked Area Chart">
<Keywords>2dchart, 2darea</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Full-Stacked Area</b> series view.
</p><p>This view is also called the 100% Stacked Area view, and is useful for comparing the percent values of several series for the same points arguments.</p><p>In this demo, you're able to specify whether real values are shown for each point label or the representative percentage, and also change the visibility of point labels.</p>]]>
</Description>
</Demo>
<Demo Key="StepAreaSeries" Title="Step Area" SeoTitle="2D Step Area Chart">
<Keywords>2dchart, 2dstep</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the <b>Step Area</b> series view, which shows how much values have changed for different points of the same series.</p>
<p>
In this demo you can toggle the visibility of series labels, set the angle between labels and series markers, specify the type and size of series markers, as well as invert the current step algorithm.</p>]]>
</Description>
</Demo>
<Demo Key="SplineAreaSeries" Title="Spline Area" SeoTitle="2D Spline Area Chart">
<Keywords>2dchart, 2dSpline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Spline Area</b> series view.
</p><p>This view is similar to the Area chart, but plots a fitted curve through each data point in a series.</p><p>In this demo, you're able to change labels visibility, set the angle between labels and point markers, and specify the type and size of series point markers.</p><p>Also you may specify the transparency value to apply to all Area series simultaneously.</p>]]>
</Description>
</Demo>
<Demo Key="SplineAreaStackedSeries" Title="Stacked Spline Area" SeoTitle="2D Stacked Spline Area Chart">
<Keywords>2dchart, 2dSpline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Stacked Spline Area</b> series view.
</p><p>This view is similar to the Stacked Area chart, but plots a fitted curve through each data point in a series.</p><p>In this demo, you're able to change the visibility of series points labels.</p>]]>
</Description>
</Demo>
<Demo Key="SplineAreaFullStackedSeries" Title="Full-Stacked Spline Area" SeoTitle="2D Full-Stacked Spline Area Chart">
<Keywords>2dchart, 2dSpline, 2dstacked</Keywords>
<Description>
<![CDATA[<p>
This demo shows the <b>Full-Stacked Spline Area</b> series view.
</p><p>This view is similar to the Full-Stacked Area chart, but plots a fitted curve through each data point in a series.</p><p>In this demo, you're able to specify whether real values are shown for each point label or the representative percentage, and also change the visibility of point labels.</p>]]>
</Description>
</Demo>
<Demo Key="Area3DSeries" Title="3D Area" SeoTitle="3D Area Chart">
<Keywords>3dchart, 3dSpline, 3dArea</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Area</b> series view.
</p><p>In this demo, you're able to specify the required perspective options using the Perspective Angle drop-down list, and change the visibility of point labels.</p><p>The Transparency combo box allows you to set series' transparency level.</p><p>Use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="Area3DStackedSeries" Title="3D Stacked Area" SeoTitle="3D Stacked Area Chart">
<Keywords>3dchart, 3dStacked, 3dArea</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Stacked Area</b> series view.
</p><p>In this demo, you're able to specify the required perspective options using the Perspective Angle drop-down list, and change the visibility of point labels.</p><p>The Transparency combo box allows you to set series' transparency level.</p><p>Use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="Area3DFullStackedSeries" Title="3D Full-Stacked Area" SeoTitle="3D Full-Stacked Area Chart">
<Keywords>3dchart, 3dStacked, 3dArea</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Full-Stacked Area</b> series view.
</p><p>In this demo, you're able to specify the required perspective options using the Perspective Angle drop-down list, and change the visibility of point labels.</p><p>The Transparency combo box allows you to set series' transparency level.</p><p>Use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="StepArea3DSeries" Title="3D Step Area" SeoTitle="3D Step Area Chart">
<Keywords>3dchart, 3dstep</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the <b>3D Step Area</b> series view, which shows how much values have changed for different points of the same series.</p>
<p>
In this demo, you're able to change the visibility of point labels, invert the current step algorithm and specify the required perspective options using the Perspective Angle drop-down list.</p>
<p>
Also, use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="SplineArea3DSeries" Title="3D Spline Area" SeoTitle="3D Spline Area Chart">
<Keywords>3dchart, 3dSpline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Spline Area</b> series view.
</p><p>In this demo, you're able to specify the required perspective options using the Perspective Angle drop-down list, and change the visibility of point labels.</p><p>The Transparency combo box allows you to set series' transparency level.</p><p>Use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="SplineArea3DStackedSeries" Title="3D Stacked Spline Area" SeoTitle="3D Stacked Spline Area Chart">
<Keywords>3dchart, 3dStacked, 3dspline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Stacked Spline Area</b> series view.
</p><p>In this demo, you're able to specify the required perspective options using the Perspective Angle drop-down list, and change the visibility of point labels.</p><p>The Transparency combo box allows you to set series' transparency level.</p><p>Use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
<Demo Key="SplineArea3DFullStackedSeries" Title="3D Full-Stacked Spline Area" SeoTitle="3D Full-Stacked Spline Area Chart">
<Keywords>3dchart, 3dStacked, 3dspline</Keywords>
<Description>
<![CDATA[<p>
This demo shows the 3D <b>Full-Stacked Spline Area</b> series view.
</p><p>In this demo, you're able to specify the required perspective options using the Perspective Angle drop-down list, and change the visibility of point labels.</p><p>The Transparency combo box allows you to set series' transparency level.</p><p>Use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="RangeViewTypes" Title="Range Views">
<Keywords>2dchart, 2drange</Keywords>
<Demo Key="RangeBarSeries" Title="Range Bar" SeoTitle="2D Range Bar Chart">
<Description>
<![CDATA[<p>
This demo illustrates the series' <b>Overlapped Range Bar View</b>, which is useful when it is necessary to show activity bars from different series one above another to precisely compare their duration.
</p>]]>
</Description>
</Demo>
<Demo Key="RangeBarSideBySideSeries" Title="Side-by-Side Range Bar" SeoTitle="2D Side-By-Side Range Bar Chart">
<Keywords>2dchart, 2drange</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the series' <b>Side-by-Side Range Bar View</b>, which is useful when it is necessary to show activity bars from different series grouped by their arguments.
</p><p>In this demo, you're able to change the visibility of point labels.</p>]]>
</Description>
</Demo>
<Demo Key="RangeAreaSeries" Title="Range Area" SeoTitle="Range Area Chart">
<Description>
<![CDATA[<p>
This demo illustrates the <b>Range Area</b> series view, which illustrates the difference between start and end values in a convenient manner.</p>
<p>
In this demo you can toggle the visibility of series labels, specify what should be shown in them, unhide markers for Value1 and Value 2, as well as change their kind and size.</p>]]>
</Description>
</Demo>
<Demo Key="RangeArea3DSeries" Title="3D Range Area" SeoTitle="3D Range Area Chart">
<Keywords>3dchart, 3DRange</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the <b>3D Range Area</b> series view, which illustrates the difference between start and end values in a convenient manner.</p>
<p>
In this demo you can toggle the visibility of series labels, specify what should be shown in them and specify the required perspective options using the Perspective Angle drop-down list.</p>
<p>
Also, use the Zoom Percent combo box to zoom into or out of the view.</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="RadarViewTypes" Title="Radar/Polar Views">
<Keywords>Radarview, polarview</Keywords>
<Demo Key="RadarPointSeries" Title="Radar Point" SeoTitle="Radar Point Chart">
<Description>
<![CDATA[<p>
This demo shows the <b>Radar View</b> with the <b>Point Series</b> drawing style.
</p><p>It plots the average temperature in London.</p><p>A Radar view has multiple axes along which data is plotted.</p><p>Months are charted on the angular axis while the temperature is charted on the radial axis.</p><p>A Radar view can be drawn on a circular or polygon grid.</p><p>
This can be selected using the <b>Diagram Type</b> drop-down list.
</p>]]>
</Description>
</Demo>
<Demo Key="RadarLineSeries" Title="Radar Line" SeoTitle="Radar Line Chart">
<Description>
<![CDATA[<p>
This demo shows the <b>Radar View</b> with the <b>Line Series</b> drawing style.
</p><p>In this demo it plots the average temperature in London.</p><p>Months are charted on the angular axis while the temperature is charted on the radial axis.</p><p>A Radar view can be drawn on a circular or polygon grid.</p><p>
This can be selected using the <b>Diagram Type</b> drop-down list.
</p>]]>
</Description>
</Demo>
<Demo Key="RadarAreaSeries" Title="Radar Area" SeoTitle="Radar Area Chart">
<Description>
<![CDATA[<p>
This demo shows you a <b>Radar View</b> with the <b>Area Series</b> drawing style.
</p><p>In this demo it plots the average temperature in London.</p><p>Months are charted on the angular axis while the temperature is charted on the radial axis.</p><p>A Radar view can be drawn on a circular or polygon grid.</p><p>
This can be selected using the <b>Diagram Type</b> drop-down list.
</p>]]>
</Description>
</Demo>
<Demo Key="PolarPointSeries" Title="Polar Point" SeoTitle="Polar Point Chart">
<Description>
<![CDATA[<p>
This demo shows you a <b>Polar View</b> with the <b>Point Series</b> drawing style.
</p><p>It plots function values on the basis of angles.</p><p>In this demo, you can plot the values of Lemniscate, Cardioid or Circles function.</p><p>A Polar view can be drawn on a circular or polygon grid.</p><p>
This can be selected using the <b>Diagram Type</b> drop-down list.
</p>]]>
</Description>
</Demo>
<Demo Key="PolarLineSeries" Title="Polar Line" SeoTitle="Polar Line Chart">
<Description>
<![CDATA[<p>
This demo shows you a <b>Polar View</b> with the <b>Line Series</b> drawing style.
</p><p>It plots function values on the basis of angles.</p><p>In this demo, you can plot the values of Lemniscate, Cardioid or Circles function.</p><p>A Polar view can be drawn on a circular or polygon grid.</p><p>
This can be selected using the <b>Diagram Type</b> drop-down list.
</p>]]>
</Description>
</Demo>
<Demo Key="PolarAreaSeries" Title="Polar Area" SeoTitle="Polar Area Chart">
<Description>
<![CDATA[<p>
This demo shows you a <b>Polar View</b> with the <b>Area Series</b> drawing style.
</p><p>It plots function values on the basis of angles.</p><p>In this demo, you can plot the values of Lemniscate, Cardioid or Circles function.</p><p>A Polar view can be drawn on a circular or polygon grid.</p><p>
This can be selected using the <b>Diagram Type</b> drop-down list.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="AdvancedViewTypes" Title="Advanced Views">
<Demo Key="StockSeries" Title="Stock" SeoTitle="Stock Chart">
<Keywords>Low, High, Open, Close</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the series' <b>Stock View</b>.
</p><p>This is one of the financial series (also called as Low-High-Open-Close series), and it is used to show stock price variation over the course of a day.</p><p>The Open and Close prices are represented by left and right lines at each point, and the Low and High prices are represented by the bottom and top values of the vertical line shown at each point.</p><p>In this demo, you can choose whether to exclude holidays and weekends from the X-axis scale.</p><p>Also, you can select to which value level point labels are shown, specify if either or both Open and Close values are shown, and choose what value should be used to determine if the current value is less than its previous value (Red), or greater than (Black).</p>]]>
</Description>
</Demo>
<Demo Key="CandleStickSeries" Title="Candle Stick" SeoTitle="Candle Stick Chart">
<Keywords>Low, High, Open, Close</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates the series' <b>Candle-Stick View</b>.
</p><p>This is one of the financial series (also called the Low-High-Open-Close series), and it is used to show stock price variation over the course of a day.</p><p>The Open and Close prices are represented by a filled rectangle, and the Low and High prices are represented by the bottom and top values of the vertical line shown at each point.</p><p>In this demo, you can choose whether to exclude holidays and weekends from the X-axis scale.</p><p>Also, you can select to which value level point labels are shown, specify if either or both Open and Close values are shown, and choose what value should be used to determine if the current value is less than its previous value (Red), or greater than (Black).</p>]]>
</Description>
</Demo>
<Demo Key="GanttSeries" Title="Gantt" SeoTitle="Gantt Chart">
<Description><![CDATA[<p>This demo illustrates the series' <b>Overlapped Gantt View</b>, which is useful when it is necessary to show activity bars from different series one above another to precisely compare their duration.</p><p><b>Note</b>: In this demo, you are able to drag and drop a <b>Progress Line</b> and see how this interactively changes the current state of <b>Completed</b> bars.</p>]]></Description>
</Demo>
<Demo Key="GanttSideBySideSeries" Title="Side-by-Side Gantt" SeoTitle="Side-By-Side Gantt Chart">
<Description><![CDATA[<p>This demo illustrates the series' <b>Side-by-Side Gantt View</b>, which is useful when it is necessary to show activity bars from different series grouped by their arguments.</p><p><b>Note</b>: In this demo, you are able to correct <b>current</b> plans for <b>Project 1</b> and <b>Project 2</b>. To accomplish this, move the mouse pointer either to the start or to the end of a current plan's bars, and then drag and drop it to the desired date.</p><p>In addition, you're able to change the visibility of point labels.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="DataAnalysis" Title="Data Analysis">
<Demo Key="RegressionLines" Title="Regression Line" SeoTitle="Regression Lines Data Analysis">
<Description>
<![CDATA[<p>
This demo illustrates the line of linear regression analysis, which can be enabled for each value level of a series.
</p><p>
In this demo, points are randomly generated after you click <b>"Create Points"</b>. Then, based on the linear regression algorithm, a line is drawn across the points, providing a commonly used analytical capability. In addition, you can specify the color, dash style and thickness of the regression line.
</p>]]>
</Description>
</Demo>
<Demo Key="Trendlines" Title="Trendlines" SeoTitle="Trendlines Data Analysis">
<Description>
<![CDATA[<p>
This demo illustrates trendlines created with <b>XtraCharts</b>.
</p><p>
Note that in this demo, holidays and weekends are excluded from the X-axis scale, via its WorkdaysOnly and WorkdaysOptions properties.
</p>]]>
</Description>
</Demo>
<Demo Key="FibonacciIndicators" Title="Fibonacci Indicators" SeoTitle="Fibonacci Indicators Data Analysis">
<Keywords>Arcs, Fans, Retracement</Keywords>
<Description>
<![CDATA[<p>
This demo shows several kinds of commonly used financial indicators, such as <b>Fibonacci Arcs</b>, <b>Fibonacci Fans</b> and <b>Fibonacci Retracement</b>.
</p><p>
In this demo, you can select one of these types in the <b>Kind</b> drop-down list, and choose which of the values, that are available for this kind, should be visible on a chart.
</p><p>
Note that in this demo, holidays and weekends are excluded from the X-axis scale, via its WorkdaysOnly and WorkdaysOptions properties.
</p>]]>
</Description>
</Demo>
<Demo Key="MovingAverage" Title="Moving Average" SeoTitle="Moving Average Data Analysis" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/MovingAverage.png">
<Keywords>Envelope</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates Moving Average and Envelope financial indicators, which are commonly used to chart data for financial analysis. Financial indicators allow analysis of economic performance and predictions of future performance.
</p><p>
In this demo, use the Kind selector, to choose which indicator to show (Moving Average, Envelope, or both), and the Type selector, to choose the indicator's type (Simple, Exponential, Weighted, or Triangular). To specify the number of days to be charted, use the Days Count editor. And, for the Envelope indicator, you can use the Envelope Percent editor, to define the indicator's scope.
</p>]]>
</Description>
<HighlightedDescription>
DevExpress ASP.NET Charts include Moving Average and Envelope financial indicators, which allow you to chart data for financial analysis.
</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="ViewCombinations" Title="View Combinations">
<Demo Key="BarAndLine" Title="2D Bar and Line" SeoTitle="2D Bar and Line Charts">
<Description>
<![CDATA[<p>
This demo illustrates the combination of 2D <b>Bar</b> and <b>Line</b> series views.</p>
<p>
XtraCharts allows an unlimited number of series of different kinds to be shown at the same time, as long as they support the same type of diagram (e.g., XY-diagram, Pie Diagram, etc.).</p><p>In this demo, you're able to change the visibility of the labels shown for each series point.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPCharts2DBarAndLine">ASP.NET Charts - Creating 2D Combined Series Charts</a></p>]]>
</Description>
</Demo>
<Demo Key="BarAndArea3D" Title="3D Bar and Area" SeoTitle="3D Bar and Area Charts">
<Description>
<![CDATA[<p>
This demo illustrates the combination of 3D <b>Bar</b> and <b>Area</b> series views.</p>
<p>
XtraCharts allows an unlimited number of series of different kinds to be shown at the same time, as long as they support the same type of diagram (e.g., XY-diagram, Pie Diagram, etc.).</p>
<p>
In this demo, you're able to change the visibility of the labels shown for each series point.</p>
<p>
Also, use the <b>Zoom Percent</b> drop-down list to zoom into or out of the view.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPCharts3DBarAndArea">ASP.NET Charts Creating 3D Combined Series Charts</a></p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Demo Key="SeriesBinding" Title="Binding Individual Series" SeoTitle="Series Data Binding">
<Description>
<![CDATA[<p>
The <b>WebChartControl</b> allows its <b>Series</b> to be bound to data in two ways:</p>
<ul>
<li>You are manually creating a series and bind it to the required fields in the data source.</li>
<li>The <b>WebChartControl</b> dynamically creates series based on the template settings that can be accessed via the <b>WebChartControl.SeriesTemplate</b> property.</li>
</ul>
<p>
In this demo, the first approach is used.</p><p>The selected category, its minimum, maximum and average prices are displayed at the chart's top-left corner. This information is dynamically updated for the selected category.</p>
<p>
To do this, the <b>BoundDataChanged</b> event is handled after a new filter is applied.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsBindSeries">ASP.NET Charts – Binding An Individual Series</a></p>]]>
</Description>
</Demo>
<Demo Key="SeriesTemplateBinding" Title="Using Series Template" SeoTitle="Data Binding Using Series Templates">
<Description>
<![CDATA[<p>
The <b>WebChartControl</b> allows its <b>Series</b> to be bound to data in two ways:</p>
<ul>
<li>You are manually creating a series and bind it to the required fields in the data source.</li>
<li>The <b>WebChartControl</b> dynamically creates series based on the template settings that can be accessed via the <b>ChartControl.SeriesTemplate</b> property.</li>
</ul>
<p>
In this demo, the second approach is used. The number of series is displayed at the view's top left corner.</p>
<p>
Use the <b>Series Data Member</b> drop-down list to select a data field whose values are used to generate and populate series.</p>
<p>
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>
<p>
<b>Note</b>: In this demo, you're able to click on a particular bar, and specific information about the currently selected series and its point will be displayed in the top-left corner of the chart.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsDataBindSeriesTemplates">ASP.NET Charts - Databinding a Series Template</a></p>]]>
</Description>
</Demo>
<Demo Key="Summarization" Title="Summarization" SeoTitle="Summary Function Calculations">
<Description>
<![CDATA[<p>
With <b>XtraCharts</b>, it is possible to automatically calculate and display summaries for a chart's datasource fields.
</p><p>In this demo, you can use a drop-down list above the chart to select a summary function to demonstrate.</p><p>
Note that in addition to built-in summary functions, you can create your own custom ones with <b>XtraCharts</b>, like the <b>STDDEV</b> function in this demo.
</p>]]>
</Description>
</Demo>
<Demo Key="TagBinding" Title="Tag Property" SeoTitle="Series Tags">
<Keywords>SeriesPoint</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates how to use the <b>Tag</b> property of the <b>SeriesPoint</b> class.
</p><p>
In this example, the <b>Tag</b> property stores information from the underlying datasource (a country's official name), and then its value is used to populate legend items for corresponding series points.
</p><p>This feature is very useful when it is necessary to store some specific information associated with a particular series point.</p><p>In this demo, you're able to change the visibility of the labels shown for each series point.</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ChartElements" Title="Chart Elements">
<Demo Key="VerticalPanes" Title="Vertical Panes" SeoTitle="Vertical Multi-Pane Chart"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/VerticalPanes.png">
<Description>
<![CDATA[<p>
Using the Chart control for ASP.NET, you can create a chart with multiple vertically arranged panes. Each pane can plot one or more XY-series, and can share either the X or Y axis with other panes.</p>
<p>
Related Video: <a href="http://tv.devexpress.com/#ASPChartsChartElementsVerticalPanes">ASP.NET Charts – Chart Elements: Vertical Panes</a></p>]]>
</Description>
<HighlightedDescription>
The DevExpress ASP.NET Charts Suite includes the capability to create a chart with multiple vertical panes, which allow you to plot multiple XY series that share an axis.
</HighlightedDescription>
</Demo>
<Demo Key="HorizontalPanes" Title="Horizontal Panes" SeoTitle="Horizontal Multi-Pane Chart">
<Description>
<![CDATA[<p>
With <b>XtraCharts</b>, you can create a chart with multiple panes placed horizontally and use them to display different series separately, each series in its own pane.
</p><p>In this demo, you can use drop-down lists above the chart to select the required categories to be displayed in left and right panes.</p>]]>
</Description>
</Demo>
<Demo Key="ChartTitles" Title="Chart Titles" SeoTitle="Rich Text Formatting in Chart Titles">
<Description>
<![CDATA[<p>This demo illustrates chart titles. With XtraCharts, it is possible to create an unlimited number of titles on any chart side and fully customize their appearance.</p><p> To customize any chart title, first select it and then change its alignment, dock or text. Note that you can use some HTML tags for text formatting:</p><ul><li><b>bold</b></li><li><i>italic</i></li><li><u>underlined</u></li><li><color=blue>color</color></li><li><size=+2>size</size></li></ul><p>
To define whether or not the word-wrapping should be applied to lengthy chart titles, use the appropriate check box.
</p>]]>
</Description>
</Demo>
<Demo Key="SeriesTitles" Title="Series Titles" SeoTitle="Series Titles">
<Description>
<![CDATA[<p>This demo illustrates how to show individual titles for each Pie (or Doughnut) series.</p><p>
These titles can be specified via the <b>Titles</b> property of a particular pie/doughnut series view, or automatically generated using a display pattern for a title, which is added to a Titles collection of a series template.
</p><p>
In this demo, every series title is generated using the <b>GSP in {S}</b> pattern, where {S} is changed to the current series name, obtained from the underlying datasource.
</p>]]>
</Description>
</Demo>
<Demo Key="SecondaryAxes" Title="Secondary Axes" SeoTitle="Secondary Axes in 2D Charts">
<Description><![CDATA[<p>This demo illustrates how to add secondary axes to your chart.</p><p>This may be required, for instance, when it is necessary to show arguments data of a single series using a particular axis, and arguments data of another series using a different axis.</p><p>In this demo you're able to show or hide both X and Y secondary axes, to see their visibility in effect.</p>]]></Description>
</Demo>
<Demo Key="ScaleBreaks" Title="Scale Breaks" SeoTitle="Axis Scale Breaks">
<Description>
<![CDATA[<p>
This demo illustrates how an axis range can be divided by scale breaks, to remove useless space that appears when series points’ values have a significant difference in ranges.
</p><p>
In this demo, you can choose to enable automatic scale breaks, and define a limit for their count (up to four). The appearance of scale breaks is determined by their style, size, and color.
</p>]]>
</Description>
</Demo>
<Demo Key="Legend" Title="Legend" SeoTitle="Chart Legend">
<Description><![CDATA[<p>This demo illustrates how you can customize a legend in XtraCharts.</p><p>Try to specify different values for a legend's maximum height and width (in percents respective to a chart's size) and see how they are in effect in arranging legend items.</p><p>In addition, in this demo you're able to specify a legend's alignment, direction, and how legend items are spaced in case they're arranged into several columns.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Annotations" Title="Annotations">
<Demo Key="AnnotationLayout" Title="Annotation Layout" SeoTitle="Annotation Layout">
<Description>
<![CDATA[<p>
This demo illustrates different image and text annotations anchored to the chart, pane and series points.
</p>]]>
</Description>
</Demo>
<Demo Key="TextAnnotation" Title="Text Annotation" SeoTitle="Text Annotations">
<Description>
<![CDATA[<p>
This demo illustrates text annotations anchored to series points and highlighting points having the minimum and maximum values. To create random points, click the "Generate Points" button.
</p><p>In this demo, you can choose a shape and connector style for the annotations, and adjust the annotation's rotation angle.</p>]]>
</Description>
</Demo>
<Demo Key="ImageAnnotation" Title="Image Annotation" SeoTitle="Image Annotations">
<Description>
<![CDATA[<p>
This demo illustrates image annotations anchored to series points and highlighting points having the minimum and maximum values. To create random points, click the "Generate Points" button.
</p><p>In this demo, you can choose a shape and connector style for the annotations, and adjust the annotation's rotation angle.</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ResolveOverlapping" Title="Resolve Labels Overlapping">
<Demo Key="ResolveOverlappingAxisLabel" Title="Resolve Overlapping for Axis Labels" SeoTitle="Smart Axis Labels in Chart">
<Description>
<![CDATA[<p>
This sample illustrates the capability to automatically resolve the overlapping of axis labels. Currently, only the <b>"HideOverlapped"</b> mode is supported, which means that some labels are hidden to avoid overlapping.
</p><p>In this demo, you can disable or enable the <b>"Resolve Overlapping"</b> feature to see how it works, and also specify the minimum allowed indent between two neighboring axis labels.
</p>]]>
</Description>
</Demo>
<Demo Key="ResolveOverlappingLine" Title="Resolve Overlapping for Line" SeoTitle="Smart Labels in 2D Line Chart">
<Description>
<![CDATA[<p>
This demo illustrates the <b>XtraCharts</b> resolve overlapping feature, which is intended to keep labels from overlapping.
</p><p>
In this demo, you can choose an overlapping resolving mode (a particular algorithm to be applied to points' labels), via the <b>"Mode"</b> combo box, and specify the angle at which labels are rotated, and the length of their lines. If any mode other than <b>"None"</b> is applied, you can also specify the minimum indent between adjacent labels. Note the improved performance, thanks to the changes made to the algorithms’ programming interface.
</p>]]>
</Description>
</Demo>
<Demo Key="ResolveOverlappingPie3D" Title="Resolve Overlapping for 3D Pie" SeoTitle="Smart Labels in 3D Pie Chart">
<Description>
<![CDATA[<p>
This demo illustrates the <b>3D Pie</b> diagram resolve overlapping feature, which is intended to avoid labels overlapping.
</p><p>In this demo, you can check whether to resolve overlapping, and, if so, to define the required indent value, using the appropriate controls above the chart.</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="DateTimeScale" Title="Date-time Scale">
<Demo Key="DateTimeScaleModeDemo" Title="Scale Mode" SeoTitle="Date-Time Scale Mode Customization">
<Description>
<![CDATA[<p>
This demo illustrates the capability for series whose argument scale type is date-time and the value scale type is numeric, to enable an automatic scale mode adjustment.
</p><p>
In this demo, you can switch between the <b>Automatic Average</b> (when data is auto-averaged by a date-time interval), the <b>Automatic Integral</b> (when data are auto-summarized), and the default, <b>Manual</b> mode, which allows you to manually specify the series' date-time grid alignment and date-time measure unit (both are set to "days" in this demo).
</p>]]>
</Description>
</Demo>
<Demo Key="DateTimeMeasureUnits" Title="Measure Units" SeoTitle="Date-Time Scale Customization">
<Description><![CDATA[<p>This demo illustrates how a chart can display date-time values according to the currently selected measure unit. This allows you to maintain date-time values at different detail levels.</p><p>In this demo, you can switch between Week, Month, Quarter and Year measure units, and see how this changes the picture.</p>]]></Description>
</Demo>
<Demo Key="DateTimeGridAlignment" Title="Grid Alignment" SeoTitle="Date-time Scale Grid Alignment">
<Description><![CDATA[<p>This demo illustrates a grid lines alignment feature.</p><p>In this demo, you can choose either to align a grid to the beginning of an hour, or of a day, using a list box placed above the chart.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="CustomDraw" Title="Custom Draw">
<Demo Key="DiagramToPoint" Title="XY-Diagram Custom Paint" SeoTitle="Custom Drawing on a Chart">
<Description><![CDATA[<p>The following example demonstrates how to implement custom painting on an XY-Diagram. For this, the ChartControl.CustomPaint event and XYDiagram.DiagramToPoint method should be used.</p><p>In this demo, you see three clusters of points, and can select any of them. Also, you can turn the "Auto Mode" option off and manually select a region on a chart - in this case the custom cluster bounds will be painted on a diagram.</p>]]></Description>
</Demo>
<Demo Key="RadarDiagramToPoint" Title="Radar Diagram Custom Paint" SeoTitle="Custom Drawing on a Radar Chart">
<Description><![CDATA[<p>The following example demonstrates how to implement custom painting on a Radar Diagram. For this, the ChartControl.CustomPaint event and RadarDiagram.DiagramToPoint and PointToDiagram methods should be used.</p><p>In this demo, you can see three moving targets painted on a radar diagram. Simply put the cross over every target and click it to hit.</p>]]></Description>
</Demo>
<Demo Key="CustomDrawSeriesPoints" Title="Series Points" SeoTitle="Custom Drawing of Series Points">
<Description>
<![CDATA[<p>This demo illustrates how to implement custom drawing in XtraCharts.</p><p>
Thanks to the <b>WebChartControl</b>'s <b>CustomDraw</b> events, it is possible to change drawing options before painting the entire series or its individual points.
</p><p>This example demonstrates how to change fill colors for every series point according to their values. In addition, point labels text is changed to show the color of the current interval (Green, Yellow or Red).</p><p>
Note that every interval of point values is represented by special chart elements - <b>Strips</b>.
</p>]]>
</Description>
</Demo>
<Demo Key="CustomDrawAxisLabels" Title="Axis Labels" SeoTitle="Custom Drawing of Axis Labels">
<Description>
<![CDATA[<p>
This demo illustrates the capability to individually adjust the appearance of axis label items.
</p><p>
In this demo, the values along the Y-axis have a different color and font size, depending on whether they are equal to, less than, or greater than zero. You can restore their default appearance, using the <b>"Custom Draw"</b> check box.
</p>]]>
</Description>
</Demo>
<Demo Key="CustomDrawLegend" Title="Legend Items" SeoTitle="Custom Drawing of a Legend">
<Description>
<![CDATA[<p>
This demo illustrates the capability to provide image legend markers for series points.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Miscellaneous" Title="Miscellaneous">
<Demo Key="Tooltips" Title="Tooltips" SeoTitle="Chart Tooltips" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Tooltips.png">
<Description><![CDATA[<p>This demo illustrates how to implement custom tooltips for series points. </p>]]>
<![CDATA[<p> In this demo, a tooltip appears for each bar and shows sales volume by year for each person. You can choose one of the following tooltip positions: Mouse (a tooltip is placed near the mouse pointer), Relative (a tooltip is placed near the element, for which it was invoked) and Free (a tooltip is always placed in the predefined position).</p>]]>
</Description>
<HighlightedDescription>
The DevExpress ASP.NET Charts (ASPxCharts) Suite provides built-in tooltips to display additional information for hovered chart elements.
</HighlightedDescription>
</Demo>
<Demo Key="EqualSizeForPieAndDoughnut" Title="Equal Size for Pies/Doughnuts" SeoTitle="Equal Size for Pie and Donut">
<Description>
<![CDATA[<p>This demo illustrates the equal size feature for Pie/Doughnut series views.</p>]]>
<![CDATA[<p>To see this feature in action, click "Equal Size" and all pies (doughnuts) will be equal by their minimum size.</p>]]>
<![CDATA[<p>In this demo, you can also change the minimum allowed size as a percentage for the "Condiment" series.</p>]]>
</Description>
</Demo>
<Demo Key="HitTesting" Title="Hit-testing" SeoTitle="Hit testing">
<Description>
<![CDATA[<p>
This demo illustrates the interactive capabilities of <b>XtraCharts</b>, in particular, a capability to access any chart's element by hit-testing.
</p><p>
In this demo, after the mouse cursor crosses over a chart's element, a tooltip appears which specifies the object which has been highlighted, and shows its underlying data (if any). If there are multiple objects layered under a test-point, their hierarchy is reflected. Note that now, individual axis label items and axis titles can be accessed, as well.
</p>]]>
</Description>
</Demo>
<Demo Key="DrillDown" Title="Drill Down" SeoTitle="Drill-down and drill-through" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/DrillDown.png">
<Description>
<![CDATA[<p>This demo illustrates how to create a drill-down chart.</p><p>
The main chart is a <b>Pie</b>, whose series points display min, max or average price in every category. The <b>Pie</b> chart allows you to compare the percentage values of different point arguments in the same series, and to illustrate these values as easy to understand pie slices.
</p><p>
Clicking on a pie slice invokes the Bar chart, which displays all product prices in the selected category. To return to the Pie chart, click the <b>Back to the main view...</b> hyperlink.
</p>]]>
</Description>
<HighlightedDescription>
DevExpress ASP.NET Charts include the capability to drill down by displaying master-detail style data and using interlinked charts. This demo illustrates a sample drill down chart that can be clicked on to see the detail charts.
</HighlightedDescription>
</Demo>
<Demo Key="EmptyPoints" Title="Empty Points" SeoTitle="Skipping Empty Data Points">
<Description>
<![CDATA[<p>
This demo illustrates how <b>XtraCharts</b> processes missing values, which are often caused by skipped tests or measurements.
</p><p>These values are transformed into empty points represented by breaks in line or area graphs or missing points, bars etc. in other series view types.</p><p>
In this demo, you're able to change the current series view type via the <b>View Type</b> drop-down list to see how empty points are represented in different series views.
</p><p>Also, you may change the visibility of the labels shown for each series point.</p>]]>
</Description>
</Demo>
<Demo Key="TopNOptions" Title=""Top N" and "Others"" SeoTitle="Top N Values, Filtering">
<Description>
<![CDATA[<p>
This demo illustrates the XtraCharts capability to show only <b>Top N</b> values and aggregate the rest into the <b>Others</b> category.
</p><p>
In this demo, you can use the Mode drop-down list to define a rule for values to fall within <b>Top N</b> or <b>Others</b> category. Also, you can choose whether to display the <b>Others</b> argument, and define a custom name for it.
</p>]]>
</Description>
</Demo>
<Demo Key="LogarithmicScale" Title="Logarithmic Scale" SeoTitle="Logarithmic Data Scale">
<Description><![CDATA[<p>This demo illustrates the logarithmic scale feature.</p><p>This feature is usually required when it is necessary to show different values, if some of them are much greater than others.</p><p>In this demo, you can turn the logarithmic scale on and off, and also select the required logarithmic base.</p>]]></Description>
</Demo>
<Demo Key="DisplayPatterns" Title="Display Patterns" SeoTitle="Text Patterns">
<Description><![CDATA[<p>This demo illustrates how to use display patterns to customize text, which is displayed in series labels and legend items, for the same data points.</p><p>In this demo you can set a pattern to {A} to show arguments; to {V} - to show values; to {S} - to show series names, or combine them in any order with any prefixes, suffixes and postfixes.</p>]]></Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="Dashboard" Url="DashboardDemos" Title="DevExpress ASP.NET Dashboard" SeoTitle="ASP.NET AJAX Dashboard Viewer" SupportsTheming="false" NavItemTitle="Dashboard" HideNavItem="true">
<Keywords>
dashboard, dashboards, interactive, sales, resources
</Keywords>
<DownloadUrl>
http://go.devexpress.com/DevExpressDownload_UniversalTrial.aspx
</DownloadUrl>
<BuyUrl>
http://go.devexpress.com/DevExpress_AspDemos_BuyNow.aspx
</BuyUrl>
<DocUrl>
http://go.devexpress.com/Dashboard_Help.aspx
</DocUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Dashboard Viewer">
<BannerTitle>
Simple and Easy-to-Use Dashboard Viewer for ASP.NET
</BannerTitle>
<BannerText>
Easily share your findings and insights by publishing interactive professional-looking dashboards on the Web.
</BannerText>
<BannerImageUrl>~/Content/Screens.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=wbbPrDI_Mxw</BannerUrl>
<DescriptionTitle>Welcome to the online demo site of the Dashboard Viewer for ASP.NET</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using DevExpress Dashboard. These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Samples" Title="Samples">
<Demo Key="SalesOverview" Title="Sales Overview" SeoTitle="Sales Overview Dashboard" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/SalesOverview.png">
<Description>
<![CDATA[<p>This dashboard shows statistics on sales of bicycles, related equipment and accessories.</p>
<p>The grid on the left shows sales breakdown by state. Gauges illustrate sales by the product category compared to target values. Charts visualize sales through time by the product category.</p>
<p>Click a row in the grid to view data for a particular state in charts and gauges. To reset the selection, use the Clear Selection button in the toolbar at the bottom of the grid.</p>
<p>You can also select a time interval in the Range Filter at the bottom to filter data by date.</p>
<p>To view the dashboard in the full screen mode that provides the best look for your tablet computer, click Full Screen View at the top right.</p>]]>
</Description>
<HighlightedDescription>
Shows statistics on sales of bicycles, related equipment and accessories.
</HighlightedDescription>
</Demo>
<Demo Key="SalesPerformance" Title="Sales Performance" SeoTitle="Sales Performance Dashboard">
<Description>
<![CDATA[<p>This dashboard displays sales performance parameters YTD.</p>
<p>Cards at the right show key sales metrics compared to the target. Grids present sales by state and product. Charts illustrate monthly sales for top 5 products.</p>
<p>You can select rows in the "Revenue by State" grid to view data for a specific state. To reset the selection, use the Clear Selection button in the toolbar at the bottom of the grid.</p>
<p>To view the dashboard in the full screen mode that provides the best look for your tablet computer, click Full Screen View at the top right.</p>]]>
</Description>
</Demo>
<Demo Key="SalesDetails" Title="Sales Details" SeoTitle="Sales Details Dashboard" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/SalesDetails.png">
<Description>
<![CDATA[<p>This dashboard provides an in-depth view of sales data.</p>
<p>Charts on the right show the revenue and the number of units that were sold or returned. You can use them to view data for individual states and products. To do this, select a state from the list on the left, and a product by clicking on a respective card. To reset the selection, use the Clear Selection buttons in the toolbars at the bottom of the list and card dashboard items.</p>
<p>You can also select which value to display within cards. Use the "Other Cards" button in the toolbar to switch between the Revenue, Units Sold and Returns values.</p>
<p>To view the dashboard in the full screen mode that provides the best look for your tablet computer, click Full Screen View at the top right.</p>]]>
</Description>
<HighlightedDescription>
Provides an in-depth view of sales data.
</HighlightedDescription>
</Demo>
<Demo Key="RevenueAnalysis" Title="Revenue Analysis" SeoTitle="Revenue Analysis Dashboard">
<Description>
<![CDATA[<p>This dashboard shows revenue data.</p>
<p>The bar chart shows the revenue by year, while the pies show the revenue and number of units sold by the product category. The pivot table on the right shows the revenue and number of units sold by product and state.</p>
<p>You can click on chart bars and pie segments to filter data in the pivot table by the year and category respectively. To clear the selection, use the Clear Selection buttons in the toolbars at the bottom of the chart and pie dashboard items.</p>
<p>To view the dashboard in the full screen mode that provides the best look for your tablet computer, click Full Screen View at the top right.</p>]]>
</Description>
</Demo>
<Demo Key="HumanResources" Title="Human Resources" SeoTitle="Human Resources Dashboard" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/HumanResources.png">
<Description>
<![CDATA[<p>This dashboard contains human resources department statistics.</p>
<p>The grid and cards on the top show staff turnover through time and staff turnover breakdown by department respectively. If the turnover rate exceeds 1%, the value gets marked with a warning - an orange circle. Bar charts and pies show payroll structure and work absence reason statistics for top 5 employees and for the entire company.</p>
<p>In the grid, you can select years to filter data in pies, bar charts and cards. To reset the selection, use the Clear Selection button in the toolbar at the bottom of the grid. You can also double-click rows to drill-down to months and select the required month in the same manner. To drill up, click the up arrow at the top right of the grid dashboard item header.</p>
<p>You can also select cards to filter data in bar charts and pies by department. To reset the selection, use the Clear Selection button in the toolbar at the bottom of the cards item.</p>
<p>To view the dashboard in the full screen mode that provides the best look for your tablet computer, click Full Screen View at the top right.</p>]]>
</Description>
<HighlightedDescription>
Contains human resources department statistics.
</HighlightedDescription>
</Demo>
<Demo Key="CustomerSupport" Title="Customer Support" SeoTitle="Customer Support Dashboard" HighlightedIndex="4" HighlightedImageUrl="~/Content/DemoIcons/CustomerSupport.png">
<Description>
<![CDATA[<p>This dashboard shows data from customer support service statistics.</p>
<p>The charts on the left show the number of opened issues through time and the number of processed issues by platform. The charts in the center show the average response time in the same manner. The gauge at the top right displays the overall number of issues. Grids below the gauge show top 8 customers and employees according to the number of created and processed issues respectively.</p>
<p>In both bar charts, you can drill down from platforms to support engineers. To do this, click any bar, and the chart will show data for this platform by employee. To drill up, click the up arrow at the top right of the chart dashboard item header.</p>
<p>You can also select a time interval in the Range Filter at the bottom to filter data by date.</p>
<p>To view the dashboard in the full screen mode that provides the best look for your tablet computer, click Full Screen View at the top right.</p>]]>
</Description>
<HighlightedDescription>
Shows data from customer support service statistics.
</HighlightedDescription>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxperience.DockAndPopups" Url="ASPxDockAndPopupsDemos" Title="DevExpress Dock and Modal Popups" SeoTitle="ASP.NET AJAX Dock and Modal Popups" NavItemTitle="Dock and Modal Popups" OrderIndex="10">
<Keywords>
aspxperience, devexpress.web
</Keywords>
<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_ASPxperience_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Doc_and_Modal_Popups.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Dock and Modal Popups">
<BannerTitle>
Docking and Popup Windows for ASP.NET
</BannerTitle>
<BannerText>
A collection of controls that allow you to create interactive, touch-enabled web applications such as web dashboards
</BannerText>
<BannerImageUrl>
~/Content/VideoBanner.png
</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=kglFanQjKM4</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxperience Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>.
These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Docking" Title="Docking" SeoTitle="ASP.NET AJAX Docking Controls">
<Keywords>ASPxDockingControl, Dock, Widget, Layout, yahoo, dashboard, widgetpage, widgetspage, zones, ASPxDockPanel, ASPxDockZone, ASPxDockManager</Keywords>
<Demo Key="Widgets" Title="Widgets" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Docking.png" HighlightedTitle="Docking - 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 ASPxDocking Suite.
</p>
<p>
The ASPxDocking Suite offers three components - <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxDockingASPxDockPaneltopic">ASPxDockPanel</helplink>, <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxDockingASPxDockZonetopic">ASPxDockZone</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxDockingASPxDockManagertopic">ASPxDockManager</helplink>. 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 to float. Dock zones can be placed at any part of a page; their orientation and size are fully customizable. Dock manager allows you to provide a centralized programmatic control of all dock panels and dock zones contained within a page.
</p>
]]>
</Description>
<HighlightedDescription>Three components are used to manage dock panels, so that end-users can move these panels in an application and customize their view. This demo illustrates how web gadgets are implemented using these components included in the DevExpress ASP.NET Docking (ASPxDocking) Suite.</HighlightedDescription>
<SourceFile>~/Docking/Widgets/CalendarWidget.ascx</SourceFile>
<SourceFile>~/Docking/Widgets/DateTimeWidget.ascx</SourceFile>
<SourceFile>~/Docking/Widgets/MailWidget.ascx</SourceFile>
<SourceFile>~/Docking/Widgets/NewsWidget.ascx</SourceFile>
<SourceFile>~/Docking/Widgets/TradingWidget/TradingWidget.ascx</SourceFile>
<SourceFile>~/Docking/Widgets/WeatherWidget/WeatherWidget.ascx</SourceFile>
</Demo>
<Demo Key="ForbiddenZones" Title="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/DevExpressWebASPxDockingASPxDockPanel_ForbiddenZonestopic">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">Styles.DockingAllowedStyle</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingDockZoneStyles_DockingForbiddenStyletopic">Styles.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="Callbacks (AJAX)">
<Description>
<![CDATA[
<p>
ASPxDockPanel 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/DevExpressWebASPxDockingASPxDockPanel_LoadContentViaCallbacktopic">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 the 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 after a panel has been docked to a dock zone.
</li>
<li>
OnDockStateChange - Loading of panel contents starts every time after a panel's dock state has been changed (that is a docked panel becomes floating or a float panel docks to a zone).
</li>
<li>
OnFloating - Loading of panel contents starts every time after a panel has been made floating.
</li>
</ul>
<p>
Using the postponed 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>~/Docking/Callbacks/DesignDepartmentEmployees.ascx</SourceFile>
<SourceFile>~/Docking/Callbacks/DevelopmentDepartmentEmployees.ascx</SourceFile>
<SourceFile>~/Docking/Callbacks/FloatModeContent.ascx</SourceFile>
</Demo>
<Demo Key="ClientSideEvents" Title="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 control-specific client events related to panel docking are traced in this demo.
</p>
<p>
All controls included into the ASPxDocking Suite (such as <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxDockingASPxDockPaneltopic">ASPxDockPanel</helplink>, <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxDockingASPxDockZonetopic">ASPxDockZone</helplink> and <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxDockingASPxDockManagertopic">ASPxDockManager</helplink>) 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>Init (common for ASPxDockPanel, ASPxDockZone and ASPxDockManager) - Occurs on the client side after a client control object has been initialized, but prior to its display on the browser.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_StartDraggingtopic">StartDragging</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_EndDraggingtopic">EndDragging</helplink> (specific to ASPxDockPanel); <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_StartPanelDraggingtopic">StartPanelDragging</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_EndPanelDraggingtopic">EndPanelDragging</helplink> (specific to ASPxDockManager) - Allow you to respond to the corresponding end-user actions performed on a panel.</li>
<li>BeforeDock, AfterDock (common for ASPxDockPanel, ASPxDockZone and ASPxDockManager) - Fire before and after a panel is docked to a zone; you are able to cancel panel docking, if required.</li>
<li>BeforeFloat, AfterFloat (common for ASPxDockPanel and ASPxDockManager) - Fire before and after a panel is made to float; you are able to cancel making a panel to float if required.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_PopUptopic">PopUp</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_CloseUptopic">CloseUp</helplink> (specific to ASPxDockPanel); <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PanelPopUptopic">PanelPopUp</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockManager_PanelCloseUptopic">PanelCloseUp</helplink> (specific to ASPxDockManager) - Allow you to respond to invoking or closing a dock panel.</li>
</ul>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>
This example demonstrates how to manipulate dock panels programmatically on the client using our extended client-side functionality. The client-side programmatic interface is available for a control if any of the following is true:
</p>
<ul>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_EnableClientSideAPItopic">EnableClientSideAPI</helplink> property is set to true</li>
<li>Any client-side event (available via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingASPxDockPanel_ClientSideEventstopic">ClientSideEvents</helplink> property) is handled</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ClientInstanceNametopic">ClientInstanceName</helplink> property is defined</li>
</ul>
<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">SetVisible</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_SetVisibleIndextopic">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">IsDocked</helplink> method. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_Docktopic">Dock</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingScriptsASPxClientDockPanel_MakeFloattopic">MakeFloat</helplink> client methods are used to dock a panel or make it float.
</p>
]]>
</Description>
</Demo>
<Demo Key="ServerSide" Title="Server-Side Functionality">
<Description>
<![CDATA[
<p>This sample demonstrates a few of the server-side capabilities available to you when using controls from the ASPxDocking Suite. The demo allows the selected dock panel's characteristics to be dynamically modified via client code depending upon the rightmost panel's settings.</p>
<p>The main control-specific server events related to panel docking are also traced in this demo. Play with dock panels to initiate server-side events and to display information about the raised events in the Event monitor.</p>
<p>
The following server events are demonstrated in this demo:
</p>
<ul>
<li>BeforeDock, AfterDock (common for ASPxDockPanel, ASPxDockZone and ASPxDockManager) - Fire before and after a panel is docked to a zone; you are able to cancel panel docking if required.</li>
<li>BeforeFloat, AfterFloat (common for ASPxDockPanel and ASPxDockManager) - Fire before and after a panel is made to float; you are able to cancel making a panel to float if required.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="LayoutManagement" Title="Layout Management">
<Description>
<![CDATA[
<p>
This demo creates a simple application scenario to illustrate how components from the ASPxDocking Library can be 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.
</p>
<p>
Both pages (presentation and customization) use the same set of DevExpress docking controls in this sample. The dock panel layout defined on the customization page is preserved and synchronized with the presentation page by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDockingASPxDockManager_ClientLayouttopic">ClientLayout</helplink> event of ASPxDockManager components.
</p>
]]>
</Description>
<SourceFile>~/Docking/LayoutManagement/EditLayout.aspx</SourceFile>
<SourceFile>~/Docking/LayoutManagement/EditLayout.aspx.cs</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="LoadingPanel" Title="Loading Panel" SeoTitle="ASP.NET Loading Panel">
<Demo Key="Example" Title="Example" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/LoadingPanel.png" HighlightedTitle="Loading Panel - Example">
<Description>
<![CDATA[
<p>
This demo shows the use of the ASPxLoadingPanel control working in modal mode.
</p>
<p>
Depending on the check box’ setting, the ASPxLoadingPanel 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/DevExpressWebASPxLoadingPanelASPxLoadingPanel_ContainerElementIDtopic">ContainerElementID</helplink> property.
</p>
<p>
In this demo, the ASPxLoadingPanel is displayed and hidden dynamically via client code in response to clicking the 'Show Loading Panel' button.
</p>
]]>
</Description>
<HighlightedDescription>Display a “loading” message to an end-user when required, using the DevExpress ASP.NET Loading Panel (ASPxLoadingPanel) control. This demo shows how the ASPxLoadingPanel can display and hide a loading panel via client code in response to an end-user’s actions.</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="PopupControl" Title="Popup Control" SeoTitle="ASP.NET AJAX Popup Window Control">
<Keywords>window, dialog</Keywords>
<Demo Key="DataBinding" Title="Data Binding">
<Description>
<![CDATA[<p>
This demo illustrates how the ASPxPopupControl can be bound to a data source. The ASPxPopupControl supports standard data binding. In this instance, any object which implements the IListSource, IEnumerable or IDataSource interface (e.g. SqlDataSource, XmlDataSource) may be used as a data source for this control.
</p><p>
In this demo, the popup control is bound to a standard XmlDataSource type data source. It supplies the popup control with data from a specific Charts.xml file. The ASPxPopupControl requires data to be represented as the contents of different elements within popup windows. Use the XPath property to obtain the desired data sample.
</p><p>
Our web controls provide you with the ability to bind the properties of controls that compose a template directly to the properties of the corresponding data object (DataItem) from the bound data source. To implement, the Container.Item.DataItem property or the Container.EvalDataItem(<expression>) method can be used.
</p><p>
In this demo, the contents of each popup window are defined by placing a standard Image web control onto a <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_WindowContentTemplatetopic">WindowContentTemplate</helplink> type template. The ImageUrl property of the Image control is bound directly to the XmlDataSource's node by using the Container.EvalDataItem(<expression>) method. (See ASPX code)
</p><p>
The window's footer is defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_WindowFooterTemplatetopic">WindowFooterTemplate</helplink> by using the Label web control whose Text property binds to the data of the corresponding xml node using the Container.EvalDataItem(<expression>) method. (See ASPX code)
</p>]]>
</Description>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Keywords>PopupHorizontalAlign, position, header, footer, PopupVerticalAlign, Opacity, allowdragging, allowresize, sizegrip</Keywords>
<Description>
<![CDATA[
<p>This demo allows you to see some of the features provided by the ASPxPopupControl in action. Use options listed on the right to change various layout and behavior property settings of the ASPxPopupControl, and click Apply to assign them to it. To invoke the ASPxPopupControl, click the PopupElement button displayed on the left.</p>
<p>Below, all of the options available in this demo are described:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowCloseButtontopic">ShowCloseButton</helplink>. This option specifies if a button allowing end-users to close a popup window is displayed within a window header.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowShadowtopic">ShowShadow</helplink>. This option enables a shadow effect for a popup window.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowHeadertopic">ShowHeader</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowFootertopic">ShowFooter</helplink>. Use these options to toggle the visibility of a popup window's header and footer.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupHorizontalAligntopic">PopupHorizontalAlign</helplink>. This option specifies the horizontal alignment of a popup window, relative to the corresponding web control/HTML element. Option values include:
<ul>
<li>NotSet. A popup window is displayed on the x-coordinate of the mouse cursor position.</li>
<li>OutsideLeft. 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>LeftSides. A popup window is displayed, so that the left border x-coordinates of the window and its corresponding element are equal.</li>
<li>Center. A popup window is displayed, so that it and its corresponding element are horizontally centered.</li>
<li>RightSides. A popup window is displayed, so that the right border x-coordinates of the window and its corresponding element are equal.</li>
<li>OutsideRight. 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>
<li>WindowCenter. A popup window is displayed, so that it is horizontally aligned with the center of the browser's window.</li>
</ul>
</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupVerticalAligntopic">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:
<ul>
<li>NotSet. A popup window is displayed on the y-coordinate of the mouse cursor position.</li>
<li>Above. 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>TopSides. 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>Middle. A popup window is displayed, so that it and its corresponding element are vertically centered.</li>
<li>BottomSides. A popup window is displayed, so that the bottom border y-coordinates of the window and its corresponding element are equal.</li>
<li>Below. 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>
<li>WindowCenter. A popup window is displayed, so that it is vertically aligned with the center of the browser's window.</li>
</ul>
</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupHorizontalOffsettopic">PopupHorizontalOffset</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupVerticalOffsettopic">PopupVerticalOffset</helplink>. Use these options to specify a popup window's horizontal and vertical offsets relative to the corresponding element in pixels. The options accept both positive and negative values.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_Opacitytopic">Opacity</helplink>. This option allows you to customize a 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/DevExpressWebASPxPopupControlASPxPopupControlBase_EnableAnimationtopic">EnableAnimation</helplink>. Use this option to enable a predefined popup animation effect.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_PopupAnimationTypetopic">PopupAnimationType</helplink>. This property specifies the type of animation used to show a popup window.
<ul>
<li>Fade. A popup window is displayed using a fade-in effect.</li>
<li>Slide. A popup window is displayed using a slide effect.</li>
</ul>
</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_AllowDraggingtopic">AllowDragging</helplink>. Enable 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/DevExpressWebASPxPopupControlASPxPopupControlBase_DragElementtopic">DragElement</helplink>. Choose which part of a 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/DevExpressWebASPxPopupControlASPxPopupControlBase_AllowResizetopic">AllowResize</helplink>. Enable this option to allow a popup window to be sized. Use the option in combination with the <helplink href="">ResizingMode</helplink> and <helplink href="">ShowSizeGrip</helplink> options. A popup window's size limits can be specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_MinHeighttopic">MinHeight</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_MinWidthtopic">MinWidth</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_MaxHeighttopic">MaxHeight</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_MaxWidthtopic">MaxWidth</helplink> properties.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ResizingModetopic">ResizingMode</helplink>. This option controls whether a popup window is redrawn dynamically during the resizing operation (the Live value) or whether the window is redrawn after the resizing operation is finished (the Postponed value).</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowSizeGriptopic">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 always (the True value), never (the False value) or dependent upon the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_AllowResizetopic">AllowResize</helplink> property setting (the Auto value).</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ScrollBarstopic">ScrollBars</helplink>. This option specifies the visibility of scrollbars within a popup window. Choose one of the following option values:
<ul>
<li>None. No scrollbars are displayed within a popup window.</li>
<li>Horizontal. A popup window displays only the horizontal scrollbar.</li>
<li>Vertical. A popup window displays only the vertical scrollbar.</li>
<li>Both. A popup window displays both the horizontal and vertical scrollbars.</li>
<li>Auto. A popup window automatically displays a horizontal or/and vertical scrollbar if its content does not fit the popup window.</li>
</ul>
</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_CloseActiontopic">CloseAction</helplink>. Use this option to specify the client action that closes a popup window. Option values include:
<ul>
<li>None. A popup window can be closed only in code via a specific client script method.</li>
<li>CloseButton. A popup window can only be closed by pressing the Close button displayed within the window's header.</li>
<li>OuterMouseClick. A popup window is closed by a click outside the window's region.</li>
<li>MouseOut. 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/DevExpressWebASPxPopupControlASPxPopupControl_DisappearAftertopic">DisappearAfter</helplink> option.</li>
</ul>
</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupActiontopic">PopupAction</helplink>. Use this option to specify the client action that invokes a popup window. Choose one of the following option values:
<ul>
<li>None. A popup window can be invoked only in code via a specific client script method.</li>
<li>LeftMouseClick. 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/DevExpressWebASPxPopupControlASPxPopupControl_PopupElementIDtopic">PopupElementID</helplink> property.</li>
<li>RightMouseClick. A popup window can be invoked by right-clicking a corresponding web control or HTML element, specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupElementIDtopic">PopupElementID</helplink> property.</li>
<li>MouseOver. A popup window is invoked when the mouse pointer enters the region occupied by a corresponding web control or HTML element, specified via the <helplink href="">PopupElementID</helplink> property. To specify the display delay (in milliseconds), use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_AppearAftertopic">AppearAfter</helplink> option.</li>
</ul>
</li>
</ul>]]>
</Description>
</Demo>
<Demo Key="HeaderButtons" Title="Header Buttons">
<Keywords>pin,maximize,Collapse,close,refresh</Keywords>
<Description>
<![CDATA[
<p>
The ASPxPopupControl provides you with the ability to display special buttons in its header.
</p>
<ul><li>
Pin button – Allows end-users to pin and unpin a window.
</li><li>
Refresh button – Allows end-users to refresh window content.
</li><li>
Collapse button – Allows end-users to collapse and expand a window.
</li><li>
Maximize button – Allows end-users to maximize and restore a window.
</li><li>
Close button – Allows end-users to close a window.
</li></ul>
<p>
The header displays the Close button only by default. You can manage button visibility using corresponding properties: <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowPinButtontopic">ShowPinButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowRefreshButtontopic">ShowRefreshButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowCollapseButtontopic">ShowCollapseButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowMaximizeButtontopic">ShowMaximizeButton</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ShowCloseButtontopic">ShowCloseButton</helplink>.
</p>
<p>
Use the check boxes on the right of the page to switch button visibility and try the buttons in action.
</p>
]]>
</Description>
</Demo>
<Demo Key="LoadOnDemand" Title="Load Content on Demand">
<Keywords>ajax, callback, lazy</Keywords>
<Description>
<![CDATA[
<p>The ASPxPopupControl 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/DevExpressWebASPxPopupControlASPxPopupControl_LoadContentViaCallbacktopic">LoadContentViaCallback</helplink> property:</p>
<ul>
<li>None - 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. You can also update the content of popup windows programmatically, on demand.</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>
</Demo>
<Demo Key="MultipleInvokerElements" Title="Multiple Invoker Elements" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/PopupControl.png" HighlightedTitle="Popup Control - Multiple Invoker Elements">
<Description>
<![CDATA[
<p>ASPxPopupControl allows for the specifying of several web controls or HTML elements whose specific mouse action (defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupActiontopic">PopupAction</helplink> property) invokes a popup window. The list of invoker element IDs, which are separated by a semicolon (;), can be set via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_PopupElementIDtopic">PopupElementID</helplink> property.
</p>
<p>Using the ASPxPopupControl client-side functionality, you can perform the following actions with invoker elements.
</p>
<ul>
<li>Specify elements that invoke a popup window.</li>
<li>Get the current invoker element.</li>
<li>Show a popup window at the specified element from the list.</li>
</ul>
<p>In this demo, ASPxPopupControl is linked to four elements – images. When you hover on an image, the client side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_PopUptopic">PopUp</helplink> event is invoked. In the event handler, the popup control gets the current invoker element via the client-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_GetCurrentPopupElementtopic">GetCurrentPopupElement</helplink> method and displays the corresponding large image as window content.
</p>
<p>Additionally, you can try this functionality in the <a href="http://www.devexpress.com/Support/Center/p/E4023.aspx">ASPxPopupControl - How to define multiple invoker elements on the client to implement image zooming for a set of images</a> online example.
</p>
]]>
</Description>
<HighlightedDescription>Invoke a popup window based on end-user actions using the DevExpress ASP.NET Popup Control (ASPxPopupControl). This demo illustrates how a popup window is displayed when an image is hovered by the mouse pointer.</HighlightedDescription>
</Demo>
<Demo Key="ModalWindow" Title="Modal Window" SeoTitle="Modal Dialog">
<Description>
<![CDATA[<p>
This demo illustrates how the ASPxPopupControl's popup windows can be used in modal mode. This window mode is useful when it's necessary to display a dialog allowing end-user input to occur only to objects on the modal dialog window. The modal mode's availability can be controlled by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControl_Modaltopic">Modal</helplink> property of a popup control or specific popup window. An unlimited number of nested modal windows is supported.
</p><p>In this demo, click the Show Modal Window button to invoke the first modal window dialog. The second modal window can be displayed via a click on the Create Account link within the dialog.</p>]]>
</Description>
</Demo>
<Demo Key="ContentUrl" Title="Content URL" SeoTitle="HTML Page in Popup Window">
<Keywords>iframe</Keywords>
<Description>
<![CDATA[<p>
The ASPxPopupControl allows display of the contents of other web pages specified by their URLs. In order to load a specific web page into the ASPxPopupControl, the control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ContentUrltopic">ContentUrl</helplink> property is used.
</p><p>
In this demo, the ASPxPopupControl's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_ContentUrltopic">ContentUrl</helplink> property is assigned with the navigation location of a specific web page that emulates a feedback form. The page's contents are loaded into the popup control's window automatically.
</p><p>
This demo also illustrates the resizing feature of the ASPxPopupControl. This feature is enabled by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_AllowResizetopic">AllowResize</helplink> property to true. The popup control's window can be resized by using the size grip or dragging the window's edges.
</p>]]>
</Description>
<SourceFile>~/PopupControl/ContentUrlFeedForm.aspx.cs</SourceFile>
<SourceFile>~/PopupControl/ContentUrlFeedForm.aspx.vb</SourceFile>
<SourceFile>~/PopupControl/ContentUrlFeedForm.aspx</SourceFile>
</Demo>
<Demo Key="Transparency" Title="Transparency">
<Description>
<![CDATA[<p>
The ASPxPopupControl supports the Transparency feature, which means you can create custom-shaped popup windows. For this purpose, set the control's BackColor property to Transparent and provide the appropriate background image.
</p><p>
In this demo, puzzle elements are represented by ASPxPopupControl instances. Each puzzle element's shape is defined by a specific partly transparent .png image which is set as a background image of the corresponding popup control (via the control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxWebControl_BackgroundImagetopic">BackgroundImage</helplink> property). The BackColor properties of popup controls are set to the Transparent value. In order to enable popup windows to be dragged, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_AllowDraggingtopic">AllowDragging</helplink> properties are set to True and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_DragElementtopic">DragElement</helplink> properties are set to Window, within popup controls.
</p>]]>
</Description>
</Demo>
<Demo Key="Templates" Title="Templates">
<Keywords>customization</Keywords>
<Description>
<![CDATA[<p>
This sample demonstrates the use of the template technology within the ASPxPopupControl. The look of header and footer elements of a popup control's window can be completely modified by creating a specific template which defines how the corresponding window element will be rendered by a client browser.
</p><p>
The template types provided by the ASPxPopupControl and supplemented with the ability to define the contents of the control's window (by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_Controlstopic">Controls</helplink> property or the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_SetWindowContentHtmltopic">SetWindowContentHtml</helplink> method) allow you to completely customize the popup window's appearance and layout. In this demo, the default popup window functionality is enhanced by specific Help and Close buttons placed in the window's header by using a <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_HeaderTemplatetopic">HeaderTemplate</helplink> type template. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_FooterTemplatetopic">FooterTemplate</helplink> type template is used to define the color palette (that allows the background color of the window's content to be changed) and display text (which is displayed or hidden dynamically in response to a click on the Help button).
</p>]]>
</Description>
</Demo>
<Demo Key="ClientSide" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event technology. All available client-side events are traced in this demo. Click an icon beside a product name to invoke the corresponding popup control window.</p><p>Client-side events are triggered in response to specific user actions performed on the client side (in particular, when invoking or hiding a popup window).
</p>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[<p>
This example demonstrates how to manipulate a popup control programmatically on the client using our extended client-side functionality. The client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlASPxPopupControlBase_EnableClientSideAPItopic">EnableClientSideAPI</helplink> property is set to true, or if there is a handler assigned to any client-side event.
</p><p>
In this demo, each popup control window is identified using its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlPopupWindow_Nametopic">Name</helplink> 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">GetWindowByName</helplink> method is used. A specific popup window can be invoked or hidden on the client side by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_ShowWindowtopic">ShowWindow</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_HideWindowtopic">HideWindow</helplink> method. (See JS code, the SetHintVisible function)
</p><p>
In order to show or hide a default window, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_Showtopic">Show</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_Hidetopic">Hide</helplink> method can be used. (See JS code, the SetErrorVisible function)
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControlBase_SetContentHtmltopic">SetContentHtml</helplink> method is used in this demo to display the HTML code representing the default popup window's content (see JS code, the SetErrorString 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">GetWindowContentHtml</helplink> method and defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPopupControlScriptsASPxClientPopupControl_SetWindowContentHtmltopic">SetWindowContentHtml</helplink> method.
</p>]]>
</Description>
</Demo>
<Demo Key="ServerSide" Title="Server-Side Functionality">
<Description>
<![CDATA[<p>
This sample demonstrates a few of the ASPxPopupControl's server-side capabilities. Enter any text into the memo field and click the Create Note button to create and display a popup window containing the text entered.
</p><p>
Each newly created popup window overlaps those preceding it. You can drag a window by its header or close the window by clicking the window's Close button. Note that the position and state of a popup window is preserved between postbacks. The code of the Button1_Click event's handler demonstrates how an individual popup window is created and its content text, footer text and position are defined. (See VB or C# code)
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Accessibility" Title="Accessibility">
<Demo Key="RightToLeft" Title="Right to Left Layout">
<Description>
<![CDATA[
<p>
Our visual controls provide support for right-to-left languages, like Arabic or Hebrew. So, you can completely rely on our web controls when creating international web pages that include support for right-to-left reading order, and mirroring of UI elements.
</p>
<p>
To switch a control to right-to-left representation, just enable a single property - RightToLeft. When this property is on, text flows from right to left in a control and the control itself is mirrored (the layout of its UI elements is reversed).
</p>
<p>
If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching each control's RightToLeft property. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option, that can be accessed within the 'settings' group of our <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8007">devExpress</helplink> section.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxEditors" Url="ASPxEditorsDemos" Title="DevExpress ASPxEditors" SeoTitle="ASP.NET AJAX Data Editors" NavItemTitle="Data Editors" OrderIndex="9">
<Keywords>
editing, form, input, devexpress.web.ASPxEditors, aspxeditors
</Keywords>
<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_ASPxEditors_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Editors.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Data Editors">
<BannerTitle>
Data Editors for ASP.NET
</BannerTitle>
<BannerText>
Unmatched data editing options. Over 20 advanced editors that can be used either standalone or within container controls.
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxEditors Library
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our ASP.NET editors. These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Features" Title="Common Features">
<Demo Key="DisplayFormat" Title="Display Format"
HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/DisplayFormat.png" HighlightedTitle="Display Format">
<Keywords>DisplayFormatString, formatstring</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTextEdit_DisplayFormatStringtopic">DisplayFormatString</helplink> property can be used within editors of different types.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTextEdit_DisplayFormatStringtopic">DisplayFormatString</helplink> property specifies the pattern used to format an editor's value for display purposes, when the editor is not focused.
Editor display values can be formatted using the standard formatting mechanism described in MSDN.
For more details about composing format patterns, see the following MSDN topic:
<a target="_blank" href="http://msdn.microsoft.com/en-us/library/fbxft59x.aspx">Formatting Types</a>.
</p>
]]>
</Description>
<HighlightedDescription>The Display Format property (DisplayFormatString) allows you to format an editor’s data after it has been input by an end-user. The formatting takes effect once the editor loses focus. This demo illustrates the various types of display formats and the patterns associated with them.</HighlightedDescription>
</Demo>
<Demo Key="NullText" Title="Null Text" SeoTitle="Edit Box Watermark" IsUpdated="true">
<Keywords>emptytext</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how an editor's NullText property can be used to display a prompt 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>
]]>
</Description>
</Demo>
<Demo Key="MaskedInput" Title="Masked Input"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Mask.png">
<Keywords>UseMaskBehavior, MaskSettings, masking, symbols</Keywords>
<Description>
<![CDATA[
<p>
The DevExpress editors allow you to use masks during editing.
Masks are useful when a string entered by an end-user into an editor should match a specific format.
For instance, a text editor should accept date/time values in the 24-hour format only, or only numeric values, or a phone number that only allows
an end-user to enter digits into automatically constructed placeholders.
</p>
<p>
Within the ASPxEditors library, masked input is supported by the following editor types:
</p>
<ul>
<li>
Text box editors (in particular, the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxTextBoxtopic">ASPxTextBox</helplink> and <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxButtonEdittopic">ASPxButtonEdit</helplink>).<br />
A text box mask settings can be accessed via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTextBox_MaskSettingstopic">MaskSettings</helplink> property.
The editors mask can be specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsMaskSettings_Masktopic">MaskSettings.Mask</helplink> property.
</li>
<li>
Date editors (<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxDateEdittopic">ASPxDateEdit</helplink>).<br />
To enable masked input within a date editor, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDateEdit_UseMaskBehaviortopic">UseMaskBehavior</helplink> property should be set to true.
The mask can be defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDateEdit_EditFormatStringtopic">EditFormatString</helplink> property, if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDateEdit_EditFormattopic">EditFormat</helplink> property is set to Custom.
</li>
</ul>
<p>
See how masked input behavior is implemented in this demo to facilitate entering different types of data into the forms editors.
</p>
]]>
</Description>
<HighlightedDescription>A masked input helps you restrict a control’s input and conform to a specific format. This demo illustrates various types of masked input and the validation settings associated with them.</HighlightedDescription>
</Demo>
<Demo Key="DateTimeEditing" Title="Date and Time Editors" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/DateTime.png">
<Keywords>calendar, timer, clock, minutes, hours, seconds, year, month, day</Keywords>
<Description>
<![CDATA[
<p>
This demo demonstrates the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxDateEdittopic">ASPxDateEdit</helplink> and <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxTimeEdittopic">ASPxTimeEdit</helplink> capability of date- and time-editing.
</p>
<p>
The ASPxDateEdit allows end-users to edit the date and time by using either the drop-down calendar with the time section or manually within the edit box. The time section is optional and can be displayed using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsDateEditTimeSectionProperties_Visibletopic">TimeSectionProperties.Visible</helplink> property.
</p>
<p>
The ASPxTimeEdit's value can be manually modified within the editor's edit box or by using specific spin buttons.
</p>
<p>
To specify how editor values are represented within edit boxes, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDateEdit_EditFormattopic">EditFormat</helplink> property is used. For display and edit purposes, the edited value can be formatted as a date (EditFormat.Date), as a time (EditFormat.Time), as a date with time (EditFormat.DateTime), or in a custom format (EditFormat.Custom). If the editor's format is specified as custom, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDateEdit_EditFormatStringtopic">EditFormatString</helplink> property is used to specify the format pattern of the editor's value.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTextEdit_DisplayFormatStringtopic">DisplayFormatString</helplink> property allows you to specify the display view format within the edit box (when the editor is not focused).
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDateEdit_UseMaskBehaviortopic">UseMaskBehavior</helplink> property is useful to enable/disable masked input within the ASPxDateEdit.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Date Edit (ASPxDateEdit) and ASP.NET Time Edit (ASPxTimeEdit) make it easier for end-users to input date and time values in a WebForm using calendar and spin edit controls.</HighlightedDescription>
</Demo>
<Demo Key="DataBinding" Title="Data Binding">
<Keywords>eval, bind, databinding</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how different types of editors can be bound to data using standard data-binding
expressions when residing within a Detail View control's templates. In the binding expressions,
the Eval and Bind methods are used to bind editors to specific data field values
and submit data changes made within the editor back to the database.
</p>
<p>
Note that the combo box editor used in this demo is additionally bound to a separate data source from
which its item list is obtained dynamically.
</p>
<p>
Determine the manner in which editors are validated, using their built-in validation means.
</p>
]]>
</Description>
</Demo>
<Demo Key="NativeMode" Title="Native Mode">
<Description>
<![CDATA[
<p>
By default, most editors from the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxGridViewtopic">ASPxGridView</helplink> and Editor Library are rendered using
a specifically designed custom layout implemented with the help of standard HTML elements, such as HTML TABLEs, DIVs, SPANs, etc.
This allows an editor's appearance to be fully customized by applying a specific style to each composite element of the editor.
</p>
<p>
In some cases, the application logic might require representing editors as native HTML INPUT elements of the corresponding types.
This demo illustrates how our editors (such as the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxTextBoxtopic">ASPxTextBox</helplink>, <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxMemotopic">ASPxMemo</helplink>, <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxListBoxtopic">ASPxListBox</helplink>, <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxComboBoxtopic">ASPxComboBox</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxEditorsASPxButtontopic">ASPxButton</helplink>) support native rendering.
In order to use an editor in native mode, set the Native property to true. In native mode, an editor's render size may be significantly reduced,
which improves the editor's overall performance.
</p>
]]>
</Description>
</Demo>
<Demo Key="EnableOnClient" Title="Enable On Client">
<Keywords>clientenable, clientdisable</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how an editor's availability to an end-user can be controlled on the client side, using the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientEditBase_SetEnabledtopic">SetEnabled</helplink> method.
</p>
<p>
In this sample, the Product combo box becomes enabled when any technology is selected within the Technology combo box.
And appropriately, the Version combo is enabled after selecting any product within the Product combo.
</p>
]]>
</Description>
</Demo>
<Demo Key="RightToLeft" Title="Right to Left Layout">
<Keywords>rtl, Accessibility, arabic, Hebrew, Samaritan, Thaana, Syriac, Phoenician</Keywords>
<Description>
<![CDATA[
<p>Editors from the ASPxEditors Library provide support for right-to-left languages like Arabic or Hebrew. So, you can completely rely on our editor controls when creating international web pages that include support for the right-to-left reading order and the mirroring of UI elements.</p>
<p>To switch an editor to a right-to-left representation, just enable a single property - RightToLeft. When this property is on, text flows from right to left in an editor and the editor control itself is mirrored (the layout of its UI elements is reversed).</p>
<p>If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching each control's RightToLeft property. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option that can be accessed within the settings group of our <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8007">devExpress</helplink> section.</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Validation" Title="Validation">
<Keywords>valide, validate, invalidate</Keywords>
<Demo Key="Inplace" Title="Inplace Validation">
<Description>
<![CDATA[
<p>
The ASPxEditors Library provide a powerful and seamless way to perform data validation both on the client and server.
</p>
<p>
Different validation settings can be customized for an editor using specific properties available via the editor's
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxEdit_ValidationSettingstopic">ValidationSettings</helplink> property.
</p>
<p>
To define editor validation logic, the following easy-to-use means are provided (which can be combined together, if required):
</p>
<ul>
<li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_RequiredFieldtopic">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">ValidationSettings.RegularExpression</helplink> property allows you to validate an editor's value based upon a regular expression.
</li>
<li>
An editor's Validation event can be handled on either the client or server (or both) to setup editor validation.
Review the code sample tabs within this demo to learn how easy this really is.
</li>
</ul>
<p>
In this demo the validation check is triggered by clicking on the 'OK' ASPxButton control or
by changing the editor's value (if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ValidateOnLeavetopic">ValidationSettings.ValidateOnLeave</helplink>
option is enabled).
</p>
<p>
When an editor fails validation logic, the following can be displayed:
</p>
<ul>
<li>
Error image - To define an error image, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorImagetopic">ValidationSettings.ErrorImage</helplink> property.
</li>
<li>
Error text - The text can be specified by using either the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorTexttopic">ValidationSettings.ErrorText</helplink> property or in the Validation event's handler.
</li>
<li>
A specific error frame near the editor - The error frame's appearance is customized via the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ErrorFrameStyletopic">ValidationSettings.ErrorFrameStyle</helplink> property. You can also use the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_Displaytopic">ValidationSettings.Display</helplink> property to control how the error frame
occupies its space around the editor.
</li>
<li>
Other similar settings can also be customized via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxEdit_ValidationSettingstopic">ValidationSettings</helplink> property.
</li>
</ul>
<p>
Input focus can be forced back to the editor's input region. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_SetFocusOnErrortopic">ValidationSettings.SetFocusOnError</helplink> property controls the change in input focus.
</p>
<p>
This demo illustrates the built-in flexibility and efficiency of our validation engine, allowing you to easily implement different validation scenarios without using additional validator controls.
</p>
]]>
</Description>
</Demo>
<Demo Key="Summary" Title="Validation Summary">
<Description>
<![CDATA[
<p>
This demo illustrates the main capabilities of the ASPxValidationSummary control.
</p>
<p>
The ASPxValidationSummary allows you to easily validate DevExpress editors within the form, and to display validation errors grouped in a single panel.
</p>
<p>
The manner in which validation error texts are presented within the ASPxValidationSummary's panel can be controlled using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxValidationSummary_RenderModetopic">RenderMode</helplink> property.
They can be displayed as a table, or as a bulleted or ordered list.
</p>
<p>
Validation error texts can also serve as links, if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxValidationSummary_ShowErrorAsLinktopic">ShowErrorAsLink</helplink> property is set to true.
Clicking a link in this case moves focus to the corresponding invalid editor.
</p>
<p>
If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_ValidateOnLeavetopic">ValidateOnLeave</helplink> property is set to true, DevExpress editors are validated on the fly (on changing value),
without the necessity of a Submit button click. Using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsValidationSettings_SetFocusOnErrortopic">SetFocusOnError</helplink> property, input focus can be forcibly moved to an
invalid editor when clicking the Submit button.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxButton" Title="Button" SeoTitle="ASP.NET AJAX Button Control">
<Keywords>submit, buttons, radiobutton</Keywords>
<Demo Key="Appearance" Title="Appearance" >
<Description>
<![CDATA[
<p>
The ASPxButton control allows its contents to be represented by an image, or text, or image with text.
This sample demonstrates the following different kinds of ASPxButton's content representation:
</p>
<ul>
<li>
Image - The whole button is represented by a single image, the button's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_Texttopic">Text</helplink> property is not set.
Images for different button states - normal, hover and pressed - are defined using an image sprite and CSS classes specified at the level of the button's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesCheckedButtonImageProperties_SpritePropertiestopic">Image.SpriteProperties</helplink>.
</li>
<li>
Image and Text - A button's content is represented using the combination of an image and text.
The image is defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic">Image.Url</helplink> property; the text is specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_Texttopic">Text</helplink> property.
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_ImagePositiontopic">ImagePosition</helplink> property is used to control the image's position with respect to the text.
</li>
<li>
Background Image and Text - The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_Texttopic">Text</helplink> property is used to specify a button's display text.
The button's background image is defined using an image sprite that contains three images for three button states - normal, hovered and pressed.
These sprite images are defined in different CSS classes which are assigned to the button's CssClass, HoverStyle.CssClass and PressedStyle.CssClass properties.
The button's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxWebControl_Cursortopic">Cursor</helplink> and ForeColor properties are additionally used to specify the cursor displayed when the mouse hovers over the button and the displayed text's color.
</li>
<li>
Native - The ASPxButton control is rendered as a native HTML button input element.
This mode is controlled by the button's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_Nativetopic">Native</helplink> property set to true.
The button's text is defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_Texttopic">Text</helplink> property.
</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
This sample demonstrates the ASPxButton's client-side support for the checked and disabled states.
</p>
<p>
The checked state of the ASPxButton is initially controlled by the server <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_Checkedtopic">Checked</helplink> property and can be
changed on the client side via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientButton_SetCheckedtopic">SetChecked</helplink> client method. To specify a grouping of button controls to create
a mutually exclusive set of buttons, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_GroupNametopic">GroupName</helplink> property can be used. When this property is set,
only one ASPxButton in the specified group can be checked at a time.
</p>
<p>
The availability of the ASPxButton to end-users, which is initially set via the server-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxWebControl_Enabledtopic">Enabled</helplink> property,
can be dynamically changed on the client using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientButton_SetEnabledtopic">SetEnabled</helplink> client method.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxCalendar" Title="Calendar" SeoTitle="ASP.NET AJAX Calendar Control">
<Keywords>day,today,week,year,month,weekends</Keywords>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Keywords>HighlightToday, HighlightWeekends</Keywords>
<Description>
<![CDATA[
<p>
The ASPxCalendar can be used to display a calendar, allowing end-users to easily navigate to any day in any year and select dates. The main features of the ASPxCalendar control are listed below (together with the corresponding control settings):
</p>
<ul>
<li>
Highlighting dates (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_HighlightTodaytopic">HighlightToday</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_HighlightWeekendstopic">HighlightWeekends</helplink>);
</li>
<li>
Full control of the calendar elements visibility (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_ShowClearButtontopic">ShowClearButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_ShowTodayButtontopic">ShowTodayButton</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_ShowDayHeaderstopic">ShowDayHeaders</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_ShowHeadertopic">ShowHeader</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_ShowWeekNumberstopic">ShowWeekNumbers</helplink>);
</li>
<li>
Date selection (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_SelectedDatetopic">SelectedDate</helplink>);
</li>
<li>
Selection of multiple dates (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_EnableMultiSelecttopic">EnableMultiSelect</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_SelectedDatestopic">SelectedDates</helplink>).
</li>
</ul>
<p>
This demo illustrates the primary features of the ASPxCalendar. Use the options on the right to change the values of corresponding ASPxCalendar properties, and see the result within the control.
</p>
]]>
</Description>
</Demo>
<Demo Key="MultiMonth" Title="Multi-Month View">
<Keywords>few, multimonth, several</Keywords>
<Description>
<![CDATA[
<p>
The ASPxCalendar editor is able to display multiple months at the same time, organizing them in several rows and columns. This feature is controlled by a combination of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_Rowstopic">Rows</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_Columnstopic">Columns</helplink> property values.
</p>
<p>
In multi-month view, the multiple date selection capability (controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_EnableMultiSelecttopic">EnableMultiSelect</helplink> property) is still allowed, giving end-users an easy way to visually select multiple dates through several displayed months.
</p>
]]>
</Description>
</Demo>
<Demo Key="DayRender" Title="Custom Day Rendering">
<Keywords>dayrendering, blog</Keywords>
<Description>
<![CDATA[
<p>
The ASPxCalendar editor allows you to conditionally change the manner with which you render calendar days. The following events can be handled to customize a day cell appearance and functionality:
</p>
<ul>
<li>
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_DayCellInitializetopic">DayCellInitialize</helplink> event occurs before a day cell has been created. This event allows you to specify whether or not the processed day is a weekend day; this event also allows you to change the day text, and set the cell's hyper link and a target;
</li>
<li>
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_DayCellCreatedtopic">DayCellCreated</helplink> event occurs after a day cell has been created. This event allows you to populate the cell with custom controls;
</li>
<li>
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_DayCellPreparedtopic">DayCellPrepared</helplink> event occurs before a day cell has been rendered. This event allows you to customize the 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 <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_DayCellInitializetopic">DayCellInitialize</helplink> event is handled 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 <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCalendar_DayCellPreparedtopic">DayCellPrepared</helplink> event is handled to specify special style settings for the days with notes.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxCaptcha" Title="Captcha" SeoTitle="ASP.NET AJAX Captcha Control">
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
This demo illustrates the primary features of the ASPxCaptcha control.
</p>
<p>
The ASPxCaptcha is a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart)
control used to verify that submitted data come from a human and not a robot or script. The ASPxCaptcha control 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 ASPxCaptcha control are the Challenge Image, the Refresh Button and the Text Box.
The ASPxCaptcha control offers a flexible way to customize its appearance and layout by setting up these individual elements.
</p>
<p>
The Challenge Image 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/DevExpressWebASPxEditorsASPxCaptcha_ChallengeImagetopic">ChallengeImage</helplink> property.
To define a set of characters from which a random text should be generated, use the control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCaptcha_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/DevExpressWebASPxEditorsASPxCaptcha_CodeLengthtopic">CodeLength</helplink> property.
</p>
<p>
The ASPxCaptcha control's Refresh Button 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/DevExpressWebASPxEditorsASPxCaptcha_RefreshButtontopic">RefreshButton</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCaptcha_RefreshButtonStyletopic">RefreshButtonStyle</helplink> properties.
If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCaptcha_EnableCallBackstopic">EnableCallbacks</helplink> property is set to true, 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/DevExpressWebASPxEditorsASPxCaptcha_LoadingPaneltopic">LoadingPanel</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCaptcha_LoadingPanelImagetopic">LoadingPanelImage</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCaptcha_LoadingPanelStyletopic">LoadingPanelStyle</helplink>
properties.
</p>
<p>
The Text Box element of the ASPxCaptcha control allows end-users to input text recognized from the Challenge Image.
Entering the correctly recognized text proves a human interaction, when the submitted page 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/DevExpressWebASPxEditorsASPxCaptcha_TextBoxtopic">TextBox</helplink> property.
The element's appearance can be defined using properties available via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCaptcha_TextBoxStyletopic">TextBoxStyle</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/DevExpressWebASPxEditorsASPxCaptcha_ValidationSettingstopic">ValidationSettings</helplink> property. Its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsCaptchaCaptchaValidationSettings_SetFocusOnErrortopic">SetFocusOnError</helplink> setting controls whether input focus can be forcibly moved back to the text box element if an input value is invalid.
</p>
]]>
</Description>
<HighlightedDescription>TODO: Description</HighlightedDescription>
</Demo>
<Demo Key="CustomAppearance" Title="Custom Appearance">
<Description>
<![CDATA[
<p>
This demo shows how a CAPTCHA control with custom appearance can be implemented based upon the ASPxCaptcha, using its server and client API.
</p>
<p>
In this demo, the ASPxCaptcha's Refresh Button and Text Box functional elements are hidden.
Their functionality is implemented in a custom manner using separate controls.
Thus, the Refresh Button is represented via the IMG element, the Text Box - via the ASPxLabel and ASPxTextBox controls.
The Text Box element's built-in validation functionality is also disabled. To display validation results, two ASPxLabel controls are used.
</p>
<p>
When the form is submitted, manual verification of the input text is performed on the server side.
For this purpose, the text entered into the custom text box is compared with the value of the ASPxCaptcha's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCaptcha_Codetopic">Code</helplink> property.
This property determines the textual representation of the code displayed within the Challenge Image.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxCheckBox" Title="Check Box" SeoTitle="ASP.NET AJAX Check Box Editor">
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
ASPxCheckBox is a check editor that indicates whether a particular condition is on or off. It is commonly used to present a Yes/No or True/False selection to an end-user. An end-user can switch between check states by clicking the editor with the mouse or by pressing the SPACE key when the editor has focus. This demo illustrates the main features available to you when using the ASPxCheckBox editor.
</p>
<ul>
<li>
Two or Three States
<p>
The ASPxCheckBox editor supports two or three states, depending upon the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_AllowGrayedtopic">AllowGrayed</helplink> property setting. To set the state programmatically, use either the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_Checkedtopic">Checked</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_CheckStatetopic">CheckState</helplink> property. <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_Checkedtopic">Checked</helplink> is Boolean and can identify only checked and unchecked states. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_CheckStatetopic">CheckState</helplink> property is more powerful, and allows you to select one of three states. The third, indeterminate, state is available if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_AllowGrayedtopic">AllowGrayed</helplink> property is set to true. In three-states mode, you can additionally use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_AllowGrayedByClicktopic">AllowGrayedByClick</helplink> property to control whether end-users are allowed to switch the editor to the indeterminate state or whether this can only be done programmatically.
</p>
</li>
<li>
Custom Images for Check Box
<p>
By default, a check box is represented by an image within the ASPxCheckBox editor. It is possible to assign your own images to be displayed for different check box states. Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_CheckedImagetopic">CheckedImage</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_UncheckedImagetopic">UncheckedImage</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_GrayedImagetopic">GrayedImage</helplink> properties for this purpose.
</p>
</li>
<li>
Native Rendering
<p>
ASPxCheckBox supports native rendering by exposing the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBox_Nativetopic">Native</helplink> property. Set this property to true to render ASPxCheckBox as a native HTML INPUT element of the CHECKBOX type. This reduces the render size and improves the editor's overall performance. In a native mode, ASPxCheckBox behaves and appears as a standard HTML check box - it works in two states and it does not display check box images.
</p>
</li>
</ul>
<p>
In this demo, you can switch ASPxCheckEditor's check state by both clicking the editor and pressing a button. Explore how different settings affect the editor's behavior and appearance.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxColorEdit" Title="Color Editor" SeoTitle="ASP.NET Color Editor">
<Keywords>pallete</Keywords>
<Demo Key="Example" Title="Example">
<Description>
<![CDATA[
<p>
The ASPxColorEdit editor allows end-users to enter a color with ease.
You can either type its value directly into the editor's text box or select the color from the color palette in the editor's dropdown window.
While typing within the edit box, end-users can specify colors using a longhand or shorthand hexadecimal notation (HEX) for RGB color values (such as #f0f, #D8D8D8), or by using standard HTML color names (such as "red", "green", etc.), which are then automatically converted to color codes.
</p>
<p>
In this demo, ASPxColorEdit instances are used to specify background and foreground colors for the header and content elements of an
ASPxRoundPanel control. For this purpose, each editor's client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientColorEdit_ColorChangedtopic">ColorChanged</helplink> event is handled to
respond to a color change within the editor, and to send a callback by using the ASPxCallbackPanel's client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelScriptsASPxClientCallbackPanel_PerformCallbacktopic">PerformCallback</helplink> method.
On the server side, the selected color is obtained via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxColorEdit_Colortopic">Color</helplink> property value and it is applied to the corresponding
property of the ASPxRoundPanel control.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxComboBox" Title="Combo Box" SeoTitle="ASP.NET AJAX Combo Box">
<Keywords>combobox, select, dropdown</Keywords>
<Demo Key="LargeDataSource" Title="Filtering Large Data Source">
<Keywords>search, performance, filter, database</Keywords>
<Description>
<![CDATA[
<p>
This demo shows how you can filter ASPxComboBox editor data source that contains a large amount of records (about 20 000). For this purpose, both the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_ItemsRequestedByFilterConditiontopic">ItemsRequestedByFilterCondition</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_ItemRequestedByValuetopic">ItemRequestedByValue</helplink> events of the editor are handled.
</p>
<p>
In this demo, the ASPxComboBox 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 ASPxComboBox editor allows you to deliver to your customers
the ability for a fast and efficient search against a huge amount of data.
</p>
<p>
Being in incremental filtering mode, the ASPxComboBox has a 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/DevExpressWebASPxEditorsASPxComboBox_FilterMinLengthtopic">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 ASPxComboBox works with a large amount of data. In this case,
performing filtration on each new symbol typed is not sensible, due to the large size of the resulting data set, which might affect
the 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>
</Demo>
<Demo Key="IncrementalFiltering" Title="Incremental Filtering"
HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Incremental.png" HighlightedTitle="Combo Box - Incremental Filtering">
<Description>
<![CDATA[
<p>
The ASPxComboBox editor enables end-users to filter list items dynamically based upon the text typed into the editor's input box on the client side (find-as-you-type filtering).
The following filter modes are available, which is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_IncrementalFilteringModetopic">IncrementalFilteringMode</helplink> property:
</p>
<ul>
<li>None - Filtering is not applied to list items.</li>
<li>StartsWith - The editor is filtered for list items that begin with the search string.</li>
<li>Contains - The editor is filtered for list items that contain the search string.
The found search string is highlighted within items for usability purposes.</li>
</ul>
<p>
In this demo, both the 'StartsWith' and 'Contains' filter modes are demonstrated.
Note that in the 'Contains' filter mode, the value typed by an end-user into the edit box is searched for within the editor's item list, based upon the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_TextFormatStringtopic">TextFormatString</helplink> property's defined format.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Combo Box (ASPxComboBox) editor includes a built-in incremental filtering feature, which helps end-users easily find items in the drop-down list simply by typing text into the input box. This demo illustrates the difference between the ‘StartsWith’ and ‘Contains’ filter modes.</HighlightedDescription>
</Demo>
<Demo Key="CallbackMode" Title="Callback Mode" SeoTitle="Loading Data on Demand">
<Keywords>ajax,demand,loadondemand,paging</Keywords>
<Description>
<![CDATA[
<p>
The ASPxComboBox allows its items to be loaded from the server on demand, via callbacks, if its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_EnableCallbackModetopic">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, when an end-user
scrolls the list. In this mode, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_CallbackPageSizetopic">CallBackPageSize</helplink> property defines the number of items to be obtained from the server each time
it's required. This mode makes the first page load much faster, since only a few items need to be loaded initially.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientAPI" Title="Cascading Combo Boxes">
<Keywords>comboboxes, cascade</Keywords>
<Description>
<![CDATA[
<p>
The ASPxCombobox control allows its content (item list) to be updated via callbacks by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientComboBox_PerformCallbacktopic">PerformCallback</helplink> client method.
In this demo, the City combo box is populated on the fly with city names that correspond to the currently selected country from the
Country combo box.
</p>
]]>
</Description>
</Demo>
<Demo Key="MultiColumn" Title="Multiple Columns">
<Keywords>grid, table</Keywords>
<Description>
<![CDATA[
<p>
The ASPxComboBox and ASPxListBox editors allow their list data to be represented in several columns.
The multi-column mode is in effect only for editors that obtain their items from a data source.
An editor's column collection can be defined and customized through the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_Columnstopic">Columns</helplink> property.
Each column within this collection should be bound to a data source field via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListBoxColumn_FieldNametopic">FieldName</helplink> property.
You can also define a column's header caption, width, visibility state and other settings via column properties.
</p>
<p>
For the ASPxComboBox control, all its advanced features, such as incremental filtering, and loading items on
demand via callbacks, are supported in multi-column mode. The selected item is represented within the ASPxComboBox
editor's edit box using a value whose format is based upon the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_TextFormatStringtopic">TextFormatString</helplink> property's setting.
</p>
]]>
</Description>
</Demo>
<Demo Key="ImageEditBox" Title="Image in Edit Box">
<Keywords>imageitem, images</Keywords>
<Description>
<![CDATA[
<p>
By default, images associated with list items are displayed within the editor's dropdown list.
This demo illustrates how the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_ShowImageInEditBoxtopic">ShowImageInEditBox</helplink> property can be used to display an image of the selected item within
the editor's edit box in addition to the text.
</p>
<p>
Note that the ASPxComboBox provides the following ways to define item images:
</p>
<ul>
<li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_ImageUrltopic">ImageUrl</helplink> property of an item can be used to define images for individual items.
</li>
<li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_ItemImagetopic">ItemImage</helplink> property of the editor can be used to set a uniform image for all items.
</li>
<li>
If the editor is data bound, the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_ImageUrlFieldtopic">ImageUrlField</helplink> property can be used to specify a data field containing item image URLs.
</li>
</ul>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ListEditors" Title="List Editors" SeoTitle="ASP.NET AJAX List Editors" >
<Keywords>listbox, listedit, repeater</Keywords>
<Demo Key="MultiSelect" Title="List Box with Multiple Selection">
<Description>
<![CDATA[
<p>
The ASPxListBox editor allows multiple list items to be selected at the same time.
The selection behavior is controlled by the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListBox_SelectionModetopic">SelectionMode</helplink> property.
Depending on this property's setting, the following selection modes are available within the ASPxListBox editor:
</p>
<ul>
<li>
Single - Only one item can be selected within the editor.
</li>
<li>
Multiple - Multiple items can be selected within the editor. End-users can apply multi-selection by clicking list items while pressing Ctrl
(to add an individual item) or Shift (to select a range of items).
</li>
<li>
CheckColumn - Multiple items can be selected within the editor. End-users can apply multi-selection by clicking list items
(the Shift key can also be used in this mode to select a range of items).
</li>
</ul>
<p>
When multiple selection is enabled, the selection state of individual items can be specified via the item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic">Selected</helplink> property,
and a collection of selected items can be obtained by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListBox_SelectedItemstopic">SelectedItems</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListBox_SelectedIndicestopic">SelectedIndices</helplink> property.
In addition, item selection can be applied on the client side by using a specific client API (the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_GetSelectedItemstopic">GetSelectedItems</helplink>,
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_SelectItemstopic">SelectItems</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_UnselectItemstopic">UnselectItems</helplink> client methods).
</p>
<p>
Note that in multiple selection mode, all the ASPxListBox's features are supported, with the exception of loading items
on demand via callbacks (which is usually controlled by the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListBox_EnableCallbackModetopic">EnableCallbackMode</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListBox_CallbackPageSizetopic">CallBackPageSize</helplink> properties).
</p>
]]>
</Description>
</Demo>
<Demo Key="MovingItems" Title="Moving Items Between List Boxes">
<Keywords>Move</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how all items or only selected ones can be moved from one ASPxListBox to another on the client side in
response to button clicks.
</p>
<p>
Selected items are obtained by using an editor's client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_GetSelectedItemstopic">GetSelectedItems</helplink> method. Moving items is performed by removing them
from one editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListEdit_Itemstopic">Items</helplink> collection (via the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_RemoveItemtopic">RemoveItem</helplink> method) and adding them to another editor
(via the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_AddItemtopic">AddItem</helplink> method).
</p>
<p>
Note that the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_BeginUpdatetopic">BeginUpdate</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListBox_EndUpdatetopic">EndUpdate</helplink> methods are used by both editors to encapsulate item moving code.
This is required to avoid repetitive operations (such as editor size correction) until all items are moved.
</p>
]]>
</Description>
</Demo>
<Demo Key="CheckBoxList" Title="Check Box List">
<Keywords>Checkbox, collection</Keywords>
<Description>
<![CDATA[
<p>
The ASPxCheckBoxList editor 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/DevExpressWebASPxEditorsASPxListEdit_Itemstopic">Items</helplink> collection. For each list item, you can specify its caption and associated value.
</p>
<p>
The items selected within ASPxCheckBoxList can be determined by iterating through all list items and inspecting an item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic">Selected</helplink> property, or by using specific properties declared at the editor level (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBoxList_SelectedItemstopic">SelectedItems</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBoxList_SelectedIndicestopic">SelectedIndicies</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBoxList_SelectedValuestopic">SelectedValues</helplink>). You can easily select/unselect all editor items by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBoxList_SelectAlltopic">SelectAll</helplink>/<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckBoxList_UnselectAlltopic">UnselectAll</helplink> methods that are available on both the server and client sides.
</p>
<p>
The ASPxCheckBoxList layout is flexibly customized. You can display check box items in several columns (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckListBase_RepeatColumnstopic">RepeatColumns</helplink>), set a direction of items within the editor (horizontal or vertical through the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckListBase_RepeatDirectiontopic">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/DevExpressWebASPxEditorsASPxCheckListBase_RepeatLayouttopic">RepeatLayout</helplink>).
</p>
]]>
</Description>
</Demo>
<Demo Key="RadioButtonList" Title="Radio Button List">
<Keywords>Radio, collection</Keywords>
<Description>
<![CDATA[
<p>
The ASPxRadioButtonList editor 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/DevExpressWebASPxEditorsASPxListEdit_Itemstopic">Items</helplink> collection. For each list item, you can specify its caption and associated value.
</p>
<p>
The item selected within ASPxRadioButtonList can be determined by iterating through list items and inspecting an item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_Selectedtopic">Selected</helplink> property or by using specific properties declared at the editor level (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListEdit_SelectedItemtopic">SelectedItem</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListEdit_SelectedIndextopic">SelectedIndex</helplink>). You can easily manipulate a select item on the client side by using specific client methods (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_GetSelectedItemtopic">GetSelectedItem</helplink>/<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_SetSelectedItemtopic">SetSelectedItem</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_GetSelectedIndextopic">GetSelectedIndex</helplink>/<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientListEdit_SetSelectedIndextopic">SetSelectedIndex</helplink>).
</p>
<p>
The ASPxRadioButtonList layout is flexibly customized. You can display radio button items in several columns (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckListBase_RepeatColumnstopic">RepeatColumns</helplink>), set a direction of items within the editor (horizontal or vertical through the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxCheckListBase_RepeatDirectiontopic">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/DevExpressWebASPxEditorsASPxCheckListBase_RepeatLayouttopic">RepeatLayout</helplink>).
</p>
]]>
</Description>
</Demo>
<Demo Key="CustomImages" Title="Custom Images">
<Description>
<![CDATA[
<p>
The ASPxRadioButtonList editor allows you to specify images for its items. You can specify one image for all items within the control or set a particular image for each item.
</p>
<p>
This demo demonstrates how to specify custom images for radio buttons. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_ImageUrltopic">ImageUrl</helplink> property is used to specify an item image. To specify an item text, which is shown next to the image, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_Texttopic">Text</helplink> property is used.
</p>
<p>
Note that ASPxCheckBoxList editor images can be specified in the same way.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxDropDownEdit" Title="Dropdown Editor" SeoTitle="ASP.NET AJAX Drop Down Editor">
<Demo Key="DropDownEdit" Title="Extended Lookup">
<Description>
<![CDATA[
<p>
The ASPxDropDownEdit represents an editor containing an edit box to display the editor value (defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTextEdit_Texttopic">Text</helplink> property)
and a specific button, which opens a dropdown window whose content can be templated (using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDropDownEdit_DropDownWindowTemplatetopic">DropDownWindowTemplate</helplink> property).
The main purpose of the ASPxDropDownEdit is that it allows you to define its value based upon the value(s) of another control(s)
integrated into the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDropDownEdit_DropDownWindowTemplatetopic">DropDownWindowTemplate</helplink>.
</p>
<p>
In this demo, an ASPxGridView control is placed into the ASPxDropDownEdit's dropdown window template, and a click on a
row within the grid changes the editor's value. A specific client API exposed by the ASPxDropDownEdit is used in this demo to
assign a value to the editor (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientTextEdit_SetTexttopic">SetText</helplink> method), and manipulate the editor's dropdown window (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientDropDownEditBase_HideDropDowntopic">HideDropDown</helplink> and
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientDropDownEditBase_AdjustDropDownWindowtopic">AdjustDropDownWindow</helplink> methods).
</p>
]]>
</Description>
</Demo>
<Demo Key="CheckComboBox" Title="CheckComboBox Emulation" SeoTitle="Multi-Select ComboBox Emulation">
<Keywords>check, checkbox</Keywords>
<Description>
<![CDATA[
<p>
There are times when you might want to have a combo box editor on your page that allows for multiple selections.
In the DevExpress web editors library, multiple item selection is built in the ASPxListBox editor by default,
but the ASPxComboBox editor doesn't have it. This demo illustrates how you can use a combination of the ASPxDropDownEdit and
ASPxListBox editors to emulate a combo box that allows end-users to select multiple items within its dropdown list.
</p>
<p>
In this demo, a template of the the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxDropDownEdit_DropDownWindowTemplatetopic">DropDownWindowTemplate</helplink> type is created within the ASPxDropDownEdit.
This template contains an instance of the ASPxListBox editor whose <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxListBox_SelectionModetopic">SelectionMode</helplink> property is set to the CheckColumn value.
The ASPxDropDownEdit's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTextEdit_Texttopic">Text</helplink> property stores a list containing the selected items (that is, the values of their <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_Texttopic">Text</helplink> property),
demimited by semicolons. In addition to selecting items within the dropdown list, this demo allows end-users to select items by entering a
semicolon-separated series of item texts in the ASPxDropDownEdit's edit box. If an item text is entered that doesn't exist,
it is deleted from the edit box.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxFilterControl" Title="Filter Control" SeoTitle="ASP.NET AJAX Filter Builder Control">
<Keywords>filtering, condition</Keywords>
<Demo Key="FilterExpression" Title="Data Source Expressions">
<Description>
<![CDATA[
<p>
This demo illustrates the ASPxFilterControl's ability to generate database system specific filter expressions.
The ASPxFilterControl provides the following methods whose return values can be used as filter expressions ('WHERE' clauses)
for the corresponding data source types:
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxFilterControlBase_GetFilterExpressionForAccesstopic">GetFilterExpressionForAccess</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxFilterControlBase_GetFilterExpressionForOracletopic">GetFilterExpressionForOracle</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxFilterControlBase_GetFilterExpressionForMsSqltopic">GetFilterExpressionForMsSql</helplink></li>
</ul>
<p>
In addition, the obtained filter expression can be validated for completeness by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxFilterControlBase_IsFilterExpressionValidtopic">IsFilterExpressionValid</helplink> method,
which is available both on the server and client sides. This method checks whether all expression conditions are filled and
indicates whether it's safe to apply the expression.
</p>
<p>
In this demo, a standalone ASPxFilterControl is used to compose MS Access specific filter criteria.
These criteria are applied to data which is obtained from an .MDB file using an AccessDataSource and is displayed by an
ASPxDataView control.
</p>
<p>
The text of the filter expression being composed is displayed by a label to the right of the ASPxFilterControl.
If a filter expression is not valid, this is indicated by the corresponding label text.
</p>
<p>
Clicking the Apply button validates the current filter criteria and applies it to data by assigning it to the data source
control's SelectCommand property. Alternatively, you can generate the filter criteria via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxFilterControlBase_GetFilterExpressionForDataSettopic">GetFilterExpressionForDataSet</helplink>
method call and assign it to the data source control's FilterExpression property.
</p>
]]>
</Description>
</Demo>
<Demo Key="FilterBuilder" Title="External Filter for GridView">
<Description>
<![CDATA[
<p>
This demo demonstrates a stand-alone emulation of the ASPxGridView’s built-in Filter Control, which can also be used to create complex criteria.
</p>
<p>
In this demo, to apply the filter, click the 'Apply' button. This calls the ASPxFilterControl's client Apply method.
When applied, the filter control's Applied client-side event is handled to filter the ASPxGridView's data.
</p>
<p>
End-User Capabilities:
</p>
<p>
Add/Remove Conditions<br />
To create and customize filter criteria, use the Add and Remove buttons.
</p>
<p>
Change a Column in a Filter Condition<br />
To change a condition's column, invoke the column list and choose the required column.
</p>
<p>
Change an Operator in a Filter Condition<br />
To change a condition's operator, invoke the operator list and choose the required operator.
</p>
<p>
Edit a Condition's Value<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.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxProgressBar" Title="Progress Bar" SeoTitle="ASP.NET Progress Bar Control">
<Demo Key="ProgressBar" Title="Progress Bar Column">
<Description>
<![CDATA[
<p>
This demo illustrates how a progress bar column can be displayed within the ASPxGridView control.
</p>
<p>
The grid contains a column of the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewGridViewDataProgressBarColumntopic">GridViewDataProgressBarColumn</helplink> type.
This column displays a progress bar, which provides end-users with the percentage representation of a column value based
upon the minimum and maximum value limits defined by the column's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsProgressBarProperties_Minimumtopic">ProgressBarProperties.Minimun</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsProgressBarProperties_Maximumtopic">ProgressBarProperties.Maximum</helplink> properties.
The availability of a percentage value displayed within column progress bars can be controlled by using the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsProgressBarProperties_ShowPositiontopic">ProgressBarProperties.ShowPosition</helplink> property.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxSpinEdit" Title="Spin Editor" SeoTitle="ASP.NET AJAX Spin Editor">
<Keywords>spineditor, decimal</Keywords>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
This demo illustrates the primary features of the ASPxSpinEdit.
</p>
<p>
The ASPxSpinEdit control enables your end-users to edit numeric values with ease by clicking small or large increment buttons.
The visibility of these spin buttons is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsSpinButtons_ShowIncrementButtonstopic">SpinButtons.ShowIncrementButtons</helplink> and
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsSpinButtons_ShowLargeIncrementButtonstopic">SpinButtons.ShowLargeIncrementButtons</helplink> properties. To define the position of spin button within the editor,
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsEditButton_Positiontopic">SpinButtons.Position</helplink> property can be used. The increments with which the editor's value is changed when a
small or large spin button is clicked can be defined by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxSpinEdit_Incrementtopic">Increment</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxSpinEdit_LargeIncrementtopic">LargeIncrement</helplink>
properties respectively.
</p>
<p>
The ASPxSpinEdit can function in float or integer editing mode, which is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxSpinEdit_NumberTypetopic">NumberType</helplink> property.
In integer mode (when the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxSpinEdit_NumberTypetopic">NumberType</helplink> property is set to Integer), float value input is disabled
and float values displayed within the editor are automatically rounded after they have been modified.
In float mode, culture specific separators are supported, allowing decimal separators to display uniquely in various cultures.
The number of decimal places can be defined using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxSpinEdit_DecimalPlacestopic">DecimalPlaces</helplink> property.
</p>
<p>
The minimum and maximum allowed values can be defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxSpinEdit_MinValuetopic">MinValue</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxSpinEdit_MaxValuetopic">MaxValue</helplink> properties,
which enables end-user input to be limited by the specified range.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxTrackBar" Title="Track Bar" SeoTitle="ASP.NET AJAX Track Bar">
<Keywords>range, bounds</Keywords>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>ASPxTrackBar is a slider control that provides end-users with fast and easy visual data selection capabilities. End-users can select a value within ASPxTrackBar by positioning the handle within a range of values limited by a developer (using <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MinValuetopic">MinValue</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MaxValuetopic">MaxValue</helplink>). The handle position can be changed in the following manner:</p>
<ul>
<li>By clicking on the track or scale;</li>
<li>By clicking on decrement and 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 primary ASPxTrackBar features.</p>
<p>Orientation and direction:</p>
<p>ASPxTrackBar supports two orientation modes that can be specified with the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_Orientationtopic">Orientation</helplink> property: horizontal and vertical. The default orientation is horizontal. ASPxTrackBar can be displayed in a normal or reversed mode that is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_Directiontopic">Direction</helplink> property. In the reversed mode, the ASPxTrackBar direction (from <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MinValuetopic">MinValue</helplink> to <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MaxValuetopic">MaxValue</helplink>) turns from left to right to right to left (or from up to down to down to up if it is in a vertical orientation mode).</p>
<p>Scale customization:</p>
<p>Scale is a rectangular area where tick marks and scale labels are placed. You can use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_ScalePositiontopic">ScalePosition</helplink> property to specify where the scale can be displayed: on both sides along the track or just one of them. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_ScaleLabelHighlightModetopic">ScaleLabelHighlightMode</helplink> property allows you to define how the scale labels should be highlighted. Using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_ValueToolTipPositiontopic">ValueToolTipPosition</helplink> property you can define the place where a value tooltip will appear when the drag handle position is changed.</p>
<p>Elements visibility and appearence:</p>
<p>You can hide some elements of the track bar. Disabling the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_ShowDragHandlestopic">ShowDragHandles</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_ShowChangeButtonstopic">ShowChangeButtons</helplink> properties hides drag handle and increment/decrement buttons respectively. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_EqualTickMarkstopic">EqualTickMarks</helplink> property allows you to specify whether or not all tick marks should be of the same size.</p>
<p>In this demo you can explore how different settings affect editor behavior and appearance.</p>
]]>
</Description>
</Demo>
<Demo Key="Range" Title="Range Selection" HighlightedIndex="4" HighlightedImageUrl="~/Content/DemoIcons/TrackBar.png" HighlightedTitle="Track Bar - Range Selection">
<Description>
<![CDATA[
<p>ASPxTrackBar has an ability to display two drag handles; this allows end-users to select a range of values instead of a single value. Set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_AllowRangeSelectiontopic">AllowRangeSelection</helplink> property to True to enable this functionality.</p>
<p>In the range selection mode, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_PositionStarttopic">PositionStart</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_PositionEndtopic">PositionEnd</helplink> properties are used to specify drag handle positions. By default (in decimal scale display mode), a handle position corresponds to the track bar value. If you use an items display mode, the handle position is specified by the corresponding item's index.</p>
<p>The ASPxTrackBar control provides an end-user with an ability to move the selected range along the track by dragging the track highlighted part.</p>
<p>Track bar automatically marks the last clicked handle as focused and highlights it by default. An end-user can change its position using arrow keys, increment/decrement buttons and scroll wheel. Note that a click on the track changes the position of the nearest drag handle.</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Track Bar (ASPxTrackBar) control displays a single drag handle, or two drag handles that allow you to select a range of values. This demo highlights the capability to set the start and end points of a range.</HighlightedDescription>
</Demo>
<Demo Key="Scale" Title="Scale Settings">
<Description>
<![CDATA[
<p>ASPxTrackBar supports full scale customization. The key scale settings include:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MinValuetopic">MinValue</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MaxValuetopic">MaxValue</helplink>. Limit a value span visualized by the scale.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_LargeTickIntervaltopic">LargeTickInterval</helplink>. Specifies the large ticks placing interval.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_SmallTickFrequencytopic">SmallTickFrequency</helplink>. Defines how frequently small ticks should fill a single interval between large ticks.</li>
</ul>
<p>Sometimes it can be useful to show a non-symmetrical scale. For this purpose, you can use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_LargeTickStartValuetopic">LargeTickStartValue</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_LargeTickEndValuetopic">LargeTickEndValue</helplink> properties to set the values where the first and the last large tick marks should be placed.</p>
<p>Using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_Steptopic">Step</helplink> property, you can set the minimal value (increment/decrement) by which the drag handle position can be changed by end-users.</p>
<p>In this demo, you can select predefined scale settings from the combo box above and then modify them to explore how different settings affect scale behavior and appearance.</p>
]]>
</Description>
</Demo>
<Demo Key="Items" Title="Items">
<Description>
<![CDATA[
<p>
TrackBar allows you to display custom items instead of automatically generated scale marks. Populate the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_Itemstopic">Items</helplink> collection to activate ASPxTrackBar's items display mode. This collection can be filled manually or populated automatically through binding the editor to a data source. In items display mode, setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MinValuetopic">MinValue</helplink>/<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_MaxValuetopic">MaxValue</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_LargeTickIntervaltopic">LargeTickInterval</helplink>/<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_SmallTickFrequencytopic">SmallTickFrequency</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_Steptopic">Step</helplink> properties are not in effect. Scale labels, tick marks and possible positions to which drag handles can be moved by end-users correspond directly to items from the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_Itemstopic">Items</helplink> collection. When an end-user selects an item, the item's index is assigned to the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_Positiontopic">Position</helplink> (or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_PositionStarttopic">PositionStart</helplink>/<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_PositionEndtopic">PositionEnd</helplink>) property.
</p>
<p>
For each item you can define:
</p>
<ul>
<li>
the text displayed as the item label (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsTrackBarItem_Texttopic">TrackBarItem.Text</helplink> property);
</li>
<li>
unique item value (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsTrackBarItem_Valuetopic">TrackBarItem.Value</helplink> property);
</li>
<li>
the text displayed within a value tooltip invoked for the item when it is being selected by an end-user (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsTrackBarItem_ToolTiptopic">TrackBarItem.ToolTip</helplink> property).
</li>
</ul>
<p>
The type of item values can be centrally specified via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxTrackBar_ValueTypetopic">ValueType</helplink> property (by default it is set to Decimal).
</p>
<p>
This demo illustrates how to use ASPxTrackBar's client API to synchronize item selection with the display of the corresponding image. ASPxTrackBar and a standard Repeater (whose ItemTemplate contains an ASPxImage control in this demo) are bound to the same XML data file.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxperience.FileManagerAndUpload" Url="ASPxFileManagerAndUploadDemos" Title="DevExpress ASPxperience" SeoTitle="ASP.NET AJAX File Manager and File Upload" NavItemTitle="File Manager and File Upload" OrderIndex="11">
<Keywords>files, download. filecontrol, uploading</Keywords>
<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_ASPxperience_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/FileManager.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX File Manager and File Upload">
<BannerTitle>
File Management Controls for ASP.NET
</BannerTitle>
<BannerText>
The file manager control with upload/download capabilities is inspired by the Windows File Explorer. It allows you to provide file management capabilities in your web applications with ease
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=ijq_4SBNBqA</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxperience Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</helplink>.
These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="FileManager" Title="File Manager" SeoTitle="ASP.NET AJAX File Manager Control">
<Keywords>files, folders, upload, filesystem, filecontrol, folder, explorer, filemanager, hierarchy</Keywords>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
ASPxFileManager represents an Explorer-like control providing your end-users with the capability to manage files and folders. This control 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 ASPxFileManager control consists of the following main elements: a toolbar, a folder container, a file container, and an upload panel. Settings of these elements and common control settings can be customized via the corresponding properties such as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_Settingstopic">Settings</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_SettingsEditingtopic">SettingsEditing</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_SettingsToolbartopic">SettingsToolbar</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_SettingsFolderstopic">SettingsFolders</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_SettingsUploadtopic">SettingsUpload</helplink>.
</p>
<p>
The main features of the ASPxFileManager control are listed below (together with the corresponding control settings):
</p>
<ul>
<li>
Showing folder and file structure (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerSettings_RootFoldertopic">Settings.RootFolder</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/DevExpressWebASPxFileManagerFileManagerSettings_ThumbnailSizetopic">Settings.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/DevExpressWebASPxFileManagerASPxFileManager_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/DevExpressWebASPxFileManagerASPxFileManager_SelectedFiletopic">SelectedFile</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_SelectedFilestopic">SelectedFiles</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_SelectedFoldertopic">SelectedFolder</helplink> server properties; 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 control);
</li>
<li>
Keyboard support for main file operations.
</li>
</ul>
<p>
This demo illustrates ASPxFileManager primary features. Use the options in the top panel to change the values of corresponding ASPxFileManager properties, and see the result within the control.
</p>
]]>
</Description>
</Demo>
<Demo Key="CustomThumbnails" Title="Custom Thumbnails">
<Keywords>icons, fileicons</Keywords>
<Description>
<![CDATA[
<p>
In addition to an automatic thumbnail creation feature, the ASPxFileManager allows you to provide custom thumbnails by handling the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_CustomThumbnailtopic">CustomThumbnail</helplink> server event. This event allows you to define a custom manner that determines how all or certain files should be visually represented in folders. Within the event's handler, the currently processed file can be accessed and identified by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerFileManagerThumbnailCreateEventArgs_Filetopic">File</helplink> property, and a custom thumbnail can be defined for the file via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic">ThumbnailImage.Url</helplink> property.
</p>
<p>
In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_CustomThumbnailtopic">CustomThumbnail</helplink> event is handled to analyze file extensions and represent each file type using the corresponding custom thumbnail image.
</p>
]]>
</Description>
</Demo>
<Demo Key="BindingToDatabase" Title="Database Binding">
<Keywords>filebinding, filesystembinding, database, db, datasource</Keywords>
<Description>
<![CDATA[
<p>This demo illustrates how easily you can enable the ASPxFileManager to retrieve its content from a database.</p>
<p>With the ASPxFileManager you can visualize file system data that is available in a database. All you have to do is assign a data source connected to a database and map its fields to the ASPxFileManager via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFileManagerASPxFileManager_SettingsDataSourcetopic">SettingsDataSource</helplink> options.</p>
<p>In this demo, the ASPxFileManager uses the XpoDataSource shipped with our eXpress Persistent Objects (XPO) to access file system data stored in an Access database table. To improve performance, file contents (painting images) are read using the "delayed loading" feature provided by XPO (see the Delayed attribute applied to the ArtsEntity.Data property).</p>
]]>
</Description>
</Demo>
<Demo Key="AccessControl" Title="Access Control">
<Keywords>access, restrictions, fileaccess, accesscontrol, rights</Keywords>
<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 ASPxFileManager.</p>
<p>ASPxFileManager 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 ASPxFileManager 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 ASPxFileManager. File and folder permissions granted to each role are listed below.</p>
<ul>
<li>Default User. 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>Document Manager. 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>Media Moderator. 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>Administrator. 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>
</Demo>
<Demo Key="ClientSide" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event management technology. All available control-specific client-side events are traced in this demo. Play with the ASPxFileManager's interface elements to initiate client-side events.
</p>
<p>
The ASPxFileManager control 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 ASPxFileManager control's functionality. So, they give you the ability to completely control the client-side behavior of the control.
</p>
<p>
The following client events are available for the ASPxFileManager:
</p>
<ul>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink> - Occurs on the client side after the control 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://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="DetailsViewMode" Title="Details View" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/FileManager.png" HighlightedTitle="File Manager - Details View">
<Keywords>grid, gridview, aspxgridview, table</Keywords>
<Description>
<![CDATA[
<p>
This demo demonstrates ASPxFileManager's Details view mode.
</p>
<p>
ASPxFileManager 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>
<HighlightedDescription>The DevExpress ASP.NET File Manager (ASPxFileManager) allows you to easily add file management functionality to your web application. This demo shows the Details view mode of the ASPxFileManager, in which detailed file information is displayed in a grid-style file container and navigation is provided by a tree-style folder.</HighlightedDescription>
</Demo>
<Demo Key="MultipleFileSelection" Title="Multiple Files Selection">
<Description>
<![CDATA[
<p>
This demo illustrates ASPxFileManager'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 ASPxFileManager'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>
</Demo>
</DemoGroup>
<DemoGroup Key="UploadControl" Title="Upload Control" SeoTitle="ASP.NET AJAX File Upload Control">
<Keywords>uploading, fileapi, progressing</Keywords>
<Demo Key="Example" Title="Example">
<Description>
<![CDATA[
<p>The ASPxUploadControl allows end-users to upload files to the web application's server.</p>
<p>In this demo, the ASPxUploadControl's client and server functionality are used to upload an image file to the server, create the image's thumbnail and display the thumbnail image within a specific placeholder on the web page.</p>
<p>The main properties used in the demo are listed below:</p>
<ul>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlASPxUploadControl_ShowProgressPaneltopic">ShowProgressPanel</helplink> property enables a progress panel to be displayed during the upload process.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlASPxUploadControl_NullTexttopic">NullText</helplink> property is used to display a prompt text in a text box.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlValidationSettings_MaxFileSizetopic">ValidationSettings.MaxFileSize</helplink> property is used to specify the maximum file size allowed for upload.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlValidationSettings_AllowedFileExtensionstopic">ValidationSettings.AllowedFileExtensions</helplink> property restricts the allowed file extensions of the upload.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="MultiFileSelection" Title="Multi-File Selection" SeoTitle="Selection Multiple Files" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Upload.png" HighlightedTitle="Upload Control - Multi-File Selection">
<Description>
<![CDATA[<p>
This demo illustrates ASPxUploadControl'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">AdvancedModeSettings.EnableMultiSelect</helplink> property to true.
</p>
<p>
When multi-file selection is on, the ASPxUploadControl 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/DevExpressWebASPxUploadControlASPxUploadControlMembersTopicAll">ShowClearFileSelectionButton</helplink> property to false.
</p>
<p>
In this demo, you will learn how to handle the ASPxUploadControl's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControl_UploadingProgressChangedtopic">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>
<HighlightedDescription>The DevExpress ASP.NET Upload Control (ASPxUploadControl) enables you to easily introduce file upload capability into your web application. This demo illustrates the ASPxUploadControl's multi-file selection feature, in which end-users can select multiple files to upload using a single dialog.</HighlightedDescription>
</Demo>
<Demo Key="MultiFileUpload" Title="Multi-File Upload" SeoTitle="Uploading Multiple Files" >
<Description>
<![CDATA[<p>
This demo illustrates the ASPxUploadControl's capability to upload more than one file at a time.
</p><p>
The ASPxUploadControl allows an arbitrary number of file input elements to be added or removed dynamically via the control's user interface.<br />
All manipulations with file input elements are performed on the client side. The corresponding server-side synchronization is executed on the first round-trip to the server.
</p><p>
The progress of file uploading can be visualized by using a built-in progress panel. Its availability is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlASPxUploadControl_ShowProgressPaneltopic">ShowProgressPanel</helplink> property. The built-in progress panel contains a progress bar displaying the progress information, and a button allowing end-users to cancel file uploading.
</p><p>
In this demo, clicking the Upload button initiates multi-file upload. All valid uploaded files are represented by the corresponding links within the rightmost panel.
</p>]]>
</Description>
</Demo>
<Demo Key="CustomProgressPanel" Title="Custom Progress Panel">
<Keywords>progressing</Keywords>
<Description>
<![CDATA[<p>
In addition to the built-in progress panel, the ASPxUploadControl provides you with the capability to create a custom file upload visualization. For this purpose, you can use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControl_UploadingProgressChangedtopic">UploadingProgressChanged</helplink> client event. It exposes all the required information about the current state of the file upload, such as the total count and size of the files selected for uploading, the currently uploaded file's name, the already uploaded files' size, and the current progress value (in percentage).
</p><p>
This demo illustrates how a custom progress panel can be implemented by handling the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControl_UploadingProgressChangedtopic">UploadingProgressChanged</helplink> client event and using a separate ASPxProgressBar control displayed within an ASPxPopupControl.
</p><p>
In this demo, it is also illustrated how to implement custom visualization of the file upload result. Automatically obtained error information, or any custom operation result, is received from the server side and displayed within an alert message box instead of being shown under file inputs within ASPxUploadControl. For this purpose, the control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlValidationSettings_ShowErrorstopic">ValidationSettings.ShowErrors</helplink> property is disabled (to suppress default error indication), and both server and client FilesUploadComplete events are handled (to identify the operation result on the server and to process and display it on the client).
</p><p>
Note that ASPxUploadControl is used in advanced upload mode in this demo (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxUploadControlASPxUploadControl_UploadModetopic">UploadMode</helplink> property is set to Advanced).
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Accessibility" Title="Accessibility">
<Demo Key="RightToLeft" Title="Right to Left Layout">
<Description>
<![CDATA[
<p>
Our visual controls provide support for right-to-left languages, like Arabic or Hebrew. So, you can completely rely on our web controls when creating international web pages that include support for right-to-left reading order, and mirroring of UI elements.
</p>
<p>
To switch a control to right-to-left representation, just enable a single property - RightToLeft. When this property is on, text flows from right to left in a control and the control itself is mirrored (the layout of its UI elements is reversed).
</p>
<p>
If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching each control's RightToLeft property. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option, that can be accessed within the settings group of our devExpress section.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxGauges" Url="ASPxGaugesDemos" Title="DevExpress ASPxGauges" SeoTitle="ASP.NET AJAX Gauge Controls" NavItemTitle="Gauges" OrderIndex="7">
<Keywords>visualisation, visualization</Keywords>
<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_ASPxGauges_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Gauge.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Gauge Controls">
<BannerTitle>
ASP.NET AJAX Gauge Controls
</BannerTitle>
<BannerText>
Over 180 built-in presets, including Circular, Linear, Digital, State Indicator Gauges and Composite Presets
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>
<DescriptionTitle>Welcome to the online demo site of the ASPxGauges Suite</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our ASP.NET controls.
These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Features" Title="Features">
<Demo Key="Styles" Title="Styles" SeoTitle="Built-in Gauge Styles"
HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Styles.png" HighlightedTitle="Built-in Gauge Styles">
<Description>
<![CDATA[
The ASP.NET Gauges provides 26 built-in styles. The styles are available for all gauge types (Circular, Linear and Digital) and thus provide a consistent look and feel for your gauge dashboard.
In this demo, you can see the corresponding styles.
]]>
</Description>
<HighlightedDescription>DevExpress ASP.NET Gauges provide 26 built-in styles that can be applied to most gauge elements.</HighlightedDescription>
</Demo>
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data-Bound Gauge Control"
HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/DataBinding.png">
<Keywords>datasource, databinding, sqldatasource</Keywords>
<Description>
<![CDATA[
This demo shows how to bind ASP.NET Gauges to data. To bind this control to data, use a scale's DataBinding event. In the demo, you can select two cars and a car's parameter. The gauge will automatically indicate the difference between these cars' parameters.
]]>
</Description>
<HighlightedDescription>
You can easily bind the DevExpress ASP.NET Gauge Control (ASPxGaugeControl) to data. This demo shows how to bind the ASPxGaugeControl.
</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="Gauges" Title="Gauge Types">
<Demo Key="CircularGauge" Title="Circular Gauge" SeoTitle="Circular Gauges"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Circular.png">
<Description>
<![CDATA[
Circular Gauge is a component that represents element values by visualizing them on a circular scale.
Practice customizing various options, and immediately see the result in the preview pane.
]]>
</Description>
<HighlightedDescription>
A Circular Gauge is a component that displays element values on a circular scale. This demo illustrates the Circular Gauge, which is included in the DevExpress ASP.NET Gauge Control (ASPxGaugeControl).
</HighlightedDescription>
</Demo>
<Demo Key="LinearGauge" Title="Linear Gauge" SeoTitle="Linear Gauges"
HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Linear.png">
<Description>
<![CDATA[
Linear Gauge is a component that represents visual elements on a linear scale. You can use this control in different applications for creating thermometers, indicators.
Practice customizing various options, and immediately see the result in the preview pane.
]]>
</Description>
<HighlightedDescription>
A Linear Gauge is a component that displays element values on a linear scale. This demo illustrates the Linear Gauge, which is included in the DevExpress ASP.NET Gauge Control (ASPxGaugeControl).
</HighlightedDescription>
</Demo>
<Demo Key="DigitalGauge" Title="Digital Gauge" SeoTitle="Digital Gauges">
<Description>
<![CDATA[
This demo illustrates a digital gauge type. See how the gauge displays text, using the seven segment, fourteen segment and matrix display mode.
]]>
</Description>
</Demo>
<Demo Key="StateIndicatorGauge" Title="State Indicator Gauge" SeoTitle="State Indicator Gauges">
<Description>
<![CDATA[
This demo illustrates a state indicator gauge type, appropriate for visualizing objects that have a set of predefined states.
In this demo, you can select the image set, and then select a state via a spin edit.
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Gadgets" Title="Gadgets">
<Demo Key="WorldTime" Title="World Time" SeoTitle="Composite Gauges">
<Description>
<![CDATA[
In this demo, gauges are used to show the current time in certain cities around the world.
Each gauge contains three labels displaying a city name, country and an average currency exchange rate against US dollar.
NOTE: This demo doesn't use real data.
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxGridView" Url="ASPxGridViewDemos" Title="DevExpress ASPxGridView" SeoTitle="ASP.NET AJAX Data Grid Control" NavItemTitle="Grid" OrderIndex="0" IntegrationHighlighted="true">
<Keywords>gridview, table, datatable</Keywords>
<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_ASPxGridView_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Grid.png</IntegrationImageUrl>
<IntegrationDescription>
Unlimited master-detail levels, Web Accessibility support,
SharePoint integration and unmatched end-user data analysis capabilities
</IntegrationDescription>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Data Grid Control">
<BannerTitle>
Blazing Fast and Lightweight Data Grid for ASP.NET AJAX
</BannerTitle>
<BannerText>
Unlimited master-detail levels, Web Accessibility support,
SharePoint integration and unmatched end-user data analysis capabilities
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=-rqxsCR5L5E</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxGridView and Editors Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our ASP.NET grid and data editors library. These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Demo Key="LinqDataSourceServerMode" Title="300,000 Records via LINQ" SeoTitle="Large Database via LINQ"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/ServerMode.png">
<Keywords>databinding, largedata, bigdata, server mode, database server mode, high performance, fast</Keywords>
<Description>
<![CDATA[
<p>
A unique LinqServerModeDataSource control was specifically designed by DevExpress for the ASPxGridView,
allowing it to efficiently work with large amounts of data by using LINQ Server Mode.
In this mode, only small portions of the required data are loaded into the ASPxGridView by demand, and all the necessary data processing
(such as grouping or sorting) is performed on the data server. This technique significantly reduces the application's response time.
</p>
<p>
Test the application's performance by switching between two data sources and performing the same data operations
(grouping or sorting) within the ASPxGridView control.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress LinqServerModeDataSource component improves performance when binding the DevExpress ASP.NET Grid View (ASPxGridView) to a large data set, because only small portions of the data are loaded on demand. This demo illustrates how the ASPxGridView control works easily and quickly with a data source consisting of 300,000 records.</HighlightedDescription>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument4059" Title="Data Binding to Large Data via LINQ" />
</Demo>
<Demo Key="XPOLargeDB" Title="Large Database via XPO" SeoTitle="Large Database via XPO">
<Keywords>xpo, Objects, largedata, bigdata, server mode, database server mode, high performance, fast</Keywords>
<Description>
<![CDATA[
<p>
The ASPxGridView is blazing fast and its patent pending server side data processing engine allows you to create highly responsive web applications, regardless of dataset size of data complexity. Whether you need to display a million rows or allow your users to sort, group or filter against very large datasets, the ASPxGridView’s server mode is up for any challenge.
</p>
<p>
In this example, the underlying dataset contains 300,000 records. You can perform various operations against the contents of the grid (such as sorting, filtering, and grouping) and calculate summaries against the values stored within the database.
</p>
<p>Creating a high performance web application with the ASPxGridView is easy. This demo uses the XpoDataSource component which ships as part of the DevExpress ASP.NET Subscription. XpoDataSource allows you to bind any DevExpress data-aware control to any database supported by XPO (the DevExpress ORM). XpoDataSource allows you to load records on-demand and perform data shaping operations on the server, reducing the amount of information that is transmitted to the client and radically improving speed and application responsiveness.</p>
<p>Using XpoDataSource is simple and straightforward. You simply bind the ASPxGridView control to your data source via the XpoDataSource, and set the XpoDataSource.ServerMode property to true.</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument3726" Title="Data Binding to Large Data via XPO" />
</Demo>
<Demo Key="Live" Title="Live Data" SeoTitle="Real-time Data Processing">
<Keywords>realtime, updating, market, databinding</Keywords>
<Description>
<![CDATA[
<p>The ASPxGridView can address a wide range of business use-case scenarios and offers complete control over the data source displayed within it – be it a static collection or a web service providing live data.</p>
<p>In this demo, the ASPxGridView displays dynamic data that is refreshed every 2 seconds. The grid control is bound to an ObjectDataSource control, which provides randomly generated stock quotes (Quote objects). Once every 2 seconds, the grid control is updated via its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_Refreshtopic">Refresh</helplink> client method to visualize changes (the Change property of the Quote objects). To display an appropriate image indicator next to a percent change value, a template is used for the Change column (see the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewDataColumn_DataItemTemplatetopic">DataItemTemplate</helplink> property in the demo's ASPX markup file). To access a Quote object being displayed within a grid row, the grid control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_GetRowtopic">GetRow</helplink> function is called (see the GetIconImageUrl, GetIconImageVisibility, and GetPercentageText methods in the code-behind file).</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="GroupingSorting" Title="Sorting and Grouping">
<Demo Key="Sorting" Title="Sorting Data" SeoTitle="Sorting Data">
<Description>
<![CDATA[
<p>
The ASPxGridView makes data shaping straightforward and painless and much like the built-in data grouping feature, you can sort data 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-most edge. If a column is not sorted, the sort glyph is hidden.
</p>
<p>
In this demo, you can click a given column header to initiate sorting or change column sort order (ascending to descending and vice versa). To sort data against multiple columns, click column headers with the SHIFT key pressed.
</p>
<p>
Sorting can be enabled by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSorttopic">AllowSort</helplink> option to true.
</p>
]]>
</Description>
</Demo>
<Demo Key="Grouping" Title="Grouping Data" SeoTitle="Outlook Style Data Grouping">
<Description>
<![CDATA[
<p>
The Outlook inspired ASPxGridView allows you and your end-users to group data against unlimited columns using simple drag and drop operations. In this example, data is grouped by the Country column and sorted in ascending order.
</p>
<p>
Data grouping is allowed if the following Grid 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.
The panel's visibility is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowGroupPaneltopic">Settings.ShowGroupPanel</helplink> option.
</p>
<p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_GroupCounttopic">GroupCount</helplink> property to lookup the number of columns used to group data.
These columns can be obtained using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_GetGroupedColumnstopic">GetGroupedColumns</helplink> method.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument3728" Title="Grouping Overview" />
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument3730" Title="Grouping in Code" />
</Demo>
<Demo Key="IntervalGrouping" Title="Interval Grouping" SeoTitle="Interval Grouping">
<Description>
<![CDATA[
<p>To help provide total control over the display of information within its container, the ASPxGridView supports interval grouping. This powerful feature allows you to group the values within text columns against individual characters or group date-time columns by month, year, or date.
</p>
<p>
In this demo, the Order Date column uses interval grouping. By default, Order Date is grouped by Year and summaries automatically computed for values stored within the group. You can modify the manner in which group interval order is displayed on-screen by selecting values from the 'Date Group Interval' combo box.
</p>
<p>Interval grouping is controlled by a column's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewDataColumnSettings_GroupIntervaltopic">Settings.GroupInterval</helplink> property.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument5338" Title="Grouping Modes and Custom Grouping" />
</Demo>
</DemoGroup>
<DemoGroup Key="Filtering" Title="Filtering">
<Keywords>filtercontrol, filters</Keywords>
<Demo Key="FilterRow" Title="Data Filter Row">
<Description>
<![CDATA[
<p>
The ASPxGridView provides a number of easy-to-use data filtering options. Inspired by Microsoft Excel, the Filter Row allows end-users to filter data by entering text within its cells.
</p>
<p>
In this example, you can filter against the values stored within the underlying dataset by entering the appropriate filter criteria in the cells displayed below individual column headers. For total control over the values returned by the filter row, an optional filter row menu displays a list of filter conditions for a given search operation. This demo includes a 'Show Filter Row Menu' check box. Once enabled, you can view this menu and apply one of the nine filter conditions to restrict your search results.
</p>
<p>
Set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterRowtopic">Settings.ShowFilterRow</helplink> property to true to display the filter row within the ASPxGridView.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument3753" Title="Auto Filter Row" />
</Demo>
<Demo Key="HeaderFilter" Title="Header Filter" SeoTitle="Excel Style Data Filtering">
<Description>
<![CDATA[
<p>
The ASPxGridView provides a powerful data filtering mechanism which displays a dropdown list of all unique values within a column. Invoked by activating the column header’s filter button, end-users can filter the records stored in the underlying dataset by selecting the values displayed within the dropdown.
</p>
<p>
By default, filter dropdown buttons are disabled. To show filter buttons, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowHeaderFilterButtontopic">Settings.ShowHeaderFilterButton</helplink> property to true.
</p>
<p>
Two list modes are available for each filter dropdown: List and Checked List. Filter mode can be specified for individual columns via the column's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewDataColumnSettings_HeaderFilterModetopic">Settings.HeaderFilterMode</helplink> property. If this property is set to CheckedList for a given column, the column's header filter dropdown contains a check box list, allowing end-users to select multiple values for the filter criteria.
</p>
<p>
The ASPxGridView allows you to create custom filter values, define filter criteria and display these values within the column's filter dropdown. To do this, handle the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_HeaderFilterFillItemstopic">HeaderFilterFillItems</helplink> event. In this demo, custom filter values are displayed within the 'Total' and 'Quantity' columns' filter dropdowns.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11579" Title="Header Filter" />
</Demo>
<Demo Key="FilterBuilder" Title="Filter Control" SeoTitle="Built-in Filter Builder">
<Description>
<![CDATA[
<p>
Built for web applications that require ad-hoc query capabilities, the ASPxGridView Filter Control allows end-users to build complex filter criteria with an unlimited number of filter conditions and logical operators. You can activate the Filter Control by clicking the image or filter expression link displayed within the Filter Bar.
</p>
<ul>
<li><p>
Add/Remove Conditions<br />
To create and customize filter criteria, use the Add and Remove buttons.
</p></li>
<li><p>
Change a Column in the Filter Condition<br />
To change a condition's column, invoke the column list and choose the required column.
</p></li>
<li><p>
Change an Operator in the Filter Condition<br />
To change a condition's operator, invoke the operator list and choose the required operator.
</p></li>
<li><p>
Edit a Condition's Value<br />
To edit a condition's value, click the operand value and enter the appropriate text. To discard changes to the value and close the active edit box, press ESC.
</p></li>
</ul>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument5138" Title="Filter Control" />
</Demo>
</DemoGroup>
<DemoGroup Key="Summary" Title="Data Summaries">
<Keywords>amount, total</Keywords>
<Demo Key="Total" Title="Grid Totals" SeoTitle="Total Summary Calculation">
<Description>
<![CDATA[
<p>
The ASPxGridView is a data shaping powerhouse and includes a variety of data summary computation options. Total Summaries are aggregate function values calculated against all rows within the ASPxGridView and displayed within the Footer. Built-in aggregate functions include: Min, Max, Avg, Sum and Count.
</p>
<p>
The Footer is displayed if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFootertopic">Settings.ShowFooter</helplink> property is set to true.
</p>
<p>
The ASPxGridView stores its total summary items within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_TotalSummarytopic">TotalSummary</helplink> collection.
Individual items are represented by <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxSummaryItemtopic">ASPxSummaryItem</helplink> objects.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument3757" Title="Total Summary" />
</Demo>
<Demo Key="Group" Title="Group Summary Totals" SeoTitle="Group Summary Calculation">
<Description>
<![CDATA[
<p>
A Group Summaries represent the value of an aggregate function calculated across all data rows within a group.
</p>
<p>
In this example, the ASPxGridView is grouped against the Country and City columns. Group Summaries are computed for Unit Price (Sum) along with the total count of all rows within the data group. The summary values are automatically displayed within individual group rows.
</p>
<p>
The ASPxGridView stores its group summaries within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_GroupSummarytopic">GroupSummary</helplink> collection.
Individual items are represented by <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxSummaryItemtopic">ASPxSummaryItem</helplink> objects.
</p>
]]>
</Description>
</Demo>
<Demo Key="GroupFooter" Title="Group Footer Summaries">
<Description>
<![CDATA[
<p>
Group Footers are an alternate way in which to display summaries for grouped data. Group Footers contain footer cells that correspond to individual data columns. Footer cells display formatted summary values.
</p>
<p>
In this example, grid values are grouped against the Order Date column. For each group, summaries are computed against the Country (Count), Quantity (Sum), and Total (Sum) columns within the group footer.
</p>
<p>
Group footers can be displayed for all or only for expanded group rows. To specify when the ASPxGridView displays group footers, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowGroupFootertopic">Settings.ShowGroupFooter</helplink> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="GroupSortBySummary" Title="Sort By Summaries">
<Description>
<![CDATA[
<p>The ASPxGridView provides a rich API to sort data groups by their summary values.</p>
<p>
In this demo, the ASPxGridView is grouped by Countries. Use the ‘Sort by summary mode’ combo box to select the required sort order. For instance, select Descending to sort grouped rows, so that countries having the maximum sales amount appear at the top of the view.</p>
<p>
Group rows are sorted by summary values based upon the information provided by ASPxGroupSummarySortInfo objects. Properties introduced by this objects represent the sort order, summary item used to calculate summary values, etc. These properties are read-only and initialized by the constructor.
</p>
<p>
To sort group rows by summary values, create a new ASPxGroupSummarySortInfo object and add it to the ASPxGridView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_GroupSummarySortInfotopic">GroupSummarySortInfo</helplink> collection using the GroupSummarySortInfoCollection.Add method. After the ASPxGroupSummarySortInfo object has been added to the collection, group rows are automatically sorted by their summary values.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument4020" Title="Sort Groups by Summary Values" />
</Demo>
</DemoGroup>
<DemoGroup Key="GridEditing" Title="Grid Editing" IsUpdated="true">
<Keywords>crud, dataedit</Keywords>
<Demo Key="EditModes" Title="Grid Edit Modes"
HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/EditModes.png">
<Description>
<![CDATA[
<p>
The ASPxGridView provides different data editing options so you can create web applications that most effectively address the needs of your end-users.
</p>
<p>
This demo describes four built-in grid data Edit Modes. Use the 'Edit Mode' combo box to select and use the desired edit mode.
</p>
<p>
The following members can be used to manipulate data:
</p>
<ul>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_StartEdittopic">StartEdit</helplink> - starts editing.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_UpdateEdittopic">UpdateEdit</helplink> - saves changes.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_CancelEdittopic">CancelEdit</helplink> - cancels changes.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_AddNewRowtopic">AddNewRow</helplink> - adds a new row.
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_DeleteRowtopic">DeleteRow</helplink> - deletes a row.
</li>
</ul>
<p>
To allow end-user modification, add a Command column to the view's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_Columnstopic">Columns</helplink> Columns collection and specify the commands that can be used by end-users. There are six command items:
</p>
<ul>
<li>New</li>
<li>Edit</li>
<li>Delete</li>
<li>Select</li>
<li>Update</li>
<li>Cancel</li>
</ul>
<p>
By default, a command item is represented by a link. It can also be represented by a button or image. Its representation is specified by the column's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_ButtonTypetopic">ButtonType</helplink> property.
</p>
<p>
Note: The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_KeyFieldNametopic">KeyFieldName</helplink> property must be specified to enable data editing/inserting/deleting operations.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Grid View (ASPxGridView) provides your end-users ways to edit data without the need to develop edit forms at design time. This demo illustrates the various edit modes available, including inline editing, editing via an edit form, editing via an edit form with the data row displayed, and editing via a popup edit form.</HighlightedDescription>
</Demo>
<Demo Key="EditForm" Title="Edit Forms">
<Description>
<![CDATA[
<p>
The ASPxGridView ships with an intuitive and easy-to-use Edit Form for inline data editing (editing underlying column values within the grid container). The Edit Form allows you to specify the order of individual editors displayed within it and control the placement of the new item row.
</p>
<p>
In this demo, the ASPxGridView uses the built-in Edit Form to modify cell values. The Edit Form displays editors with associated captions for each data column. The 'Show Memo at Bottom' check box controls the position of the Notes column within the Edit Form. Toggle the 'Show new item row at bottom' check box to change the position of the new item row within the ASPxGridView.
</p>
<p>To modify the arrangement of individual editors within the Edit Form, use the data column's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewDataColumn_EditFormSettingstopic">EditFormSettings</helplink> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="EditFormTemplate" Title="Edit Form Templates" SeoTitle="Templates in Edit Form">
<Description>
<![CDATA[
<p>
The ASPxGridView offers total control over the way in which individual editors are displayed within the Edit Form via Templates.
</p>
<p>
In this demo, we use a Page Control (tab strip) to reduce the space occupied by the Edit Form.
</p>
<p>
<b>Important Note</b></p><p>
To display the edit cells, within the regular Edit Form, create an ASPxGridViewTemplateReplacement control and set its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewTemplateReplacement_ReplacementTypetopic">ReplacementType</helplink> to 'EditFormEditors'.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument9324" Title="Template Replacements" />
</Demo>
<Demo Key="EditFormLayout" Title="Edit Form Layout" IsNew="true">
<Description>
<![CDATA[
<p>The ASPxGridView offers total control over the way in which individual editors are displayed within the Edit Form via Templates.</p>
<p>In this demo, we use the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxFormLayoutASPxFormLayouttopic">ASPxFormLayout</helplink> to organize the individual data editors layout.</p>
<p>The ASPxFormLayout layout items are gathered in the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutASPxFormLayout_Itemstopic">Items</helplink> collection and are bound to data source fields using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItem_FieldNametopic">LayoutItem.FieldName</helplink> property. Each layout item contains a data editor from the DevExpress ASPxEditors library. This data editor is bound to data via the Eval method and allows editing corresponding field type values.</p>
<p>When the edit form is submitted to the server, the edited record is updated in the code-behind.</p>
]]>
</Description>
</Demo>
<Demo Key="PopupEditForm" Title="Popup Edit Form" SeoTitle="Data Editing via Popup Window">
<Description>
<![CDATA[
<p>
As the name implies, the Popup Edit Form allows end-users to edit column values within a popup.
</p>
<p>
To enable the Popup Edit Form mode, set the ASPxGridView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewEditingSettings_Modetopic">SettingsEditing.Mode</helplink> option to PopupEditForm.
</p>
<p>
The Popup Edit Form can also be displayed as a modal dialog. In this mode, the edit form must be closed before returning to the application. This behavior is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewEditingSettings_PopupEditFormModaltopic">SettingsEditing.PopupEditFormModal</helplink> option.
</p>
<p>
In this example, you can specify whether to use a modal popup via the “Show Popup Edit form in modal mode” checkbox and control the positioning of the Notes field using the “Show memo at bottom” checkbox.
</p>
]]>
</Description>
</Demo>
<Demo Key="TwoWayBinding" Title="Two-Way Binding" SeoTitle="Two-Way Data Binding">
<Description>
<![CDATA[
<p>
The ASPxGridView allows you to implement "Two-Way Data Binding" - a data access model that allows you to both read and update data.
</p>
<p>
In this demo, editors contained within the Edit Form's template use the Bind method to retrieve and update the values of data-bound fields. This method takes the name of a data field to associate with a bound property.
</p>
]]>
</Description>
</Demo>
<Demo Key="CascadingComboBoxes" Title="Cascading Combo Boxes">
<Description>
<![CDATA[
<p>
In this demo, the City column's combo box is populated dynamically (via callbacks) with city names, based upon the value selected within the Country column combo box. Only the content stored within the City combo box is updated during round-trips to the server - not the content of the page or the ASPxGridView control.
</p>
<p>
The Country combo box' <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientComboBox_SelectedIndexChangedtopic">SelectedIndexChanged</helplink> client-side event is handled to send a request to update the City combo box. On the server side the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxComboBox_Callbacktopic">Callback</helplink> event is handled to populate the City combo box with required values.
</p>
]]>
</Description>
</Demo>
<Demo Key="Validation" Title="Data Validation">
<Description>
<![CDATA[
<p>
The ASPxGridView allows you to manually validate the edited row and display errors for invalid fields.
</p>
<p>
This demo illustrates ways in which you can include data validation in your next ASP.NET project. Validation is implemented within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_RowValidatingtopic">RowValidating</helplink> event handler. Invalid values are indicated via error icons. Hovering your mouse over the icon displays a hint along with a description of the error.
</p>
<p>
To indicate rows with invalid data, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_HtmlRowPreparedtopic">HtmlRowPrepared</helplink> event is handled. This event is raised for each data row when the corresponding row within the table has been created. In this sample, rows with invalid data are colored red.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="MasterDetail" Title="Master-Detail">
<Demo Key="MasterDetail" Title="Simple Master-Detail View">
<Description>
<![CDATA[
<p>
With only one line of code per line of detail you can build master-detail layouts of any complexity - with any number of nesting levels and any number of details at each level. The ASPxGridView never limits how information is displayed for detail records - Detail Rows can display any type of information, such as collapsible row preview sections.
</p>
<p>
This demo illustrates how easy it is to create a simple master-detail relationship between two tables. To get started, you need to:
</p>
<ul>
<li>
Create two ASPxGridView controls
</li>
<li>
Bind the first grid (master grid) to the master data source and enable its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_ShowDetailRowtopic">SettingsDetail.ShowDetailRow</helplink> option.
</li>
<li>
Bind the second grid (detail grid) to the detail data source.
</li>
<li>
Create the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewTemplates_DetailRowtopic">DetailRow</helplink> template for the master grid and place the detail grid onto it.
</li>
<li>
Finally handle the detail grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_BeforePerformDataSelecttopic">BeforePerformDataSelect</helplink> event and specify session values.
</li>
</ul>
<p>
By default, end-users can expand multiple master rows simultaneously. This behavior is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_AllowOnlyOneMasterRowExpandedtopic">SettingsDetail.AllowOnlyOneMasterRowExpanded</helplink> option. In this demo, this option is enabled via the Keep a single expanded row at a time box. Once enabled, only one detail row can be displayed at a given time.
</p>
]]>
</Description>
</Demo>
<Demo Key="DetailTabs" Title="Advanced Master-Detail View" SeoTitle="Multiple Details Grid"
HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/MasterDetail.png" HighlightedTitle="Advanced Master-Detail Grid">
<Description>
<![CDATA[
<p>
This example illustrates the power of the ASPxGridView and its built-in UI flexibility by demonstrating how your end-users can switch between sibling detail grids via detail tabs.
</p>
<p>
To provide this functionality, we’ve placed our Page Control (tab strip) in the master grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewTemplates_DetailRowtopic">DetailRow</helplink> template. For each detail grid we've created a tab page. When an end-user clicks a detail tab, the corresponding detail grid is automatically displayed.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Grid View (ASPxGridView) supports master-detail data presentation of any complexity. In this demo, end-users can switch between the sibling detail grids via detail tabs.</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="Templates" Title="Templates">
<Keywords>customization, layout</Keywords>
<Demo Key="Template" Title="Cell" SeoTitle="Template for Data Cell">
<Description>
<![CDATA[
<p>
The ASPxGridView provides a set of templates that allow you to create custom layouts for its visual elements (column headers, data cells, Edit Form, preview rows, etc.)
</p>
<p>
This demo shows how you can create a template to display cells within the 'Details' column.
</p>
<p>
The template contains a link labeled 'More Info'. Clicking this link displays a window with additional information about an employee.
</p>
]]>
</Description>
</Demo>
<Demo Key="Preview" Title="Preview" SeoTitle="Template for Row Preview">
<Description>
<![CDATA[
<p>
Preview Rows are designed to display large memo fields.
</p>
<p>
This demo illustrates how you can create a template to display images within preview rows.
</p>
]]>
</Description>
</Demo>
<Demo Key="CardView" Title="Card View" SeoTitle="Card View, Contacts View">
<Description>
<![CDATA[
<p>
This demo shows how you can use data row templates to create a custom cell layouts within rows.
</p>
<p>
The Eval function is used to define one-way (read-only) binding. The Eval method takes the name of a data field, and returns a string containing the value of that field from the current record in the data source.
</p>
]]>
</Description>
</Demo>
<Demo Key="Pager" Title="Pager" SeoTitle="Template for Pager Bar">
<Description>
<![CDATA[
<p>
To help simplify record navigation, the ASPxGridView includes a built-in data pager. Both the appearance and functionality of the pager can be fully modified by creating a <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewTemplates_PagerBartopic">PagerBar</helplink> template.
</p>
<p>
In this demo, the pager's buttons (First, Last, Prev and Next) are represented by ASPxButton controls, which support both hovered and disabled states. The number of the current page is represented within an ASPxTextBox editor, whose value can be changed to navigate to a specified page. An ASPxComboBox allows the number of rows displayed within the grid page to be modified.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Exporting" Title="Data Export">
<Demo Key="Exporting" Title="Exporting to PDF, XLS, XLSX and RTF" SeoTitle="Exporting to PDF, XLS, XLSX, CSV and RTF">
<Description>
<![CDATA[
<p>
The ASPxGridView allows you to export data with ease. Data can be exported to a file or stream in the following formats:
</p>
<ul>
<li>PDF (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WritePdftopic">WritePdf</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WritePdfToResponsetopic">WritePdfToResponse</helplink>)</li>
<li>XLS (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteXlstopic">WriteXls</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteXlsToResponsetopic">WriteXlsToResponse</helplink>)</li>
<li>XLSX (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteXlsxtopic">WriteXlsx</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteXlsxToResponsetopic">WriteXlsxToResponse</helplink>)</li>
<li>RTF (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteRtftopic">WriteRtf</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteRtfToResponsetopic">WriteRtfToResponse</helplink>)</li>
<li>CSV (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteCsvtopic">WriteCsv</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_WriteCsvToResponsetopic">WriteCsvToResponse</helplink>)</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="ExportSelected" Title="Export Selected Records">
<Description>
<![CDATA[
<p>
This demo illustrates how to restrict data export to only those records selected within the ASPxGridView by setting the ASPxGridViewExporter’s <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewExportASPxGridViewExporter_ExportedRowTypetopic">ExportedRowType</helplink> property to 'Selected'.
</p>
]]>
</Description>
</Demo>
<Demo Key="ExportDetails" Title="Export Master-Detail Records">
<Description>
<![CDATA[
<p>
The ASPxGridView allows both master and detail data to be exported via its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewDetailSettings_ExportModetopic">SettingsDetail.ExportMode</helplink> property.
</p>
<p>
In this demo, use the 'Details Export Mode' combo box to select the desired data export mode. Select 'Expanded' to export only master rows and expanded detail rows.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Columns" Title="Grid Columns">
<Demo Key="CustomizationWindow" Title="Customization Window" SeoTitle="Field Chooser Window">
<Description>
<![CDATA[
<p>
Just like Microsoft Outlook, the ASPxGridView allows end-users to modify the visibility of individual columns. By activating the customization window, your users can:
</p>
<ul>
<li>
View invisible grid columns.
</li>
<li>
Hide (remove from the grid’s display) a column, by dragging its header to the customization window.
</li>
<li>
Display a hidden column by dragging its header from the customization window onto the grid’s column header section.
</li>
</ul>
<p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_SettingsCustomizationWindowtopic">SettingsCustomizationWindow</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>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_ShowCustomizationWindowtopic">ShowCustomizationWindow</helplink>
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_HideCustomizationWindowtopic">HideCustomizationWindow</helplink>
</li>
<li>
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_IsCustomizationWindowVisibletopic">IsCustomizationWindowVisible</helplink>
</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="ColumnResizing" Title="Resizing Columns" SeoTitle="Column Resizing">
<Description>
<![CDATA[
<p>
The ASPxGridView provides complete control over column availability and individual column size. End-users can easily modify column width by resizing the appropriate column header.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_ColumnResizeModetopic">SettingsBehavior.ColumnResizeMode</helplink> property specifies how the ASPxGridView behaves when an end-user resizes a column. Use the 'Column Resizing Mode' combo box to see how different property values affect resizing behavior.
</p>
]]>
</Description>
</Demo>
<Demo Key="CommandColumnCustomButtons" Title="Custom Command Buttons" SeoTitle="Custom Command Buttons">
<Description>
<![CDATA[
<p>
The ASPxGridView supports Command columns, which in turn display custom buttons within individual command cells, filter row, etc. You can create your own custom buttons and define custom actions for them.
</p>
<p>
A command column maintains custom buttons within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_CustomButtonstopic">CustomButtons</helplink> collection. Each button has a unique identifier (ID). Buttons can display an image or text.
</p>
<p>
To define an action for a custom button, handle the ASPxGridView’s <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_CustomButtonCallbacktopic">CustomButtonCallback</helplink> event. This event is raised after a custom button has been clicked by the end-user. Use the event parameter’s <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridViewCustomButtonEventArgs_buttonIDtopic">buttonID</helplink> property to identify a button currently being clicked.
</p>
<p>
This demo describes how you can create and display custom command buttons within the ASPxGridView. A custom command button ('Clone') and standard command buttons ('Edit', 'New', 'Update', 'Cancel') are used. All command buttons are represented by custom images which are able to display tooltips. Tooltips are defined via the <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_ToolTiptopic">Image.Tooltip</helplink> property of the command button.
</p>
]]>
</Description>
</Demo>
<Demo Key="Bands" Title="Multi-Row Headers">
<Description>
<![CDATA[
<p>
To help you organize grid columns into logical groups (bands), the ASPxGridView ships with a multi-row header feature.
</p>
<p>
A band is visually represented by a header displayed above the headers of columns it combines. Each band is a specific column type - <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewGridViewBandColumntopic">GridViewBandColumn</helplink>. A band column is unlike data columns in that it is not designed to display data values directly, but to contain data (child) columns within its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewBandColumn_Columnstopic">Columns</helplink> collection. This allows you to create a hierarchy of nested bands and to place a data column and a band column at the same hierarchy level.
</p>
<p>
Bands provide both display and usability benefits. 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 are also available when using bands. Column freezing (controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewColumn_FixedStyletopic">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/DevExpressWebASPxGridViewASPxGridView_Columnstopic">Columns</helplink> collection).
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Rows" Title="Grid Rows">
<Demo Key="FocusedRow" Title="Focused Row">
<Description>
<![CDATA[
<p>
By default, our Focused Row feature is disabled. To enable it, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowFocusedRowtopic">SettingsBehavior.AllowFocusedRow</helplink> property to true.
</p>
<p>
The focused row's appearance can be specified using the style settings provided by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewStyles_FocusedRowtopic">Styles.FocusedRow</helplink> property.
</p>
<ul>
<li>
<p>
Server Side
</p>
<p>
The focused row is identified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_FocusedRowIndextopic">FocusedRowIndex</helplink> property. Use this property to move row focus in code. Changing this property raises the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_FocusedRowChangedtopic">FocusedRowChanged</helplink> event.
</p>
</li><li>
<p>
Client Side
</p>
<p>
End-users move row focus by clicking rows they desire.
</p>
<p>
To respond to a change in row focus, handle the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_FocusedRowChangedtopic">FocusedRowChanged</helplink> event.
</p>
<p>
To identify a row currently being focused, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetFocusedRowIndextopic">GetFocusedRowIndex</helplink> client method.
</p>
</li></ul>
<p>
This demo shows how to dynamically display a focused employee's photo and details outside the ASPxGridView.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_FocusedRowChangedtopic">FocusedRowChanged</helplink> event is handled to call the OnGridFocusedRowChanged() function. This function queries the server to return the employee's ID and Notes. The returned array is passed to the OnGetRowValues() function that specifies values for corresponding HTML elements.
</p>
]]>
</Description>
</Demo>
<Demo Key="AlternatingRows" Title="Alternating Row Style">
<Description>
<![CDATA[
<p>
To enhance readability, you can highlight alternating (odd) grid rows with a different style. To do so, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewAlternatingRowStyle_Enabledtopic">Styles.AlternatingRow.Enabled</helplink> property to true and then specify the desired style settings via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewStyles_AlternatingRowtopic">Styles.AlternatingRow</helplink> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="PreviewRow" Title="Preview Row" SeoTitle="Outlook Style Row Preview">
<Description>
<![CDATA[
<p>Much like Microsoft Outlook, the ASPxGridView provides a preview feature that allows each data row to display a preview section. Preview rows are non-editable regions that allow large memo fields or custom data to be displayed across all the columns within the ASPxGridView.
</p>
<p>
Preview rows are enabled if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowPreviewtopic">Settings.ShowPreview</helplink> option is set to true.
</p>
<p>
By default, preview rows are empty. Set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_PreviewFieldNametopic">PreviewFieldName</helplink> property to the required field in the data source to bind the preview rows with data.
</p>
<p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_GetPreviewTexttopic">GetPreviewText</helplink> method to get the text displayed within the specified preview row.
</p>
<p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewStyles_PreviewRowtopic">Styles.PreviewRow</helplink> property to access the style settings used to paint preview rows.
</p>
<p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewTemplates_PreviewRowtopic">Templates.PreviewTemplat</helplink>e property to provide a template used for rendering preview rows.
</p>
]]>
</Description>
</Demo>
<Demo Key="GridLines" Title="Grid Lines">
<Description>
<![CDATA[
<p>
The ASPxGridView allows you to display the following grid lines:
</p>
<ul>
<li>Horizontal</li>
<li>Vertical</li>
<li>Both horizontal and vertical</li>
<li>No grid lines</li>
</ul>
<p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_GridLinestopic">GridLines</helplink> property to specify the gridline style for the ASPxGridView.
</p>
<p>
In this demo, you can modify the display of gridlines by selecting values from the 'Grid Lines' combo box.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Selection" Title="Row Selection">
<Demo Key="Selection" Title="Using Checkboxes" SeoTitle="Row Selection Check Boxes">
<Description>
<![CDATA[
<p>
To allow end-users to select rows using checkboxes, add a command column to the ASPxGridView and set its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_ShowSelectCheckboxtopic">ShowSelectCheckBox</helplink> property to true. 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>
This demo illustrates how you can display contact names selected within the ASPxGridView in a list box. 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 <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetSelectedFieldValuestopic">GetSeletedFieldValues</helplink> function. The number of selected rows is returned by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_GetSelectedRowCounttopic">GetSelectedRowCount</helplink> client function.
</p>
]]>
</Description>
</Demo>
<Demo Key="SelectByRowClick" Title="Using Row Clicks" SeoTitle="Row Selection Using Row Clicks">
<Description>
<![CDATA[
<p>
In addition to using check boxes to select individual rows, the ASPxGridView allows end-users to select rows with a simple mouse click. To enable this selection mode, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSelectByRowClicktopic">SettingsBehavior.AllowSelectByRowClick</helplink> property to true. Once set, clicking any row clears the previous selection and selects this row.
</p>
<p>
To select multiple rows, click them while holding down the CTRL key. Clicking a row in this manner toggles its selected state and preserves selection. To select contiguous rows, click the first row you want to select. Then, hold down the SHIFT key and click the last row. You can continue to customize selection by clicking individual rows while holding down the CTRL key.
</p>
<p>
This demo illustrates how multiple rows can be selected via standard row clicks.
</p>
]]>
</Description>
</Demo>
<Demo Key="AdvancedSelection" Title="Select All Rows" SeoTitle="Select All Rows on Page">
<Description>
<![CDATA[
<p>
This demo describes how you can select and de-select all visible grid rows by using the following client functions:
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_SelectAllRowsOnPagetopic">SelectAllRowsOnPage</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_UnselectAllRowsOnPagetopic">UnselectAllRowsOnPage</helplink></li>
</ul>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="PagingAndScrolling" Title="Data Paging and Scrolling" IsUpdated="true">
<Demo Key="Scrolling" Title="Scrolling">
<Description>
<![CDATA[
<p>
The ASPxGridView allows you to use both a vertical and horizontal scroll bar in order to display more information within a smaller grid footprint.
</p>
<p>
By default, the grid's height is determined by the number of rows displayed within a page, which is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_PageSizetopic">SettingsPager.PageSize</helplink> property. To reduce the grid's height, display the vertical scrollbar by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollBarModetopic">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">Settings.VerticalScrollableHeight</helplink> property.
</p>
<p>
By default, a grid's width depends upon the number of visible columns. 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">Settings.HorizontalScrollBarMode</helplink> property and define the desired scrollable area width by using the grid's Width property.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollBarModetopic">VerticalScrollBarMode</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_HorizontalScrollBarModetopic">HorizontalScrollBarMode</helplink> properties have the following values.
</p>
<ul>
<li>
Hidden – the scrollbar is hidden.
</li>
<li>
Visible – the scrollbar is visible.
</li>
<li>
Auto – the scrollbar is automatically shown when the size of the control's content exceeds the size of the control itself.
</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="VirtualPaging" Title="Virtual Scrolling">
<Description>
<![CDATA[
<p>
The ASPxGridView supports a virtual paging mode that allows end-users to navigate through grid pages using the vertical scroll bar. To enable this functionality, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_VerticalScrollBarStyletopic">Settings.VerticalScrollBarStyle</helplink> property should be set to Virtual. In this mode, the vertical scroll bar can be used with or without the built-in pager to dynamically load requested page data via callbacks.
</p>
]]>
</Description>
</Demo>
<Demo Key="PagerPosition" Title="Pager Settings">
<Description>
<![CDATA[
<p>The ASPxGridView automatically splits large content across multiple pages and provides a built-in pager that enables end-users to navigate through data.</p>
<p>The embedded pager control can be customized using the following settings of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_SettingsPagertopic">SettingsPager</helplink> property: </p>
<ul>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_Positiontopic">Position</helplink> property controls the pager's position within ASPxGridView: at the control's top, bottom, or both. In this demo, use the 'Position' combo box to select the required location.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerButtonProperties_Visibletopic">PageSizeItemSettings.Visible</helplink> property controls page size item visibility. In this demo, use the 'Show PageSizeItem' check box to show and hide the item.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPageSizeItemSettings_Positiontopic">PageSizeItemSettings.Position</helplink> property controls where a page size item is displayed: to the pager's left or right. In this demo, use the 'PageSizeItem position' combo box to select the required location.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerButtonProperties_Visibletopic">Summary.Visible</helplink> property controls a pager's summary visibility. In this demo, use the ' Show Summary' check box to show and hide the element.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowDisabledButtonstopic">ShowDisabledButtons</helplink> property controls the visibility of the pager's buttons which cannot be used at the moment, and are temporarily disabled.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowNumericButtonstopic">ShowNumericButtons</helplink> property controls the visibility of the pager's numeric buttons that navigate a user to corresponding pages.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowSeparatorstopic">ShowSeparators</helplink> property specifies whether separators that separate page numbers are displayed.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="SEOFriendly" Title="SEO Friendly Paging">
<Description>
<![CDATA[
<p>
A known problem with grid controls is that 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's links are usually not represented as hyperlinks to other pages. Instead, they respond to click events to raise data update callbacks. The ASPxGridView allows you to make a SEO-friendly pager. Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewPagerSettings_SEOFriendlytopic">SettingsPager.SEOFriendly</helplink> property for this purpose.
</p>
<p>
If this property is set to SEOFriendlyMode.CrawlerOnly, the ASPxGridView renders hyperlinks in the pager when a web-crawler is detected. For other visitors, standard pager links are generated. So, search engines can index the entire contents of the grid and site visitors experience the same callback functionality.
</p>
<p>
If the property is set to SEOFriendlyMode.Enabled or SEOFriendlyMode.Disabled, automatic web crawler detection is disabled. The pager renders either SEO-friendly or standard links, respectively.
</p>
]]>
</Description>
</Demo>
<Demo Key="EndlessPaging" Title="Endless Paging" IsNew="true" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/EndlessPaging.png" HighlightedTitle="Endless Paging">
<Description>
<![CDATA[
<p>The ASPxGridView control 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 EndlessPaging. In this mode, the grid loads more rows automatically when the end-user scrolls down to the bottom of control content.</p>
<p>The loading panel is displayed while data is loading.</p>
]]>
</Description>
<HighlightedDescription>The Endless Paging mode in the DevExpress Grid View (ASPxGridView) allows grid rows to load on demand based on user actions. In this demo, rows are loaded when an end-user scrolls to the bottom of the grid.</HighlightedDescription>
</Demo>
<Demo Key="FixedColumns" Title="Fixed Columns">
<Description>
<![CDATA[
<p>
The ASPxGridView allows you to anchor (fix) columns to the left edge. When fixed, columns are always displayed and not scrolled horizontally with the grid. This feature is active when horizontal scrolling is enabled via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_HorizontalScrollBarModetopic">Settings.HorizontalScrollBarMode</helplink> property, and the total width of columns exceeds the grid's width. To fix a column, set its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewColumn_FixedStyletopic">FixedStyle</helplink> property value to Left.
Non-fixed columns (whose <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewColumn_FixedStyletopic">FixedStyle</helplink> property is set to None) can't be located before fixed columns.
</p>
<p>
Note that the fixed columns functionality only works when column-by-column horizontal scrolling is used. Fixed columns become scrollable when the typical pixel-by-pixel horizontal scrolling starts working - this takes place when the grid contains group, preview or detail rows, or a <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewTemplates_DataRowtopic">DataRow</helplink> template is defined.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="MSAjax" Title="ASP.NET AJAX">
<Demo Key="UpdatePanel" Title="MS Update Panel" SeoTitle="Integration with MS AJAX Update Panel">
<Description>
<![CDATA[
<p>This demo illustrates the compatibility of the ASPxGridView with the MS Ajax UpdatePanel.</p>
<p>In this demo, the ASPxGridView and other controls reside within the MS Ajax UpdatePanel control. The total for invoices selected in the grid control is automatically updated in response to the grid control's selection changes that are processed on the server side (the grid control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_ProcessSelectionChangedOnServertopic">SettingsBehavior.ProcessSelectionChangedOnServer</helplink> property is set to true).</p>
<p>Note: To allow the MS Ajax UpdatePanel to handle ASPxGridView server requests, the grid control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_EnableCallBackstopic">EnableCallBacks</helplink> property is set to false. This is necessary to make the UpdatePanel's child controls update properly, and to correctly preserve view state information. To provide visual feedback on the UpdatePanel's update status, the demo uses the MS Ajax UpdateProgress control.</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ASPxGridLookup" Title="Advanced Lookup" SeoTitle="ASP.NET AJAX Grid Lookup Control">
<Keywords>dropdownedit, dropgrid</Keywords>
<Demo Key="MultiSelect" Title="Multiple Record Selection"
HighlightedIndex="4" HighlightedImageUrl="~/Content/DemoIcons/Lookup.png" HighlightedTitle="Advanced Lookup - Multiple Record Selection">
<Description>
<![CDATA[
<p>The ASPxGridLookup editor combines the functionality of the ASPxDropDownEdit and ASPxGridView controls to allow end-users to easily select values from a dropdown grid containing lookup items. The ASPxGridView control is seamlessly embedded into the editor's dropdown window, providing the editor with a powerful customizable data-processing and data-representation functionality. The ASPxGridLookup emulates a combo box that allows end-users to select multiple items within its dropdown list in the demo.</p>
<p>One of the major data-processing features adopted from the ASPxGridView is allowing end-users to select multiple list items within the dropdown grid. The selection behavior is controlled by the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_SelectionModetopic">SelectionMode</helplink> property that can be set to Single (only one item can be selected within the editor) or Multiple (multiple items can be selected within the editor) value. This demo illustrates how item multi-selection can be easily implemented within the ASPxGridLookup using the corresponding functionality of a built-in grid. </p>
<p>In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_SelectionModetopic">SelectionMode</helplink> property is set to Multiple. End-users can select items by clicking check boxes within the dropdown grid or by entering tag names separated with a comma into the editor's edit box. </p>
<p>To display check boxes within a dropdown grid, a specific command column is created and its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewCommandColumn_ShowSelectCheckboxtopic">ShowSelectCheckbox</helplink> property is set to true. In addition, end-users are allowed to filter items within the dropdown grid because to the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewSettings_ShowFilterRowtopic">GridSettings.ShowFilterRow</helplink> property is set to true. </p>
<p>As for entering tag names into the editor's edit box directly, this functionality is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_TextFormatStringtopic">TextFormatString</helplink> property that defines a column ("TagName") whose values should be entered and represented within the edit box. By default, a semicolon symbol is used as a value separator. List items (grid rows) that correspond to the entered tag names become selected automatically on submitting the entered value (for instance, pressing the ENTER key or invoking the dropdown window).</p>
<p>When used together, all these features provide end-users with easy-to-use capabilities of searching and selecting the required data.</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET GridLookup (ASPxGridLookup) editor allows end-users to easily select values from a drop-down grid. It is similar to a combo box, but allows users to select multiple items in the drop-down. In this demo, the multiple selection capability is illustrated.</HighlightedDescription>
</Demo>
<Demo Key="FilterServerMode" Title="Incremental Filtering">
<Description>
<![CDATA[
<p>Hosting the ASPxGridView internally (inside the dropdown window to display list items), the ASPxGridLookup editor has a capability to use a powerful data-processing functionality provided by the grid control. In particular, the ASPxGridLookup supports the grid's server mode functionality allowing the editor to efficiently work with large data sources by loading data in small portions, on demand. To work in server mode, the ASPxGridLookup editor should be bound to a data source of the XpoDataSource or LinqServerModeDataSource type.</p>
<p>As for entering tag names into the editor's edit box directly, this functionality is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_TextFormatStringtopic">TextFormatString</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_MultiTextSeparatortopic">MultiTextSeparator</helplink> properties. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_TextFormatStringtopic">TextFormatString</helplink> property defines a column ("TagName") whose values should be entered and represented within the edit box. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_MultiTextSeparatortopic">MultiTextSeparator</helplink> property specifies a value separator. List items (grid rows) that correspond to the entered tag names become selected automatically on submitting the entered value (for instance, pressing the ENTER key or invoking the dropdown window).</p>
]]>
</Description>
</Demo>
<Demo Key="ItemTemplate" Title="Item Template">
<Description>
<![CDATA[
<p>The ASPxGridLookup control exposes the embedded ASPxGridView's powerful data representation functionality including support for templates. So, the ASPxGridLookup provides you with a capability to define templates for different elements of the built-in grid (such as data rows, data cells, etc).</p>
<p>This demo illustrates how the layout of the editor's list items can be modified by creating a template for the dropdown grid's data rows via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewGridViewTemplates_DataRowtopic">Templates.DataRow</helplink> property. Note that the incremental filtering functionality (enabled via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_IncrementalFilteringModetopic">IncrementalFilteringMode</helplink> property) works correctly when list item templating is used. In this demo, incremental filtering is performed over the values of the first two data columns defined within the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_Columnstopic">Columns</helplink> collection - 'First Name' and 'Last Name'. These columns are pointed by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_TextFormatStringtopic">TextFormatString</helplink> property using indexed placeholders ({0} and {1}) that correspond to column indexes within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_Columnstopic">Column</helplink> collection. Thus, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridLookupASPxGridLookup_TextFormatStringtopic">TextFormatString</helplink> property defines the format for displaying the selected item's value within the edit box ('First Name' 'Last Name') and serves as a column pointer and format designator for the incremental filtering functionality.</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Accessibility" Title="Accessibility">
<Keywords>wcga, 508, section</Keywords>
<Demo Key="Compliance" Title="Section 508 Compliance">
<Description>
<![CDATA[
<p>
DevExpress ASP.NET Controls can help you create web pages that conform to accessibility guidelines. Although by default, DevExpress web controls might not render markup that result in pages that meet accessibility standards, they expose API (properties, methods, events) that you can use to make the pages accessible. In addition, most DevExpress web controls implement the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_AccessibilityComplianttopic">AccessibilityCompliant</helplink> property that allows more accessible markup to be generated for controls.
</p>
<p>
This demo illustrates how the ASPxGridView control can be customized to make it more accessible for end-users. For this purpose, the grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_Captiontopic">Caption</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_SummaryTexttopic">SummaryText</helplink> properties are defined explicitly, and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_AccessibilityComplianttopic">AccessibilityCompliant</helplink> property
(whose state is controlled by a check box) is enabled by default.
</p>
]]>
</Description>
</Demo>
<Demo Key="KeyboardSupport" Title="Keyboard Support" SeoTitle="Keyboard Navigation">
<Description>
<![CDATA[
<p>
With the keyboard support available in the ASPxGridView, primary navigation operations (such as accessing the grid within a form, moving focus through grid rows, row selection, row expansion/collapse, paging) can be executed using a keyboard as an alternative to a pointing device. In addition, enabling keyboard support within the ASPxGridView helps you more easily create web pages that conform to accessibility guidelines.
</p>
<p>
To enable keyboard navigation, set the grid's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_KeyboardSupporttopic">KeyboardSupport</helplink> property to true. This activates the following grid features:
</p>
<ul>
<li>Access Key - The grid control can be easily accessed (focused) by using a user-defined keyboard shortcut. This shortcut is composed by combining the preset CTRL+SHIFT combination with a single character string specified via the AccessKey property. For example, setting the access key of a grid control to the string "G" indicates that an end-user can navigate to the grid by pressing CTRL + SHIFT + G.
</li>
<li>
Focused Row - The Focused Row feature is automatically activated, regardless of the corresponding feature property setting (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowFocusedRowtopic">SettingsBehavior.AllowFocusedRow</helplink>). Focus can be moved between rows by using the UP and DOWN ARROW keys. The LEFT and RIGHT ARROW keys can also be used to move row focus, but these keys initially try to collapse/expand a row and, if it's impossible, only then do they move focus. When possible, moving focus from the first or last row within a page changes the page within the grid.
</li>
<li>
Row Selection - The SPACE key can be used to mark a focused row as selected/unselected. This works if selection can be applied to a row - that is, if it's not a group or detail row, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridViewBehaviorSettings_AllowSelectByRowClicktopic">SettingsBehavior.AllowSelectByRowClick</helplink> property is enabled, or the row contains a selection check box or button. Multiple rows can be easily selected, by moving row focus using the ARROW keys (UP/DOWN or LEFT/RIGHT) while holding down the SHIFT key.
</li>
<li>
Expanding/Collapsing Rows - The PLUS and MINUS keys can be respectively used to expand and collapse group and detail rows. In addition, row collapsing and expanding can be performed using the LEFT and RIGHT ARROW keys.
</li>
<li>
Paging - The SHIFT + PAGE UP and SHIFT + PAGE DOWN key combinations can be used to go to the next/previous grid page.
</li>
</ul>]]>
</Description>
</Demo>
<Demo Key="RightToLeft" Title="Right to Left">
<Keywords>rtl, Accessibility, arabic, Hebrew, Samaritan, Thaana, Syriac, Phoenician</Keywords>
<Description>
<![CDATA[
<p>ASPxGridView provides support for right-to-left languages like Arabic and Hebrew. To switch the ASPxGridView to a right-to-left representation, you need to enable a single grid property - <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_RightToLefttopic">RightToLeft</helplink>. When this property is active, text flows right-to-left and the layout of most grid UI elements is reversed.</p>
<p>If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching each control's RightToLeft property. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option that can be accessed within the settings group of our devExpress section.</p>
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxHtmlEditor" Url="ASPxHTMLEditorDemos" Title="DevExpress ASPxHtmlEditor" SeoTitle="ASP.NET AJAX HTML Editor" NavItemTitle="HTML Editor" OrderIndex="6">
<Keywords>richeditor, htmleditor, word, office, texteditor</Keywords>
<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_ASPxHtmlEditor_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/HtmlEditor.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX HTML Editor">
<BannerTitle>
Rich Text Editor Control for
 
ASP.NET AJAX
</BannerTitle>
<BannerText>
Microsoft Word® style WYSIWYG interface synchronized with HTML code editor, built using DevExpress ASP.NET controls
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=69qEHlHAj7Y</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxHtmlEditor Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxHtmlEditor Suite</b>. These features include:</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Features" Title="Features">
<Demo Key="General" Title="General" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
ASPxHtmlEditor is a rich-text WYSIWYG HTML editor for ASP.NET. Its intuitive user interface enables even inexperienced users to edit HTML page contents with ease. This demo describes several of the features available to you when using the ASPxHtmlEditor control.
</p>
<p>
The ASPxHtmlEditor automatically performs validation of the entered HTML code and is able to remove all potentially harmful code. The editor exposes several options, allowing you to control required automatic transformations.
</p>
<p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowScriptstopic">AllowScripts</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowIFramestopic">AllowIFrames</helplink>, <helplink href="">AllowFormElements</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowIdAttributestopic">AllowIdAttributes</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowStyleAttributestopic">AllowStyleAttributes</helplink> properties to control whether tags and attributes of certain predefined types – scripts, IFRAME, form elements, ID attributes, and style attributes respectively – are allowed within the editor's HTML code.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_UpdateDeprecatedElementstopic">UpdateDeprecatedElements</helplink> property specifies whether deprecated elements (such as u, s, strike, font, center) occurring within the editor's HTML markup should be replaced with their valid analogs.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_UpdateBoldItalictopic">UpdateBoldItalic</helplink> property specifies the necessity of converting the 'b' and 'i' elements into the 'strong' and 'em' elements respectively.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_EnterModetopic">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>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorHtmlEditingSettings_AllowedDocumentTypetopic">AllowedDocumentType</helplink> property specifies the document types that are allowed within the editor. The available options are: XHTML 1.0 Transitional, HTML 5, or both. HTML code entered into the editor's HTML View is automatically transformed according to the specified document type.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowDesignViewtopic">AllowDesignView</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowHtmlViewtopic">AllowHtmlView</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowPreviewtopic">AllowPreview</helplink> properties specify which editor views are available to end-users.
</p>
<p>
If Design View is active within the ASPxHtmlEditor, a specific context menu can be displayed for end-users, which is controlled by the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditorSettings_AllowContextMenutopic">AllowContextMenu</helplink> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="Tables" Title="Tables" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/Tables.png">
<Description>
<![CDATA[
<p>
This demo illustrates the ASPxHtmlEditor's support for HTML table operations.
The ASPxHtmlEditor allows end-users to create, customize, and delete tables and their elements by using a set of specific predefined commands.
Within the ASPxHtmlEditor, these commands can be visually represented either by a separate toolbar or
by using an individual toolbar button (of the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarTableOperationsDropDownButtontopic">ToolbarTableOperationsDropDownButton</helplink> type) that exposes a dropdown list of commands.
Note that by default, a toolbar button of the ToolbarTableOperationsDropDownButton type belongs to a StandardToolbar1.
</p>
<p>
In this demo, click the corresponding radio button to select how HTML table operation commands are represented within the ASPxHtmlEditor.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET HTML Editor (ASPxHtmlEditor) allows end-users to create, customize, and delete tables and their elements using a set of specific predefined commands. This demo illustrates the editor's support for HTML table operations.</HighlightedDescription>
</Demo>
<Demo Key="Resizing" Title="Resizing and Full-Screen Mode">
<Keywords>fullscreen</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates the ASPxHtmlEditor's ability to be resized and be maximized to full-screen by end-users.
</p>
<p>
If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorResizeSettings_AllowResizetopic">AllowResize</helplink> property is enabled, end-users can dynamically change the ASPxHtmlEditor's size by using a
size grip displayed at the bottom right corner. The resize limits can be defined via the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorResizeSettings_MinHeighttopic">MinHeight</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorResizeSettings_MaxHeighttopic">MaxHeight</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorResizeSettings_MinWidthtopic">MinWidth</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorResizeSettings_MaxWidthtopic">MaxWidth</helplink> properties.
The editor's actual size is preserved within the client state, and it's restored after application round trips (postbacks or callbacks).
</p>
<p>
The full-screen mode supported by the ASPxHtmlEditor makes work with the editor extremely comfortable for end-users.
To activate/deactivate this mode, an end-user should click a specific toolbar button (Fullscreen) or press F11 when the editor has focus.
In the full-screen mode, the ASPxHtmlEditor occupies the browser's entire client region. This mode is in effect for the editor's Design View only.
</p>
]]>
</Description>
</Demo>
<Demo Key="CustomToolbars" Title="Custom Toolbars">
<Keywords>customization</Keywords>
<Description>
<![CDATA[
<p>
This demo shows how to programmatically create a custom toolbar with a set of specific commands and display it instead of the editor's default toolbars.
This can also be achieved at design time with the help of the editor's easy-to-use toolbar designer.
</p>
<p>
Select an item from the dropdown list to specify a toolbar displayed within the editor.
</p>
]]>
</Description>
</Demo>
<Demo Key="Validation" Title="Validation">
<Keywords>validate, validating</Keywords>
<Description>
<![CDATA[
<p>
The ASPxHtmlEditor provides a built-in means to perform powerful validation of its content, both on the client and server. Different validation settings are available for customization through the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_SettingsValidationtopic">SettingsValidation</helplink> property.
</p>
<p>
To define editor validation logic, the following easy-to-use methods are provided (which can be combined together, if required):
</p>
<ul>
<li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorValidationSettings_RequiredFieldtopic">SettingsValidation.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 editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_Validationtopic">Validation</helplink> event (client or server, or both) 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>
Client validation of the ASPxHtmlEditor can be triggered automatically via a click on an ASPxButton, whose <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxButton_CausesValidationtopic">CausesValidation</helplink> property is set to true. You can also manually initiate the editor's client validation by using the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_Validatetopic">Validate</helplink> client method or specific static client methods (such as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateEditorsInContainertopic">ASPxClientEdit.ValidateEditorsInContainer</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateEditorsInContainerByIdtopic">ASPxClientEdit.ValidateEditorsInContainerById</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsScriptsASPxClientEdit_ValidateGrouptopic">ASPxClientEdit.ValidateGroup</helplink>).
</p>
<p>
The editor's server validation is always performed during processing of an external postback, if the editor's content has been changed. The server validation can also be initiated programmatically by using the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_Validatetopic">Validate</helplink> server method, or a specific static server method <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxEdit_ValidateEditorsInContainertopic">ASPxEdit.ValidateEditorsInContainer</helplink>.
</p>
<p>
Additionally, you are allowed to validate the editor's content programmatically (when required), and indicate the validation result manually, by either setting the editor's <helplink href="">IsValid</helplink> server property or using the <helplink href="">SetIsValid</helplink> client method.
</p>
<p>
When an editor fails validation logic, a specific error frame containing the error description can be displayed within the editor's View. The error frame's appearance is customized via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorValidationSettings_ErrorFrameStyletopic">SettingsValidation.ErrorFrameStyle</helplink> property. The error text can be specified by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorValidationSettings_ErrorTexttopic">SettingsValidation.ErrorText</helplink> property, in the <helplink href="">Validation</helplink> event's handler, or via the editor's <helplink href="">ErrorText</helplink> property (depending upon the validation method used).
</p>
<p>
This demo illustrates the built-in flexibility and efficiency of our validation engine, allowing you to easily implement different validation scenarios.
</p>
]]>
</Description>
</Demo>
<Demo Key="ImportExport" Title="Import/Export" SeoTitle="Import and Export">
<Keywords>importing, exporting, docx, rtf, mht, txt, pdf, odt, Office, Open, XML, MIME, html, Plain</Keywords>
<Description>
<![CDATA[
<p>This demo shows how to import and export ASPxHtmlEditor contents.</p>
<p>With ASPxHtmlEditor, 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 editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_Importtopic">Import</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_Exporttopic">Export</helplink> 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>
</Demo>
<Demo Key="ContextMenu" Title="Context Menu">
<Keywords>rightclick</Keywords>
<Description>
<![CDATA[
<p>An ASPxHtmlEditor 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, ASPxHtmlEditor 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>~/Scripts/ContextMenu.js</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Dialogs" Title="Dialogs">
<Demo Key="ImageSelector" Title="Image Selector">
<Keywords>filemanager</Keywords>
<Description>
<![CDATA[
<p>This demo shows how easily images can be inserted into the content of the editor with a built-in Select Image dialog.</p>
<p>The Select Image dialog is a useful addition to the Insert Image and Change Image dialogs, allowing end-users to manage content images via a point-and-click UI, rather than typing image web addresses. Thanks to the ASPxFileManager control integrated into the Select Image dialog, all file/folder management and upload capabilities are easy to use and available for you out-of-the-box. To enable these capabilities, turn on the corresponding options via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_SettingsImageSelectortopic">SettingsImageSelector</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_SettingsImageUploadtopic">SettingsImageUpload</helplink> option sets. In this demo, you can adjust some of these options using the settings displayed above the editor.</p>
]]>
</Description>
</Demo>
<Demo Key="DocumentSelector" Title="Document Selector">
<Keywords>filemanager</Keywords>
<Description>
<![CDATA[
<p>This demo shows how easily hyperlinks to documents can be inserted into the content of the editor with a built-in Select Document dialog.</p>
<p>The Select Document dialog is a useful addition to the Insert Link and Change Link dialogs, allowing end-users to manage content hyperlinks via a point-and-click UI, rather than typing URLs manually. Because the ASPxFileManager control is integrated into the Select Document dialog, all file/folder management, access control, and upload capabilities are available to you out-of-the-box. To enable these capabilities, turn on the corresponding options via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_SettingsDocumentSelectortopic">SettingsDocumentSelector</helplink> option set. In this demo, you can adjust some of these options using the settings displayed above the editor.</p>
]]>
</Description>
</Demo>
<Demo Key="SpellChecking" Title="Spell Checking">
<Keywords>spellchecker, spelling</Keywords>
<Description>
<![CDATA[
<p>
This demo shows how the spell-checking functionality provided by the
ASPxSpellChecker control can be used within the
ASPxHtmlEditor's Design View to check the spelling of the editor's content. Spell checking is performed based upon the selected dictionary
(<a href="http://lasr.cs.ucla.edu/geoff/ispell-dictionaries.html" target="_blank">ISpell</a> and
<a href="http://lingucomponent.openoffice.org/" target="_blank">OpenOffice</a> dictionaries are supported), culture and grammar.
These settings can be defined by using the ASPxHtmlEditor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_SettingsSpellCheckertopic">SettingsSpellChecker</helplink> property.
</p>
<p>
To start spell checking, click the default Check Spelling button within the first standard toolbar.
</p>
]]>
</Description>
</Demo>
<Demo Key="CustomDialogs" Title="Custom Dialogs" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Dialogs.png">
<Description>
<![CDATA[
<p>This demo shows how to extend the ASPxHtmlEditor with custom dialogs.</p>
<p>In addition to built-in dialogs available within the ASPxHtmlEditor, 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/DevExpressWebASPxHtmlEditorASPxHtmlEditor_CustomDialogstopic">CustomDialogs</helplink> collection. A custom dialog is represented by an <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorHtmlEditorCustomDialogtopic">HtmlEditorCustomDialog</helplink> object, which provides the following settings.</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_Captiontopic">Caption</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_Nametopic">Name</helplink>. Use these properties to specify a dialog's caption and name. The dialog's name is used for reference, as described below.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_FormPathtopic">FormPath</helplink>. Use this property to provide a path to a user control representing a dialog's form. In the demo, a form contains the <helplink href="">ASPxGridView</helplink> bound to the InsertTemplateData.xml file, which provides predefined content templates.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_OkButtonTexttopic">OkButtonText</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_OkButtonVisibletopic">OkButtonVisible</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_CancelButtonTexttopic">CancelButtonText</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorCustomDialog_CancelButtonVisibletopic">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 changed 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 ASPxHtmlEditor, and assign the dialog's name to the toolbar item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDialogButton_Nametopic">Name</helplink> property.</p>
<p>Click the Insert Template button to invoke the corresponding custom dialog in this demo. In the dialog, select an appropriate template and click the Insert button (or simply double click a template) to insert it in the editor. You may switch off the dialog's "Overwrite content" option to preserve the current content when inserting templates.</p>
<p>The ASPxHtmlEditor provides you with events that allow you to respond to end-user interactions with custom dialogs and dialog button clicks on the client side.</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogOpenedtopic">CustomDialogOpened</helplink>. You can handle this event to initialize a custom dialog. In the demo, the OnCustomDialogOpened JavaScript function represents the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogOpenedtopic">CustomDialogOpened</helplink> event handler. This function calls the RestoreInsertTemplateFormDialogState 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">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">name</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorCustomDialogCloseEventArgsBase_statustopic">status</helplink> properties. To prevent default processing on closing a dialog, assign true to the event parameter's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorCustomDialogClosingEventArgs_handledtopic">handled</helplink> property. In the demo, the OnCustomDialogClosing JavaScript function represents the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogClosingtopic">CustomDialogClosing</helplink> 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 the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogCompletetopic">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 RowDblClick client event of the ASPxGridView located in the dialog (see the OnGridRowDblClick function).</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogClosedtopic">CustomDialogClosed</helplink>. Handle this event to perform specific actions, based on the dialog button that has been clicked or any other suitable condition. In this demo, the OnCustomDialogClosed JavaScript function represents the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomDialogClosedtopic">CustomDialogClosed</helplink> event handler. This function inserts the selected template's text in the editor in response to clicking the dialog's Insert button or double-clicking the template. Also, this function calls the SaveInsertTemplateFormDialogState function to store the dialog's selected template and the checked state of the "Overwrite content" option for future use.</li>
</ul>
<p>This demo also demonstrates how to define the keyboard shortcut (Ctrl+Shift+I) used to open a custom dialog by creating a corresponding item within the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_Shortcutstopic">Shortcuts</helplink> collection.</p>
]]>
</Description>
<HighlightedDescription>Easily add custom dialogs to the DevExpress ASP.NET HTML Editor (ASPxHtmlEditor). This demo illustrates a custom dialog associated with a toolbar item in the ASPxHtmlEditor.</HighlightedDescription>
<SourceFile>~/Dialogs/InsertTemplateForm.ascx</SourceFile>
<SourceFile>~/Scripts/InsertTemplateForm.js</SourceFile>
<SourceFile>~/App_Data/InsertTemplateData.xml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="ToolbarItems" Title="Toolbar Items">
<Demo Key="CustomCSS" Title="Custom CSS">
<Keywords>formatting</Keywords>
<Description>
<![CDATA[
<p>
The ASPxHtmlEditor control provides the Custom CSS feature, that enables your custom formatting, defined by custom CSS classes,
to be exposed to end-users and applied to the content selected within the editor.
Using the Custom CSS feature, content logical elements (such as titles, headers, text blocks, etc) can be formatted using individual
formatting styles, which are defined by names of the associated CSS class and HTML tag.
</p>
<p>
In order to specify CSS files that contain definitions of custom CSS classes, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_CssFilestopic">CssFiles</helplink> property of the ASPxHtmlEditor can be used.
A standard toolbar's "Apply CSS" dropdown editor (which is of the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarCustomCssEdittopic">ToolbarCustomCssEdit</helplink> type) enables you to list available custom CSS styles and
make them available to end-users. The editor's items can be manipulated via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomCssEdit_Itemstopic">Items</helplink> property.
The display text of an editor item can be defined using the item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsListEditItem_Texttopic">Text</helplink> property.
An item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomCssListEditItem_CssClasstopic">CssClass</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomCssListEditItem_TagNametopic">TagName</helplink> properties are used to associate the item with the corresponding CSS class name,
which defines a specific formatting, and specify the name of a tag to wrap the text content to which the associated style will be applied.
</p>
<p>
In this demo, custom styles are defined for the content text elements such as the 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>
]]>
</Description>
<SourceFile>~/Content/Demo/Css/CustomCss.css</SourceFile>
</Demo>
<Demo Key="DropdownItemPicker" Title="Drop-down Item Picker" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/ItemPicker.png">
<Description>
<![CDATA[
<p>This demo shows how to extend toolbars with dropdown item pickers.</p>
<p>A dropdown item picker represents a button with a dropdown, containing a list of items available for selection. To select an item, users can hover the mouse pointer over a button or click it to open its dropdown list and then select an item within the list. In this demo, you can insert smilies and special symbols to the editor's content via corresponding dropdown item pickers.</p>
<p>In ASPxHtmlEditor toolbars, a dropdown item picker is represented by a <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarDropDownItemPickertopic">ToolbarDropDownItemPicker</helplink> toolbar item. This item provides a number of options that allow you to customize the appearance and behavior of a dropdown item picker. The most important options include:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_Itemstopic">Items</helplink>. Use this collection to add items to a dropdown list.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_ColumnCounttopic">ColumnCount</helplink>. Use this property to specify the number of columns in which items are arranged within a dropdown list.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_ItemHeighttopic">ItemHeight</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_ItemWidthtopic">ItemWidth</helplink>. Use these properties to adjust the item size.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarItemBase_Imagetopic">Image</helplink> property set. Allows you to define images to be displayed within the ToolbarDropDownItemPicker toolbar item.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_ImagePositiontopic">ImagePosition</helplink>. You can display a caption and/or an image within a list item. The element to display is determined automatically, based upon a list item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomItem_Texttopic">Text</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic">Image.Url</helplink> property values. To customize a list item's image alignment, use an item picker's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_ImagePositiontopic">ImagePosition</helplink> property. Also, a list item can be assigned a tooltip and value via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarItemBase_ToolTiptopic">ToolTip</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomItem_Valuetopic">Value</helplink> properties, respectively.</li>
<li>
<p><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_ClickModetopic">ClickMode</helplink>. Use this property to specify the response to clicks on the ToolbarDropDownItemPicker toolbar item. The following options are available.</p>
<ul>
<li>ShowDropDown. Determines that a click on an item picker invokes a dropdown list with the available options.</li>
<li>ExecuteAction. Specifies that a click on an item picker executes a command associated with it via its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_CommandNametopic">CommandName</helplink> property, and implemented using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CommandExecutedtopic">CommandExecuted</helplink> event.</li>
<li>ExecuteSelectedItemAction. This value is used by default. It specifies that a click on an item picker executes an action associated with an item being currently selected within a dropdown list. In this mode, a toolbar button displays the recently selected item's image or caption (see the Insert Smiley item picker). This allows users to select this item by clicking the button, rather than opening a dropdown and selecting the item again. To specify the initially selected item, use an item picker's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_SelectedItemIndextopic">SelectedItemIndex</helplink> property.</li>
</ul>
</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownItemPicker_CommandNametopic">CommandName</helplink>. Use this property to associate a command name with an item picker. You can use this command name to respond to item picker clicks on the client side via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomCommandtopic">CustomCommand</helplink> client event handler. In this demo, the OnCommandExecute JavaScript function is designated as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomCommandtopic">CustomCommand</helplink> client event handler (see the demo's ASPX markup file). Each time a list item or dropdown button is clicked, the selected item's value (specified via its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomItem_Valuetopic">Value</helplink> property) is passed as a parameter to the OnCommandExecute function. Then, this function passes the value to the InsertSmiley or InsertSpecialSymbol function, which handles clicks within a corresponding item picker.</li>
</ul>
]]>
</Description>
<HighlightedDescription>A Drop-down Item Picker is a button with a drop-down menu that allows an end-user to choose from a list of items. This demo illustrates how to add a Drop-down Item Picker to the toolbar of the DevExpress ASP.NET HTML Editor (ASPxHtmlEditor).</HighlightedDescription>
</Demo>
<Demo Key="DropdownMenu" Title="Drop-down Menu">
<Description>
<![CDATA[
<p>This demo illustrates how to add a dropdown menu item to a toolbar.</p>
<p>In ASPxHtmlEditor toolbars, 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 an appropriate date/time format in a dropdown menu.</p>
<p>An ASPxHtmlEditor dropdown menu is represented by a <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarDropDownMenutopic">ToolbarDropDownMenu</helplink> toolbar item. You can use <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarDropDownMenutopic">ToolbarDropDownMenu</helplink> options to customize the appearance and behavior of a dropdown menu item, as required. The most important options are listed below:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownMenu_Itemstopic">Items</helplink>. Use this collection to add items to a dropdown menu.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarItemBase_Imagetopic">Image</helplink>. Allows you to define an image to be displayed within the ToolbarDropDownMenu toolbar item.</li>
<li>
<p><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_ClickModetopic">ClickMode</helplink>. Use this property to specify the response to a click on the ToolbarDropDownMenu toolbar item. The following options are available:</p>
<ul>
<li>ShowDropDown. This value is used by default, and determines that a click on a dropdown button invokes a dropdown menu.</li>
<li>ExecuteAction. Specifies that a click on a dropdown button executes an action associated with the ToolbarDropDownMenu toolbar item (using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownMenu_CommandNametopic">CommandName</helplink> property and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CommandExecutedtopic">CommandExecuted</helplink> event).</li>
<li>ExecuteSelectedItemAction. Specifies that a click on a dropdown button executes an action associated with an item being currently selected within a dropdown menu. In this mode, a toolbar button displays the recently selected menu item's image or caption. This allows users to select this menu item by clicking the button, rather than opening a dropdown menu and selecting the item again. To specify the initially selected menu item, use a dropdown menu's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_SelectedItemIndextopic">SelectedItemIndex</helplink> property.</li>
</ul>
</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownMenu_CommandNametopic">CommandName</helplink>. Use this property to associate a command name with a dropdown menu. You can use this command name to respond to menu item clicks on the client side, via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomCommandtopic">CustomCommand</helplink> client event handler. In this demo, the OnCommandExecute JavaScript function is designated as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomCommandtopic">CustomCommand</helplink> client event handler (see the demo's ASPX markup file). Each time a menu item or dropdown button is clicked, the selected menu item's value (the date/time format specified via the item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomItem_Valuetopic">Value</helplink> property) is passed as a parameter to the OnCommandExecute function. Then, this function passes the value to the InsertDateTime function, which inserts a date/time value to the editor, in the specified format.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="ComboBox" Title="Combo Box" SeoTitle="Custom Combo Box Toolbar Item">
<Description>
<![CDATA[
<p>This demo shows how to add a combo box item to a toolbar, and update its value in response to selection changes.</p>
<p>As with a standard combo box, an ASPxHtmlEditor combo box provides a dropdown list with a choice of items for selection. In this demo, you can apply a specific font size to the currently selected content, by picking an appropriate combo box item.</p>
<p>An ASPxHtmlEditor combo box is represented by a <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarComboBoxtopic">ToolbarComboBox</helplink> toolbar item. <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorToolbarComboBoxtopic">ToolbarComboBox</helplink> options allow you to customize the appearance and behavior of a combo box. The most important options include:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarComboBox_Itemstopic">Items</helplink>. Use this collection to add items to a dropdown list. </li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarComboBoxBase_DefaultCaptiontopic">DefaultCaption</helplink>. Use this property to provide a text to be displayed within the edit box of a combo box when none of its items are selected.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarComboBox_CommandNametopic">CommandName</helplink>. Use this property to associate a command name with a combo box. You can use this command name to respond to selecting combo box items on the client side via the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomCommandtopic">CustomCommand</helplink> client event handler. In this demo, the OnCustomCommand JavaScript function is designated as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomCommandtopic">CustomCommand</helplink> client event handler (see the demo's ASPX markup file). Each time a combo box item is selected, its value (the font size specified via the item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomItem_Valuetopic">Value</helplink> property) is passed as a parameter to the OnCustomCommand function. Then, this function passes the value to the SetFontSize function, which applies the font size to the selected content.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarComboBox_PropertiesComboBoxtopic">PropertiesComboBox</helplink>. This property set provides a number of appearance and behavior options that are common to all combo box editors.</li>
</ul>
<p>In addition to selecting font sizes, the combo box in the demo allows you to determine the font size that is applied to the currently selected content. If the applied font size matches one of the combo box's font sizes, the corresponding combo box item is automatically selected. If the selected content has a mix of font sizes, the combo box displays "Font Size" (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarComboBoxBase_DefaultCaptiontopic">DefaultCaption</helplink> property value), as if none of its items are selected. The combo box value is updated in response to selection changes (see the demo's OnSelectionChanged> function representing a <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_SelectionChangedtopic">SelectionChanged</helplink> client event handler).</p>]]>
</Description>
</Demo>
<Demo Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Description>
<![CDATA[
<p>This demo shows how to bind toolbar items (a dropdown menu, dropdown item picker, and combo box) to data sources.</p>
<p>In addition to populating these toolbar items with data directly in the ASPX markup, the ASPxHtmlEditor allows you to bind them to data sources via the following properties:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_DataSourceIDtopic">DataSourceID</helplink>. Specifies the bound data source's name.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_TextFieldtopic">TextField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_ValueFieldtopic">ValueField</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_ImageUrlFieldtopic">ImageUrlField</helplink>. Allow you to designate the data source's fields that provide captions, values, and image URLs for individual control items.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarCustomDropDownBase_TooltipFieldtopic">TooltipField</helplink> (for dropdown menus and dropdown item pickers only). Use it to designate the bound data source's field providing item tooltips.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarDropDownMenu_BeginGroupFieldtopic">BeginGroupField</helplink> (for dropdown menus only). Allows you to designate the field that contains Boolean values for a menu item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorHtmlEditorToolbarItem_BeginGrouptopic">BeginGroup</helplink> flag.</li>
</ul>
<p>In combo boxes, these properties are available via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorToolbarComboBox_PropertiesComboBoxtopic">PropertiesComboBox</helplink> property set.</p>
<p>In this demo, the dropdown menu, dropdown item picker, and combo box toolbar items are bound to the MenuData.xml, ItemPickerData.xml, and ComboBoxData.xml files, which provide all the required fields for data binding.</p>]]>
</Description>
<SourceFile>~/App_Data/MenuData.xml</SourceFile>
<SourceFile>~/App_Data/ItemPickerData.xml</SourceFile>
<SourceFile>~/App_Data/ComboBoxData.xml</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="ClientSideAPI" Title="Client-Side API">
<Keywords>formatting, selection, selected</Keywords>
<Demo Key="ClientSideCommands" Title="Client-Side Commands">
<Description>
<![CDATA[
<p>
This demo illustrates how to execute custom commands within the ASPxHtmlEditor on the client.
</p>
<p>
A custom command is a sequence of calls to standard editor commands.
Custom commands can be executed by handling the editor's client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_CustomCommandtopic">CustomCommand</helplink> event.
This event fires if a command name associated with the clicked toolbar item doesn't coincide with any standard predefined editor command.
</p>
<p>
In this demo, two custom commands are implemented: one deletes the editor's content, and another inserts an e-mail template text.
To initiate these commands, a custom toolbar with two items is created. Custom item command names are 'deleteall' and 'pasteemailtemplate', respectively. It is also demonstrated how to assign custom keyboard shortcuts to these commands by defining corresponding items within the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_Shortcutstopic">Shortcuts</helplink> collection.
</p>]]>
</Description>
</Demo>
<Demo Key="ClientSideSelection" Title="Client-Side Selection">
<Description>
<![CDATA[
<p>This demo shows how to interact with the editor's selection using the client-side API.</p>
<p>The ASPxHtmlEditor provides a comprehensive API, allowing you to access and modify the currently selected content at the client side. To access the selection, use the editor's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditor_GetSelectiontopic">GetSelection</helplink> client function, which returns an <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorSelectiontopic">ASPxClientHtmlEditorSelection</helplink> class instance. With methods of this class, you can perform your tasks on the selection. In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorScriptsASPxClientHtmlEditorSelection_GetElementstopic">ASPxClientHtmlEditorSelection.GetElements</helplink> client function is used to access the selection's HTML elements (XML DOM nodes). These elements are used then to retrieve references to text nodes and modify their values based on the case update method (see the demo's ChangeCase JavaScript function). You can select the case update method via the corresponding toolbar dropdown menu.</p>
<p>Note that the selection API is available only in the Design View.</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Accessibility" Title="Accessibility">
<Demo Key="RightToLeft" Title="Right to Left">
<Keywords>rtl, Accessibility, arabic, Hebrew, Samaritan, Thaana, Syriac, Phoenician</Keywords>
<Description>
<![CDATA[
<p>ASPxHtmlEditor provides support for right-to-left languages like Arabic or Hebrew. So, you can completely rely on our editor when creating international web pages that include support for a right-to-left reading order and the mirroring of UI elements.</p>
<p>To switch ASPxHtmlEditor to a right-to-left representation, just enable a single property - <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_RightToLefttopic">RightToLeft</helplink>. When this property is on, text in the editor flows from right to left, and the layout of the editor UI elements, as well as its built-in dialogs, is reversed.</p>
<p>If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHtmlEditorASPxHtmlEditor_RightToLefttopic">RightToLeft</helplink> property for each control individually. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option that can be accessed within the settings group of our <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8007">devExpress</helplink> section.</p>
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxperience.ImageAndDataNavigation" Url="ASPxImageAndDataNavigationDemos" Title="DevExpress ASPxperience" SeoTitle="ASP.NET AJAX Image and Data Browsing Controls" NavItemTitle="Image and Data Navigation" OrderIndex="12">
<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_ASPxperience_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Image_and_Data_Navigation.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Image and Data Navigation Controls">
<BannerTitle>
Image and Data Browsing Controls for ASP.NET
</BannerTitle>
<BannerText>
A rich collection of multi-purpose image and data browsing tools designed to address a wide-range of business use scenarios
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=QQK11oQ_r24</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxperience Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>.
These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="DataView" Title="Data View" SeoTitle="ASP.NET AJAX Data View Control">
<Keywords>read, database, </Keywords>
<Demo Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how to bind ASPxDataView to a data source.
It supports standard data binding and any object which implements the IEnumerable or IDataSource interface
(e.g. SqlDataSource, XmlDataSource) may be used as a data source for this control.
</p>
<p>
In this sample, the ASPxDataView control is bound to the XmlDataSource component that 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 the ASPxDataView control's data items is defined via an <b>ItemTemplate</b> type template.
Controls that compose the template are bound to data by using data binding expressions. (See ASPX code)
</p>]]>
</Description>
</Demo>
<Demo Key="EndlessPaging" Title="Endless Paging" IsNew="true" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/DataView.png" HighlightedTitle="Data View - Endless Paging">
<Keywords>endless, paging</Keywords>
<Description>
<![CDATA[
<p>The ASPxDataView control supports an endless paging mode that allows loading items on demand. To enable this functionality, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewDataViewPagerSettings_EndlessPagingModetopic">EndlessPagingMode</helplink> property to one of the following values.
</p>
<ul>
<li>OnClick - items are loaded on a 'Show more items' link click.</li>
<li>OnScroll - items are loaded on page scrolling.</li>
</ul>
<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>
<HighlightedDescription>The Endless Paging mode in the DevExpress Grid View (ASPxGridView) allows grid rows to load on demand based on user actions. In this demo, more items are loaded on demand when the end-user clicks the “Show more items…” link.</HighlightedDescription>
</Demo>
<Demo Key="SEOFriendly" Title="SEO Friendly Paging">
<Keywords>pager, uri, url</Keywords>
<Description>
<![CDATA[
<p>
A known problem is that 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's 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 ASPxDataView allows you to make it SEO-friendly. Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_SEOFriendlytopic">PagerSettings.SEOFriendly</helplink> property to accomplish this.
</p>
<p>
If this property is set to CrawlerOnly, 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, and site visitors experience the same callback functionality.
</p>
<p>
If the property is set to Enabled or Disabled, automatic web crawler detection is disabled.
The pager renders either SEO-friendly or standard links, respectively.
</p>
]]>
</Description>
</Demo>
<Demo Key="CustomCallback" Title="Custom Callback">
<Description>
<![CDATA[
<p>
The ASPxDataView provides the ability to initiate a custom callback on demand, by using the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewScriptsASPxClientDataView_PerformCallbacktopic">PerformCallback</helplink> method,
and then perform any server-side processing required. In order to enable the use of callbacks, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewASPxDataViewBase_EnableCallBackstopic">EnableCallBacks</helplink> property should be
set to true (which is by default). Typically, calling custom callbacks may be useful to solve the task of sorting or filtering data displayed by the
ASPxDataView control.
</p>
<p>
This demo shows how the ASPxDataView's data can be sorted using custom callbacks.
The data field to sort, and the sort order can be selected using two combo boxes on the top right.
On a change of a combo box' selected value, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewScriptsASPxClientDataView_PerformCallbacktopic">PerformCallback</helplink> method of the ASPxDataView is called.
Then, a specific SQL query is formed on the server side depending upon the current values of combo boxes.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Headline" Title="Headline" SeoTitle="ASP.NET News Headline Control">
<Demo Key="Example" Title="Example" >
<Keywords>newscontrol, newspaper, lenta</Keywords>
<Description>
<![CDATA[
<p>
ASPxHeadline is used to organize/display news-like announcements on a web page.
It is a constituent part of the ASPxNewsControl but can be used independently when required.
</p>
<p>
ASPxHeadline exposes a broad set of properties which allow you to customize the appearance of its individual elements,
giving you the power to refine the look and feel of the control as needed.
</p>
<p>
In this demo, the page contains a standard Repeater control, which obtains its items from an xml file through an XmlDataSource component.
The xml file (WebSiteNewsRSS.xml) conforms to RSS 2.0 specifications.
</p>
<p>
Each Repeater control item is represented by a specific template (ItemTemplate type) that contains an instance of the
ASPxHeadline control. The ASPxHeadline control's properties are bound to data by using specific databinding expressions.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ImageGallery" Title="Image Gallery" SeoTitle="ASP.NET AJAX Image Gallery Control" IsNew="true">
<Keywords>image, gallery, photos, images</Keywords>
<Demo Key="DataBinding" Title="Data Binding">
<Description>
<![CDATA[
<p>This demo illustrates how the ASPxImageGallery control can be populated with image information taken from a data source. The ASPxImageGallery control can be bound to a data source in the standard manner - using the <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControl_DataSourceIDtopic">DataSourceID</helplink> or <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControlBase_DataSourcetopic">DataSource</helplink> property. While binding, the control automatically creates image items and retrieves their property values from the corresponding data items. The control implements specific properties that point to the data fields containing the necessary data: </p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_FullscreenViewerTextFieldtopic">FullscreenViewerTextField</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_FullscreenViewerThumbnailUrlFieldtopic">FullscreenViewerThumbnailUrlField</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_ImageUrlFieldtopic">ImageUrlField</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_NavigateUrlFieldtopic">NavigateUrlField</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_TextFieldtopic">TextField</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_ThumbnailUrlFieldtopic">ThumbnailUrlField</helplink></li>
</ul>
<p>In this demo, the image gallery control is bound to a standard XmlDataSource type data source by specifying the DataSourceID property. The FullscreenViewerThumbnailUrlField, ImageUrlField, TextField, and ThumbnailUrlField properties are used to get the corresponding property values from specified fields.</p>
]]>
</Description>
</Demo>
<Demo Key="FolderBinding" Title="Folder Binding" SeoTitle="Folder Binding" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/ImageGallery.png" HighlightedTitle="Image Gallery - Folder Binding">
<Keywords>Display Images from Directory</Keywords>
<Description>
<![CDATA[
<p>
This demo demonstrates how you can use the ASPxImagerGallery control after specifying just one property. All you need to start work with our image gallery is to set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryImageGalleryFolderSettings_ImageSourceFoldertopic">ImageSourceFolder</helplink> property to the required folder path – and the control is ready for use. Images are scaled and thumbnails are created automatically.
</p>
<p>
In this demo the 'Apply watermark' check box allows you to apply watermark to images by handling the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_CustomImageProcessingtopic">CustomImageProcessing</helplink> event.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress Image Gallery (ASPxImageGallery) control allows you to display images from a source folder simply by setting the ImageSourceFolder property to the folder path containing the images. In this demo, end-users can switch between different source folders at runtime using a combo box.</HighlightedDescription>
</Demo>
<Demo Key="ResponsiveLayout" Title="Responsive Layout">
<Keywords>Fullscreen</Keywords>
<Description>
<![CDATA[
<p>
The ASPxImageGallery control can be used to create a responsive page layout. For this purpose, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageGalleryASPxImageGallery_Layouttopic">Layout</helplink> property should be set to Flow to allow the items to flow one after another to fill the available page area. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewDataViewFlowLayoutSettings_ItemsPerPagetopic">ItemsPerPage</helplink> property allows you to specify the number of items that a page displays. Note that the fullscreen viewer always has a responsive layout.
</p>
]]>
</Description>
<SourceFile>~/ImageGallery/ResponsiveLayoutPage.aspx</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="ImageSlider" Title="Image Slider" SeoTitle="ASP.NET AJAX Image Slider Control">
<Keywords>image, slider, photos, photoslider</Keywords>
<Demo Key="Features" Title="Features" SeoTitle="Main Features" IsUpdated="true">
<Description>
<![CDATA[
<p>
The ASPxImageSlider is a data control used to display images and navigate among them. The control 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 control's performance.
</p>
<p>
The ASPxImageSlider control consists of the image area and navigation bar. The both elements can be fully customized via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_SettingsImageAreatopic">SettingsImageArea</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_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 control.
</p>
<p>
Image Area Settings
</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>
Navigation Bar Settings
</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>
Behavior Settings
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderBehaviorSettings_AllowMouseWheeltopic">AllowMouseWheel</helplink>. Specifies whether an end-user is able to slide images using the mouse wheel.</li>
<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>
Appearance
</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_ShowNavigationBartopic">ShowNavigationBar</helplink>. This option specifies the navigation bar visibility.</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="PhotoGallery" Title="Photo Gallery" SeoTitle="Photo Image Gallery">
<Description>
<![CDATA[
<p>
This demo demonstrates how to create a photo gallery using ASPxImagerSlider.
</p>
<p>
Photos are displayed in a table using our ASPxDataView control. Click a photo to open a popup window containing photo gallery. The gallery is implemented using the ASPxImagerSlider control. 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>
<p>Note that you can get an image gallery "out of the box" with our <a href="../ImageGallery/DataBinding.aspx">Image Gallery</a> control.</p>
]]>
</Description>
</Demo>
<Demo Key="FolderBinding" Title="Folder Binding" SeoTitle="Display Images from Folder">
<Description>
<![CDATA[
<p>
This demo demonstrates how you can use the ASPxImagerSlider control after specifying just one property. All you need to start work with our image slider – is to set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_ImageSourceFoldertopic">ImageSourceFolder</helplink> property to the required folder path and the control 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 Column" IsNew="true" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/ImageSlider.png" HighlightedTitle="Image Slider - Binding To Binary Data">
<Keywords>BLOB</Keywords>
<Description>
<![CDATA[
<p>The ASPxImageSlider control provides the ability to display binary images. In this demo, the image slider is bound to an access data source via the <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControl_DataSourceIDtopic">DataSourceID</helplink> property. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_ImageContentBytesFieldtopic">ImageContentBytesField</helplink> property specifies the data source field from which binary images should be retrieved. The ASPxImageSlider control caches the images to the folder specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_BinaryImageCacheFoldertopic">BinaryImageCacheFolder</helplink> property.</p>
]]>
</Description>
<HighlightedDescription>The touch-enabled DevExpress Image Slider (ASPxImageSlider) allows end-users to display and navigate images. ASPxImageSlider supports data binding, as well as the loading of images from a folder. In this demo, the Image Slider is bound to an access data source containing a binary data field.</HighlightedDescription>
</Demo>
<Demo Key="SlideShow" Title="Slide Show" IsNew="true" >
<Description>
<![CDATA[
<p>The ASPxImageSlider has a built-in ability to display an image slide show. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_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 control.</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>
<SourceFile>~/ImageSlider/css/SlideShow.css</SourceFile>
</Demo>
<Demo Key="NavigationBarMode" Title="Navigation Bar Mode" IsNew="true">
<Description>
<![CDATA[
<p>
This demo illustrates how to use the image slider navigation bar as a standalone control. For this purpose, the image area is hidden by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_ShowImageAreatopic">ShowImageArea</helplink> property to false. Item thumbnails are templated via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_ItemThumbnailTemplatetopic">ItemThumbnailTemplate</helplink> property to display an image with a caption and serve as a link.
</p>
<p>
In this demo you can use the combo box to change the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderImageSliderNavigationBarSettings_VisibleItemsCounttopic">VisibleItemCount</helplink> property value that specifies the number of thumbnails displayed within the navigation bar.
</p>
]]>
</Description>
<SourceFile>~/ImageSlider/css/NavigationBarMode.css</SourceFile>
</Demo>
<Demo Key="VideoGallery" Title="Templates (Video Gallery)" IsNew="true">
<Description>
<![CDATA[
<p>The ASPxImageSlider control supports template technology, allowing you to completely customize a control's appearance and layout.</p>
<p>The look of the ASPxImageSlider control'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 ASPxImageSlider control 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 control (using control level templates) or for a particular element (using item level templates). Each template can consist of a group of HTML controls. Each HTML control used in a template can be bound to the property values of the rendered item.</p>
<p>In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_ItemTemplatetopic">ItemTemplate</helplink> property is used to display video files within a control image area. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxImageSliderASPxImageSlider_ItemThumbnailTemplatetopic">ItemThumbnailTemplate</helplink> property is used to display information about items: text and time.</p>
]]>
</Description>
<SourceFile>~/ImageSlider/css/VideoGallery.css</SourceFile>
</Demo>
<Demo Key="FullscreenSample" Title="Fullscreen Sample" SeoTitle="Fullscreen Responsive Adaptive Layout">
<Description>
<![CDATA[
<p>
This demo illustrates how to use the ASPxImageSlider control in a full-screen mode when a control 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 control's client object to correctly display it when the window is resized.
</p>
<p>
Additionally, the demo demonstrates the ability to customize the navigation dots and item text area using cascading style sheets.
</p>
]]>
</Description>
<SourceFile>~/ImageSlider/FullscreenSamplePage.aspx</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="NewsControl" Title="News Control" SeoTitle="ASP.NET AJAX News Control">
<Demo Key="DataBinding" Title="Data Binding" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/NewsControl.png" HighlightedTitle="News Control - Data Binding">
<Description>
<![CDATA[<p>
The ASPxNewsControl control was primarily designed to display a list of news/product announcements on a web page.
</p><p>
In this demo, the ASPxNewsControl control obtains its items from an xml file through an XmlDataSource component. The xml file (NewsControlRSS.xml) conforms to RSS 2.0 specifications. A click on any news item's tail text invokes a popup (ASPxPopupControl) window containing the full text of the news entry. The ASPxPopupControl is bound to the same data source as the ASPxNewsControl. The ASPxPopupControl's popup window is invoked via the client ShowWindow method, which is passed with the popup window's name as a parameter.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNewsControlASPxNewsControl_NavigateUrlFormatStringtopic">NavigateUrlFormatString</helplink> property of the ASPxNewsControl is set in a specific manner in order to define the desired URLs for tail texts. (See ASPX code)
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_TailPositiontopic">ItemSettings.TailPosition</helplink> property of the ASPxNewsControl is set to the KeepWithLastWord. (See ASPX code)
</p>]]>
</Description>
<HighlightedDescription>The DevExpress News Control (ASPxNewsControl) displays a list of text such as news and product announcements on a web page. In this demo, the news items are displayed from an XML file via an XmlDataSource component.</HighlightedDescription>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features" IsUpdated="true">
<Description>
<![CDATA[<p>
This demo shows the main features available in the ASPxNewsControl control. Use the controls in the rightmost panel to change the values of the control's properties, and see the result within the ASPxNewsControl.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxDataViewASPxDataViewBase_EnableCallBackstopic">EnableCallBacks</helplink> property controls whether the callback or postback technology is used to manage round trips to the server when moving to another page within the ASPxNewsControl.
</p><p>
Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNewsControlASPxNewsControl_ShowBackToToptopic">ShowBackToTop</helplink> property to display a Back to top link after each news headline. When clicked, this link navigates an end-user to the top of the page.
</p><p>The embedded pager control can be customized using the following settings:</p><ul><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_EllipsisModetopic">EllipsisMode</helplink> property specifies how an Ellipsis symbol(s) is displayed to indicate page numbers that are omitted. An Ellipsis symbol(s) can be displayed inside the range of pages (InsideNumeric), outside the range of pages (OutsideNumeric), or can be hidden (None).
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_Positiontopic">Position</helplink> property can be used to specify the pager's position (Bottom, Top, TopAndBottom) within the ASPxNewsControl.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowDisabledButtonstopic">ShowDisabledButtons</helplink> property controls the visibility of the pager's buttons which cannot be used at the moment, and are temporarily disabled.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowNumericButtonstopic">ShowNumericButtons</helplink> property controls the visibility of the pager's numeric buttons that navigate a user to corresponding pages.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowSeparatorstopic">ShowSeparators</helplink> property specifies whether separators that separate page numbers are displayed.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerButtonProperties_Visibletopic">PageSizeItemSettings.Visible</helplink> property controls page size item visibility. In this demo, use the 'Show PageSizeItem' check box to show and hide the item.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPageSizeItemSettings_Positiontopic">PageSizeItemSettings.Position</helplink> property controls where a page size item is displayed: at the pager's left or right. In this demo, use the 'PageSizeItem position' combo box to select the required location.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNewsControlNewsControlPagerSettings_EndlessPagingModetopic">EndlessPagingMode</helplink> property controls whether the NewsControl should load news headlines on demand.
</li></ul><p>
The following common settings can be used to customize news headlines displayed by the ASPxNewsControl:
</p><ul><li>
A pair of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_DateHorizontalPositiontopic">DateHorizontalPosition</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNewsControlNewsItemSettings_DateVerticalPositiontopic">DateVerticalPosition</helplink> properties specifies the date's position (horizontal and vertical, respectively) within news headlines.
</li><li>
The positions of the tail text and tail image within news headlines can be controlled by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_TailPositiontopic">TailPosition</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_TailImagePositiontopic">TailImagePosition</helplink> properties.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_ShowContentAsLinktopic">ShowContentAsLink</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_ShowHeaderAsLinktopic">ShowHeaderAsLink</helplink> properties specify whether the news text and header text should be displayed as a hyper link within news headlines.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_ShowContentInToolTiptopic">ShowContentInToolTip</helplink> property controls whether a headline's tooltip displays the full content, if it's clipped within the headline.
</li><li>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHeadlineHeadlineSettings_MaxLengthtopic">MaxLength</helplink> property specifies the maximum length of a news headline's text.
</li></ul>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Pager" Title="Pager" SeoTitle="ASP.NET Pager Control">
<Keywords>paging, navigation</Keywords>
<Demo Key="Example" Title="Example" >
<Description>
<![CDATA[<p>
The ASPxPager control is used by other DevExpress ASP.NET components to implement page-mode navigation. When used as a standalone control, it allows you to implement custom paging algorithms by handling its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerASPxPagerBase_PageIndexChangedtopic">PageIndexChanged</helplink> event.
</p><p>
This demo illustrates how the ASPxPager control can be used to change the active View within the MultiView control.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Accessibility" Title="Accessibility">
<Demo Key="RightToLeft" Title="Right to Left Layout">
<Keywords>rtl, Accessibility, arabic, Hebrew, Samaritan, Thaana, Syriac, Phoenician</Keywords>
<Description>
<![CDATA[
<p>
Our visual controls provide support for right-to-left languages, like Arabic or Hebrew. So, you can completely rely on our web controls when creating international web pages that include support for right-to-left reading order, and mirroring of UI elements.
</p>
<p>
To switch a control to right-to-left representation, just enable a single property - RightToLeft. When this property is on, text flows from right to left in a control and the control itself is mirrored (the layout of its UI elements is reversed).
</p>
<p>
If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching each control's RightToLeft property. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option, that can be accessed within the settings group of our <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8007">devExpress</helplink> section.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxperience.MultiUseControls" Url="ASPxMultiUseControlsDemos" Title="DevExpress ASPxperience" SeoTitle="ASP.NET AJAX Multi-Use Site Controls" NavItemTitle="Multi-Use Site Controls" OrderIndex="13">
<Keywords>useful, utils</Keywords>
<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_ASPxperience_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/MultiUse.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Multi-Use Site Controls">
<BannerTitle>
Multi-Use Site Controls for ASP.NET
</BannerTitle>
<BannerText>
A collection of multi-use WebForms site controls and components including the Rating Control, the Round Panel, the Callback Panel (to update content dynamically via callbacks), and many more.
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxperience Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>.
These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Callback" Title="Callback" SeoTitle="ASP.NET Callback Component">
<Keywords>ajax, request, asynchronously</Keywords>
<Demo Key="Example" Title="Example" >
<Description>
<![CDATA[
<p>
The ASPxCallback is a non visual control that allows you to asynchronously transfer any information from server to client, when a need for this information occurs on the client.
</p>
<p>
This demo initially displays short news headlines. Detailed news descriptions can be loaded dynamically, without refreshing the entire web page. This effect is achieved by using client and server events available in the ASPxCallback component.
</p>
<p>
First, when a news headline is clicked, the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackScriptsASPxClientCallback_PerformCallbacktopic">PerformCallback</helplink> method of the ASPxCallback is called. This method is passed with an argument which contains the number of the corresponding news entry.
</p>
<p>
Next, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackASPxCallback_Callbacktopic">Callback</helplink> event is raised on the server during server-side processing of the callback. In the event's handler, the required news description is obtained and assigned to the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackCallbackEventArgs_Resulttopic">Result</helplink> property of the event's argument.
</p>
<p>
Finally, when the response comes back to the client, the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackScriptsASPxClientCallback_CallbackCompletetopic">CallbackComplete</helplink> event of the ASPxCallback component is raised, allowing the resulting description text to be displayed within the page.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="CallbackPanel" Title="Callback Panel" SeoTitle="ASP.NET AJAX Callback Panel Control">
<Keywords>iframe, panel, request</Keywords>
<Demo Key="Example" Title="Example" SeoTitle="Update Panel Replacement" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/CallbackPanel.png" HighlightedTitle="Callback Panel - Example">
<Description>
<![CDATA[
<p>
ASPxCallbackPanel is a lightweight web control that allows you to dynamically update its content via callbacks, preventing undesirable whole page postbacks. You can initiate an update callback by calling the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelScriptsASPxClientCallbackPanel_PerformCallbacktopic">PerformCallback</helplink> client method.
</p>
<p>
ASPxCallbackPanel's contents remain visible while its callback is being processed on the server. During callback processing, the panel control is covered with a customizable Loading Panel and Loading Div elements. The appearance of the Loading Panel can be defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_LoadingPanelImagetopic">LoadingPanelImage</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_LoadingPanelImagePositiontopic">LoadingPanelImagePosition</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_LoadingPanelStyletopic">LoadingPanelStyle</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_LoadingPanelTexttopic">LoadingPanelText</helplink> properties. The Loading Div's style is customized using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_LoadingDivStyletopic">LoadingDivStyle</helplink> property.
</p>
<p>
In this example, ASPxCallbackPanel is used to display detail information on an employee selected within a list box. When the list box' selected item is changed, ASPxCallbackPanel's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelScriptsASPxClientCallbackPanel_PerformCallbacktopic">PerformCallback</helplink> client method is called to initiate a callback to update panel content. On the server side, the selected list item's value is used as an SQL SELECT query parameter's value, and as a result, ASPxCallbackPanel displays the requested information.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Callback Panel (ASPxCallbackPanel) control allows you to partially update a web page without performing a full postback. ASPxCallbackPanel is useful for controls that do not have built-in callback functionality. This demo illustrates how it can be used to display detailed employee information that changes dynamically when clicking on a name in the employee list box.</HighlightedDescription>
</Demo>
<Demo Key="CustomJavaScriptProperties" Title="Custom JavaScript Properties" SeoTitle="Data Exchange on Callbacks">
<Keywords>iframe, parameters</Keywords>
<Description>
<![CDATA[
<p>
All DevExpress web controls that expose publicly available client-side API now allow any server data to be easily passed to the client,
and accessed as values of specifically declared control properties. For this purpose, a web control exposes the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_CustomJSPropertiestopic">CustomJSProperties</helplink> event,
and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_JSPropertiestopic">JSProperties</helplink> property, each of which enables you to declare custom properties for the client control.
You can specify these properties' values on the server side and then access them on the client, as you would do with built-in properties.
</p>
<p>
In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCallbackPanelASPxCallbackPanel_CustomJSPropertiestopic">CustomJSProperties</helplink> event is used to pass paging information (such as the current page index and the total page number)
from the server to the client side. This information is used on the client to update texts of labels and switch the availability of the navigation buttons.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="HiddenField" Title="Hidden Field" SeoTitle="ASP.NET Hidden Field Component">
<Demo Key="Example" Title="Example" >
<Description>
<![CDATA[
<p>
The ASPxHiddenField control allows you to simplify the process of storing a set of values that should be persisted and synchronized
between server and client sides across round trips.
</p>
<p>
Using the ASPxHiddenField as a dictionary, you can pass any number of simple or typed values from the server to the client side.
On the client, you can easily access and modify these values (and even add or remove values) using the control's comprehensive client-side API.
If required, the changes made to the values on the client side can be synchronized with the server
(this is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxHiddenFieldASPxHiddenField_SyncWithServertopic">SyncWithServer</helplink> property).
</p>
<p>
In this demo, a single ASPxHiddenField control is used to store selections made on all pages of a standard MultiView control.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ObjectContainer" Title="Object Container" SeoTitle="ASP.NET Media Container Control">
<Keywords>video, audio, ASF, ASX, AVI, MP4, MPE, MPEG, MPG, WM, WMV, WMX, WVX, AIF, AIFC, AIFF, AU, M4A, MID, MIDI, MP2, MP3, MPA, RMI, SND, WAV, WAX, WMA, flash</Keywords>
<Demo Key="Types" Title="Media Types">
<Description>
<![CDATA[<p>
The ASPxObjectContainer allows different types of media (such as flash files, images, videos, sounds) to be embedded within a web page.
</p><p>
In this demo, the ASPxObjectContainer control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxObjectContainerASPxObjectContainer_ObjectTypetopic">ObjectType</helplink> property is used to define the type of media data to load onto the page. The source of media data is specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxObjectContainerASPxObjectContainer_ObjectUrltopic">ObjectUrl</helplink> property.
</p><p>The following file types are supported:</p><p>Images: BMP, GIF, ICO, JPEG, PNG</p><p>Macromedia: SWF</p><p>QuickTime: MOV</p><p>Video: ASF, ASX, AVI, MP4, MPE, MPEG, MPG, WM, WMV, WMX, WVX</p><p>Audio: AIF, AIFC, AIFF, AU, M4A, MID, MIDI, MP2, MP3, MPA, RMI, SND, WAV, WAX, WMA</p>]]>
</Description>
</Demo>
<Demo Key="ClientSide" Title="Client-Side Events">
<Description>
<![CDATA[<p>
This demo illustrates how the ASPxObjectContainer control can programmatically control the associated flash object by sending specific commands to the flash and responding to its feedback. Click checkboxes in the rightmost panel, or specific countries in the flash and see how corresponding checkboxes and countries are synchronized.
</p><p>
In this demo, when a checkbox is clicked, the corresponding country in the flash object is specifically highlighted by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxObjectContainerScriptsASPxClientObjectContainer_SetVariabletopic">SetVariable</helplink> method of the ASPxObjectContainer control. This method receives two parameters - the required variable of the flash object and the variable's value. (See JS code, the SelectCountryInFlash function)
</p><p>
When a country in the flash object is clicked, a specific client-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxObjectContainerScriptsASPxClientObjectContainer_FlashScriptCommandtopic">FlashScriptCommand</helplink> event is raised by the ASPxObjectContainer control. In this event's handler, the corresponding checkbox' state is changed based upon the e.args parameter's value. (See ASPX code)
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="RatingControl" Title="Rating Control" SeoTitle="ASP.NET AJAX Rating Control">
<Demo Key="DataBinding" Title="Data Binding" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/RatingControl.png" HighlightedTitle="Rating Control - Data Binding">
<Keywords>databinding</Keywords>
<Description>
<![CDATA[<p>
This demo illustrates how the ASPxRatingControl can be used to visualize data taken from a data source.
</p><p>
In this demo, the ASPxRatingControl is used in read-only mode (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_ReadOnlytopic">ReadOnly</helplink> property is set to true). It is placed within the data bound Repeater control's template of the ItemTemplate type. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_Valuetopic">Value</helplink> property of the ASPxRatingControl is bound to a data field by using a specific data-binding expression.
</p>]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Rating Control (ASPxRatingControl) allows end-users to rate content by clicking icons such as stars. This demo illustrates how ASPxRatingControl is used to display ratings data from a database.</HighlightedDescription>
</Demo>
<Demo Key="Voting" Title="Voting">
<Keywords>votes, survey</Keywords>
<Description>
<![CDATA[
<p>
The ASPxRatingControl is used to elegantly visualize end-users' ratings. It also provides end-users with an intuitive interface to rate content by allowing them to select the number of item images (by default, stars) that represents their rating.
</p>
<p>
The ASPxRatingControl allows you to specify:
</p>
<ul>
<li>
its value (via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_Valuetopic">Value</helplink> property),
</li>
<li>
the number of items (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_ItemCounttopic">ItemCount</helplink> property),
</li>
<li>
an image representing an individual item in different states (such as normal, highlighted, selected) by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_ImageMapUrltopic">ImageMapUrl</helplink> property, along with the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_ItemWidthtopic">ItemWidth</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_ItemHeighttopic">ItemHeight</helplink> properties,
</li>
<li>
titles of items (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_Titlestopic">Titles</helplink> property),
</li>
<li>
the manner items are filled to represent the control's value, if it is a fractional number (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_FillPrecisiontopic">FillPresicion</helplink> property).
</li>
</ul>
<p>
The following fill types are available within the ASPxRatingControl, controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlASPxRatingControl_FillPrecisiontopic">FillPresicion</helplink> property:
</p>
<ul>
<li>
Full - An item is fully filled if the decimal part of the control's value is in the range 50-99.
</li>
<li>
Half - An item is half filled if the decimal part of the control's value is in the range 25-74.
</li>
<li>
Exact - An item is filled according to the exact decimal part of the control's value.
</li>
</ul>
<p>
On the client side, the ASPxRatingControl implements a set of client events (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemClicktopic">ItemClick</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemMouseOvertopic">ItemMouseOver</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemMouseOuttopic">ItemMouseOut</helplink>), allowing you to respond when end-users manipulate the control.
</p>
<p>
In this demo, the ASPxRatingControl is used to implement a simple voting system that allows an end-user to submit a vote once, by selecting the desired number of stars and clicking the corresponding star (an end-user can resubmit his/her choice by repeating the selection process, and selecting another number of stars).
</p>
<p>
Technically, this is implemented as follows. The second rating control's client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_ItemClicktopic">ItemClick</helplink> event is handled to initiate a callback sending the value obtained via the control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_GetValuetopic">GetValue</helplink> client method to the server. This value is used on the server to calculate the overall rating value. The calculated value is then sent back to the client and assigned to the first rating control using its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxRatingControlScriptsASPxClientRatingControl_SetValuetopic">SetValue</helplink> client method.
</p>
<p>
You can also select an item from the drop-down list to specify the second control's fill type, and research how the second control's items are filled, depending upon the control's value.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="RoundPanel" Title="Round Panel" SeoTitle="ASP.NET AJAX Round Panel Control">
<Keywords>radius, round, borderradius</Keywords>
<Demo Key="Appearance" Title="Additional Appearances" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/RoundPanel.png" HighlightedTitle="Round Panel - Additional Appearances">
<Description>
<![CDATA[<p>
This demo illustrates how the appearance of the ASPxRoundPanel control can be customized. To select a different look and feel, choose an option from the rightmost list.
</p><p>
The ASPxRoundPanel control represents a container area with rounded corners. The appearance of the ASPxRoundPanel can be customized either manually (by changing property values) or by using its designer.
</p>]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Round Panel (ASPxRoundPanel) control allows you to display an element with rounded corners. This demo illustrates how the ASPxRoundPanel can have a custom appearance, as well as its different styles.</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="Timer" Title="Timer" SeoTitle="ASP.NET AJAX Timer Component">
<Demo Key="ClientSide" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event management technology. The ASPxTimer component has two client-side events - <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTimerScriptsASPxClientTimer_Ticktopic">Tick</helplink> - which are traced and displayed in the Event monitor below.
</p>
<p>
In this demo, the ASPxTimer is used to implement a countdown timer and to temporarily disable the download button during the countdown. In the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink> event's handler, the button is disabled, the value of the seconds counter is set, and a specific descriptive text with a countdown is displayed. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTimerScriptsASPxClientTimer_Ticktopic">Tick</helplink> event is handled to decrease the seconds counter and to refresh the page's information when the defined time runs out.
</p>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[<p>
This example demonstrates how to manipulate the ASPxTimer component on the client, using its client-side functionality. The client-side programmatic interface is available if the <helplink href="">EnableClientSideAPI</helplink> property is set to true, or if there is a handler assigned for any client-side event.
</p><p>
The ASPxTimer's client-side API includes two methods: <helplink href="">SetInterval</helplink> and <helplink href="">SetEnabled</helplink>. In this demo, they are used to adjust the timer's interval and turn the timer on and off on the client side. (See ASPX code, the dropdown list and checkbox declarations)
</p>]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxperience.NavigationAndLayout" Url="ASPxNavigationAndLayoutDemos" Title="DevExpress ASPxperience" SeoTitle="ASP.NET AJAX Navigation and Layout Controls" NavItemTitle="Navigation and Layout" OrderIndex="4">
<Keywords>navigation, layout, markup</Keywords>
<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_ASPxperience_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Navigation_and_Layout.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Navigation and Layout Controls">
<BannerTitle>
Navigation and Layout Controls for ASP.NET
</BannerTitle>
<BannerText>
A comprehensive collection of site navigation and layout tools for building easy-to-navigate, user-friendly websites and web applications.
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=I2lU7SS3BaY</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxperience Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxperience Suite</b>.
These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="CloudControl" Title="Cloud Control" SeoTitle="ASP.NET AJAX Tag Cloud Control">
<Keywords>tags</Keywords>
<Demo Key="Appearance" Title="Additional Appearances">
<Description>
<![CDATA[
<p>
This demo illustrates how the appearance of the ASPxCloudControl can be customized.
To select a different look and feel, choose an option from the rightmost list.
</p>
<p>
The ASPxCloudControl allows you to enhance your site's appearance and functionality by introducing 'tag clouds" -
a unique data visualization metaphor. Tag clouds consist of links which appear differently based upon their weight (rank).
Tags in the control can be ranked by different criteria, such as the number of user messages, product sales volume, number of elements in a category, etc.
</p>
]]>
</Description>
<SourceFile>~/CloudControl/Appearances/Demo.ascx</SourceFile>
<SourceFile>~/CloudControl/Appearances/Strict.ascx</SourceFile>
<SourceFile>~/CloudControl/Appearances/Technology.ascx</SourceFile>
<SourceFile>~/CloudControl/Appearances/Violet.ascx</SourceFile>
</Demo>
<Demo Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how to bind the ASPxCloudControl to a data source.
The ASPxCloudControl supports standard data binding - any object that implements the IEnumerable or IDataSource interface
(e.g. SqlDataSource, XmlDataSource) may be used as a data source for this control.
</p>
<p>
In this demo the ASPxCloudControl receives data from an MS Access database.
The ASPxCloudControl implements specific properties that point to the data fields containing the necessary data.
These are the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_TextFieldtopic">TextField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_ValueFieldtopic">ValueField</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_NavigateUrlFieldtopic">NavigateUrlField</helplink> properties.
</p>
<p>
Like our other web controls, the ASPxCloudControl includes an <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_ItemDataBoundtopic">ItemDataBound</helplink> event that allows you to customize values that are to be assigned to tag cloud element properties during data binding.
</p>
<p>
Refer to VB or C# code to see how the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_ItemDataBoundtopic">ItemDataBound</helplink> event is handled in this demo to cast item text to upper case.
</p>
]]>
</Description>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
This demo illustrates the primary features of the ASPxCloudControl.
Use the controls in the rightmost panel to change the values of the control's properties, and see the result within the ASPxCloudControl.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_RankCounttopic">RankCount</helplink> property specifies the total number of ranks which the input data should be divided into.
</p>
<p>
By Using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_Scaletopic">Scale</helplink> property, you can choose the scale to be used to rank elements.
Both linear and logarithmic scale types are supported.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxCloudControlASPxCloudControl_ShowValuestopic">ShowValues</helplink> property allows the rank (weight) of an element to be displayed together with the element's caption text.
This could be useful in instances when you need to provide exact information about tag elements.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="FormLayout" Title="Form Layout" SeoTitle="ASP.NET AJAX Form Layout Control">
<Keywords>formslayout, inputs, editing</Keywords>
<Demo Key="DataBindingToSingleObject" Title="Data Binding To Single Object" SeoTitle="Data Binding To Single Object" IsNew="true">
<Description>
<![CDATA[
<p>This demo illustrates how the ASPxFormLayout control can be used to edit fields of a data source.</p>
<p>In this demo, the edited data is specified via the <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControlBase_DataSourcetopic">ASPxFormLayout.DataSource</helplink> property value in the code-behind. </p>
<p>ASPxFormLayout layout items are gathered in the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutASPxFormLayout_Itemstopic">Items</helplink> collection and are bound to data source fields using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItem_FieldNametopic">LayoutItem.FieldName</helplink> property. Each layout item contains a data editor from the DevExpress ASPxEditors library. This data editor allows editing values of the corresponding field type.</p>
<p>When the edit form is submitted to the server, new field values are obtained via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutASPxFormLayout_GetNestedControlValueByFieldNametopic">GetNestedControlValueByFieldName</helplink> method in the code-behind.</p>
]]>
</Description>
</Demo>
<Demo Key="DataBindingToDatabase" Title="Data Binding To Database" SeoTitle="Data Binding To Database" IsNew="true">
<Description>
<![CDATA[
<p>This demo illustrates how the ASPxFormLayout control can be used to edit fields of a data source.</p>
<p>In this demo, the edited data is specified via the <helplink href="http://documentation.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControl_DataSourceIDtopic">ASPxFormLayout.DataSourceID</helplink> property value in the markup.</p>
<p>The ASPxFormLayout layout items are gathered in the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutASPxFormLayout_Itemstopic">Items</helplink> collection and are bound to data source fields using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItem_FieldNametopic">LayoutItem.FieldName</helplink> property. Each layout item contains a data editor from the DevExpress ASPxEditors library. This data editor allows editing corresponding field type values.</p>
<p>When the edit form is submitted to the server, the edited record is updated via the AccessDataSource.Update method.</p>
]]>
</Description>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features" HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/FormLayout.png" HighlightedTitle="Form Layout Control - Features">
<Description>
<![CDATA[
<p>
The ASPxFormLayout control delivers a comprehensive form design feature set. This demo illustrates the primary features of the ASPxFormLayout.
</p>
<p>
Use the ASPxFormLayout to easily create form layouts of any complexity by combining the order and hierarchy of provided layout elements. The ASPxFormLayout main layout elements are comprised of labeled items, labeled regular groups and tabbed groups.
</p>
<p>
Item elements serve as placeholders for editors or custom content. Group elements are containers for other layout elements. Group nesting is also available.
</p>
<p>
Items allow you to define inline help texts that describe editor definitions. Help texts can also be defined at the nested editor's level (if DevExpress editors are used in items). An editor's help text can be displayed either always (as an editor inline text) or only when the editor receives focus (as a popup tooltip). Take a look at the memo editor behavior in this demo.
</p>
<p>
The ASPxFormLayout can also display customizable text marks within item captions to indicate whether filling in an item editor is required or optional. The indicator display mode can be defined for all or individual items. The indicator type is determined based on a setting defined at the item editor level or an item level.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Form Layout (ASPxFormLayout) control helps you easily create complex data forms at design-time in a matter of minutes. This demo showcases the stunning runtime features of the ASPxFormLayout, such as group settings, item caption settings and help text settings.</HighlightedDescription>
</Demo>
<Demo Key="TabbedGroups" Title="Selection-Dependent Inputs" SeoTitle="Selection-Dependent Inputs">
<Description>
<![CDATA[
<p>
This demo illustrates how to implement a form that dynamically exposes different additional inputs depending upon an initial selection made by an end-user.
</p>
<p>
In the demo, selection-dependent inputs are vertically separated from the user's initial options. Selection-dependent inputs are exposed below radio buttons using pages of a tabbed group. The tabbed group's decoration, such as tabs and borders, is hidden using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutTabbedLayoutGroup_ShowGroupDecorationtopic">ShowGroupDecoration</helplink> property, so that the group displays only the active page's content. The number and indexes of tabbed pages in the tabbed group directly correspond to the number and indexes of items within a radio button list. When an end-user selects a radio button in the list of options, the corresponding tabbed page is activated in the tabbed group via client code.
</p>
]]>
</Description>
</Demo>
<Demo Key="Columns" Title="Columns" SeoTitle="Columns">
<Description>
<![CDATA[
<p>
ASPxFormLayout provides you with an ability to flexibly customize form layouts by dividing group contents into table cells and position layout elements (items and groups) within cells which can span across several columns or rows. So, the layout of elements in a group can be customized in a manner similar to an HTML TABLE element using colspan and rowspan notions.
</p>
<p>
You can use a group's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutGroup_ColCounttopic">ColCount</helplink> property to define the number of logical columns within the group. All layout elements (items and groups) have the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItemBase_ColSpantopic">ColSpan</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItemBase_RowSpantopic">RowSpan</helplink> properties allowing you to span them across multiple table cells.
</p>
<p>
In this demo, a group's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutGroup_ColCounttopic">ColCount</helplink> property is set to 3, and the memo editor spans across three columns due to its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItemBase_ColSpantopic">ColSpan</helplink> property set to 3.
</p>
]]>
</Description>
</Demo>
<Demo Key="RegistrationForm" Title="Registration Form" SeoTitle="Registration Form">
<Description>
<![CDATA[
<p>
In this demo, you can see how the ASPxFormLayout control can be used to create a complete and fully functional registration form.
</p>
<p>
Note that in addition to an elegant form UI with aligned captions and editors, this implementation provides support for automatic visualization of required field indicators, password safety indication, both client and server validation of user input, and server captcha verification.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality" SeoTitle="Client-Side Functionality" IsNew="true">
<Description>
<![CDATA[
<p>This example demonstrates how to manipulate an ASPxFormLayout control programmatically on the client using our extended client-side functionality.</p>
<p>In this demo, layout items of the ASPxFormLayout control are identified using their <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutLayoutItemBase_Nametopic">Name</helplink> property. In order to obtain a specific layout item by its name on the client side the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutScriptsASPxClientFormLayout_GetItemByNametopic">GetItemByName</helplink> method is used (see JS code). A particular layout item’s visibility is changed on the client with the help of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxFormLayoutScriptsASPxClientLayoutItem_SetVisibletopic">SetVisible</helplink> method by passing it the required boolean value.</p>
<p>In this demo, when an end-user selects any of the radio button list items ("I am a new user" or "I am a registered user"), the UpdateItemsVisibility function is called. This function defines the visibility of all of the layout items depending on the selected value within the radio button list.</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Menu" Title="Menu" SeoTitle="ASP.NET AJAX Menu Control">
<Keywords>mainmenu, menu</Keywords>
<Demo Key="DataBinding" Title="Data Binding" HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Menu.png" HighlightedTitle="Menu - Data Binding">
<Description>
<![CDATA[
<p>
This demo illustrates how the ASPxMenu control can be populated with item information taken from a data source.
</p>
<p>
The ASPxMenu supports binding to data sources, which can be any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g. SiteMapDataSource, XmlDataSource, etc.). The ASPxMenu can be bound to a data source in the standard manner - using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxHierarchicalDataWebControl_DataSourceIDtopic">DataSourceID</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControlBase_DataSourcetopic">DataSource</helplink> property.
</p>
<p>
While binding, the ASPxMenu control automatically creates the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxMenuMenuItemtopic">MenuItem</helplink> objects and retrieves their property values from corresponding items. The menu supports two methods of retrieving data from a specified data source. One involves manually setting the control's specific data-related properties (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_TextFieldtopic">TextField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ImageUrlFieldtopic">ImageUrlField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_NavigateUrlFieldtopic">NavigateUrlField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_NameFieldtopic">NameField</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ToolTipFieldtopic">ToolTipField</helplink>) to the data source item attribute names. The other one exploits the ASPxMenu's ability to recognize data items and automatically retrieve some item characteristics from the data fields named in a specific way.
</p>
<p>
Additionally, the ASPxMenu provides specific events related to data binding that can be handled according to your application logic.
</p>
<ul>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemDataBoundtopic">ItemDataBound</helplink> event allows you to customize settings of an individual item immediately after it has been bound to data.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControlBase_DataBoundtopic">DataBound</helplink> event (which occurs after the control data binding has been finished) allows you to finally customize the control.</li>
</ul>
<p>
In this demo, the ASPxMenu control is bound to an ASPxSiteMapDataSource control by specifying just one <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxHierarchicalDataWebControl_DataSourceIDtopic">DataSourceID</helplink> property. An item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Texttopic">Text</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_NavigateUrltopic">NavigateUrl</helplink> property values are automatically retrieved from the <i>title</i> and <i>url</i> SiteMapNode attributes. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemDataBoundtopic">ItemDataBound</helplink> event is handled for two purposes: to add an image sprite CSS class to items that have the <i>"SpriteImage"</i> attribute within the data source; and to bold a score and add it to the text of items that have the <i>"result"</i> attribute within the data source.
</p>
]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Menu (ASPxMenu) control allows you to add menus to your website. You can add the menu content directly within your control, or populate it with data from a data source. This demo illustrates how to populate the ASPxMenu with item information from an ASPxSiteMapDataSource.</HighlightedDescription>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Keywords>menu</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates the primary features of the ASPxMenu control.
Use the items within the rightmost panel to change the values of the menu's properties.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_AllowSelectItemtopic">AllowSelectItem</helplink> property can be used to enable menu item selection on the client side.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_AutoPostBacktopic">AutoPostBack</helplink> property controls whether a round trip to the server is required when a menu item is clicked.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_EnableHotTracktopic">EnableHotTrack</helplink> property allows you to specify whether menu items can visually respond to mouse hovering.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_AutoSeparatorstopic">AutoSeparators</helplink> property specifies the manner in which separators are displayed to separate menu items from one another.
In order to display separators among all menu items, this property should be set to All.
If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_AutoSeparatorstopic">AutoSeparators</helplink> property's value is RootOnly, separators are displayed only for root items (menu items of the top level).
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_AppearAftertopic">AppearAfter</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_DisappearAftertopic">DisappearAfter</helplink> properties allows you to specify the delay in milliseconds for the display of submenus
within a menu control.
</p>
]]>
</Description>
</Demo>
<Demo Key="ItemLinkMode" Title="Item Link Mode" SeoTitle="Item Render Mode">
<Description>
<![CDATA[
<p>
This demo shows which factors affect the appearance and functionality of clickable menu items and the style of links represented by menu items.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemLinkModetopic">ItemLinkMode</helplink> property can be used to specify how menu items are represented as links within the menu control.
By default, this property is set to ContentBounds, which makes the menu entirely interactive.
If you need to display a simple menu (such as a set of single level links), you can set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemLinkModetopic">ItemLinkMode</helplink> property to TextOnly.
In this instance, the resulting HTML code generated to represent the menu control on the page will be minimal.
In order to control the appearance of links, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_LinkStyletopic">LinkStyle</helplink> property can be used.
</p>
<p>
In this demo, two ASPxMenu controls are used with different settings for their <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemLinkModetopic">ItemLinkMode</helplink> property.
The first menu's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemLinkModetopic">ItemLinkMode</helplink> property is set to ContentBounds thus allowing the entire area of each menu item to be clickable.
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemLinkModetopic">ItemLinkMode</helplink> property of the second menu is set to TextOnly.
</p>
]]>
</Description>
</Demo>
<Demo Key="PopupMenu" Title="Popup Menu">
<Keywords>context, contextmenu</Keywords>
<Description>
<![CDATA[
<p>This demo demonstrates some of the features available to you when using the ASPxPopupMenu control.</p>
<p>A popup menu can be associated with a specific control using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxPopupMenu_PopupElementIDtopic">PopupElementID</helplink> property. The menu is invoked automatically when a specific action (a left or right mouse click or mouse hovering) defined by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxPopupMenu_PopupActiontopic">PopupAction</helplink> property, is performed within the associated control.</p>
<p>In this example, the ASPxPopupMenu control is linked to an image. The popup menu is displayed by an action specified within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxPopupMenu_PopupActiontopic">PopupAction</helplink> dropdown editor. The menu's precise display position with respect to the associated control can be defined by the HorizontalAlign and VerticalAlign combo boxes that control the values of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxPopupMenu_PopupHorizontalAligntopic">PopupHorizontalAlign</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxPopupMenu_PopupVerticalAligntopic">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">ShowAtPos</helplink> method is used to display the ASPxPopupMenu control 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">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 one time.</p>
]]>
</Description>
</Demo>
<Demo Key="Scrolling" Title="Scrolling" SeoTitle="Sub-Menu Srolling">
<Description>
<![CDATA[
<p>
This demo illustrates the ASPxMenu's support for scrolling items within submenus.
</p>
<p>
By default, dropdown submenus are automatically rendered to accommodate their entire content.
In this case, lengthy submenus (containing a large number of items) might not be displayed entirely within the browser window.
They might go beyond the bounds of the browser window, if their heights exceed the browser window's height
(or the height of an IFRAME containing the menu).
</p>
<p>
To accommodate submenus within the window boundaries, you can enable the menu's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenu_EnableSubMenuScrollingtopic">EnableSubMenuScrolling</helplink> property or the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_EnableScrollingtopic">MenuItem.EnableScrolling</helplink> property of an individual menu item. In this case, if a submenu's content height exceeds the
browser window height, the submenu displays scroll buttons, allowing its items to be scrolled vertically.
You can define custom images for these scroll buttons by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ScrollDownButtonImagetopic">ScrollDownButtonImage</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ScrollUpButtonImagetopic">ScrollUpButtonImage</helplink> properties.
The visual style of the scroll buttons can be customized, via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ScrollButtonStyletopic">ScrollButtonStyle</helplink> property.
</p>
<p>
In this demo, a web page containing the ASPxMenu is loaded into an IFRAME element. This simulates the window bounds for the menu's dropdown submenus.
</p>
]]>
</Description>
<SourceFile>~/Menu/ScrollingPage.aspx</SourceFile>
<SourceFile>~/Menu/ScrollingPage.aspx.cs</SourceFile>
</Demo>
<Demo Key="TabbedMenu" Title="Tabbed Menu">
<Description>
<![CDATA[
<p>
This sample demonstrates how the ASPxMenu can be used to implement a hierachical menu (with popped out submenus) which looks like a set of tabs.
</p>
<p>
In this demo, the menu control obtains its data from an xml file, using a standard XmlDataSource component.
</p>
<p>
In order to draw gradient borders for the menu's root items (tabs), a template of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_RootItemTextTemplatetopic">RootItemTextTemplate</helplink> type is used.
</p>]]>
</Description>
</Demo>
<Demo Key="Templates" Title="Templates" SeoTitle="Templates for Items and Sub-Menus">
<Description>
<![CDATA[
<p>
This sample demonstrates the use of template technology within the ASPxMenu control.
The look of each basic element of the menu control can be completely modified by creating a specific template which defines how the element
will be rendered by a client browser.
</p>
<p>
The templates of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_SubMenuTemplatetopic">SubMenuTemplate</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Templatetopic">Template</helplink> types are defined in this demo. Creating templates of different
types allows you to completely customize the appearance or layout of a menu control or each element inside it.
</p>
<p>
This demo represents a two-level ASPxMenu type. A specific <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_SubMenuTemplatetopic">SubMenuTemplate</helplink> is created for the first root menu item's
submenu; the appearance of the second root menu item's sub-item is defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Templatetopic">Template</helplink> property of each sub-item.
</p>
<p>
The content of a <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_SubMenuTemplatetopic">SubMenuTemplate</helplink> type is represented by the ASPxSiteMapControl which displays a hierarchical structure of links
(site map nodes) that reference different web pages within the site. For more information on implementation of such a template,
please take a look at the demo's aspx code.
</p>
<p>
Sub-items of the second root menu item use Templates. Each of these templates consists of a group of HTML controls. Each HTML control
used in the template can be bound to the property values of the rendered menu item. See ASPX code to learn how this can be done by binding a
Label control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxEditorsASPxLabel_Texttopic">Text</helplink> property to the value of the currently rendered menu item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Texttopic">Text</helplink> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="Toolbars" Title="Toolbars Emulation">
<Description>
<![CDATA[
<p>
This sample demonstrates how the ASPxMenu control can be used to implement a toolbar look and feel.
Use the option list in the rightmost panel to select and apply the desired toolbar appearance.
Different toolbar appearances can be emulated using the template technology widely supported by the ASPxMenu.
</p>
<p>
In this demo, toolbars of all types are represented by specifically customized ASPxMenu controls.
</p>
<p>
In the 'Office 2003' sample, an additional ASPxRoundPanel control is used to emulate a toolbar with rounded corners.
Items of an ASPxMenu control are declared explicitly within the control, are represented by images only, and have a fixed size.
Item images are assigned through the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic">Image.Url</helplink> of items, and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Texttopic">Text</helplink> property of each item is initialized with an empty string.
One of menu items is represented by a label and textbox - this is implemented easily by using template technology.
</p>
<p>
The 'Office 2007' sample imitates a Ribbon-like toolbar appearance. For this purpose, a specific approach is used. There is a main ASPxMenu
control placed inside an ASPxRoundPanel. This menu obtains its items (which are the Font, Paragraph and Window) from a
specific xml file with the help of an XmlDataSource control. Each menu item is represented by a template which contains a web user control.
This web user control consists of another ASPxMenu control placed within its own ASPxRoundPanel.
The child ASPxMenu is bound to the same xml file as the main menu. The main menu's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemDataBoundtopic">ItemDataBound</helplink> event is handled so as to
load the web user control into the processed item's template and bind the user control's contents (the round panel and child menu) to
the corresponding data.
</p>
<p>
Note that in Office styled samples, checked state behavior of menu items is specified by using either their <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Checkedtopic">Checked</helplink> property,
or both the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Checkedtopic">Checked</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_GroupNametopic">GroupName</helplink> properties. Specific background images are defined for the hovered and checked states
of menu items in these samples.
</p>
<p>
The 'Windows XP' sample uses the ASPxMenu control whose items are retrieved from an xml file through a XmlDataSource component.
The item size is fixed for all menu items. The menu's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenu_ItemImagePositiontopic">ItemImagePosition</helplink> property is set to Top to display item images above item captions.
A specific background image is specified for the hovered style of menu items.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSide" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event management technology.
All available client-side events are traced in this demo.
Click any menu item or move the mouse pointer over the parent menu items within the menu control to initiate client-side events.
</p>
<p>
The menu controls within the ASPxMenu control 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 menu control’s functionality. Thus, they give you the ability to completely control the client-side behavior of the control.
</p>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>
This example demonstrates how to manipulate a menu control programmatically on the client using our extended client-side functionality.
The client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_EnableClientSideAPItopic">EnableClientSideAPI</helplink> property is set to true or if there is a handler assigned
to any client-side event.
</p>
<p>
In this demo, each item of the menu control is identified using its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Nametopic">Name</helplink> property. In order to obtain a specific menu item by
its name on the client side the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_GetItemByNametopic">GetItemByName</helplink> method is used. A particular menu item can be selected with the help of the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_SetSelectedItemtopic">SetSelectedItem</helplink> method by passing it the required item. Look at the code of the InitMenu function (see JS code) which
handles the client-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink> event of the menu control. This handler defines the initially selected menu item (Visa) within the menu.
</p>
<p>
In the code of the ShowProperties function (see JS code), the selected menu item is obtained with the help of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_GetSelectedItemtopic">GetSelectedItem</helplink>
function and information on the selected menu item's index and name is displayed.
</p>
<p>
The MenuItemClick function that is a handler of the menu's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuBase_ItemClicktopic">ItemClick</helplink> event (see ASPX and JS code) demonstrates how to synchronize
the dropdown editor's value with the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuScriptsASPxClientMenuItem_nametopic">name</helplink> of the clicked menu item.
</p>
<p>
Note that an individual client object can be referenced either directly by its ID (for instance, by using the following code:
ASPxMenu1.GetItemCount()) or by using the Get method of a common collection for our ASPx web controls
(this can be useful when our web control is contained within a UserControl or MasterPage; that is when the resulting client
ID is generated by a specific NamingContainer). The GetMenu function (see JS code) demonstrates how to access a client menu
object via our control collection.
</p>
]]>
</Description>
</Demo>
<Demo Key="ServerSide" Title="Server-Side Functionality">
<Description>
<![CDATA[
<p>
This sample demonstrates a few of the server-side capabilities of the menu control.
Select the desired item from the dropdown editor and define the visual settings of the corresponding menu item by clicking the appropriate button(s).
Click any menu item to initiate the server-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemClicktopic">ItemClick</helplink> event which can be traced in the Events monitor.
</p>
<p>
Each menu item has server-side properties which allow you to manipulate the item's state and so change the visualization of the entire menu control.
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Enabledtopic">Enabled</helplink> property allows you to enable or disable any menu item. By using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Visibletopic">Visible</helplink> property, you can show or hide menu items, and
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItem_Selectedtopic">Selected</helplink> property provides you with the ability to change an item's selected state.
</p>
<p>
The server-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemClicktopic">ItemClick</helplink> event used in this demo allows you to perform any custom action your business needs require on the server in
response to a click on a menu item. In this example the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuASPxMenuBase_ItemClicktopic">ItemClick</helplink> event is handled to synchronize the dropdown editor's value with the
clicked item and to display information about the event in the Event monitor.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="NavBar" Title="NavBar" SeoTitle="ASP.NET AJAX Navigation Bar Control">
<Demo Key="DataBinding" Title="Data Binding" SeoTitle="Data Binding">
<Keywords>databinding</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how you can bind the ASPxNavBar to a data source. The ASPxNavBar control supports standard data binding.
In this instance any object which implements the IHierarchicalEnumerable or IHierarchicalDataSource interface
(e.g. SiteMapDataSource, XmlDataSource) may be used as a data source for this control.
</p>
<p>
In this demo, the navbar control is bound to a standard data source of the type XmlDataSource.
This data source supplies the navbar with data from a specific NavBarCameras.xml file.
The ASPxNavBar requires data to be represented as different navbar items combined into groups. Use the data source's
XPath property to obtain the desired sample of data. (See ASPX code)
</p>
<p>
Note that the text within each navbar item is composed by using the navbar's template of the type <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemTextTemplatetopic">ItemTextTemplate</helplink>.
</p>
<p>
Our web controls provide you the ability to bind the properties of the controls that compose a template directly
to the properties of the corresponding data object (DataItem) from the bound data source. For this purpose,
the Container.Item.DataItem property or the Container.EvalDataItem(<expression>) method can be used.
Refer to ASPX code to see how the properties of child controls which populate the navbar's template of
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemTextTemplatetopic">ItemTextTemplate</helplink> type are bound directly to the specific data of the XmlDataSource's node by using
the Container.EvalDataItem(<expression>) method.
</p>
]]>
</Description>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[
<p>
This demo describes features provided by the ASPxNavBar control.
Use controls in the right panel to change individual property values and see their result 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/DevExpressWebASPxNavBarASPxNavBar_AllowExpandingtopic">AllowExpanding</helplink> property should be set to false.
</p>
<p>
To enable selection of navbar items on the client side, you need to set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_AllowSelectItemtopic">AllowSelectItem</helplink> property to true.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_AutoPostBacktopic">AutoPostBack</helplink> property controls whether a round trip to the server is required to process end- user actions
(such as an item click or expansion or collapse of a group) on the server using corresponding server-side events.
</p>
<p>
To force the navbar control to only display one expanded group at any point in time,
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_AutoCollapsetopic">AutoCollapse</helplink> property's value should be set to true. This behaviour emulates the SideBar control.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_EnableHotTracktopic">EnableHotTrack</helplink> property allows you to specify whether navbar items and groups can visually respond to mouse hover events.
</p>
]]>
</Description>
</Demo>
<Demo Key="ItemLinkMode" Title="Item Link Mode" SeoTitle="Item Render Mode">
<Description>
<![CDATA[<p>The demo shows which factors affect the appearance and functionality of clickable navbar items and the style of links represented by items.</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemLinkModetopic">ItemLinkMode</helplink> property can be used to specify how navbar items are represented as links within the navbar control. By default, this property is set to the ContentBounds value which makes the navbar entirely interactive. If you need to display a simple navbar (such as a set of links within groups), you can set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemLinkModetopic">ItemLinkMode</helplink> property to TextOnly. In this instance, the resulting HTML code generated to represent the navbar control on the page will be minimal. In order to control the appearance of links the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_LinkStyletopic">LinkStyle</helplink> property can be used.
</p><p>
In this demo, two ASPxNavBar controls are used with different settings for their <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemLinkModetopic">ItemLinkMode</helplink> property.
</p><p>
The first navbar's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemLinkModetopic">ItemLinkMode</helplink> property is set to ContentBounds thus allowing the entire area of each navbar item to be clickable.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemLinkModetopic">ItemLinkMode</helplink> property of the second navbar is set to the TextOnly value which makes the clickable content of each navbar item to be bounded by the size of the item's text. As you can imagine, the second navbar has a simpler appearance and simpler HTML.
</p><p>
If you want to specify a hover style for a navbar control's items but don't want to use scripts, define the required styles via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_LinkStyletopic">LinkStyle</helplink> property.
</p><p>
In order to completely remove service scripts, you can set the navbar's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_AllowExpandingtopic">AllowExpanding</helplink> property to false. This will force the navbar's groups to always be expanded.
</p>]]>
</Description>
</Demo>
<Demo Key="ItemBulletStyle" Title="Item Bullet Style" SeoTitle="Item Bullet Style">
<Description>
<![CDATA[
<p>
The ASPxNavBar control allows you to apply a bulleted or numbered list format to group items. Use a group's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarGroup_ItemBulletStyletopic">ItemBulletStyle</helplink> property to specify a bullet style for items in the group.
</p>
<p>
Note that if custom images are associated with items (via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_ItemImagetopic">ASPxNavBar.ItemImage</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarGroup_ItemImagetopic">NavBarGroup.ItemImage</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarItem_Imagetopic">NavBarItem.Image</helplink> property), these images are displayed instead of bullet images.
</p>
<p>
In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarGroup_ItemBulletStyletopic">ItemBulletStyle</helplink> property is used to demonstrate how different bullet styles can be defined for different groups.
</p>
]]>
</Description>
</Demo>
<Demo Key="EnableCallBacks" Title="Callbacks (AJAX)">
<Description>
<![CDATA[<p>
This sample demonstrates the use of the AJAX-based callbacks implemented by the ASPxNavBar control.
</p><p>
The ASPxNavBar control supports AJAX technology by implementing the ability to load the content of a group from the server via a callback when the group is expanded. This approach allows the navbar to avoid the initial transfer of all its group's data to the client, thus optimizing the page's load time.
</p><p>
In order to enable the use of callbacks, its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_EnableCallBackstopic">EnableCallBacks</helplink> property should be set to true. In this instance, the contents of the collapsed groups are not represented on the client. When a group is expanded for the first time, its content is retrieved from the server and then cached on the client. The next time the group is expanded, its content is taken from the client and no callback to the server is performed.
</p><p>
In addition, this example uses the ASPxPopupMenu to enable all the groups to be expanded or collapsed on the client side (without PostBack). To do this, you can right-click the navbar and select either the 'Expand All' or 'Collapse All' option.
</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>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[<p>
This sample demonstrates the use of the template technology in the ASPxNavBar control. The look of each basic element of the navbar control can be completely changed by creating a specific template which defines how the element will be rendered by a client browser.
</p><p>
The navbar control is bound to an XmlDataSource object that retrieves data stored in a specific xml file. The navbar's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_GroupDataBoundtopic">GroupDataBound</helplink> event is handled to assign a specific group content template to the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarGroup_ContentTemplatetopic">ContentTemplate</helplink> property of a group when it is being bound to its data. (See VB or C# code)
</p><p>ContentTemplate.ascx represents a UserControl that supports the ITemplate interface by implementing the InstantiateIn method and contains a set of child controls which compose the group contents based upon the required design.
</p><p>
The DataBindContentUserControl method (see VB or C# code) demonstrates how the UserControl's child controls can be bound to the required data passed to the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_GroupDataBoundtopic">GroupDataBound</helplink> event.
</p>]]>
</Description>
<SourceFile>~/NavBar/ContentTemplate.ascx</SourceFile>
<SourceFile>~/NavBar/ContentTemplate.ascx.cs</SourceFile>
<SourceFile>~/NavBar/ContentTemplate.ascx.vb</SourceFile>
</Demo>
<Demo Key="ClientSide" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event technology. All available client-side events are traced in this demo. Click any navbar item or expand/collapse a group within the navbar control to initiate client-side events.
</p>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[<p>This example demonstrates how to manipulate a navbar control programmatically on the client using our extended client-side functionality. The client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_EnableClientSideAPItopic">EnableClientSideAPI</helplink> property is set to true or if there is a handler assigned to any client-side event.</p><p>
In this demo, each group or item of the navbar control is identified using its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarGroup_Nametopic">Name</helplink> property. In order to obtain a specific navbar group or item by its name on the client, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_GetGroupByNametopic">GetGroupByName</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_GetItemByNametopic">GetItemByName</helplink> method is used respectively. In this demo, the navbar's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_AutoCollapsetopic">AutoCollapse</helplink> mode is enabled which specifies that only one group can be expanded within the navbar at any point in time. In this mode, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_SetActiveGrouptopic">SetActiveGroup</helplink> method can be used to expand the desired group. (See JS code, the ChangeActiveGroup function)
</p><p>
A specific navbar item can be selected within each group via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_SetSelectedItemtopic">SetSelectedItem</helplink> method by passing it the required item. (See JS code, the ChangeSelectedItem function)
</p><p>
The GroupExpandedChanged function that is a handler of the navbar's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_ExpandedChangedtopic">ExpandedChanged</helplink> event (see ASPX and JS code) demonstrates how to synchronize values of the dropdown editors with the expanded group and the group's selected item, if any.
</p>
]]>
</Description>
</Demo>
<Demo Key="ServerSide" Title="Server-Side Functionality">
<Description>
<![CDATA[<p>
This sample demonstrates a few of the server side capabilities of the navbar. Select the desired item from the dropdown editor and define the visual settings of the corresponding navbar item by clicking the buttons. Click any item within the navbar or expand/collapse any group to initiate server-side events which can be traced in the Events monitor.
</p><p>
Each navbar item/group has server-side properties which allow you to manipulate the state of the item/group and so change the visualization of the entire navbar control. Thus, the Enabled property allows you to enable or disable any navbar item/group. By using the Visible property, you can show or hide a particular navbar item/group. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarItem_Selectedtopic">Selected</helplink> property of an item provides you with the ability to change the item's selected state; the analog of this property for a group object is its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarGroup_Expandedtopic">Expanded</helplink> property which specifies the group's expansion state.
</p><p>
The server-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_ItemClicktopic">ItemClick</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_HeaderClicktopic">HeaderClick</helplink> events used in this demo allows you to perform any custom action on the server in response to a click on a menu item or a group header. In this example the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_ItemClicktopic">ItemClick</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarScriptsASPxClientNavBar_HeaderClicktopic">HeaderClick</helplink> events are handled to synchronize the dropdown editor's value with the clicked item or group and to display event information in the Events monitor.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="SiteMap" Title="SiteMap Control" SeoTitle="ASP.NET AJAX Site Map Control">
<Demo Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates the binding of an ASPxSiteMapControl to a data source. The ASPxSiteMapControl supports standard data binding options. In this instance any object which implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g. SiteMapDataSource, XmlDataSource) may be used as a data source for this control.
</p>
<p>
In this demo, the site map control is bound to a data source of type ASPxSiteMapDataSource. The ASPxSiteMapDataSource is connected with a specific SiteMapProvider. This provider is registered in the web.config file where it's pointed to the file from which to obtain the site map data. Note that the ASPxSiteMapDataSource extends the functionality of a standard site map data source component by allowing the site map data to be loaded from a specific file without assigning a site map provider to the SiteMapProvider property.
</p>
<code lang="xml">
<siteMap>
<providers>
<add name="ProductsWebSiteProvider" type="System.Web.XmlSiteMapProvider"
siteMapFile="SiteMapProducts.sitemap"/>
<add name="MenuSiteMapProvider" type="System.Web.XmlSiteMapProvider"
siteMapFile="~/App_Data/Menu.sitemap"/>
</providers>
</siteMap>
</code>
]]>
</Description>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[<p>
This demo illustrates some of the features available to you when using the ASPxSiteMapControl.
</p><p>
The ASPxSiteMapControl allows you to display site map data across multiple columns. These can be defined by using the Columns property. When the ColumnCount property equals 0, then a single column will be displayed (by default). If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControlBase_ColumnCounttopic">ColumnCount</helplink> is greater than the number of nodes of the top (zero-based) hierarchy level, then the number of top level nodes will be used.
</p><p>
In order to define the depth of the displayed site map data (the number of nesting levels displayed), the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControl_MaximumDisplayLevelstopic">MaximumDislpayLevels</helplink> property can be used. By default, this property is set to 0 which means that all nesting levels are displayed.
</p><p><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControlBase_RepeatDirectiontopic">RepeatDirection</helplink> specifies the direction in which categories of a control are displayed. Horizontal specifies that the categories of a control are displayed in rows loaded from left to right, then top to bottom, until all categories are rendered. Vertical specifies that the categories of a control are displayed in columns loaded from top to bottom, then left to right, until all items are rendered.
</p>]]>
</Description>
</Demo>
<Demo Key="FlowLayout" Title="Flow Layout">
<Description>
<![CDATA[<p>
In this demo a flow layout is applied to the ASPxSiteMapControl, allowing the site map data to be displayed linearly, with a specific separator. This method saves space.
</p><p>
In order to specify the hierarchy level of nodes which should be displayed using a flow layout, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControlBase_FlowLayoutLeveltopic">FlowLayoutLevel</helplink> property can be used. In this sample, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControlBase_FlowLayoutLeveltopic">FlowLayoutLevel</helplink> property is set to 1 which means that a flow layout is applied to the nodes located at the nesting level whose index equals <helplink href="">1</helplink> (these nodes are the immediate children of the top level nodes).
</p><p>
The number of items displayed in a linear flow can be limited using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControl_FlowLayoutMaximumDisplayItemstopic">FlowLayoutMaximumDisplayItems</helplink> property. In this demo, you can change this number via the Display SubItems dropdown editor.
</p><p>
The item separator displayed between nodes which are rendered using a flow layout can be specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControl_FlowLayoutItemSeparatortopic">FlowLayoutItemSeparator</helplink> property.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControlBase_FlowLayoutTextLineHeighttopic">FlowLayoutTextLineHeight</helplink> property allows you to control the height of lines which contain the nodes rendered using a flow layout.
</p>]]>
</Description>
</Demo>
<Demo Key="Categorized" Title="Categorized" SeoTitle="Composite Site Map">
<Description>
<![CDATA[<p>
This sample demonstrates how the site map data can be displayed in the ASPxSiteMapControl, divided into row ordered categories.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControlBase_Categorizedtopic">Categorized</helplink> property set to true forces each top level node to serve as a category name and open a group, where its child nodes are contained. Such groups are always displayed one under another within the site map control. Nodes within a group are displayed organized into columns.
</p><p>
Note that in this example a specific site map file is assigned for the site map control via the SiteMapFileName property of the bound ASPxSiteMapDataSource component. This property is assigned at design-time which facilitates the control's customization.
</p>]]>
</Description>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[<p>
This sample demonstrates the use of the template technology found in the ASPxSiteMapControl. Template types available in the site map control provide powerful a powerful means by which to transform the control's layout, define non-typical styles for the control's elements and supply the control with specific visual effects.
</p><p>
This demo represents the products section of a site. Each product can have one of the three following states at any point in time - "new", "update", "coming soon".
</p><p>
In order to define a product's type, the type attribute is created in the "~/App_Data/SiteMap/Products.sitemap", as follows:
</p>
<code lang="xml">
<siteMapNode ... type="update" />
</code>
<p>
The ASPxSiteMapControl's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSiteMapControlASPxSiteMapControlBase_NodeTemplatetopic">NodeTemplate</helplink> is defined in aspx code so that the representation of the ASPxSiteMapControl can change based on the obtained value of the created type attribute. (See ASPX code)
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Splitter" Title="Splitter" SeoTitle="ASP.NET AJAX Splitter Control">
<Demo Key="ControlsResizing" Title="Controls Resizing" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Splitter.png" HighlightedTitle="Splitter - Control Resizing">
<Description>
<![CDATA[<p>The ASPxSplitter panes can have different content inside, including controls. In this demo, the ASPxSplitter control panes contain the ASPxGridView, ASPxListEdit, ASPxTextBox and ASPxMemo controls. Splitter separators are used to resize the controls.
</p><p>
Moving any splitter separator raises the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneResizedtopic">PaneResized</helplink> event, which is used in this demo to modify an embedded controls' size. To automatically resize embedded controls and editors, utilize the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetWidthtopic">SetWidth</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_SetHeighttopic">SetHeight</helplink> methods.
</p>]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Splitter (ASPxSplitter) control helps you organize web content by dividing it into multiple sections or panels. The ASPxSplitter also assists your end-users with customizing their views at runtime and resizing embedded controls. This demo illustrates how the ASPxSplitter can contain other controls such as the Grid View, List Edit, Text Box and Memo, to help you with the layout.</HighlightedDescription>
</Demo>
<Demo Key="ScrollBars" Title="Scroll Bars">
<Description>
<![CDATA[<p>ASPxSplitter allows you to use scroll bars for more efficient work with a lot of content within the panes. This behavior is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ScrollBarstopic">ScrollBars</helplink> property. Depending on this property's setting, the following modes are available:
</p><p>None - none of the scroll bars are available within the splitter pane.
</p><p>Horizontal - only a horizontal scroll bar is available within the splitter pane.
</p><p>Vertical - only a vertical scroll bar is available within the splitter pane.
</p><p>Both - both vertical and horizontal scroll bars are available within the splitter pane.
</p><p>Auto - ASPxSplitter automatically enables a horizontal or/and vertical scroll bar within the pane, depending upon the pane content.
</p><p>
In this demo, the ASPxSplitter contains two panes. The left pane includes only vertical scroll bar (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ScrollBarstopic">ScrollBars</helplink> property is set to Vertical), the second pane's scroll bars are enabled automatically by the control (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ScrollBarstopic">ScrollBars</helplink> property is set to Auto).
</p>]]>
</Description>
</Demo>
<Demo Key="MinMaxSize" Title="Min/Max Size" SeoTitle="Min Size and Max Size">
<Description>
<![CDATA[<p>ASPxSplitter allows you to set the maximum and minimum size of its panes. An pane's maximum size is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_MaxSizetopic">MaxSize</helplink> property, the minimum size - by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_MinSizetopic">MinSize</helplink> property.
</p><p>
In this demo, the left splitter pane's minimum and maximum size is set to 100px and 400px correspondingly. The splitter pane's size can be changed by using the splitter separator.
</p>]]>
</Description>
</Demo>
<Demo Key="CollapseExpand" Title="Collapse/Expand" SeoTitle="Collapse and Expand Panes">
<Description>
<![CDATA[<p>ASPxSplitter control allows you to expand or collapse its panes. This behavior is controlled by the ShowCollapseBackwardButton and ShowCollapseForwardButton properties, which can be specified directly for all panes (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterASPxSplitter_ShowCollapseBackwardButtontopic">ASPxSplitter.ShowCollapseBackwardButton</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterASPxSplitter_ShowCollapseForwardButtontopic">ASPxSplitter.ShowCollapseForwardButton</helplink> properties) or for individual panes (the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ShowCollapseBackwardButtontopic">SplitterPane.ShowCollapseBackwardButton</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ShowCollapseForwardButtontopic">SplitterPane.ShowCollapseForwardButton</helplink> properties).
</p><p>
When the splitter pane(s) is collapsed, it allows another pane(s) content to be expanded for more convenient work.
</p>]]>
</Description>
</Demo>
<Demo Key="LiveResizing" Title="Live Resizing">
<Description>
<![CDATA[<p>ASPxSplitter supports live resizing mode. This functionality provides you with adjusting the pane content in real time during the pane resizing. To enable this feature use the control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterASPxSplitter_ResizingModetopic">ResizingMode</helplink> property.
</p>]]>
</Description>
</Demo>
<Demo Key="PaneAutoSizing" Title="Pane Auto Sizing" >
<Description>
<![CDATA[
<p>
This demo illustrates the ASPxSplitter's capability to auto adjust the size of its panes to their inside content. To enable this functionality, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_AutoHeighttopic">AutoHeight</helplink> or/and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_AutoWidthtopic">AutoWidth</helplink> properties of a pane. When pane auto sizing is used, the sizes (height and width) explicitly defined for a pane are not in effect, because they change according to the pane's content.
</p>
]]>
</Description>
</Demo>
<Demo Key="ContentUrl" Title="Content URL">
<Description>
<![CDATA[<p>
ASPxSplitter can be used as a website navigation control. Splitter panes allow you to display any external web page specified by its URL. Use a pane's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ContentUrltopic">ContentUrl</helplink> property to load the specified web page and display it within the pane.
</p>
<p>
In this demo, the left splitter pane contains ASPxNavBar with three items whose <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarItem_NavigateUrltopic">NavigateUrl</helplink> properties refer to different web pages. The right splitter pane's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ContentUrlIFrameNametopic">ContentUrlIFrameName</helplink> property is set to a specific name and this name is assigned to the ASPxNavBar's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarASPxNavBar_Targettopic">Target</helplink> property. As a result, a click on a navbar item automatically displays the corresponding page within the right splitter pane because the item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxNavBarNavBarItem_NavigateUrltopic">NavigateUrl</helplink> property value transfers to the pane's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ContentUrltopic">ContentUrl</helplink> property. In addition, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterSplitterPane_ShowCollapseBackwardButtontopic">ShowCollapseBackwardButton</helplink> property is enabled for the left pane that allows end-users to hide it and expand the loaded page on the entire available space.
</p>]]>
</Description>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event technology for the ASPxSplitter control. All available client-side events are traced in this demo - the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneResizingtopic">PaneResizing</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneResizedtopic">PaneResized</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneCollapsingtopic">PaneCollapsing</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneCollapsedtopic">PaneCollapsed</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneExpandingtopic">PaneExpanding</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneExpandedtopic">PaneExpanded</helplink> events. Resize or expand/collapse any splitter pane to initiate client-side events.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneResizingtopic">PaneResizing</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneCollapsingtopic">PaneCollapsing</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneExpandingtopic">PaneExpanding</helplink> client-side events can be used to cancel the execution of specific commands. Handling the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_PaneResizingtopic">PaneResizing</helplink> client event is useful for creating a complex layout of the ASPxSplitter.
</p>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideFunctionality" Title="Client-Side Functionality">
<Description>
<![CDATA[<p>
This example demonstrates how you can manipulate the ASPxSplitter control programmatically on the client using enhanced client-side functionality. The client-side programmatic interface is available if the EnableClientSideAPI property is set to true, or if there is a handler assigned to any client-side event.
</p><p>
The ASPxSplitter control allows its panes to be resized in real time. This functionality can be enabled/disabled by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitter_SetAllowResizetopic">SetAllowResize</helplink> method on the client side. (See JS code)
</p><p>
In this demo, you can expand or collapse the splitter panes by using a specific button whose text is changed automatically, depending upon the action. On the client side, it is implemented within the CollapseExpandButtonClick function by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_Expandtopic">ASPxClientSplitterPane.Expand</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_Collapsetopic">ASPxClientSplitterPane.Collapse</helplink> methods. (See JS code)
</p><p>
It's possible to change the splitter pane's content on the client side by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPaneMembersTopicAll">SetContentUrl</helplink> method within the UpdateContentUrl function.
</p><p>
The size of a pane can be changed programmatically by using the pane's client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_SetSizetopic">SetSize</helplink> method. A pane's current size can be obtained via the client <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxSplitterScriptsASPxClientSplitterPane_GetSizetopic">GetSize</helplink> method.
</p>]]>
</Description>
</Demo>
<Demo Key="FullscreenMode" Title="Fullscreen Mode">
<Description>
<![CDATA[<p>
This demo illustrates how to use the ASPxSplitter control 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 property to true, as shown below.
</p>
<code lang="Html">
<dx:ASPxSplitter ID="ASPxSplitter1" runat="server" FullscreenMode="True" ... >
</code>
]]>
</Description>
<SourceFile>~/Splitter/SamplePages/FullscreenModePage.aspx</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="TabControl" Title="Tab Control" SeoTitle="ASP.NET AJAX Tab and Page Controls">
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[<p>
This demo describes some of the features available to you when using the ASPxTabControl Suite.
</p><p>
The position of tabs within the control (Left, Right, Top, Bottom) can be defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabPositiontopic">TabPosition</helplink> property. In order to align tabs in the defined position, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabAligntopic">TabAlign</helplink> property. Note that when tabs are positioned to the left or right of the control, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabAligntopic">TabAlign</helplink> 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/DevExpressWebASPxTabControlASPxTabControlBase_AutoPostBacktopic">AutoPostBack</helplink> property controls whether a round trip to the server is required when the active tab is changed to process an action on the server using corresponding server-side events.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_EnableHotTracktopic">EnableHotTrack</helplink> property allows you to specify whether tabs can visually respond to mouse hover events.
</p>]]>
</Description>
</Demo>
<Demo Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Description>
<![CDATA[
<p>
This demo illustrates how the ASPxTabControl can be populated with tab information taken from a data source. The ASPxTabControl supports standard data binding - any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g. SiteMapDataSource, XmlDataSource) may be used as a data source for this control.
</p>
<p>
In this sample, the ASPxTabControl control is bound to the XmlDataSource component that obtains data from an xml file with the following structure.
</p>
<p>
<code lang=xml>
<Products>
<Product Name="..." Text="..." ID="..." />
...
</Products>
</code>
</p>
<p>
The ASPxTabControl implements specific properties that point to the data fields containing the necessary data. These are the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_NameFieldtopic">NameField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_NavigateUrlFieldtopic">NavigateUrlField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_TabImageUrlFieldtopic">TabImageUrlField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_ActiveTabImageUrlFieldtopic">ActiveTabImageUrlField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_TextFieldtopic">TextField</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_ToolTipFieldtopic">ToolTipField</helplink> properties.
If these properties are not defined, the ASPxTabControl 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">Name</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTab_NavigateUrltopic">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic">TabImage.Url</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic">ActiveTabImage.Url</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_Texttopic">Text</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_ToolTiptopic">ToolTip</helplink>).
</p>
<p>
In this demo, navigate locations for tabs are composed by formatting values of the 'id' data field in a specific manner. The 'id' data field is pointed by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_NavigateUrlFieldtopic">NavigateUrlField</helplink> property, and a format string is defined via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_NavigateUrlFormatStringtopic">NavigateUrlFormatString</helplink> property.
</p>
]]>
</Description>
</Demo>
<Demo Key="MultiRow" Title="Multi-Row Tabs">
<Description>
<![CDATA[<p>
This demo illustrates how to represent the ASPxPageControl's tab header in several rows.
To start a new line from a certain tab, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_NewLinetopic">NewLine</helplink> property of the required tab object to true.
In this example, the "Data" tab page has the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_NewLinetopic">NewLine</helplink> property set to true.
</p><p>
Multi-row tab representation works only when the tab header is positioned on the control's top or bottom, that is when the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabPositiontopic">TabPosition</helplink> property is set to Top or Bottom.
</p>]]>
</Description>
</Demo>
<Demo Key="TabScrolling" Title="Tab Scrolling">
<Description>
<![CDATA[<p>
This demo illustrates the control's support for scrolling tabs within the tab header.
The tab scrolling feature can be enabled by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_EnableTabScrollingtopic">EnableTabScrolling</helplink> property to true.
In this case, if the control's size doesn't allow all tabs to be visible within the tab header at one time,
specific scroll buttons are displayed, allowing end-users to scroll tabs. The position of the scroll buttons
can be controlled by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabAligntopic">TabAlign</helplink> property. For instance, if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabAligntopic">TabAlign</helplink> property is set
to Left, the scroll buttons are displayed to the right of the tabs, and vice versa.
In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabAligntopic">TabAlign</helplink> property is set to Center, so scroll buttons are displayed
on both sides of the tab header.
</p><p>
Tab scrolling works only when the tab header is positioned on the control's top or bottom, that is when the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_TabPositiontopic">TabPosition</helplink> property is set to Top or Bottom.
</p>]]>
</Description>
</Demo>
<Demo Key="EnableCallBacks" Title="Callbacks (AJAX)">
<Description>
<![CDATA[<p>
This sample demonstrates the use of AJAX-based callbacks implemented by the ASPxPageControl.
</p><p>
In order to enable the use of callbacks, the control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxPageControl_EnableCallBackstopic">EnableCallBacks</helplink> property should be set to true. In this instance, the contents of non-active pages are not represented on the client. When a page is activated for the first time, its content is retrieved from the server and then cached on the client. The next time the page is activated, its content is taken from the client and no callback to the server is performed.
</p><p>
In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxPageControl_ActivateTabPageActiontopic">ActivateTabPageAction</helplink> property is set to MouseOver for quick page selection (without having to click pages). The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxPageControl_SaveStateToCookiestopic">SaveStateToCookies</helplink> property is set to true in order to preserve the state of the page control (in particular, the control's active page) when an end-user visits the site again.
</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>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[<p>
This sample demonstrates the use of template technology found in the <helplink href="">ASPxPageControl</helplink>. The look of each tab element of the page control can be modified by creating a specific template which defines how the tab will be rendered by a client browser. In this demo, templates of type <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_TabTemplatetopic">TabTemplate</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_ActiveTabTemplatetopic">ActiveTabTemplate</helplink> are used to define non-typical appearances for individual tabs (tabs with rounded edges).
</p><p>
In order to display tabs with rounded edges, the image that represents a single tab should be divided into three sections as shown below (note that pictures for a selected tab should be 1 pixel higher).
</p><p style="text-align: center;"><img src="Images/Template.gif" alt="" style="width: 491px; height: 237px; margin-top: 20px; margin-bottom: 20px;" /></p><p>
The tab template implemented in this demo is defined by using a table with three cells. Each cell contains the corresponding portion of the image. The left and right sections of the image are represented by entire images. The middle portion is used as a background image which is tailed horizontally according to the length of the tab's content (which is, in particular, the text taken from the tab's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_Texttopic">Text</helplink> property during binding the template's child controls).
</p><p>
Refer to ASPX code to see how a <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControl_ActiveTabTemplatetopic">ActiveTabTemplate</helplink> is defined by using the described approach.
</p>]]>
</Description>
</Demo>
<Demo Key="ClientSide" Title="Client-Side Events">
<Description>
<![CDATA[
<p>
This sample demonstrates the capabilities of our client-side event technology. All client-side events exposed by an <helplink href="">ASPxPageControl</helplink> 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).
</p>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideAPI" Title="Client-Side Functionality">
<Description>
<![CDATA[<p>
This example demonstrates how you can manipulate a page control programmatically on the client using enhanced client-side functionality. The client-side programmatic interface is available if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_EnableClientSideAPItopic">EnableClientSideAPI</helplink> property is set to true or if there is a handler assigned to any client-side event.
</p><p>
The ASPxPageControl allows a page's content to be changed dynamically on the client side by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlScriptsASPxClientPageControl_SetTabContentHTMLtopic">SetTabContentHTML</helplink> method. This is demonstrated by the SetActiveTabContent function which uses the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_GetActiveTabtopic">GetActiveTab</helplink> method to access the currently active page. (See JS code)
</p><p>
The ShowActiveTabContent function displays (in a specific text area) the HTML code which represents the active page's content. The content of the active page is obtained via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlScriptsASPxClientPageControl_GetTabContentHTMLtopic">GetTabContentHTML</helplink> method. (See JS code)
</p><p>
The ActiveTabChanged function represents the hander for the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_ActiveTabChangedtopic">ActiveTabChanged</helplink> event. The event's argument contains information on the active tab which is used to synchronize the value of the dropdown editor. (See ASPX and JS code)
</p><p>
A specific page can be activated by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_SetActiveTabtopic">SetActiveTab</helplink> method. In this demo, each page is identified using its server-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_Nametopic">Name</helplink> property. In order to obtain a specific page by its name on the client side, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlScriptsASPxClientTabControlBase_GetTabByNametopic">GetTabByName</helplink> method is used. (See JS code, the ChangeActiveTab function)
</p>]]>
</Description>
</Demo>
<Demo Key="ServerSide" Title="Server-Side Functionality">
<Description>
<![CDATA[<p>
This sample demonstrates some of the capabilities available to you when using the server side features of the TabControl. Select the desired tab page name from the dropdown and define the visual settings of the corresponding page by clicking the appropriate button. Click any tab within the page control to initiate server-side events which can be traced in the Events monitor.
</p><p>
Each tabbed page within a page control has server-side properties which allow you to manipulate the state of the page and so change the visualization of the entire page control. Thus, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_Enabledtopic">Enabled</helplink> property allows you to enable or disable any page's tab. With the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlTabBase_Visibletopic">Visible</helplink> property, you can show or hide a particular page's tab. In order to activate a specific page and display its contents, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxPageControl_ActiveTabPagetopic">ActiveTabPage</helplink> property can be used.
</p><p>
The server-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_ActiveTabChangingtopic">ActiveTabChanging</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_ActiveTabChangedtopic">ActiveTabChanged</helplink> events used in this demo allow you to perform any custom action on the server. In this example, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_ActiveTabChangedtopic">ActiveTabChanged</helplink> event is handled to synchronize the dropdown editor's value with the clicked tab and both the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_ActiveTabChangingtopic">ActiveTabChanging</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTabControlASPxTabControlBase_ActiveTabChangedtopic">ActiveTabChanged</helplink> events are used to display event information in the Events monitor.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="TitleIndex" Title="Title Index" SeoTitle="ASP.NET AJAX Title Index Control">
<Demo Key="Features" Title="Features" SeoTitle="Main Features">
<Description>
<![CDATA[<p>
This demo shows the main features available to you when using the ASPxTitleIndex control.
</p><p>
If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexASPxTitleIndex_Categorizedtopic">Categorized</helplink> property is set to true, each group changes to a category containing items which are displayed and organized into columns.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexASPxTitleIndex_ShowBackToToptopic">ShowBackToTop</helplink> property specifies whether a specific link is displayed after each group or category. This link can be used to quickly scroll to the top of the ASPxTitleIndex control.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexIndexPanel_Behaviortopic">IndexPanel.Behavior</helplink> property controls how the ASPxTitleIndex control responds to clicks on items displayed within the control's IndexPanel. If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexIndexPanel_Behaviortopic">IndexPanel.Behavior</helplink> property is set to Navigation, a click on an item (letter) will scroll the page to navigate to the corresponding group or category. Setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexIndexPanel_Behaviortopic">IndexPanel.Behavior</helplink> property to Filtering, forces the control to display only the group (category) that corresponds to the selected item (letter). This behavior is implemented through server-side processing, so it requires postbacks (or callbacks) to be sent to the server. Note that by default the ASPxTitleIndex control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexASPxTitleIndex_EnableCallBackstopic">EnableCallbacks</helplink> property is set to true, thus allowing required data items to be retrieved from the server via AJAX-based callback technology (without refreshing the entire page).
</p><p>
The position of the IndexPanel within the ASPxTitleIndex control can be specified via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexIndexPanel_Positiontopic">IndexPanel.Position</helplink> property.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexASPxTitleIndex_ColumnCounttopic">ColumnCount</helplink> property can be used to control the number of columns in which the ASPxTitleIndex control's data are organized for display purposes. This property specifies the total number of columns contained within the ASPxTitleIndex control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexASPxTitleIndex_Columnstopic">Columns</helplink> collection.
</p>]]>
</Description>
</Demo>
<Demo Key="Filtering" Title="Filtering" SeoTitle="Data Filtering">
<Description>
<![CDATA[<p>
The ASPxTitleIndex control provides you with client-side filtering capabilities.
</p><p>
The filtering functionality found within the ASPxTitleIndex is implemented using a Filter Box element whose visibility is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexFilterBox_Visibletopic">FilterBox.Visible</helplink> property. The horizontal and vertical positions of the Filter Box within the ASPxTitleIndex control are specified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexFilterBox_HorizontalPositiontopic">FilterBox.HorizontalPosition</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexFilterBox_VerticalPositiontopic">FilterBox.VerticalPosition</helplink> properties.
</p><p>
The Filter Box contains an editor that allows the desired filter string to be entered, and a label that displays specific explanatory information regarding the available wildcard symbols. Filtering is executed dynamically on the client side once text is changed within the Filter Box editor (incremental filtering). The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexFilterBox_Delaytopic">FilterBox.Delay</helplink> property can be used to specify a delay (in milliseconds) in filter execution. Information related to wildcard symbols can be modified by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexFilterBox_InfoTexttopic">FilterBox.InfoText</helplink> property.
</p><p>
You can use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexASPxTitleIndex_SoftFilteringtopic">SoftFiltering</helplink> property set to true to provide end-users with a capability to automatically find all occurrences of the entered string without typing any wildcard symbols.
</p>]]>
</Description>
</Demo>
<Demo Key="Grouping" Title="Grouping" SeoTitle="Data Grouping">
<Description>
<![CDATA[<p>
This demo shows the ASPxTitleIndex control's grouping feature.
</p><p>
The ASPxTitleIndex control provides you with the ability to display data grouped by values of a specific data field. The desired grouping field can be specified using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTitleIndexASPxTitleIndex_GroupingFieldtopic">GroupingField</helplink> property. Note that by default, this property is set to an empty string and the ASPxTitleIndex control's data items are grouped and sorted alphabetically.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="TreeView" Title="Tree View" SeoTitle="ASP.NET AJAX Tree View Control">
<Keywords>hierarchy, xml, hierarchical, nodes</Keywords>
<Demo Key="DataBinding" Title="Data Binding">
<Description>
<![CDATA[
<p>This demo illustrates how the ASPxTreeView can be populated with node information taken from a data source.</p>
<p>Primarily designed to be a site navigation control, the ASPxTreeView supports binding to data sources containing hierarchical data. Any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g. SiteMapDataSource, XmlDataSource, etc.) may be used as a data source for the ASPxTreeView control. The ASPxTreeView can be bound to a data source in a standard manner - using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxHierarchicalDataWebControl_DataSourceIDtopic">DataSourceID</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControlBase_DataSourcetopic">DataSource</helplink> property.</p>
<p>The ASPxTreeView control implements specific properties that point to the data fields containing the necessary data. These are the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_TextFieldtopic">TextField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ImageUrlFieldtopic">ImageUrlField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_NavigateUrlFieldtopic">NavigateUrlField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_NameFieldtopic">NameField</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ToolTipFieldtopic">ToolTipField</helplink> properties. If these properties are not defined, the ASPxTreeView is able to automatically bind to data fields whose names coincide with property names of a <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxTreeViewTreeViewNodetopic">TreeViewNode</helplink> object (such as the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Texttopic">Text</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesImagePropertiesBase_Urltopic">Image.Url</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_NavigateUrltopic">NavigateUrl</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Nametopic">Name</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_ToolTiptopic">ToolTip</helplink>).</p>
<p>The ASPxTreeView control implements the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_NodeDataBoundtopic">NodeDataBound</helplink> event, allowing you to customize settings of an individual node after it has been bound to data. For instance, you can modify the content of a node or change its formatting.</p>
<p>The ASPxTreeView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControlBase_DataBoundtopic">DataBound</helplink> event (which occurs after the control data binding has been finished) allows you to finally customize the control (for instance you can set the selected node).</p>
<p>In this demo, the ASPxTreeView is bound to an XML file using a standard XmlDataSource component. The source XML file contains hierarchical information about a set of classes and their members (properties, methods, events). The ASPxTreeView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_TextFieldtopic">TextField</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ImageUrlFieldtopic">ImageUrlField</helplink>, and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_NavigateUrlFieldtopic">NavigateUrlField</helplink> properties are used to specify the names of data item attributes from which the corresponding node settings should be obtained. The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_NodeDataBoundtopic">NodeDataBound</helplink> event is handled to change the text style of nodes which represent classes (their text is displayed bold).</p>
]]>
</Description>
</Demo>
<Demo Key="Features" Title="Features" SeoTitle="Main Features" HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/TreeView.png" HighlightedTitle="Tree View - Features">
<Description>
<![CDATA[
<p>This demo illustrates the primary features of the ASPxTreeView. Use the options in the right panel to change the values of corresponding ASPxTreeView properties, and see the result within the control.</p>
<p>The descriptions of the utilized properties are listed below:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_AllowSelectNodetopic">AllowSelectNode</helplink>. Enables 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/DevExpressWebASPxTreeViewASPxTreeView_AutoPostBacktopic">AutoPostBack</helplink>. Controls whether or not a round trip to the server is required to process end-user actions on the server ("server mode"). If this option is disabled, the control behavior is based upon the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_EnableCallBackstopic">EnableCallBacks</helplink> property.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_EnableAnimationtopic">EnableAnimation</helplink>. Specifies whether or not nodes are expanded/collapsed with animation effects.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_EnableHotTracktopic">EnableHotTrack</helplink>. Specifies whether nodes are hot-tracked when the mouse pointer is located over them.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ShowTreeLinestopic">ShowTreeLines</helplink>. Toggles the visibility of tree lines.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ShowExpandButtonstopic">ShowExpandButtons</helplink>. Toggles the visibility of expand buttons. Regardless of the option setting, end-users can expand or collapse nodes by double-clicking them.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_AllowCheckNodestopic">AllowCheckNodes</helplink>. Specifies whether or not end-users can check nodes using corresponding check boxes. Disabling the option hides check boxes.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_CheckNodesRecursivetopic">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>
<HighlightedDescription>A Tree View control is very helpful for web navigation, because it displays a hierarchical list of items, such as folders. Items in a Tree View can be expanded and collapsed to display other sub-items. Take a look at this demo's illustration of the main features of the DevExpress ASP.NET Tree View (ASPxTreeView) control.</HighlightedDescription>
</Demo>
<Demo Key="NodeLinkMode" Title="Node Link Mode" SeoTitle="Node Link Modes">
<Description>
<![CDATA[
<p>In the ASPxTreeView, nodes represent navigation elements (links). For nodes, you can activate a specific link mode, in which only certain node elements are clickable. To accomplish this, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_NodeLinkModetopic">NodeLinkMode</helplink> property.</p>
<p>Options include:</p>
<ul>
<li>TextOnly. Only a node's text is clickable.</li>
<li>TextAndImage. Only a node's text and image are clickable.</li>
<li>ContentBounds. The entire node's content is clickable.</li>
</ul>
<p>To customize appearance settings for each link mode, use the ASPxTreeView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewStyles_Linktopic">Styles.Link</helplink> (for TextOnly and TextAndImage) and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesAppearanceStyle_HoverStyletopic">Styles.Node.HoverStyle</helplink> (for ContentBounds) properties.</p>
<p>This demo shows ASPxTreeViews in two link modes - TextOnly and ContentBounds. You can click nodes in these ASPxTreeViews to see the difference in behavior and appearance.</p>
]]>
</Description>
</Demo>
<Demo Key="EnableCallbacks" Title="Callbacks (AJAX)">
<Description>
<![CDATA[
<p>This sample demonstrates the use of the AJAX-based callbacks implemented by the ASPxTreeView control.</p>
<p>The ASPxTreeView control supports AJAX technology by implementing the ability to load the content of an ASPxTreeView from the server via a callback. This approach allows the ASPxTreeView to avoid the initial transfer of all its node data to the client, optimizing the page's load time.</p>
<p>In order to enable the use of callbacks, ASPxTreeView's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_EnableCallBackstopic">EnableCallBacks</helplink> property should be set to true and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_AutoPostBacktopic">AutoPostBack</helplink> property should be set to false. In this instance, the contents of the collapsed nodes are not represented on the client. When a 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>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>
</Demo>
<Demo Key="Templates" Title="Templates">
<Description>
<![CDATA[
<p>The ASPxTreeView control supports the template technology, allowing you to completely customize the control's appearance and layout.</p>
<p>The look of the ASPxTreeView control'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 ASPxTreeView control allows you to create templates for two element types: the node text content and the entire node content. You can apply templates for all identical elements within the ASPxTreeView (using control level templates) or for a particular element (using node level templates). Each template can consist of a group of HTML controls. Each HTML control used in a template can be bound to the property values of the rendered node.</p>
<p>In this demo, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_TextTemplatetopic">TextTemplate</helplink> property of the parent nodes (the 'ASP.NET AJAX Controls' and 'WinForms Controls') is used to replace node texts with a custom combination of an image and text elements. The contents of child nodes are completely defined using their <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Templatetopic">Template</helplink> property. These templates contain an image and two text elements representing textual node characteristics (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Texttopic">Text</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Nametopic">Name</helplink> property values) in two lines.</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSideEvents" Title="Client-Side Events">
<Description>
<![CDATA[
<p>This sample demonstrates the capabilities of our client-side event management technology. All available client-side events are traced in this demo. Click any node or expand/collapse it within the ASPxTreeView control to initiate client-side events.</p>
<p>The ASPxTreeView control 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 ASPxTreeView control's functionality. So, they give you the ability to completely control the client-side behavior of the control.</p>
<p>The following client events are available for the ASPxTreeView:</p>
<ul>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesScriptsASPxClientControl_Inittopic">Init</helplink>. Occurs on the client side after the control has been initialized, but prior to it being displayed within the browser.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangingtopic">ExpandedChanging</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandedChangedtopic">ExpandedChanged</helplink>. Fires before and after the node's expansion state has been changed.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CheckedChangedtopic">CheckedChanged</helplink>. Fires after a node's checked state has been changed.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_NodeClicktopic">NodeClick</helplink>. Fires after a node has been clicked.</li>
</ul>
<p>
To learn more on client-side events, refer to the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument9448">Client-Side Events</helplink> help topic.
</p>
]]>
</Description>
</Demo>
<Demo Key="ClientSide" Title="Client-Side Functionality">
<Description>
<![CDATA[
<p>This example demonstrates how to manipulate the ASPxTreeView control programmatically on the client using our extended client-side functionality. The ASPxTreeView's client-side programmatic interface is available in the following cases:</p>
<ul><li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_EnableClientSideAPItopic">EnableClientSideAPI</helplink> property is set to true.</li>
<li>Any client-side event (available via the ClientSideEvents property) is handled.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ClientInstanceNametopic">ClientInstanceName</helplink> property is defined.</li>
</ul>
<p>This demo allows the selected node's settings to be modified on the client by clicking check boxes in the rightmost panel.</p>
<p>A node can be selected either directly within the ASPxTreeView control or by using the panel's dropdown editor. Note that the editor's dropdown window contains another ASPxTreeView control (created using a template) to make node selection easier. For synchronization purposes, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_NodeClicktopic">NodeClick</helplink> client events of both ASPxTreeView controls are handled in an appropriate manner (using the OnTreeViewNodeClick function - for the leftmost ASPxTreeView, and using the OnNodesTreeViewNodeClick function - for the ASPxTreeView embedded into the editor's dropdown window).</p>
<p>In this demo, each tree view node is identified using the name assigned to its server <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Nametopic">Name</helplink> property. So, any specific node can be easily obtained on the client using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_GetNodeByNametopic">GetNodeByName</helplink> method of an ASPxTreeView.</p>
<p>Clicking check boxes invokes the corresponding client-side methods (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetEnabledtopic">SetEnabled</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetVisibletopic">SetVisible</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_SetSelectedNodetopic">SetSelectedNode</helplink>, <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetCheckedtopic">SetChecked</helplink>, or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeViewNode_SetExpandedtopic">SetExpanded</helplink>), to change the state of a node being currently selected.</p>
<p>A click on the 'Expand all' or 'Collapse all' button calls the respective client method (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_ExpandAlltopic">ExpandAll</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewScriptsASPxClientTreeView_CollapseAlltopic">CollapseAll</helplink>) of the leftmost ASPxTreeView control.</p>
]]>
</Description>
</Demo>
<Demo Key="ServerSide" Title="Server-Side Functionality">
<Description>
<![CDATA[
<p>This sample demonstrates a few of the server-side capabilities of the ASPxTreeView control. Click a node or select the desired item from the dropdown editor, and define the settings of the corresponding node by clicking the appropriate check box(es).</p>
<p>The following server properties can be toggled in this demo:</p>
<ul><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Enabledtopic">Enabled</helplink>. This property controls a node's availability to end-user interaction.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Visibletopic">Visible</helplink>. This property controls a node's visibility.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_SelectedNodetopic">SelectedNode</helplink>. The ASPxTreeView control supports single node selection. The selected node can be specified using this property.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Checkedtopic">Checked</helplink>. This property specifies a node's checked state.</li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewNode_Expandedtopic">Expanded</helplink>. This property specifies a node's expansion state.</li>
</ul>
<p>Click or expand/collapse a node within the ASPxTreeView to initiate server-side events. In this example the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_NodeClicktopic">NodeClick</helplink>, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ExpandedChangingtopic">ExpandedChanging</helplink>, the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_ExpandedChangedtopic">ExpandedChanged</helplink>, and the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_CheckedChangedtopic">CheckedChange</helplink> events are handled, to display information about the raised event in the Event monitor.</p>
]]>
</Description>
</Demo>
<Demo Key="VirtualMode" Title="Virtual Mode">
<Keywords>loadondemand, demand</Keywords>
<Description>
<![CDATA[
<p>This demo shows how Virtual Mode helps you improve tree view performance.</p>
<p>In addition to bound and unbound modes, the ASPxTreeView can operate in Virtual Mode, which greatly reduces both server load and start-up time when working with complex or dynamically created hierarchies. In Virtual Mode, data is retrieved on the server in portions, on a client request, at start-up and when expanding nodes. In essence, child nodes are created and initialized only when their parent node is expanded for the first time. This allows you to efficiently use server resources and to avoid retrieving the entire amount of hierarchical data for the ASPxTreeView.</p>
<p>To activate Virtual Mode for the ASPxTreeView, handle its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewASPxTreeView_VirtualModeCreateChildrentopic">VirtualModeCreateChildren</helplink> event, which occurs when expanding nodes for the first time. Within the event handler, you need to create a list of <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxTreeViewTreeViewVirtualNodetopic">TreeViewVirtualNode</helplink> objects representing child nodes for the currently expanded node. If a child node has no children, set its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeViewTreeViewVirtualNode_IsLeaftopic">IsLeaf</helplink> property to true, to not show the expand button for this node.</p>
<p>In this demo, the ASPxTreeView uses Virtual Mode to display the file/folder tree of the demo's web site.</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Accessibility" Title="Accessibility">
<Demo Key="RightToLeft" Title="Right to Left Layout">
<Keywords>rtl, Accessibility, arabic, Hebrew, Samaritan, Thaana, Syriac, Phoenician</Keywords>
<Description>
<![CDATA[
<p>
Our visual controls provide support for right-to-left languages, like Arabic or Hebrew. So, you can completely rely on our web controls when creating international web pages that include support for right-to-left reading order, and mirroring of UI elements.
</p>
<p>
To switch a control to right-to-left representation, just enable a single property - RightToLeft. When this property is on, text flows from right to left in a control and the control itself is mirrored (the layout of its UI elements is reversed).
</p>
<p>
If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching each control's RightToLeft property. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option, that can be accessed within the 'settings' group of our <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8007">devExpress</helplink> section.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxPivotGrid" Url="ASPxPivotGridDemos" Title="DevExpress ASPxPivotGrid" SeoTitle="ASP.NET AJAX OLAP Data Mining Control" NavItemTitle="Pivot Grid" OrderIndex="3">
<Keywords>analyze, mine, summary</Keywords>
<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_ASPxPivotGrid_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/PivotGrid.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX OLAP Data Mining Control">
<BannerTitle>
Pivot Table® Style Data Mining Control for ASP.NET AJAX
</BannerTitle>
<BannerText>
Simply bind the control to data to allow end-users to slice and dice data, generating a nearly endless array of cross-tab reports
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://go.devexpress.com/DevExpress_AspDemos_ASPxPivotGrid_Video.aspx</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxPivotGrid Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxPivotGrid Suite</b>. These features include:</p>
]]>
</Description>
</Intro>
<DemoGroup Key="SampleReports" Title="Sample Reports">
<Keywords>Reporting, aspxreportcontrol</Keywords>
<Demo Key="CustomerReports" Title="Customer Reports" SeoTitle="Customer Reports - Data Mining Sample">
<Description>
<![CDATA[
<p>
This demo includes a set of reports which allows you analyze the same
business data in different forms. Use the Radio buttons to switch between the reports.
</p>
<ul>
<li><strong>Customers</strong>
In this report the <b>ASPxPivotGrid</b> control summarizes the orders made by customers in a specific time period. The quantities ordered are given for each quarter and for each product which was bought by a customer.
</li><li><strong>Products(Filtering)</strong>
In this report the <b>ASPxPivotGrid</b> control displays the products bought by customers in a particular year. Use the Year and Quarter combo boxes to select which period is displayed and analyze the information in the control.
</li><li><strong>Top 2 Products</strong>
In this report the <b>ASPxPivotGrid</b> lists the two most popular products for each customer (the ones which generated the most interest). Clicking the 'Product Name' field header reverses the current sort order and the control will show you the least popular products for each customer.
</li><li><strong>Top 10 Customers</strong>
The <b>ASPxPivotGrid</b> control lists the top 10 customers, who purchased the most items. Clicking the 'Customer' field header reverses the sort order and displays the customers who purchased the least amount of items.
</li></ul>
]]>
</Description>
</Demo>
<Demo Key="ProductReports" Title="Product Reports" SeoTitle="Product Reports - Multi-Dimensional Data Analysis">
<Description>
<![CDATA[
<p>
This demo includes a set of reports which allows you analyze the same business data in different forms.
Use the Radio buttons to switch between the reports.
</p>
<ul><li><strong>Category Sales</strong>
In this report the <b>ASPxPivotGrid</b> control displays the total amount of sales for each category of product.
</li><li><strong>Product Sales</strong>
In this report the <b>ASPxPivotGrid</b> control shows the total amount of sales for each product. Check the Show Categories check box to view products by categories. For each category a total will be automatically calculated.
</li><li><strong>Interval Grouping</strong>
In this report the <b>ASPxPivotGrid</b> control allows you to view the amount of sales for each category and product according to the shipping date. You can categorize the information by year, quarter and(or) month.
</li><li><strong>Multiple Subtotals</strong>
In this report the <b>ASPxPivotGrid</b> calculates multiple summaries (Sum, Average, Max and Min) for each product category. It breaks the information down into years and quarterly intervals so that you can analyze the information according to the shipping date.
</li><li><strong>Average Sales</strong>
In this report the <b>ASPxPivotGrid</b> control calculates the total, average and minimum sales amount for each category.
</li><li><strong>Top 3 Products</strong>
This report shows the three most popular products in each category. Clicking the 'Product Name' field header reverses the current sort order and the report will show you the three least popular products in each category.
</li>
</ul>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Summary" Title="Summary" >
<Demo Key="SingleTotals" Title="Single Totals" SeoTitle="Single Totals">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> automatically calculates grand totals for each row and column. Additionally,
totals are automatically calculated for each value group. The type of the automatic totals always
matches the type of the summaries calculated in cells. Thus, automatic totals give you a more general
data view while you still displaying the details. In this demo, you can use a number of view options
to control the availability of totals.
</p><p><b>Row Totals</b> are rows that display sub-totals calculated for outer row fields. <b>Column Totals</b> are
columns that display sub-totals calculated for outer column fields.
</p><p>
The <b>ASPxPivotGrid</b> control supports automatic and custom totals. Automatic totals are calculated using
a summary function specified by a corresponding data field. Custom totals can be calculated using any
summary function. It's possible to calculate multiple custom totals against a data field.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7278" Title="Totals" />
</Demo>
<Demo Key="MultipleTotals" Title="Multiple Totals" SeoTitle="Multiple Totals">
<Description>
<![CDATA[<p>
For each field, you can manually specify the number and type of group totals to be displayed.
This demo shows how to display the <b>Average</b>, <b>Sum</b>, <b>Maximum</b> and <b>Minimum</b>
summaries for each Category group.
</p><p>
The CustomTotals collection contains
<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxPivotGridPivotGridCustomTotaltopic">PivotGridCustomTotal</helplink>
objects that represent custom totals
for the field. These custom totals are displayed when the field is located within the Column
Header Area or Row Header Area and only if its
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridFieldBase_TotalsVisibilitytopic">TotalsVisibility</helplink>
property is set to <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotTotalsVisibilityEnumtopic">PivotTotalsVisibility.CustomTotals</helplink>.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7310" Title="Custom Totals" />
</Demo>
<Demo Key="SummaryVariation" Title="Summary Display Mode" SeoTitle="Summary Display Mode - Variation and Percentage Summaries" >
<Description>
<![CDATA[<p>
Rather than displaying raw summary values in cells, you can show how these values correlate to
values in other cells, and so perform a range of data analysis. For instance, you can display
the differences between summaries in the current and previous cells, or the percentage of a
column's or row's total.
</p><p>
Use the Summary Display Type combo box to choose summary display
mode, and see how this changes values in every second data column.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7281" Title="Summary Display Modes" />
</Demo>
<Demo Key="SortBySummary" Title="Sort By Summary" SeoTitle="Sort By Summary">
<Description>
<![CDATA[<p>
This demo illustrates the
<helplink href="http://help.devexpress.com/#AspNet/CustomDocument8456">Sorting By Summary</helplink>
feature allows you to sort values of a particular column field or row field by summary values
calculated against a specific data field. In this example, 'Sales Person' field values are sorted by summary values
calculated against another data field. You can select this data field via the combo box at the top of the <b>ASPxPivotGrid</b> control.
Clicking the 'Sales Person' field will reverse the current sort order.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8456" Title="Sorting by Summary" />
</Demo>
<Demo Key="TopValues" Title="Top Values" SeoTitle="Top Values">
<Description>
<![CDATA[<p>
This example demonstrates the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument7277">Top N Values</helplink>
feature of the <b>ASPxPivotGrid</b> control. For any column field or row field you can specify how many values
should be displayed and used to calculate summaries. Thus you can only
select the most significant values and ignore less important information.
In this example, the <b>ASPxPivotGrid</b> control displays the specified number
of values for the selected field. Note that the values in this field are
sorted against the values in the 'Order Amount' field.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7277" Title="Display Top N Values" />
</Demo>
<Demo Key="RunningTotal" Title="Running Totals" SeoTitle="Running Totals">
<Description>
<![CDATA[<p>
This example demonstrates how to include previous cell values in values of the next cell.
To do this, set the <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridFieldBase_RunningTotaltopic">RunningTotal</helplink>
property of the corresponding field to <b>true</b>.
</p><p>
In this demo, check the box on top of the page to include previous quarter sales in the next quarter sales value.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Features" Title="Data Shaping Features">
<Demo Key="Groups" Title="Field Groups" SeoTitle="Field Groups">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> provides the capability to arrange its fields into groups.
End-users cannot separate such fields by dragging one of them to a different area or hiding it on the customization form.
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.
Try to drag them, expand and collapse individual fields.
</p><p>
To group fields at design-time, run the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument4936">Groups editor</helplink>.
</p><p><img src="../Content/Demo/GroupsEditor.png" width="718" height="532" alt="Groups Editor" /></p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7264" Title="Field Groups" />
</Demo>
<Demo Key="CustomGroupInterval" Title="Custom Group Interval" SeoTitle="Custom Group Interval - Data Grouping">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> provides the Custom Group Intervals feature that can be used to group axis values using your own criteria.
</p><p>
To use this feature, set the field's <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridFieldBase_GroupIntervaltopic">GroupInterval</helplink>
property to <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGroupIntervalEnumtopic">'Custom'</helplink>, and handle
the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CustomGroupIntervaltopic">CustomGroupInterval</helplink> event to provide a group value.
</p><p>
In this demo we use the Custom Group Intervals feature to group product names and make the report
more readable. The Product axis displays three intervals ("A-E", "F-S" and "T-Z").
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7268" Title="Group Intervals" />
</Demo>
<Demo Key="UnboundsFields" Title="Unbound Fields" SeoTitle="Unbound Fields - Calculated Fields">
<Description>
<![CDATA[<p>
This demo illustrates the powerful Unbound Fields functionality. The <b>ASPxPivotGrid</b>
control allows you to create Unbound Fields which are not bound to any field in the
control's underlying data source. These fields should be populated manually
(for instance, they can display custom information and even use summary
results calculated by the grid).</p><p>
The unbound 'Order Amount' and 'Sales Person'
fields are populated via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CustomUnboundFieldDatatopic">CustomUnboundFieldData</helplink>
event (this is an equivalent of the calculated columns provided by various data sources). You can specify how
values for these fields are calculated using the Sales Person Format and Order
Amount Rule combo boxes. The data cells that correspond to unbound 'Percent of
OrderTotal' and 'Bonus Amount' unbound fields are populated via the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CustomCellDisplayTexttopic">CustomCellDisplayText</helplink>
event. Cell values of the 'Bonus Amount' field are calculated depending upon the value
of the 'Order Amount' field. Cell values of the ' Percent of OrderTotal' field specify
the percentage ratio of the current order's sum as compared to the total order's sum.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7259" Title="Unbound Data" />
</Demo>
<Demo Key="FieldsCustomization" Title="Fields Customization" SeoTitle="Fields Customization - Field List Window - Customization Form">
<Description>
<![CDATA[<p>
This example shows the Fields Customization Window. This allows you to temporarily hide
specific fields and then restore them again when needed.
</p><p>
<b>ASPxPivotGrid</b> allows you to show and hide the Fields Customization Window both on the server (using C# or VB code)
and on the client using JavaScript. This demo shows the JavaScript usage. Here, when clicking the
btnCustomizationFields button, we are calling the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridScriptsASPxClientPivotGrid_ChangeCustomizationFieldsVisibilitytopic">ChangeCustomizationFieldsVisibility</helplink>
method that hides or shows the Fields Customization Window.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridScriptsASPxClientPivotGrid_ChangeCustomizationFieldsVisibilitytopic">ChangeCustomizationFieldsVisibility</helplink>
method is a part of the <b>ASPxPivotGrid's</b> <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridScriptsASPxClientPivotGridMembersTopicAll">ClientSideAPI</helplink>.
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridScriptsASPxClientPivotGridMembersTopicAll">ClientSideAPI</helplink> is a collection of methods and events available on the client.
</p><p>
Also, the demo shows the usage of the ClientSide
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridScriptsASPxClientPivotGrid_CustomizationFieldsVisibleChangedtopic">CustomizationFieldsVisibleChanged</helplink> event.
When fired, this event changes the btnCustomizationFields button caption from "Show" to "Hide" and
vice versa.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument11789" Title="Customization Form Overview" />
</Demo>
<Demo Key="Export" Title="Export" SeoTitle="Export - Data Export to PDF, XLS, HTML">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> allows you to export its content to the PDF, Excel, Mht, Plain Text, and Rtf formats.
The <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxPivotGridExportASPxPivotGridExportertopic">ASPxPivotGridExporter</helplink> control
is used to export the <b>ASPxPivotGrid</b> control data. To export the <b>ASPxPivotGrid</b>,
create an <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxPivotGridExportASPxPivotGridExportertopic">ASPxPivotGridExporter</helplink>
control instance in addition to the <b>ASPxPivotGrid</b> and assign the <b>ASPxPivotGrid</b> ID to the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ASPxPivotGridIDtopic">ASPxPivotGridExporter.ASPxPivotGridID</helplink> property value.
</p><p>
This demo shows how to export the <b>ASPxPivotGrid</b> to a stream, providing a user
an option to open the report or save it to a disk.
</p><p>
The methods listed below, export the pivot grid to a file and write it to the response.
</p><ul><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportPdfToResponsetopic">ExportPdfToResponse</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportXlsToResponsetopic">ExportXlsToResponse</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportMhtToResponsetopic">ExportMhtToResponse</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportTextToResponsetopic">ExportTextToResponse</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportRtfToResponsetopic">ExportRtfToResponse</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportHtmlToResponsetopic">ExportHtmlToResponse</helplink></li></ul><p>
To export the pivot grid's data to a file (or stream) that can be downloaded by a user
later on, use one of the following methods
</p><ul><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportToPdftopic">ExportToPdf</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportToXlstopic">ExportToXls</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportToMhttopic">ExportToMht</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportToTexttopic">ExportToText</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportToRtftopic">ExportToRtf</helplink></li>
<li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridExportASPxPivotGridExporter_ExportToHtmltopic">ExportToHtml</helplink></li></ul>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7260" Title="Export Data" />
</Demo>
<Demo Key="Drilldown" Title="Drill Down" SeoTitle="Drill Down - Obtaining Underlying Data"
HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/DrillDown.png">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> provides a drill-down capability that enables you to retrieve a list of records that were used to calculate a particular summary.
</p><p>
To obtain drill-down data, use the pivot grid's
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CreateDrillDownDataSourcetopic">CreateDrillDownDataSource</helplink> method.
Its parameters completely identify a summary cell.
</p><p>
In this demo, click a summary cell to view the records from the control's underlying data source associated with this cell. The obtained data is displayed by the <b>ASPxGridView</b> within a popup window.
</p>]]>
</Description>
<HighlightedDescription>
Cells in a pivot grid display summarized data. Use the DevExpress ASP.NET Pivot Grid (ASPxPivotGrid) drill down functionality to view the records used to create the summary data.
</HighlightedDescription>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7272" Title="Obtaining Underlying Data" />
</Demo>
<Demo Key="SortByColumn" Title="Sort By Column" SeoTitle="Sort By Column">
<Description>
<![CDATA[
<p>
The <b>ASPxPivotGrid</b> provides multiple types of sorting field values (sorting by value, display text, summary, etc.).
You can sort row and column field values by summary columns and rows, respectively.
End-users can sort field values by summary values via a popup menu.
</p><p>
To perform sorting by column or row summaries, right-click a corresponding header.
This action will invoke the popup menu. Menu items correspond to pivot grid fields whose values can be sorted by this column or row.
Select a required menu item to sort field values by summaries. To cancel sorting, either unselect the menu item or click <b>Remove All Sorting</b>.
</p><p>
To prohibit the end-user from sorting field values by summaries, turn off the <b>ASPxPivotGrid</b>
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridOptionsCustomization_AllowSortBySummarytopic">OptionsCustomization.AllowSortBySummary</helplink> option.
To prevent end-users from sorting individual field values, disable a necessary field's
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridFieldOptions_AllowSortBySummarytopic">Options.AllowSortBySummary</helplink> option.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8456" Title="Sorting by Summary" />
</Demo>
<Demo Key="Prefilter" Title="Prefilter" SeoTitle="Prefilter">
<Description>
<![CDATA[<p>
The <helplink href="http://help.devexpress.com/#AspNet/CustomDocument7313">Prefilter</helplink> allows end-users to build complex filter criteria with an
unlimited number of filter conditions, combined by logical operators. End-users
can open the Prefilter by right-clicking on any header or header area and selecting the
Show Prefilter menu item. Or, end-user can open it by clicking an image
<img src="../Content/Demo/pgPrefilterButton.png" alt="(*)" title="" />
or filter expression link
displayed within the Prefilter panel.
</p><p><b>Adding/Removing Conditions</b><br />
To create and customize filter criteria, use the
<img src="../Content/Demo/fcadd.png" alt="(+)" title="" />
and
<img src="../Content/Demo/fcremove.png" alt="(x)" title="" />
buttons.
</p><p><b>Changing a Field in a Filter Condition</b><br />
To change a field, invoke the field list and choose the required field.
</p><p><b>Changing an Operator in a Filter Condition</b><br />
To change an operator, invoke the operator list and choose the required operator.
</p><p><b>Editing a Value in a Filter Condition</b><br />
To edit a value, click the operand value and type some text.
To discard changes and close the active edit box, press ESC.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7313" Title="Prefilter" />
</Demo>
<Demo Key="MapsIntegration" Title="Maps Integration" SeoTitle="Maps Integration">
<Description>
<![CDATA[<p>
The <b>Bing Maps</b> service provides the capability to display sales reports on a map. The
maps provide a JavaScript API to display maps, locate countries and businesses, and create pushpin indicators.
</p><p>
To send report data from the server to the client side, use the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CustomJsPropertiestopic">CustomJsProperties</helplink> event.
This event automatically serializes dictionary and list-typed property data, without any additional efforts.
</p><p>
These properties can be accessed on the client side as follows: <b>[PivotGrid ClientInstanceName].[PropertyName]</b></p><p>
To display a sales report on a map, create a new instance of the <b>SalesMap</b> class and use
the <b>SalesMap.ShowMap</b> method.
Its parameters are the following:
</p><ul><li><em>mapContainerId</em> - id of a map container element;
</li><li><em>salesPerCountry</em> - dictionary of country:sales pairs;
</li><li><em>loadingPanel</em> - instance of a LoadingPanel client instance;
</li></ul><p>
Note that all parameters are mandatory.
</p>]]>
</Description>
</Demo>
<Demo Key="FilterPopup" Title="Filter Popup" SeoTitle="Filter Popup">
<Description>
<![CDATA[
<p>
This demo shows features related to filter popup windows.
</p><p>
Use the 'Show Only Available Items' check box to specify whether to suppress filter items that cannot be displayed because of filters applied to other fields. The 'Show Hidden Items' check box controls whether to disable or hide such items.
</p>
]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument3599" Title="Filter Window" />
</Demo>
</DemoGroup>
<DemoGroup Key="ChartsIntegration" Title="Charts Integration">
<Demo Key="GeneralOptions" Title="General Chart Options" SeoTitle="General Charts Integration Options"
HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Chart.png" HighlightedTitle="Charts Integration">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> allows visualizing data displayed in the Pivot Grid using the XtraCharts Suite.
By default, the <b>WebChartControl</b> displays all data of the <b>ASPxPivotGrid</b> control.
</p><p>
If you chart data horizontally, the <b>WebChartControl</b> uses row values as series and column values as arguments, or vice versa
if you want to visualize data vertically. To specify how data is interpreted in a chart, use the
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridDataPivotGridOptionsChartDataSourceBase_ProvideDataByColumnstopic">PivotGridOptionsChartDataSourceBase.ProvideDataByColumns</helplink> property.
In this demo, this can be done via a configuration checkbox.
</p><p>
To exclude totals from the chart, turn off the
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridDataPivotGridOptionsChartDataSourceBase_ProvideColumnGrandTotalstopic">PivotGridOptionsChartDataSourceBase.ProvideColumnGrandTotals</helplink>,
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridDataPivotGridOptionsChartDataSourceBase_ProvideRowGrandTotalstopic">PivotGridOptionsChartDataSourceBase.ProvideRowGrandTotals</helplink>
and similar options.
</p>]]>
</Description>
<HighlightedDescription>
Easily visualize Pivot Grid data by displaying it as a chart. The DevExpress Pivot Grid control (ASPxPivotGrid) allows you to visualize pivot grid data using the DevExpress Charts Suite. This demo illustrates a pivot grid integrated with a chart.
</HighlightedDescription>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7343" Title="Integration with the XtraCharts Suite" />
</Demo>
<Demo Key="CustomChartData" Title="Custom Chart Data" SeoTitle="Custom Chart Data">
<Description>
<![CDATA[<p>
This demo illustrates how to customize data, passed from an <b>ASPxPivotGrid Control</b> to a <b>Chart Control</b>.
</p><p>
The <b>ASPxPivotGrid</b> provides the capability to choose whether it's necessary to pass field values to the Chart as strings or as values, thus preserving initial data types. So, in the column area field group, date-time field values are passed to the Chart as date-time values. The Chart can show data using a lot of measure units: <b>Year</b>, <b>Quarter</b> and <b>Month</b>, and can calculate integrals for every unit. Collapsing a column field in a column field group increases the data scale, thus decreasing the number of available chart measure units.
</p><p>
In addition, the <b>ASPxPivotGrid</b> provides the capability to customize every field and cell value passed to the chart control. This demo contains three rules of exporting row field values: <b>'ProductName'</b> and <b>'Category/ProductName'</b> as strings and <b>'Encoded Product Category'</b> by alphabetical encoding as characters. Cell value exporting in this demo is customized to skip values that are less than the specified threshold value.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7343" Title="Integration with the XtraCharts Suite" />
</Demo>
</DemoGroup>
<DemoGroup Key="Appearance" Title="Appearance & Layout">
<Demo Key="DataHeadersDisplayMode" Title="Data Headers Display Mode" SeoTitle="Data Headers Display Mode">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> allows you to display data in a more compact manner by temporarily hiding data field headers. In this instance, data fields
are displayed within a hidden panel, which pops up when an end-user hovers the mouse over the data header area. This might be useful when there
are three or more data fields.
</p><p>
To enable this feature, set the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotGridWebOptionsView_DataHeadersDisplayModetopic">PivotGridWebOptionsView.DataHeadersDisplayMode</helplink> to
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotDataHeadersDisplayModeEnumtopic">'Popup'</helplink>.
In this demo, use the 'Data Headers Display Mode' combo box to switch between various display modes.
</p><p>
If enabled, the <b>ASPxPivotGrid</b> automatically hides data fields if there are three or more data fields.
The minimum number of data fields, required to activate this feature, is specified by the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotGridWebOptionsView_DataHeadersPopupMinCounttopic">PivotGridWebOptionsView.DataHeadersPopupMinCount</helplink> property.
In this demo, this can be specified via the 'Data Headers Popup Min Count' spin editor.
</p>]]>
</Description>
</Demo>
<Demo Key="ShowHeaders" Title="Header Visibility" SeoTitle="Header Visibility">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> control provides four options that control the visibility of field headers within header areas. For instance, you can hide column field headers which will prevent users from adding new fields to the Column Header Area, move existing column fields to other areas, etc.
</p><p>
In this demo, toggle check boxes displayed above the <b>ASPxPivotGrid</b> to show/hide field headers located within Data, Row, Column or Filter header areas.
</p>]]>
</Description>
</Demo>
<Demo Key="CustomAppearance" Title="Conditional Formatting" SeoTitle="Conditional Formatting">
<Description>
<![CDATA[<p>
The <b>ASPxPivotGrid</b> control enables you to provide custom cell appearance. In this demo, the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CustomCellStyletopic">CustomCellStyle</helplink>
event is handled to specify custom style settings of individual summary cells displayed within odd rows.
</p><p>
Row field values can now be aligned on the top edge of their cell. This behavior is controlled by the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotFieldValueStyle_TopAlignedRowValuestopic">PivotFieldValueStyle.TopAlignedRowValues</helplink> property.
In this demo, check the 'Top Align Row Field Values' box to enable this feature.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7274" Title="Customizing Appearance of Individual Cells" />
</Demo>
<Demo Key="CustomPopupMenu" Title="Custom Popup Menu" SeoTitle="Custom Popup Menu">
<Description>
<![CDATA[<p>
This demo shows how to add a new menu item to the Field Value popup menu. The "Filter By This Value" menu
item allows you to filter the corresponding field by the value currently being clicked.
</p><p>
The <b>ASPxPivotGrid</b> provides two popup menus. The first menu is shown when an end-user right clicks a field
value. The second menu is shown when an end-user right clicks a field header or right clicks within the empty area.
</p><p>
Custom menu items can be created and added to the pivot grid's popup menus within the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_PopupMenuCreatedtopic">PopupMenuCreated</helplink> event handler.
To add a new menu item, use the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxMenuMenuItemCollection_Addtopic">MenuItemCollection.Add</helplink> method.
The event parameter provides the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotPopupMenuCreatedEventArgs_MenuTypetopic">MenuType</helplink> property,
which identifies the menu currently being displayed. The popup menu, itself, is returned by the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotPopupMenuCreatedEventArgs_Menutopic">Menu</helplink> property.
</p><p>
To define an action, which is executed after an end-user has clicked a custom menu item, handle the client-side
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridScriptsASPxClientPivotGrid_PopupMenuItemClicktopic">PopupMenuItemClick</helplink> event.
</p>]]>
</Description>
</Demo>
<Demo Key="TotalsLocation" Title="Totals Location" SeoTitle="Totals Location">
<Description>
<![CDATA[<p>
This demo shows you how to control the location of group and grand
totals. These totals can be displayed either before or after
the corresponding data cells.
</p><p>
The location of row totals and column totals is specified via the
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridOptionsViewBase_RowTotalsLocationtopic">RowTotalsLocation</helplink> and
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridOptionsViewBase_ColumnTotalsLocationtopic">ColumnTotalsLocation</helplink> properties respectively.
Use the <helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridOptionsViewBase_SetBothTotalsLocationtopic">SetBothTotalsLocation</helplink>
method to set values of these properties simultaneously.
</p>]]>
</Description>
</Demo>
<Demo Key="HorzScrollBar" Title="Horizontal Scroll Bar" SeoTitle="Horizontal Scroll Bar">
<Description>
<![CDATA[<p>
This sample demonstrates the
<helplink href="http://help.devexpress.com/#AspNet/CustomDocument8190">Horizontal Scroll Bar</helplink> feature.
In this demo, you can turn on and off the horizontal scrollbar and see how it is in effect for the Pivot Grid's layout.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8190" Title="Horizontal Scrollbar" />
</Demo>
<Demo Key="CompactLayout" Title="Compact Layout" SeoTitle="Compact Layout">
<Description>
<![CDATA[<p>
By default, the <b>ASPxPivotGrid</b> shows all rows in a hierarchical way,
which is common for pivot tables (Full Layout). However, when there are
a lot of data fields in a Row Area, it may be necessary to show them in
a tree-like manner (Compact Layout). In this demo, you can switch from
Compact Layout to Full Layout and move data fields from one area to another
to see what the pivot grid looks like with these settings.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument8211" Title="Compact Layout for Hierarchical Row Values" />
</Demo>
<Demo Key="UndoRedo" Title="Undo/Redo" SeoTitle="Undo/Redo - Save and Restore Layout">
<Description>
<![CDATA[<p>
This demo shows the undo/redo functionality based on the <b>ASPxPivotGrid</b> capability to save and restore its collapsed state and layout.
</p><p>
Reorder, hide, or show hidden fields; filter and sort data; expand or collapse field values - you can roll back all these actions and then repeat them via the <b>Undo</b> and <b>Redo</b> buttons.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7266" Title="Save and Restore Layout" />
</Demo>
</DemoGroup>
<DemoGroup Key="OLAP" Title="OLAP">
<Demo Key="Browser" Title="OLAP Browser" SeoTitle="OLAP Browser - Microsoft SQL Server Analysis Services Support">
<Description>
<![CDATA[<p>
Possibly the most important <b>ASPxPivotGrid</b> functionality is OLAP support. The <b>ASPxPivotGrid</b>
supports both Microsoft Analysis Services 2000, 2005, 2008 and 2008 R2. As a data source, it can use an
ordinary server, http server or cube file.
</p><p>
To create an OLAP connection in code, you need to specify a connection string via the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_OLAPConnectionStringtopic">OLAPConnectionString</helplink> property.
At design time, you can build the connection string via the Connection String Editor available via the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_OLAPConnectionStringtopic">OLAPConnectionString</helplink> property
in the Properties grid.
</p><p>
To connect to OLAP cubes, make sure that Microsoft SQL Server 2005 Analysis Services 9.0 OLE DB Provider
is 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#ASOLEDB" target="_blank">http://www.microsoft.com/downloads/details.aspx?FamilyID=50b97994-8453-4998-8226-fa42ec403d17</a>.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7257" Title="Binding to an OLAP Server" />
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument10925" Title="OLAP Filtering Specifics" />
</Demo>
<Demo Key="MultipleTotals" Title="OLAP Multiple Totals" SeoTitle="OLAP Multiple Totals">
<Description>
<![CDATA[<p>
For each field, you can manually specify the number and type of group totals to be displayed.
This demo shows how to display the <b>Average</b>, <b>Sum</b>, <b>Maximum</b> and <b>Minimum</b>
summaries for each Category group.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotGridField_CustomTotalstopic">CustomTotals</helplink>
collection contains
<helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxPivotGridPivotGridCustomTotaltopic">PivotGridCustomTotal</helplink>
objects that represent custom totals for the field. These custom totals are displayed when the field is located within the Column
Header Area or Row Header Area and only if its
<helplink href="http://help.devexpress.com/CoreLibraries/DevExpressXtraPivotGridPivotGridFieldBase_TotalsVisibilitytopic">TotalsVisibility</helplink> property is set to
<helplink href="http://help.devexpress.com/CoreLibraries/DevExpressXtraPivotGridPivotTotalsVisibilityEnumtopic">PivotTotalsVisibility.CustomTotals</helplink>.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7310" Title="Custom Totals" />
</Demo>
<Demo Key="Drilldown" Title="OLAP Drill Down" SeoTitle="OLAP Drill Down">
<Description>
<![CDATA[<p>
This demo shows how to retrieve records that are used to calculate summaries for individual cells
when the <b>ASPxPivotGrid</b> is bound to an OLAP server.
Click a summary cell to view records from the control's underlying data source associated with this cell.
The retrieved data is displayed by the <b>ASPxGridView</b> within a popup window.
</p><p>
To obtain drill-down data, use the pivot grid's
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CreateDrillDownDataSourcetopic">CreateDrillDownDataSource</helplink> method.
You need to specify the data field index, row and column indexes to completely identify the required summary cell.
</p><p><b>Note:</b> Since drill-down data is provided by the OLAP server, the drill-down datasource can have some extra columns even if you don't have any corresponding fields in the <b>ASPxPivotGrid</b> control. The OLAP server can also return identity values.
</p>]]>
</Description>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7272" Title="Obtaining Underlying Data" />
</Demo>
<Demo Key="KPI" Title="OLAP KPI" SeoTitle="OLAP KPI">
<Description>
<![CDATA[<p>
If an OLAP cube contains KPI (key performance indicator) information,
the <b>ASPxPivotGrid</b> can automatically recognize it and display it in an appropriate format.
This demo displays a sample report for the Internet Revenue KPI from the Adventure Works sample cube.
To get a copy of this sample cube, install SQL Server Analysis Services 2005 or 2008.
</p><p>
Each KPI in an OLAP cube has corresponding measures for its value, goal, trend, status and weight.
You can obtain these measures at design time using the field's
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotGridField_FieldNametopic">FieldName</helplink> property.
If you don't know their names, call the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_GetOLAPKPIMeasurestopic">GetOLAPKPIMeasures</helplink> method.
</p><p>
Once you create a field for a KPI measure, you can place it to the pivot grid's data area and use as a standard data field.
</p><p>
Each KPI status and trend values have associated graphics that can be specified using the
<helplink href="http://help.devexpress.com/#CoreLibraries/DevExpressXtraPivotGridPivotGridFieldBase_KPIGraphictopic">PivotGridField.KPIGraphic</helplink> property.
In this demo the required images can be specified via the 'Status Graphics' and 'Trend Graphics' combo boxes.
</p>]]>
</Description>
</Demo>
<Demo Key="MultipleKPI" Title="OLAP Multiple KPI" SeoTitle="OLAP Multiple KPI">
<Description>
<![CDATA[<p>
This demo demonstrates how to obtain OLAP KPI values from the server and display them outside the <b>ASPxPivotGrid</b> control in a table.
</p><p>
In this demo, we have created an invisible
<b>ASPxPivotGrid</b> object.
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_GetOLAPKPIListtopic">GetOLAPKPIList</helplink> method
is used to obtain the list of KPIs defined in the OLAP cube. KPI values are obtained using the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_GetOLAPKPIValuetopic">GetOLAPKPIValue</helplink> method.
Finally we display these values in a table.
</p><p>
Since KPI supports graphic representation for its Status and Trend values, we replaced these values with images. OLAP supports 12
graphic sets such as shapes, smiley faces, traffic lights, etc. In this demo, we display images defined on the server. To get these
images, call the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_GetOLAPKPIServerGraphictopic">GetOLAPKPIServerGraphic</helplink> method.
Individual KPI images can be obtained via the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_GetKPIImagetopic">GetKPIImage</helplink> method.
</p><p><b>Note:</b> To use KPI images, the <b>ASPxPivotGrid</b> object must exist in the controls hierarchy on the page.
</p>]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Templates" Title="Templates">
<Demo Key="CellTemplates" Title="Cell Templates" SeoTitle="Cell Templates"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/CellTemplate.png">
<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><p>
You can replace the content of pivot grid cells via templates, as described below:
</p><ol><li>Create a class that implements the <b>ITemplate</b> interface.</li>
<li>Create an instance of this class, and assign it to the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridASPxPivotGrid_CellTemplatetopic">ASPxPivotGrid.CellTemplate</helplink> property.</li></ol><p>
The <b>ASPxPivotGrid</b> passes an <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxPivotGridPivotGridCellTemplateContainertopic">PivotGridCellTemplateContainer</helplink> object to the <b>ITemplate.InstantiateIn</b> method.
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotGridCellTemplateContainer_Valuetopic">Value</helplink> and
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotGridCellTemplateContainer_Texttopic">Text</helplink> properties
contain the current cell's value and display text, respectively.
</p><p>
When implementing the <b>InstantiateIn</b> method, you need to create a web control that will be rendered instead of the cell's content.
This control should be added to the <b>PivotGridCellTemplateContainer.Controls</b> collection.
</p><p>
To render a simple text, add a <b>LiteralControl</b> to the <b>PivotGridCellTemplateContainer.Controls</b> collection.
</p>]]>
</Description>
<HighlightedDescription>
The DevExpress ASP.NET Pivot Grid control (ASPxPivotGrid) provides you with a set of templates for specifying the layout of its elements. The Cell Template allows you to customize the template for the content displayed in cells.
</HighlightedDescription>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7279" Title="ASPxPivotGrid Elements that Support Templates" />
</Demo>
<Demo Key="FieldValueTemplates" Title="Field Value Templates" SeoTitle="Field Value Templates"
HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/FieldValueTemplate.png">
<Description>
<![CDATA[<p>
This demo shows sales vary based on Moon phases and Chinese months. Axis values are replaced with the image of the Moon and Chinese letters using templates
(<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPivotGridPivotGridField_ValueTemplatetopic">PivotGridField.ValueTemplate</helplink>).
</p><p><b>Note:</b> to view the Chinese Calendar demo, you should install Chinese language support.
</p>]]>
</Description>
<HighlightedDescription>
The DevExpress ASP.NET Pivot Grid control (ASPxPivotGrid) provides a set of templates for specifying the layout of its elements. The Field Value Template allows you to customize the template to display field values in the pivot grid.
</HighlightedDescription>
<SeeAlso Url="http://help.devexpress.com/#AspNet/CustomDocument7279" Title="ASPxPivotGrid Elements that Support Templates" />
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="XtraReports" Url="XtraReportsDemos" Title="DevExpress XtraReports" SeoTitle="DevExpress Reporting Tool for ASP.NET" NavItemTitle="Reporting" OrderIndex="1" IntegrationHighlighted="true">
<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_DemoCenter_XtraReportsAsp_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/ReportsLargeLogo.png</IntegrationImageUrl>
<IntegrationDescription>
Native integration with DevExpress WinForms and ASP.NET Controls and unparalleled design-time productivity
</IntegrationDescription>
<Intro Title="Introduction" SeoTitle="XtraReports">
<BannerTitle>
The No-Compromise Reporting Tool for ASP.NET
</BannerTitle>
<BannerText>
Native integration with DevExpress WinForms and ASP.NET Controls and unparalleled design-time productivity
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/watch?v=NVT_Df317J0</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the XtraReports Suite
</DescriptionTitle>
<Description>
<![CDATA[
This website demonstrates some of the many features and capabilities available to you when using our <b>XtraReports Suite</b>. These features include:
]]>
</Description>
</Intro>
<DemoGroup Key="ReportTypes" Title="Report Types">
<Demo Key="TableReport" Title="Table Report" SeoTitle="Banded Reports">
<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>
</Demo>
<Demo Key="MasterDetail" Title="Master-Detail Report"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/MasterDetail.png">
<Description><![CDATA[<p>This demo guides you through the simplest way of creating a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1466">master-detail report</helplink> in a single report class. To that end, 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 (a compilation of data from the <b>Northwind</b> database) will consist of three levels of information on products and their suppliers, with the product orders grouped by price.</p><p>In addition, this demo illustrates how to cache large report documents. When a page within a <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsWebReportViewertopic">ReportViewer</helplink> is loaded, a report document is still being created while its first page is already displayed. Once the document is created, it is saved to a <helplink href="http://msdn.microsoft.com/library/system.web.ui.page.session.aspx">Page.Session</helplink> object using the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsWebReportViewer_CacheReportDocumenttopic">ReportViewer.CacheReportDocument</helplink> event.</p><p>To obtain the report document afterwards (e.g., when navigating to another report page), it must be restored from a <b>Session</b> using the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsWebReportViewer_RestoreReportDocumentFromCachetopic">ReportViewer.RestoreReportDocumentFromCache</helplink> event.</p><p>Alternate ways of caching report documents are illustrated in the <a href="http://demos.devexpress.com/XtraReportsDemos/WebSpecificFeatures/ReportCaching.aspx">Report Caching</a> demo of the <b>Web-specific Features</b> section.</p>]]></Description>
<HighlightedDescription>The DevExpress Reporting Suite (XtraReports) allows you to easily create complex hierarchical master-detail reports. This demo illustrates a master-detail report with nested detail report bands that reflect table relations in the report data source.</HighlightedDescription>
</Demo>
<Demo Key="Subreports" Title="Subreports">
<Description><![CDATA[<p>This demo illustrates how to use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRSubreporttopic">XRSubreport</helplink> control to create a master-detail report. To do this, the main report iterates through data in the master table, and passes the current data values to the child report (the subreport's source report) via parameters. Note that you can unite master and detail reports into one, using the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIDetailReportBandtopic">Detail Report</helplink> bands that are demonstrated in the <helplink href="http://demos.devexpress.com/XtraReportsDemos/ReportTypes/MasterDetail.aspx">Master-Detail Report</helplink> demo.</p>]]></Description>
</Demo>
<Demo Key="MultiColumn" Title="Multi-Column Report">
<Description><![CDATA[<p>This demo illustrates a way of creating a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument2601">multi-column report</helplink> with XtraReports. In this report, labels display customer details. A report parameter is used to specify how the labels should be printed - across (in rows) or down (in columns). Note that the labels are displayed using alternating even/odd styles.</p>]]></Description>
</Demo>
<Demo Key="LabelReport" Title="Label Report">
<Description><![CDATA[<p>This demo illustrates how to create labels of any pre-defined size, to print them using a specific label printer. To accomplish this, XtraReports ships an intelligent <helplink href="http://help.devexpress.com/#InterfaceElementsWin/CustomDocument5036">Label Wizard</helplink> which contains more than <b>1500</b> predefined label types. Note that if you are not satisfied with the label created by the Wizard, you can create your own custom labels.</p>]]></Description>
</Demo>
<Demo Key="ReportMerging" Title="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. <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXtraReport_Watermarktopic">watermarks</helplink>). All this information can be correctly previewed and exported with XtraReports.</p>]]></Description>
</Demo>
<Demo Key="SideBySide" Title="Side-by-side Reports"
HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/SideBySide.png">
<Description><![CDATA[<p>XtraReports allows you to display 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 data source.</p><p>In this demo, a report is constructed by two identical subreports that are designed to display employee information. You can control which employee’s information is displayed on each report side, after which, these employee names are passed to a subreport as a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument4812">parameter</helplink> to filter its data.</p>]]></Description>
<HighlightedDescription>The DevExpress Reporting Suite (XtraReports) allows you to seamlessly print multiple reports in a single document, side-by-side.</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="DataBinding" Title="Data Binding">
<Demo Key="PivotGridAndChart" Title="PivotGrid And Chart" SeoTitle="Pivot Grid 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>
</Demo>
<Demo Key="IListDataSource" Title="IList DataSource" SeoTitle="Flexible Data Binding">
<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>
</Demo>
<Demo Key="CalculatedFields" Title="Calculated Fields" SeoTitle="Calculated Field">
<Description><![CDATA[<p>With XtraReports, you can add an unlimited number of <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument4813">calculated fields</helplink> based upon the values of data fields stored in a datasource, which is bound to a report.</p><p>This demo enables you to choose the <helplink href="http://help.devexpress.com/#WindowsForms/CustomDocument6212">expression</helplink> of a calculated field displayed in the last column of a report, and see how it is dynamically changed.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ComplexReports" Title="Real-life Reports">
<Demo Key="ProductList" Title="Product List" SeoTitle="Sample Product List Report">
<Description><![CDATA[<p>This demo illustrates how to create complex real-life reports with XtraReports. It introduces the <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1298">data grouping</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1184">filtering</helplink> capabilities, as well as the use of different report bands. This example contains the <b>Products List</b> report built from the <b>Northwind</b> database.</p>]]></Description>
</Demo>
<Demo Key="FallCatalog" Title="Fall Catalog" SeoTitle="Sample Catalog Report" IsUpdated="true">
<Description><![CDATA[<p>This demo illustrates a complex real-life report created with XtraReports and introduces such features as <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1298">data grouping</helplink>, <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument7789">sorting groups by summary</helplink> function results, generating a table of contents, etc.</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>
</Demo>
<Demo Key="Invoice" Title="Invoice" SeoTitle="Sample Invoice Report">
<Description><![CDATA[<p>This demo illustrates how to create complex real-life reports with XtraReports. It introduces the <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1298">data grouping</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1184">filtering</helplink> capabilities, as well as the use of different <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument2590">report bands</helplink>.</p><p>This example contains the <b>Invoice</b> report built from the <b>Northwind</b> database, and so this report simulates the <b>Northwind Traders</b> reporting system.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="LayoutFeatures" Title="Layout Features">
<Demo Key="ShrinkGrow" Title="Shrink and Grow">
<Description><![CDATA[<p>This demo illustrates how to create a report with a layout consisting of controls with the non-fixed height.</p><p>To create a report with a layout consisting of controls with the non-fixed height, which depends on their contents populated at runtime, use the <b>Shrink and Grow</b> feature. This feature is implemented via the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRControl_CanShrinktopic">XRControl.CanShrink</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRControl_CanGrowtopic">XRControl.CanGrow</helplink> properties (note, that growing and shrinking is possible only for the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRLabeltopic">XRLabel</helplink>, <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRTableCelltopic">XRTableCell</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRRichTexttopic">XRRichText</helplink> controls).</p><p>The report created in this example represents a list of employees from the <b>Northwind</b> database and illustrates how to make a list of items of different height using the <b>Shrink and Grow</b> feature.</p>]]></Description>
</Demo>
<Demo Key="MailMerge" Title="Mail Merge">
<Description><![CDATA[<p>This demo illustrates how to implement <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument2433">mail merge</helplink> in XtraReports.</p><p>This can be done by using embedded fields. An embedded field is the name of a data column placed in brackets ("[" and "]") in a control's text. This field is automatically recognized by the report builder, and the real data values are substituted in place of the name.</p><p>The mail merge feature allows you to embed any kind of data: text, dates, and even pictures. You can use embedded fields with the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRLabeltopic">XRLabel</helplink>, <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRRichTexttopic">XRRichText</helplink>, <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRTableCelltopic">XRTableCell</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCheckBoxtopic">XRCheckBox</helplink> controls.</p>]]></Description>
</Demo>
<Demo Key="CrossBandControls" Title="Cross-band Controls">
<Description><![CDATA[<p>This demo illustrates the use of the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCrossBandLinetopic">XRCrossBandLine</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCrossBandBoxtopic">XRCrossBandBox</helplink> controls in XtraReports. These controls are employed to draw a line or a table across the entire page.</p><p>For example, if the <b>Continue the table to the page footer</b> option is selected, these controls are used to draw a table from the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIPageHeaderBandtopic">Page Header</helplink> to <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIPageFooterBandtopic">Page Footer</helplink>.</p><p>Another way to fill an empty area on every page is to handle the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXtraReport_FillEmptySpacetopic">XtraReport.FillEmptySpace</helplink> event, and add all required controls at runtime. Choose the <b>Draw Z below the table</b> option to see this feature in action.</p>]]></Description>
</Demo>
<Demo Key="VerticalAnchoring" Title="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>
</Demo>
</DemoGroup>
<DemoGroup Key="ReportControls" Title="Report Controls" IsNew="true">
<Demo Key="Sparkline" Title="Sparkline" SeoTitle="Sparkline" IsNew="true">
<Description><![CDATA[<p>This demo shows how to use the Sparkline control in your reports.</p><p>In this demo, the Sparkline control shows a line chart representing monthly payment statistics for each customer. In this chart, blue and red markers specify the lowest and highest payments respectively.</p>]]></Description>
</Demo>
<Demo Key="RichText" Title="Rich Text" SeoTitle="Rich Text">
<Description><![CDATA[<p>This example illustrates how to use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRRichTexttopic">XRRichText</helplink> control in XtraReports. This control allows you to embed rich text (with multiple text formatting options, special fonts, and the capability to insert pictures) in a report.</p>]]></Description>
</Demo>
<Demo Key="BarCode" Title="Bar Code" SeoTitle="BarCode">
<Description><![CDATA[<p>This demo illustrates how to incorporate <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument2613">barcodes</helplink> into your report, using the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRBarCodetopic">XRBarCode</helplink> control shipped with the XtraReports suite. In this demo, you can check the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRBarCode_AutoModuletopic">AutoModule</helplink> option, to control whether or not barcodes should automatically calculate the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRBarCode_Moduletopic">Module</helplink> property value, so as to best fit their width.</p>]]></Description>
</Demo>
<Demo Key="Shapes" Title="Shapes" SeoTitle="Shape">
<Description><![CDATA[<p>This demo illustrates how to incorporate <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument2656">shapes</helplink> into your report, using the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRShapetopic">XRShape</helplink> control that is shipped with the XtraReports suite. This example creates a report with the list of all shape types available in XtraReports (rectangle, ellipse, arrow, polygon, star, cross, line, brace, bracket, etc.).</p>]]></Description>
</Demo>
<Demo Key="Charts" Title="Chart" SeoTitle="Charting in Reports"
HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Chart.png">
<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 displays <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>
<HighlightedDescription>Easily integrate charts in any banded report using the DevExpress Reporting Suite (XtraReports). This demo illustrates a Bar chart embedded in a report band.</HighlightedDescription>
</Demo>
<Demo Key="XRPivotGrid" Title="Pivot Grid" SeoTitle="Cross-tab Report"
HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/Pivot.png">
<Description><![CDATA[<p>This demo goes through the steps needed for creating a <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument5314">cross-tab report</helplink>. Begin by using 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) data source to display data in a matrix form.</p>]]></Description>
<HighlightedDescription>The DevExpress Reporting Suite (XtraReports) allows you to add a Pivot Grid to your report and bind it to the report’s data source. This demo illustrates a pivot grid embedded in a report band.</HighlightedDescription>
</Demo>
<Demo Key="CrossBand" Title="Cross-band Controls" SeoTitle="Cross Band">
<Description><![CDATA[<p>This demo illustrates how to use the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCrossBandLinetopic">XRCrossBandLine</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRCrossBandBoxtopic">XRCrossBandBox</helplink> controls in XtraReports. These controls allow you to draw a line or a rectangle across several bands and through the entire page height.</p>]]></Description>
</Demo>
<Demo Key="CustomControl" Title="Custom Control" SeoTitle="Custom Control">
<Description><![CDATA[<p>This demo illustrates how to use some of the <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument7345">report events</helplink> for custom drawing report controls. In this demo, the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRControl_BeforePrinttopic">XRControl.BeforePrint</helplink> and <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsUIXRControl_HtmlItemCreatedtopic">XRControl.HtmlItemCreated</helplink> events are handled, to replace the standard drawing procedures of an <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsUIXRControltopic">XRControl</helplink> object. This example creates a report containing a list of the 10 most heavily populated countries in the selected continent. The population value is represented graphically by a progress bar, which is drawn using the <b>Custom Draw</b> feature.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Appearance" Title="Appearance">
<Demo Key="FormattingRules" Title="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>
</Demo>
<Demo Key="OddEvenStyles" Title="Odd/Even Styles" SeoTitle="Alternating Row Style">
<Description><![CDATA[<p>This demo illustrates the implementation of <helplink href="http://help.devexpress.com/#XtraReports/CustomDocument1303">visual styles</helplink> in XtraReports.</p><p>You can create appearance styles for any of the report controls, and then apply it to the control when it's painted. Note that a style can either be always applied to a control, or applied only to odd or even data rows when the control is printed.</p><p>Look at the odd and even table rows in this report which illustrates this concept. Odd rows are painted with a <b>Light Blue</b> background, while even rows are painted with a <b>White</b> background.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="WebSpecificFeatures" Title="Web-specific Features">
<Demo Key="CustomToolbar" Title="Custom Report Toolbar">
<Description><![CDATA[<p>This demo illustrates how to create a custom <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsWebReportToolbartopic">report toolbar</helplink>, and use it instead of the default toolbar shipped with XtraReports.</p><p>While the default <b>ReportToolbar</b> is created using <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxMenuASPxMenutopic">ASPxMenu</helplink>, the custom toolbar in this demo is created using controls from the <helplink href="http://demos.devexpress.com/ASPxEditorsDemos/Default.aspx">ASPxEditors Suite</helplink>.</p><p>This is possible because all <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsWebReportViewertopic">ReportViewer</helplink> commands (e.g., <b>Print</b>, <b>GoToPage</b>, etc.) are accessible on the client side via the <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsWebScriptsASPxClientReportViewertopic">ASPxClientReportViewer</helplink> class's methods.</p>]]></Description>
</Demo>
<Demo Key="Thumbnails" Title="Thumbnails" SeoTitle="Page 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>
</Demo>
<Demo Key="ReportCaching" Title="Report Caching">
<Description><![CDATA[<p>This demo illustrates how to cache a large report document using a unique key, and then restore this document from the cache, when necessary. Unlike the <helplink href="http://demos.devexpress.com/XtraReportsDemos/ReportTypes/MasterDetail.aspx">Master-Detail Report</helplink> demo from the <b>Report Types</b> section, this demo illustrates a more complex approach to caching documents.</p><p>When this application starts, report documents for all dictionaries (<b>English.txt</b>, <b>German.txt</b> and <b>Italian.txt</b> in the <b>App_Data/Dictionaries</b> directory) are generated in a separate thread, and then saved to a file on the disk. You can find this code in the <b>Global.asax</b> and <b>CacheReportHelper.cs(vb)</b> files.</p><p>Then, when a report document needs to be obtained (e.g., when a page within a <helplink href="http://help.devexpress.com/#XtraReports/clsDevExpressXtraReportsWebReportViewertopic">ReportViewer</helplink> is initially displayed, or when navigating to another report page), it is restored from a file on the disk using the <helplink href="http://help.devexpress.com/#XtraReports/DevExpressXtraReportsWebReportViewer_RestoreReportDocumentFromCachetopic">ReportViewer.RestoreReportDocumentFromCache</helplink> event.</p>]]></Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxScheduler" Url="ASPxSchedulerDemos" Title="DevExpress ASPxScheduler" SeoTitle="ASP.NET AJAX Calendar and Scheduling Controls" IE7CompatModeRequired="true" NavItemTitle="Scheduling" OrderIndex="5">
<Keywords>appointment</Keywords>
<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_ASPxScheduler_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/Scheduler.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX Scheduler Control">
<BannerTitle>
MS Office® Style Calendar and Scheduling Controls for ASP.NET
</BannerTitle>
<BannerText>
Deliver Microsoft Outlook-inspired schedulers and calendars with built-in printing support
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://go.devexpress.com/DevExpress_AspDemos_ASPxScheduler_Video.aspx</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxScheduler Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxScheduler Suite</b>. These features include:</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Reporting" Title="Reporting">
<Demo Key="DailyStyle" Title="Daily Style" SeoTitle="Daily Style Report">
<Description>
<![CDATA[
<p>
This demo illustrates how to create a report which corresponds to the Day View of the ASPxScheduler, and mimics the Daily print style.
</p>
<p>
You can specify the reported time interval in days, the time scale, and the number of resources displayed in a column allocated for one day.
</p>
<p>
Appointments outside the visible time of day can be printed in the extra cells which are located below the scheduling area.
Check the “Print All Appointments” checkbox to accomplish this.
</p>
<p>
Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.
</p>
<p>See also <a target="_blank" href="http://www.devexpress.com/Support/Center/Issues/ViewIssue.aspx?issueid=K18278">How to print an ASPxScheduler using Reporting mechanism (step-by-step guide)</a>.
</p>
]]>
</Description>
<SourceFile>~/UserControls/ReportsDataSource.ascx</SourceFile>
<SourceFile>~/UserControls/ReportsDataSource.ascx.cs</SourceFile>
</Demo>
<Demo Key="WeeklyStyle" Title="Weekly Style" SeoTitle="Weekly Style Report">
<Description>
<![CDATA[<p>This demo illustrates how to create a report which corresponds to the Week View of the ASPxScheduler and mimics the Weekly Top to Bottom print style.</p><p>You can specify the reported time interval in days, and the number of resources displayed in a column allocated for one week. A week can be fitted into a single page to save space, or extended to several pages, providing more detailed view.</p><p>Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.</p>
<p>See also <a target="_blank" href="http://www.devexpress.com/Support/Center/Issues/ViewIssue.aspx?issueid=K18278">How to print an ASPxScheduler using Reporting mechanism (step-by-step guide)</a>.
</p>
]]>
</Description>
<SourceFile>~/UserControls/ReportsDataSource.ascx</SourceFile>
<SourceFile>~/UserControls/ReportsDataSource.ascx.cs</SourceFile>
</Demo>
<Demo Key="MonthlyStyle" Title="Monthly Style" SeoTitle="Monthly Style Report">
<Description>
<![CDATA[<p>This demo illustrates how to create a report which corresponds to the Month View of the Scheduler and mimics the Monthly print style.</p><p>You can specify the number of resources per page. A month can be fitted into a single page to save space, or extended to several pages providing more detailed view.</p><p>Other options include hiding weekends or printing them compressed, so two days occupy a single cell. Also, you can enhance the layout by placing exactly one month on a page, hiding the appointments scheduled outside the current month</p><p>Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.</p>
<p>See also <a target="_blank" href="http://www.devexpress.com/Support/Center/Issues/ViewIssue.aspx?issueid=K18278">How to print an ASPxScheduler using Reporting mechanism (step-by-step guide)</a>.
</p>
]]>
</Description>
<SourceFile>~/UserControls/ReportsDataSource.ascx</SourceFile>
<SourceFile>~/UserControls/ReportsDataSource.ascx.cs</SourceFile>
</Demo>
<Demo Key="TimelineStyle" Title="Timeline Style" SeoTitle="Timeline Style Report">
<Description>
<![CDATA[<p>This demo illustrates how to create a report which corresponds to the Timeline View of the ASPxScheduler.</p><p>You can specify the number of resources and the number of scale intervals displayed in a column.</p><p>Notice that you can imitate zooming in and out by selecting different time scales for the report, to present your data in the most effective manner.</p><p>Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.</p>
<p>See also <a target="_blank" href="http://www.devexpress.com/Support/Center/Issues/ViewIssue.aspx?issueid=K18278">How to print an ASPxScheduler using Reporting mechanism (step-by-step guide)</a>.
</p>
]]>
</Description>
<SourceFile>~/UserControls/ReportsDataSource.ascx</SourceFile>
<SourceFile>~/UserControls/ReportsDataSource.ascx.cs</SourceFile>
</Demo>
<Demo Key="GroupType" Title="Group Type" SeoTitle="Grouping in Report">
<Description><![CDATA[<p>This demo illustrates how the grouping mode affects the report layout. Any grouping results in iterations performed over the specified time interval and the collection of resources. Notice that the iteration order changes when you change the grouping type</p><p>Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.</p>]]></Description>
</Demo>
<Demo Key="ReportTemplates" Title="Report Templates" SeoTitle="Report Templates"
HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/ReportTemplates.png">
<Description>
<![CDATA[<p>This demo illustrates the use of report templates for creating reports. You can load any previously saved template and instantly preview a report filled with data retrieved from the current ASPxScheduler control.</p><p>Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.</p><p>Pay attention to Tri-fold templates, which combine two or more Scheduler views on one page using the SmartSync Printing technique.</p><p>NOTE: Scheduler reporting functionality requires the XtraReports Suite (available as a separate product or as part of DXperience subscription packages).
</p>
<p>See also <a target="_blank" href="http://www.devexpress.com/Support/Center/Issues/ViewIssue.aspx?issueid=K18278">How to print an ASPxScheduler using Reporting mechanism (step-by-step guide)</a>.
</p>
]]>
</Description>
<HighlightedDescription>
Print schedules as your needs dictate using ready-to-use report templates in the DevExpress ASP.NET Scheduler (ASPxScheduler) control. This demo illustrates the various types of report templates available in ASPxScheduler.
</HighlightedDescription>
<SourceFile>~/Reporting/ReportPreview.ascx</SourceFile>
<SourceFile>~/Reporting/ReportPreview.ascx.cs</SourceFile>
</Demo>
<Demo Key="AutoHeight" Title="Auto Height" SeoTitle="AutoHeight in Report">
<Description><![CDATA[<p>This demo illustrates the AutoHeight feature that enables the time cell to automatically adjust its size to accommodate the appointments it contains.</p><p>The CanShrink property allows you to avoid empty space wasted by cells with no appointments, while the CanGrow property can be used to resize a cell to show all appointments instead of printing the 'More items' link.</p>]]></Description>
</Demo>
<Demo Key="SmartSyncPrinting" Title="SmartSync Printing" SeoTitle="SmartSync Printing" >
<Description><![CDATA[<p>This demo illustrates the SmartSync Printing feature used to create a Tri-fold Printing Style report. If several Scheduler Report controls are placed on the same report, the Scheduler Adapter can coordinate how controls iterate through data.</p><p>This feature can be turned on via the EnableSmartSync property of the Scheduler Print Adapter (by default it is off). The SmartSyncOptions property enables you to specify the group type, i.e. the first parameter through which the controls iterate (date or resource).</p>]]></Description>
</Demo>
<Demo Key="DateFormatting" Title="Date Formatting" SeoTitle="Date Formatting in Report">
<Description><![CDATA[<p>This example demonstrates how to modify formats applied to header captions and start/end indications within appointments. The demo uses the service substitution technique for the HeaderCaptionService and the AppointmentFormatStringService of the ASPxScheduler. </p><p>Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.</p>]]></Description>
</Demo>
<Demo Key="DataValidation" Title="Data Validation" SeoTitle="Data Validation in Report">
<Description><![CDATA[<p>This demo illustrates how you can filter or re-shape data before the report is generated.</p><p>You can modify the collection of resources, set the criteria for appointments and select the days to print.</p><p>Use the ReportViewer control bar to navigate pages, print the report and export it to common formats.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="ViewTypes" Title="View Types">
<Demo Key="DayView" Title="Day View" SeoTitle="Day View">
<Description><![CDATA[<p>This demo illustrates the ASPxScheduler control's <b>Day View</b>, which provides the most detailed view of appointments for a particular day.</p><p>In this demo, you're able to navigate through dates using two <b>arrow buttons</b> at the top-left corner of the ASPxScheduler. If you want to see appointments for the current system date, click on the <b>Today</b> button.</p><p>To edit an appointment, right-click on it, and choose the <b>Open</b> option in the invoked context menu.</p><p>To create a new appointment, select a time cell (or several time cells at once), and right-click on the selected area. In this case the context menu will provide you with the ability to create appointments of different kinds, as well as navigate through the scheduler or change its time scale options.</p>]]></Description>
</Demo>
<Demo Key="WorkWeekView" Title="Work Week View" SeoTitle="Work Week View">
<Description><![CDATA[<p>This demo illustrates the ASPxScheduler control's <b>Work Week View</b>, which displays appointments for working days in a particular week.</p><p>In this demo, you're able to navigate through dates using two <b>arrow buttons</b> at the top-left corner of the ASPxScheduler. If you want to see appointments for the current system date, click on the <b>Today</b> button.</p><p>To edit an appointment, right-click on it, and choose the <b>Open</b> option in the invoked context menu.</p><p>To create a new appointment, select a time cell (or several time cells at once), and right-click on the selected area. In this case the context menu will provide you with the ability to create appointments of different kinds, as well as navigate through the scheduler or change its time scale options.</p>]]></Description>
</Demo>
<Demo Key="WeekView" Title="Week View" SeoTitle="Week View">
<Description><![CDATA[<p>This demo illustrates the ASPxScheduler control's <b>Week View</b>, which displays appointments for the specified weekly period.</p><p>In this demo, you're able to navigate through dates using two <b>arrow buttons</b> at the top-left corner of the ASPxScheduler. If you want to see appointments for the current system date, click on the <b>Today</b> button.</p><p>To edit an appointment, right-click on it, and choose the <b>Open</b> option in the invoked context menu.</p><p>To create a new appointment, select a time cell (or several time cells at once), and right-click on the selected area. In this case the context menu will provide you with the ability to create appointments of different kinds, as well as navigate through the scheduler.</p>]]></Description>
</Demo>
<Demo Key="MonthView" Title="Month View" SeoTitle="Month View">
<Description><![CDATA[<p>This demo illustrates the ASPxScheduler control's <b>Month View</b>, which is the least detailed view designed to provide your end-users with an appointments overview.</p><p>In this demo, you're able to navigate through dates using two <b>arrow buttons</b> at the top-left corner of the ASPxScheduler. If you want to see appointments for the current system date, click on the <b>Today</b> button.</p><p>To edit an appointment, right-click on it, and choose the <b>Open</b> option in the invoked context menu.</p><p>To create a new appointment, select a time cell (or several time cells at once), and right-click on the selected area. In this case the context menu will provide you with the ability to create appointments of different kinds, as well as navigate through the scheduler.</p>]]></Description>
</Demo>
<Demo Key="TimelineView" Title="Timeline View" SeoTitle="Timeline View">
<Description><![CDATA[<p>This demo illustrates the ASPxScheduler control's <b>Timeline View</b>, which displays appointments as horizontal bars along the timescales, and provides end-users with a clearer overview for scheduling purposes.</p><p>In this demo, you're able to navigate through dates using two <b>arrow buttons</b> at the top-left corner of the ASPxScheduler. If you want to see appointments for the current system date, click on the <b>Today</b> button.</p><p>To edit an appointment, right-click on it, and choose the <b>Open</b> option in the invoked context menu.</p><p>To create a new appointment, select a time cell (or several time cells at once), and right-click on the selected area. In this case the context menu will provide you with the ability to create appointments of different kinds, as well as navigate through the scheduler.</p><p>Also, in this context menu you may specify which time scales are currently taken into account, and which of them display their captions on top of the scheduler.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Grouping" Title="Grouping">
<Demo Key="GroupByDate" Title="Group by Date" SeoTitle="Group Appointments by Date">
<Description><![CDATA[<p>This demo illustrates how to group scheduled appointments by date.</p><p>In this demo, you're able to navigate through currently visible resources, as well as increase or decrease their total number. For this, use the <b>Resource Navigator</b> control (toolbar buttons with arrows, plus and minus signs, and a drop-down list of resources), which is shown on the top of the <b>ASPxScheduler</b> control.</p><p>Also, you may change the currently active view (<b>Day</b>, <b>Week</b>, <b>Month</b>, etc.) using the corresponding buttons, and see how grouping by date is applied in different views.</p>]]></Description>
</Demo>
<Demo Key="GroupByResource" Title="Group by Resource" SeoTitle="Group Appointments by Resources">
<Description><![CDATA[<p>This demo illustrates how to group scheduled appointments by resources.</p><p>In this demo, you're able to navigate through currently visible resources, as well as increase or decrease their total number. For this, use the <b>Resource Navigator</b> control (toolbar buttons with arrows, plus and minus signs, and a drop-down list of resources), which is shown on the top of the <b>ASPxScheduler</b> control.</p><p>Also, you may change the currently active view (<b>Day</b>, <b>Week</b>, <b>Month</b>, etc.) using the corresponding buttons, and see how grouping by resources is applied in different views.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="DataBinding" Title="Data Binding">
<Keywords>databinding</Keywords>
<Demo Key="BoundMode" Title="Bound Mode" SeoTitle="Binding to External Data Source">
<Description>
<![CDATA[<p>This demo illustrates how to bind the Scheduler to a MS Access data source.</p>
<p>The <b>ASPxSchedulerStorage</b> component (which provides data for the <b>ASPxScheduler</b> control) is bound to the <b>AccessDataSource</b> control using the markup. Data field mappings are specified in the markup.
</p>
<p>Since the CarScheduling data table (which contains appointemnt data) has an auto-incremented identity column, the <b>CommitIdToDataSource</b> property is set to false and the <b>AutoRetrieveId</b> property is set to true.
</p>
<p>Appointment editing is not allowed if this demo is run online. An attempt to modify an appointment results in the error message.
</p>
<p>See also <a target="_blank" href="http://help.devexpress.com/#AspNet/CustomDocument3844">How to bind an ASPxScheduler to data at design time (step-by-step guide)</a>.
</p>]]>
</Description>
</Demo>
<Demo Key="ListBoundMode" Title="List Bound Mode" SeoTitle="Binding to Appointment List Created Programmatically">
<Description>
<![CDATA[<p>This demo illustrates how to bind the Scheduler to the datasource that exposes the <b>IBindingList</b> interface.</p>
<p>The <b>ASPxScheduler</b> is bound to the <b>ObjectDataSource</b> control (which is set as an appointment data source) in the code-behind file. Data field mappings are specified in code of the Page Load event
</p>
<p>The <b>CustomEventDataSource</b> is the business object with which the <b>ObjectDataSource</b> control is performing data operations. It generates a unique identifier for a newly inserted object, so the <b>AutoRetrieveId</b> property is set to true.
</p>
<p>Appointment editing is not allowed if this demo is run online. An attempt to modify an appointment results in the error message.
</p>
<p>See also <a target="_blank" href="http://help.devexpress.com/#AspNet/CustomDocument3843">How to bind an ASPxScheduler to custom objects at runtime (step-by-step guide)</a>.
</p>]]>
</Description>
<SourceFile>~/App_Code/CustomEvents.cs</SourceFile>
</Demo>
<Demo Key="XPOBoundMode" Title="XPO Bound Mode" SeoTitle="Binding to Appointment List Created with XPO">
<Description>
<![CDATA[<p>This demo illustrates how to bind a scheduler to data represented via an <b>XPO</b> datasource.</p><p><b>XPO</b> (<b>eXpress Persistent Objects</b>) is a powerful data framework provided by <b>Developer Express Inc.</b> It gives developers the freedom to build business objects without having to deal with complexities of mapping them onto database tables.</p><p>You can learn more about <b>XPO</b> on <a href="http://www.devexpress.com/Products/NET/Libraries/XPO">its Web page</a>.</p>
<p>See also <a target="_blank" href="http://help.devexpress.com/#AspNet/CustomDocument4837">How to: Bind an ASPxScheduler to XPO via the Unit of Work (step-by-step guide)</a>.
</p>]]>
</Description>
<SourceFile>~/App_Code/XpoHelper.cs</SourceFile>
<SourceFile>~/App_Code/XPOBoundMode.cs</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="ClientSide" Title="Client Side">
<Demo Key="AppointmentsSelection" Title="Appointments Selection" SeoTitle="Client Side Appointment">
<Description><![CDATA[<p>This demo illustrates how to take advantage of the <b>ASPxScheduler</b> client-side scripting to obtain information about the selected appointment.</p><p>In this example, the <b>AppointmentSelectionChanged</b> client-side scripting event is handled. It is raised every time an end-user selects an appointment. The <b>GetAppointmentProperties</b> method is used to make an asynchronous callback for appointment property values. This method uses the list of appointment properties and the function handler as input parameters. The function will receive property values when they are delivered.</p><p>After the values are passed to the specified function, it formats and displays them.</p>]]></Description>
</Demo>
<Demo Key="ChangeActiveView" Title="Active View Change" SeoTitle="Client Side Active View Change">
<Description><![CDATA[<p>This demo illustrates how to take advantage of the <b>ASPxScheduler</b> client-side scripting when switching active views.</p><p>In this demo, you’re able to switch an active view by selecting it in the combo box. To perform this, the code uses the <b>ASPxScheduler</b> client-side API.</p><p>When a view type is selected in the drop-down list, the <b>SetActiveViewType</b> client-side method is called to change the active view.</p><p>Two client-side events are handled when the active view type is being modified. The <b>ActiveViewChanging</b> event handler asks the user for a confirmation of changing the scheduler’s view type, and if the answer is negative, cancels the operation. After the active view type is changed, the <b>ActiveViewChanged</b> event occurs. It uses the <b>GetActiveViewType</b> client-side method to indicate the currently active view for updating the combo box content.</p>]]></Description>
</Demo>
<Demo Key="AppointmentModification" Title="Appointment Form" SeoTitle="Client Side Appointment Editing Form">
<Description><![CDATA[<p>This demo illustrates how to create the appointment editing form, using client-side scripting. The technique employs the ASPxClientScheduler and ASPxClientAppointment objects.</p><p>In this example, popup menu commands are intercepted by JavaScript functions, which create the ASPxClientAppointment for the selected interval and resource or use the client Scheduler’s GetSelectedAppointmentIds and GetAppointment methods to obtain the client appointment. Then, the RefreshClientAppointmentProperties method updates the client appointment properties and invokes the scripting appointment form.</p><p>The scripting appointment editing form consists of two templates – ScriptAppointmentForm.ascx and ScriptRecurrenceForm.ascx. Their code implements the logic required to populate the form’s controls and update the appointment with new values. When the button on the form is pressed, one of the following methods of the client scheduler: UpdateAppointment, InsertAppointment or DeleteAppointment - is called. This method performs a callback using information contained in the client appointment. The appointment is then processed on the server.</p><p>Note that client-side appointment forms and client data processing may significantly reduce response times, and improve application performance and usability.</p>]]></Description>
<SourceFile>~/UserForms/ScriptAppointmentForm.ascx</SourceFile>
<SourceFile>~/UserForms/ScriptAppointmentForm.ascx.cs</SourceFile>
<SourceFile>~/UserForms/ScriptRecurrenceForm.ascx</SourceFile>
<SourceFile>~/UserForms/ScriptRecurrenceForm.ascx.cs</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Customization" Title="Customization">
<Demo Key="CustomAppointmentForm" Title="Custom Editing Form" SeoTitle="Custom Appointment Editing Form">
<Description><![CDATA[<p>This demo illustrates how to change the <b>ASPxScheduler</b> control UI (e.g. to show a custom <b>Edit Appointment</b> form).</p><p>Create a new appointment or right-click on any existing appointment and choose the <b>Open</b> item, to see a custom <b>Edit Appointment</b> form in place of the standard form.</p><p>Note that this form not only allows you to edit standard appointment properties, but also the ones obtained via custom mappings (e.g. <b>Price</b> and <b>Custom Information</b>).</p>]]></Description>
<SourceFile>~/UserForms/MyAppointmentForm.ascx</SourceFile>
<SourceFile>~/UserForms/MyAppointmentForm.ascx.cs</SourceFile>
</Demo>
<Demo Key="CustomInplaceEditor" Title="Custom In-place Editor" SeoTitle="Custom Appointment In-Place Editor">
<Description><![CDATA[<p>This demo illustrates how to replace a standard in-place editor with a custom one.</p><p>To see how this feature works, double-click on any existing appointment. Note that the custom in-place editor in this demo contains several UI elements, which are not present in the standard in-place editor.</p>]]></Description>
<SourceFile>~/UserForms/MyInplaceEditor.ascx</SourceFile>
<SourceFile>~/UserForms/MyInplaceEditor.ascx.cs</SourceFile>
</Demo>
<Demo Key="CustomAppointments" Title="Custom Appointments" SeoTitle="Custom Appointment Appearance">
<Description><![CDATA[<p>This demo illustrates how to customize appointments appearance.</p><p>In this demo, you're able to choose whether <b>start</b> and <b>end time</b> should be always displayed in appointments, and the way in which they should be displayed (either <b>text</b> or <b>image</b>).</p><p>Also, you may specify how the <b>appointment status</b> and <b>continue arrows</b> should be displayed, whether <b>recurrence</b> and <b>custom text</b> should be shown, and what <b>images</b> should be used.</p><p>Try to change all these options and see the effect for the <b>ASPxScheduler</b> control.</p>]]></Description>
<SourceFile>~/UserAppointments/HorizontalAlldayAreaAppointment.ascx</SourceFile>
<SourceFile>~/UserAppointments/HorizontalAlldayAreaAppointment.ascx.cs</SourceFile>
<SourceFile>~/UserAppointments/HorizontalAppointment.ascx</SourceFile>
<SourceFile>~/UserAppointments/HorizontalAppointment.ascx.cs</SourceFile>
<SourceFile>~/UserAppointments/HorizontalSameDayAppointment.ascx</SourceFile>
<SourceFile>~/UserAppointments/HorizontalSameDayAppointment.ascx.cs</SourceFile>
<SourceFile>~/UserAppointments/VerticalAppointment.ascx</SourceFile>
<SourceFile>~/UserAppointments/VerticalAppointment.ascx.cs</SourceFile>
</Demo>
<Demo Key="CustomMenu" Title="Custom Menu" SeoTitle="Custom Appointment Context Menu">
<Description><![CDATA[<p>This demo illustrates how to customize a popup menu - a menu, invoked by right-clicking the Scheduler control or via the smart tag.</p><p>In this example, default scheduler menu items are replaced with custom ones. Instead of commands that enable you to create a new appointment or change its label and status, the popup menu contains submenu items that allow the creation of predefined events.</p><p>To achieve this, handle the PreparePopupMenu event. It provides access to an ASPxSchedulerPopupMenu class instance, which represents the popup menu being displayed, and contains methods for modifying menu items and structure.</p>]]></Description>
</Demo>
<Demo Key="CustomToolTip" Title="Custom ToolTip" SeoTitle="Custom Tootltip"
HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/CustomToolTip.png">
<Description><![CDATA[<p>This demo illustrates how you can customize a tooltip shown when a mouse cursor hovers over a scheduler's selected area or a selected appointment. Another option is a tooltip displayed during the appointment drag operation.</p><p>In this example a SelectionChanged client-side event triggers a tooltip display over a selected time cell area. This approach illustrates the use of ASPxClientScheduler.ShowSelectionToolTip method to display a tooltip.</p><p>A custom form that implements the required capabilities is shown instead of the default tooltip. Rounded edges effect is accomplished via the built-in functionality, other tooltip characteristics can be easily adjusted as well.</p>]]></Description>
<HighlightedDescription>
Easily customize tooltips for the DevExpress ASP.NET Scheduler (ASPxScheduler), to display additional information when a mouse cursor hovers over a selected area.
</HighlightedDescription>
<SourceFile>~/UserForms/CustomAppointmentTooltip.ascx</SourceFile>
<SourceFile>~/UserForms/CustomAppointmentTooltip.ascx.cs</SourceFile>
<SourceFile>~/UserForms/CustomDragAppointmentTooltip.ascx</SourceFile>
<SourceFile>~/UserForms/CustomDragAppointmentTooltip.ascx.cs</SourceFile>
<SourceFile>~/UserForms/CustomSelectionTooltip.ascx</SourceFile>
<SourceFile>~/UserForms/CustomSelectionTooltip.ascx.cs</SourceFile>
</Demo>
</DemoGroup>
<DemoGroup Key="Sizing" Title="Sizing">
<Demo Key="FloatingSize" Title="Floating Size" SeoTitle="Automatic Width and Height">
<Description><![CDATA[<p>This demo illustrates how to show an <b>ASPxScheduler</b> control with a floating size.</p><p>To accomplish this, simply omit height and width settings for the <b>ASPxScheduler</b> control.</p>]]></Description>
</Demo>
<Demo Key="FixedSize" Title="Fixed Size" SeoTitle="Fixed Size">
<Description><![CDATA[<p>This demo illustrates how to show an <b>ASPxScheduler</b> control with a fixed size.</p><p>In this size mode, the <b>ASPxScheduler</b> control always has the same height and width, and displays scrollbars when it's necessary to show its content.</p><p>To accomplish this, specify the width setting for the <b>ASPxScheduler</b> control, and also the height of all its individual elements.</p>]]></Description>
</Demo>
<Demo Key="FixedWidth" Title="Fixed Width" SeoTitle="Fixed Width">
<Description><![CDATA[<p>This demo illustrates how to show an <b>ASPxScheduler</b> control with a fixed width.</p><p>In this size mode, the <b>ASPxScheduler</b> control always has the same width, but can be vertically resized, if the height of its elements is changed.</p><p>To accomplish this, specify the width setting and omit the height setting for the <b>ASPxScheduler</b> control.</p>]]></Description>
</Demo>
<Demo Key="FixedHeight" Title="Fixed Height" SeoTitle="Fixed Height">
<Description><![CDATA[<p>This demo illustrates how to show an <b>ASPxScheduler</b> control with a fixed height.</p><p>In this size mode, the <b>ASPxScheduler</b> control always has the same height, but can be horizontally resized, if the width of its elements is changed.</p><p>To accomplish this, omit the width setting for the <b>ASPxScheduler</b> control, but specify the height of all its individual elements.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Templates" Title="Templates">
<Demo Key="AppointmentTemplate" Title="Appointment Template" SeoTitle="Appointment Template" >
<Description><![CDATA[<p>This demo illustrates how to customize the appearance of appointments by providing custom templates (either <b>VerticalAppointmentTemplate</b> for Day and Work-Week views, or <b>HorizontalAppointmentTemplate</b> and <b>HorizontalSameDayAppointmentTemplate</b> for Week, Month and Timeline views).</p><p>In this demo, you're able to change the current view (<b>Day</b>, <b>Work Week</b>, <b>Week</b>, etc.) to see how appointments look like in different views.</p>]]></Description>
</Demo>
<Demo Key="DateHeaderTemplate" Title="Date Headers" SeoTitle="Date Header Template">
<Description><![CDATA[<p>This demo illustrates how to customize headers shown for every date in a Day View by providing a custom <b>DateHeaderTemplate</b>.</p><p>In this demo, pay your attention to date headers, which appearance is different from the default one.</p>]]></Description>
</Demo>
<Demo Key="ResourceHeaderTemplate" Title="Resource Headers" SeoTitle="Resource Header Template"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/ResourceHeaderTemplate.png" >
<Description><![CDATA[<p>This demo illustrates how to customize headers shown for every resource by providing a custom template (either <b>HorizontalResourceHeaderTemplate</b> or <b>VerticalResourceHeaderTemplate</b>).</p><p>In this demo, resource headers display car images associated with every resource.</p><p>Try to change group modes (either <b>by date</b> or <b>by resource</b>), or the current view (<b>Day</b>, <b>Work Week</b>, etc.) to see how resource headers look like.</p>]]></Description>
<HighlightedDescription>
Resource Headers display the resources assigned to different appointments in a scheduler. These headers are displayed via a custom template in the DevExpress ASP.NET Scheduler (ASPxScheduler), when appointments are grouped by resources or dates.
</HighlightedDescription>
</Demo>
<Demo Key="TimeRulerHeaderTemplate" Title="Time Ruler Header Template" SeoTitle="Time Ruler Header Template">
<Description><![CDATA[<p>This demo illustrates how to customize headers shown for every time ruler in a Day View by providing a custom <b>TimeRulerHeaderTemplate</b>.</p><p>In this demo, you're able to click on a time ruler header to invoke a drop-down list box, which allows you to change the time zone of a selected time ruler.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="OperationModes" Title="Operation Modes">
<Demo Key="CallbackMode" Title="Callback Mode" SeoTitle="Callbacks">
<Description><![CDATA[<p>This demo illustrates how <b>ASPxScheduler</b> operates when callbacks are enabled (i.e. when the <b>ASPxScheduler.EnableCallBacks</b> property is set to <b>true</b>).</p><p>In this demo, you're able to change the currently active view (Day, Work Week, Week, etc.), navigate to another date, create a new appointment or edit an existing one - to see that only the <b>ASPxScheduler</b> control is reloaded in response to these actions.</p>]]></Description>
</Demo>
<Demo Key="PostbackMode" Title="Postback Mode" SeoTitle="Postbacks, Server Round-trip Mode">
<Description><![CDATA[<p>This demo illustrates how <b>ASPxScheduler</b> operates when postbacks are enabled instead of callbacks (i.e. when the <b>ASPxScheduler.EnableCallBacks</b> property is set to <b>false</b>).</p><p>In this demo, you're able to change the currently active view (Day, Work Week, Week, etc.), navigate to another date, create a new appointment or edit an existing one - to see that the <b>entire Web page</b> is reloaded in response to these actions.</p>]]></Description>
</Demo>
<Demo Key="UpdatePanelMode" Title="Update Panel Mode" SeoTitle="Scheduler in ASP.NET AJAX UpdatePanel">
<Description><![CDATA[<p>This demo illustrates how <b>ASPxScheduler</b> operates when its callbacks are disabled, and it is placed in the AJAX <b>UpdatePanel</b>.</p><p>In this demo, you're able to change the currently active view (Day, Work Week, Week, etc.), navigate to another date, create a new appointment or edit an existing one - to see that the content of the <b>UpdatePanel</b>, which contains the <b>ASPxScheduler</b> control, is reloaded in response to these actions.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="iCalendar" Title="iCalendar">
<Demo Key="iCalendarExport" Title="iCalendar Export" SeoTitle="iCalendar Format Export">
<Description><![CDATA[<p>This example demonstrates ASPxScheduler support for the iCalendar data exchange format. It facilitates data transfer between applications that use ASPxScheduler and other applications, such as Apple iCal, Google Calendar, Microsoft Exchange Server, Microsoft Office Outlook 2007, Novell GroupWise, Windows Calendar.</p><p>In this demo, you can save appointments into an iCalendar file with the .ics extension on the client host. This example creates an iCalendarExporter class instance and calls its Export method to save data to a memory stream. Then it is written to an output stream of an HttpResponse object.</p>]]></Description>
</Demo>
<Demo Key="iCalendarImport" Title="iCalendar Import" SeoTitle="iCalendar Format Import">
<Description><![CDATA[<p>This example demonstrates ASPxScheduler support for the iCalendar data exchange format. It facilitates data transfer between applications that use ASPxScheduler and other applications, such as Apple iCal, Google Calendar, Microsoft Exchange Server, Microsoft Office Outlook 2007, Novell GroupWise, Windows Calendar.</p><p>In this demo, you can load appointments from the iCalendar file. This example loads file data into a memory stream, creates an iCalendarImporter class instance and calls its Import method to load data into a scheduler. You can check the corresponding box to clear scheduler appointments before import.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Miscellaneous" Title="Miscellaneous">
<Demo Key="DateNavigator" Title="Date Navigator" SeoTitle="Date Navigator Control">
<Description><![CDATA[<p>This demo illustrates how to use the <b>ASPxDateNavigator</b> control to select the visible date interval of the scheduler.</p><p>Change the demo's options to specify if dates with appointments are drawn in <b>bold</b>, and if the <b>Today</b> button and <b>week numbers</b> are shown in the <b>ASPxDateNavigator</b> control.</p>]]></Description>
</Demo>
<Demo Key="AdditionalControls" Title="Stand-Alone Controls" SeoTitle="Additional Scheduling Controls">
<Description><![CDATA[<p>This demo illustrates how to hide some UI elements within the <b>ASPxScheduler</b> control, and place them on a page as stand-alone elements.</p><p>In this demo, you can see the <b>ASPxViewSelector</b>, <b>ASPxDateNavigator</b>, <b>ASPxViewNavigator</b> and <b>ASPxResourceNavigator</b> controls linked to the <b>ASPxScheduler</b> control to navigate through its data.</p><p>Note that to hide the built-in <b>ASPxViewSelector</b>, <b>ASPxViewNavigator</b> and <b>ASPxResourceNavigator</b> controls, which are by default shown within the <b>ASPxScheduler</b> control, it's necessary to set the <b>ASPxScheduler.OptionsBehavior.ShowViewNavigator</b>, <b>ShowViewSelector</b> and <b>ShowViewVisibleInterval</b> properties to <b>False</b>.</p>]]></Description>
</Demo>
<Demo Key="EndUserRestrictions" Title="End-User Restrictions" SeoTitle="End-User Restrictions"
HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/EndUserRestrictions.png">
<Description><![CDATA[<p>This demo illustrates how to set end-user restrictions in the <b>ASPxScheduler</b> control.</p><p>Change the demo's options to specify what actions end-users can perform with the scheduled appointments.</p><p>Also you can switch the scheduler's view and group its data either by dates or by resources.</p>]]></Description>
<HighlightedDescription>
You can easily set end-user restrictions using the DevExpress ASP.NET Scheduler (ASPxScheduler) control. This demo shows how ASPxScheduler can prevent certain end-user actions such as creating, editing and deleting appointments.
</HighlightedDescription>
</Demo>
<Demo Key="Holidays" Title="Holidays" SeoTitle="Holiday Date Highlighting">
<Description><![CDATA[<p>This demo illustrates how to add statutory holidays to the <b>ASPxScheduler</b> control. You can find these holidays in the <b>ASPxScheduler</b> control by their dark background color. Also, these holidays are painted in the <b>Red</b> color in the <b>ASPxDateNavigator</b> control.</p><p>In this demo, first choose a location for which the <b>ASPxScheduler</b> should load holidays data from the predefined *.xml file.</p><p>Then click on the <b>Generate Appointments</b> button. After that all available holidays will be added to the <b>ASPxScheduler</b>, and all-day appointments will be generated for every holiday. </p><p>To see the nearest holiday, you may click on the <b>Next Appointment</b> or <b>Previous Appointment</b> button.</p><p>To remove all previously created appointments, click on the <b>Clear Appointments</b> button.</p>]]></Description>
</Demo>
<Demo Key="CustomWorkTime" Title="Custom Work Time" SeoTitle="Custom Work Time">
<Description><![CDATA[<p>This demo illustrates the ability to specify custom work time intervals.</p><p>To accomplish this, handle the <b>SchedulerControl.QueryWorkTime</b> event, which provides information about the current resource and date for which the work time interval is requested.</p><p>As such, it's possible to specify any work time interval you need.</p><p>To see this feature in action, toggle the <b>Custom Work Time</b> checkbox.</p>]]></Description>
</Demo>
<Demo Key="FormsVisibility" Title="Dialog Form Display Mode" SeoTitle="Dialog Form Display Mode">
<Description>
<![CDATA[<p>
This demo illustrates different modes, in which scheduler forms (e.g. <b>Appointment</b> and <b>Go to Date</b> forms) can be displayed.
</p><p>Choose one of the options at the top of this demo:</p><ul><li><b>None</b>. A form isn't displayed at all.
</li><li><b>Popup Window</b>. A form is displayed as a popup window.
</li><li><b>Fill Control Area</b>. A form fills the total area of the ASPxScheduler control.
</li></ul><p>
Then try to invoke the <b>Appointment</b> form to see how it's displayed in different modes. For this, right click on any existing appointment and choose the <b>Open</b> option in the context menu.
</p>]]>
</Description>
</Demo>
<Demo Key="TimeZones" Title="Time Zones" SeoTitle="Time Zones">
<Description><![CDATA[<p>This demo illustrates multiple <b>time rulers</b>, which are simultaneously shown in the Day View.</p><p>Each <b>time ruler</b> shows its time using a specific time zone.</p><ul><li>the first <b>time ruler</b> uses GMT (Greenwich Mean Time);</li><li>the second <b>time ruler</b> uses server time;</li><li>the third <b>time ruler</b> uses client time, which can be changed in the drop-down box at the top of this page.</li></ul>]]></Description>
</Demo>
<Demo Key="Reminders" Title="Reminders" SeoTitle="Appointment Reminders">
<Description><![CDATA[<p>This demo illustrates how easy it is to set up a reminder in the ASPxScheduler Suite. 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>]]></Description>
</Demo>
<Demo Key="ResourceSharing" Title="Resource Sharing" SeoTitle="Multi-resource Appointments">
<Description><![CDATA[<p>This example demonstrates how to share resources between appointments to create multi-resource appointments. To assign any appointment to several resources, open the Edit Appointment form and select the required resources in the drop-down list.</p><p>Note: Resource sharing is not enabled by default. To use this feature you should set the ResourceSharing property to true. Make sure that your data table structure is appropriate for resource sharing, since the mapped ResourceID field will hold xml string data.</p>]]></Description>
</Demo>
<Demo Key="CellAutoHeight" Title="Cell Auto Height" SeoTitle="Cell Auto Height">
<Description>
<![CDATA[<p>
This demo illustrates how to automatically adjust the height of time cells displayed in the ASPxScheduler control's Week, Month and Timeline views.</p><p>Choose one of the options at the top of this demo:</p>
<ul>
<li><b>None</b>. The height of time cells is set to the default value and fixed.</li>
<li><b>FitToContent</b>. The view free space is reallocated to display as more appointments as possible. If time cells are empty, their height is set to the predefined minimum value. When new appointments are added, the height of corresponding time cells is unrestrictedly stretched to fit their content.</li>
<li><b>LimitHeight</b>. Time cells grow up to fit their content until the cell height reaches the predefined maximum value. If time cells are empty, their height is set to the predefined minimum value.</li>
</ul>]]>
</Description>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxSpellChecker" Url="ASPxSpellCheckerDemos" Title="DevExpress ASPxSpellChecker" SeoTitle="ASP.NET AJAX Spell Checker" NavItemTitle="Spell Checker" OrderIndex="14">
<Keywords>spelling</Keywords>
<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_ASPxSpellChecker_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/SpellChecker.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET Spell Checker Control">
<BannerTitle>
Microsoft Office® Style Spell Checker for ASP.NET AJAX
</BannerTitle>
<BannerText>
Provides built-in Office® style error correction dialogs built entirely on DevExpress ASP.NET controls
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://go.devexpress.com/DevExpress_AspDemos_ASPxSpellChecker_Video.aspx</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxSpellChecker control
</DescriptionTitle>
<Description>
<![CDATA[
<p>
This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxSpellChecker</b> control. These features include:
</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Features" Title="Features">
<Demo Key="Standard_Editors" Title="Standard Editors" SeoTitle="Check Spelling in Standard Editors">
<Description>
<![CDATA[<p>
This demo illustrates how to force the SpellChecker to check the text currently edited in the standard TextBox control. To accomplish the spell check process, the ASPxSpellChecker provides several client side methods: Check(), CheckElementById(), CheckElement() methods. The first method is used to check the element whose ID is set for the CheckedElementID property. In this demo you're able to enter any text into the TextBox below. Note that although you may check the suggested text, it would be better to enter some misspelled words into the text box, to see how the SpellChecker works.
</p>]]>
</Description>
</Demo>
<Demo Key="DevExpress_Editors" Title="DevExpress Editors" SeoTitle="Check Spelling in DevExpress Editors"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/DevExpressEditors.png">
<Description>
<![CDATA[<p>
This demo shows that the ASPxSpellChecker can also be used to check text within the editors that ship in the ASPxGridView and Editors Library. You can use the Check(), CheckElementById(), CheckElement() methods to check the spelling.
</p>]]>
</Description>
<HighlightedDescription>
Check text within the editors that ship with the ASPxGridView and Editors Library.
</HighlightedDescription>
</Demo>
<Demo Key="Container" Title="Controls in Container" SeoTitle="Check Spelling in a Container"
HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Container.png">
<Description>
<![CDATA[<p>
This demo illustrates how to force the SpellChecker component to check the text within several controls on a control container.
For this, there are several client side methods:
SpellChecker.CheckElementsInContainer and SpellChecker.CheckElementsInContainerById. Pass either the htmlElement or its Id to the corresponding method and the spellChecker will check the content of every control parented by this container.
</p>]]>
</Description>
<HighlightedDescription>
Check text within the controls located in the control container.
</HighlightedDescription>
</Demo>
<Demo Key="ASPxGridView" Title="Content of GridView's EditForm" SeoTitle="Check Spelling in DevExpress ASP.NET Grid"
HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/EditForm.png" HighlightedTitle="Grid View Integration">
<Description>
<![CDATA[<p>
This demo illustrates how to use the SpellChecker component to check the text displayed in the ASPxGridView's editForm(shipped with the DevExpress ASPxGridView and Editors Library).
For this, we replaced the Update button in the EditForm with a LinkButton. We used the SpellChecker's CheckElementsInContainer method to check data in all EditForm editors. To start spell checking, change values in the EditForm editors and then click the Update hyperlink.
</p>]]>
</Description>
<HighlightedDescription>
Use the ASPxSpellChecker to check the text displayed in the ASPxGridView editForm (shipped with the DevExpress ASPxGridView and Editors Library).
</HighlightedDescription>
</Demo>
<Demo Key="CustomDictionary" Title="Custom Dictionary" SeoTitle="Use Custom Dictionary for Spelling Check"
HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/CustomDictionary.png">
<Description>
<![CDATA[<p>
This demo illustrates how the SpellChecker uses the words provided from the custom dictionary.
The SpellChecker internally merges standard and custom dictionaries before starting the check, so the words from both types of dictionaries are considered valid.
</p>]]>
</Description>
<HighlightedDescription>
Use a custom dictionary to recognize special words as being correct.
</HighlightedDescription>
</Demo>
</DemoGroup>
</DemoProduct>
<DemoProduct Key="ASPxTreeList" Url="ASPxTreeListDemos" Title="DevExpress ASPxTreeList" SeoTitle="ASP.NET AJAX Tree List" NavItemTitle="Tree List" OrderIndex="8">
<Keywords>hierarchy, hierarchical, nodes</Keywords>
<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_ASPxTreeList_Doc.aspx
</DocUrl>
<IntegrationImageUrl>~/Content/TreeList.png</IntegrationImageUrl>
<Intro Title="Introduction" SeoTitle="ASP.NET AJAX TreeView-Grid Hybrid Control">
<BannerTitle>
TreeView-Grid Hybrid Control for ASP.NET AJAX
</BannerTitle>
<BannerText>
Fully supports data-bound and unbound modes, on-demand child node loading, multiple built-in themes and ASP.NET Templates
</BannerText>
<BannerImageUrl>~/Content/VideoBanner.png</BannerImageUrl>
<BannerUrl>http://www.youtube.com/user/DeveloperExpress</BannerUrl>
<DescriptionTitle>
Welcome to the online demo site of the ASPxTreeList Suite
</DescriptionTitle>
<Description>
<![CDATA[
<p>This website demonstrates some of the many features and capabilities available to you when using our <b>ASPxTreeList Suite</b>. These features include:</p>
]]>
</Description>
</Intro>
<DemoGroup Key="Data" Title="Data Binding">
<Demo Key="Linear" Title="Build Tree from Plain Data">
<Description>
<![CDATA[<p>This demo shows how to bind the ASPxTreeList control to an MS Access database.
Since the ASPxTreeList 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/DevExpressWebASPxTreeListASPxTreeList_KeyFieldNametopic">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/DevExpressWebASPxTreeListASPxTreeList_ParentFieldNametopic">ParentFieldName</helplink> property. Columns bound to these fields are called Service columns.</p><p>In this demo, toggle the 'Show service columns' check box to display or hide service columns.</p>]]>
</Description>
</Demo>
<Demo Key="Hierarchical" Title="Display Hierarchical Data">
<Description>
<![CDATA[<p>The ASPxTreeList supports standard web hierarchical data sources like XmlDataSource and SiteMapDataSource.
All you have to do is to assign the required data source to the ASPxTreeList's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_DataSourcetopic">DataSource</helplink> property,
or specify its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxDataWebControl_DataSourceIDtopic">DatasourceID</helplink> property.</p><p>In this demo, the ASPxTreeList is bound to an XmlDataSource object.</p>]]>
</Description>
</Demo>
<Demo Key="Unbound" Title="Unbound Mode">
<Description>
<![CDATA[<p>The ASPxTreeList supports unbound mode. In this mode, you need to manually create a tree in code.
To create nodes, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_AppendNodetopic">AppendNode</helplink> method.
All you have to do is to specify a unique value, which identifies the node, and a parent node for it, if needed.
</p>]]>
</Description>
</Demo>
<Demo Key="VirtualMode" Title="Virtual Mode" SeoTitle="Dynamic Data Loading"
HighlightedIndex="0" HighlightedImageUrl="~/Content/DemoIcons/VirtualMode.png">
<Description>
<![CDATA[<p>In addition to bound and unbound modes, the ASPxTreeList can operate in Virtual Mode. This mode can be useful when binding to large data sets.</p><p>In 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>The ASPxTreeList fires two events that you should process in code. These include:</p><ul><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_VirtualModeCreateChildrentopic">VirtualModeCreateChildren</helplink>;</li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_VirtualModeNodeCreatingtopic">VirtualModeNodeCreating</helplink>.</li></ul><p>Within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_VirtualModeCreateChildrentopic">VirtualModeCreateChildren</helplink> event handler you should create a list of business objects that correspond to the child nodes owned by the processed node.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_VirtualModeNodeCreatingtopic">VirtualModeNodeCreating</helplink> event is raised for each node object created within the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_VirtualModeCreateChildrentopic">VirtualModeCreateChildren</helplink> event handler. This event enables you to initialize the corresponding node in a tree. Here you should specify the node's key value and cell values. If you are certain that the processed node has no child nodes, set the event parameter's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListVirtualModeNodeCreatingEventArgs_IsLeaftopic">e.IsLeaf</helplink> property to true.
</p><p>
In this demo, the ASPxTreeList control uses this data binding method to display the file/folder tree of this demo web site.
</p>]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Tree List (ASPxTreeList) control combines the power of the grid view with the hierarchical structure of the tree view. Like the grid view, the ASPxTreeList supports binding to data, editing data, sorting, and more. This demo showcases the Virtual Mode feature of ASPxTreeList, in which child nodes are generated on demand when a parent node is expanded.</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="Appearance" Title="Appearance Customization">
<Demo Key="AlternatingNode" Title="Alternating Node Style">
<Description>
<![CDATA[<p>To enhance the ASPxTreeList's readability, you can highlight alternating (even) nodes with a different style.
To do so, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListAlternatingNodeStyle_Enabledtopic">Styles.AlternatingNode.Enabled</helplink> property to true.
To override the default style and provide your own style setting, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListStyles_AlternatingNodetopic">Styles.AlternatingNode</helplink> property.</p>]]>
</Description>
</Demo>
<Demo Key="ConditionalFormatting" Title="Conditional Formatting"
HighlightedIndex="4" HighlightedImageUrl="~/Content/DemoIcons/Formatting.png">
<Description>
<![CDATA[<p>The ASPxTreeList enables you to provide custom style settings used to paint individual data cells or entire nodes depending upon the contents of the ASPxTreeList. To do this, you should handle the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_HtmlDataCellPreparedtopic">HtmlDataCellPrepared</helplink> or <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_HtmlRowPreparedtopic">HtmlRowPrepared</helplink>
events, respectively. This gives you unlimited capabilities to flag data as needed.
</p>]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Tree List (ASPxTreeList) control allows you to highlight specific elements if certain conditions are met. In this demo, ASPxTreeList changes the appearance of individual data cells based on their content.</HighlightedDescription>
</Demo>
<Demo Key="GridLinesTreeLines" Title="Grid Lines and Tree Lines">
<Description>
<![CDATA[
<p>The ASPxTreeList provides multiple options that control the visibility of:</p><ul><li>border;</li><li>tree lines;</li><li>grid lines.</li></ul><p>In this demo, toggle the 'Show tree lines' and 'Show control's border' check boxes to show/hide
tree lines and border, respectively.</p><p>The ASPxTreeList provides multiple gridline styles. It can render only horizontal or vertical lines, or both lines.
This is controlled by the ASPxTreeList's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_GridLinestopic">Settings.GridLines</helplink> property.</p><p>In this demo, use the 'Grid lines' combo box to select the required gridline style.</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Shaping" Title="Data Shaping">
<Demo Key="Sorting" Title="Sorting" SeoTitle="Data 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">SettingsBehavior.AllowSort</helplink> option to true to enable end-user sorting.</p><p>The ASPxTreeList 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">ASPxClientTreeList.SortBy</helplink> method.</p>]]>
</Description>
</Demo>
<Demo Key="Paging" Title="Data Paging" SeoTitle="Data Paging">
<Description>
<![CDATA[
<p>The ASPxTreeList content can be split across multiple pages if a built-in pager is enabled by setting the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsPager_Modetopic">SettingsPager.Mode</helplink> property to ShowPager.</p>
<p>The embedded pager control can be customized using the following settings of the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_SettingsPagertopic">SettingsPager</helplink> property:</p>
<ul>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsPager_Positiontopic">Position</helplink> property controls the pager's position within ASPxTreeList: at the control's top, bottom, or both. In this demo, use the 'Pager position' combo box to select the required location.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerButtonProperties_Visibletopic">PageSizeItemSettings.Visible</helplink> property controls page size item visibility. In this demo, use the 'Show PageSizeItem' check box to show and hide the item.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPageSizeItemSettings_Positiontopic">PageSizeItemSettings.Position</helplink> property controls where a page size item is displayed: at the pager's left or right. In this demo, use the 'PageSizeItem position' combo box to select the required location.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowDisabledButtonstopic">ShowDisabledButtons</helplink> property controls the visibility of the pager's buttons which cannot be used at the moment, and are temporarily disabled.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowNumericButtonstopic">ShowNumericButtons</helplink> property controls the visibility of the pager's numeric buttons that navigate a user to corresponding pages.</li>
<li>The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxPagerPagerSettingsEx_ShowSeparatorstopic">ShowSeparators</helplink> property specifies whether separators that separate page numbers are displayed.</li>
</ul>
<p>The ASPxTreeList provides a Client-Side API that enables you to switch between pages on the client. In this demo, click the 'Prev' and 'Next' buttons to move backward and forward, respectively.</p>
]]>
</Description>
</Demo>
<Demo Key="CustomizationWindow" Title="Customization Window" SeoTitle="Field Chooser Window">
<Description>
<![CDATA[<p>In this demo, click the 'Show customization window' button to show/hide the Customization Window.</p><p>The Customization Window displays hidden column headers.</p><ul><li>To hide a 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 ASPxTreeList's column header panel.</li></ul><p>Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_SettingsCustomizationWindowtopic">SettingsCustomizationWindow</helplink> property to specify the Customization Window's
availability, caption, position, etc.</p><p>The Customization Window can be managed on the client. The ASPxTreeList provides the following Client-Side API:</p><ul><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_ShowCustomizationWindowtopic">ShowCustomizationWindow</helplink></li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_HideCustomizationWindowtopic">HideCustomizationWindow</helplink></li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_IsCustomizationWindowVisibletopic">IsCustomizationWindowVisible</helplink></li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_CustomizationWindowCloseUptopic">CustomizationWindowCloseUp </helplink>event</li></ul><p>For detailed information, please see the ASPxTreeList's help documentation.</p>]]>
</Description>
</Demo>
<Demo Key="Preview" Title="Node Preview" SeoTitle="Outlook Style Node Preview">
<Description><![CDATA[<p>The ASPxTreeList 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 ASPxTreeList.</p><p>To enable the Preview feature, set the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowPreviewtopic">Settings.ShowPreview</helplink> property to true.</p><p>You can specify the required data source field via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_PreviewFieldNametopic">PreviewFieldName</helplink> property to bind node previews to data.</p><p>Use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListStyles_Previewtopic">Styles.Preview</helplink> property to access the style settings used to paint previews.</p><p>To provide a template used for rendering previews, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListTemplates_Previewtopic">Templates.Preview</helplink> property.</p>]]></Description>
</Demo>
<Demo Key="Templates" Title="Templates" SeoTitle="Templates">
<Description>
<![CDATA[<p>The ASPxTreeList 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 demo shows how to use data cell templates to create a custom cell layout within nodes - Card View.</p><p>The Eval function is used to define one-way (read-only) binding. The Eval 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>]]>
</Description>
</Demo>
<Demo Key="Scrolling" Title="Scrolling" SeoTitle="Scrolling" >
<Description>
<![CDATA[
<p>
The ASPxTreeList allows for vertical and horizontal scrolling to be used to represent more data within a smaller-sized control.
</p>
<p>
By default, the control height is determined by the number of rows displayed within a page, which is controlled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsPager_PageSizetopic">SettingsPager.PageSize</helplink> property. To reduce the ASPxTreeList's height, display the vertical scrollbar by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_VerticalScrollBarModetopic">Settings.VerticalScrollBarMode</helplink> property, and specify the height of the scrollable area (in pixels) via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_ScrollableHeighttopic">Settings.ScrollableHeight</helplink> property.
</p>
<p>
An ASPxTreeList's width depends on the number of visible columns by default. If there are too many columns within the control, you can enable horizontal scrolling via the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_HorizontalScrollBarModetopic">Settings.HorizontalScrollBarMode</helplink> property and define the desired scrollable area width by using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxWebControl_Widthtopic">Width</helplink> property.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_VerticalScrollBarModetopic">VerticalScrollBarMode</helplink> and <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_HorizontalScrollBarModetopic">HorizontalScrollBarMode</helplink> properties possess the following values.
</p>
<ul>
<li>
Hidden – the scrollbar is hidden.
</li>
<li>
Visible – the scrollbar is visible.
</li>
<li>
Auto – the scrollbar is automatically shown when the size of the control content exceeds the size of the control itself.
</li>
</ul>
]]>
</Description>
</Demo>
<Demo Key="ColumnResizing" Title="Resizing Columns" SeoTitle="Resizing Columns" >
<Description>
<![CDATA[
<p>
The ASPxTreeList allows end-users to easily resize columns by dragging the appropriate column header.
</p>
<p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsBehavior_ColumnResizeModetopic">SettingsBehavior.ColumnResizeMode</helplink> property specifies how the ASPxTreeList behaves when an end-user resizes a column. The available options are listed below.
</p>
<ul><li>
Control – When an end-user changes a column's width, it changes the width of the control. The width of other columns is not changed.
</li><li>
NextColumn – Changing a column's width changes the next column's width. The control's width isn't changed.
</li><li>
Disabled – End-users are not allowed to resize columns.
</li></ul>
<p>
Use the 'Column Resizing Mode' combo box to see how different property values affect resizing behavior.
</p>
]]>
</Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Editing" Title="Data Editing">
<Keywords>crud</Keywords>
<Demo Key="Modes" Title="Edit Modes"
HighlightedIndex="1" HighlightedImageUrl="~/Content/DemoIcons/Editing.png" HighlightedTitle="Data Editing">
<Description>
<![CDATA[<p>
This demo describes the ASPxTreeList's built-in edit modes.
</p><p>
The following edit modes are available within the ASPxTreeList:
</p><ul><li>Inline - Cell values are edited with the in-line edit node.
</li><li>EditForm - Cell values are edited via the Edit Form, and the node whose values are currently being edited isn't displayed.
</li><li>EditFormAndDisplayNode - Cell values are edited within the Edit Form, and the node whose values are currently being edited is displayed above the Edit Form.
</li><li>PopupEditForm - Cell values are edited within the Popup Edit Form, which may be dragged. By default the Popup Edit Form is displayed near the node whose values are currently being edited. The Popup Edit Form's position can be customized using the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_SettingsPopupEditFormtopic">SettingsPopupEditForm</helplink> property.
</li></ul><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsEditing_Modetopic">SettingsEditing.Mode</helplink> property specifies the current edit mode within the ASPxTreeList.
In this demo, use the 'Edit Mode' combo box to select the edit mode you desire.
</p><p>To allow end-users to manipulate data, add a Command column to the ASPxTreeList's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_Columnstopic">Columns</helplink> collection and specify which commands can be used by end-users.</p><p>The following server-side methods can be used to manipulate data in code:</p><ul><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_StartEdittopic">StartEdit</helplink> – switches the ASpxTreeList to edit mode.</li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_UpdateEdittopic">UpdateEdit</helplink> - saves changes and switches the ASPxTreeList to browse mode.</li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_CancelEdittopic">CancelEdit</helplink> - discards changes and switches the ASPxTreeList to browse mode.</li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_StartEditNewNodetopic">StartEditNewNode</helplink> – switches the ASPxTreeList to edit mode, and allows you to specify a new node's values. When finished, click the Update button. This creates a new node with the specified values, and appends it to the required position.</li><li><helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_DeleteNodetopic">DeleteNode</helplink> - deletes a node.</li></ul>]]>
</Description>
<HighlightedDescription>The DevExpress ASP.NET Tree List (ASPxTreeList) allows your end-users to edit data without the developer having to create edit forms at design time. This demo illustrates the various edit modes available, including inline editing, editing via an edit form, and editing via a popup edit form.</HighlightedDescription>
</Demo>
<Demo Key="EditFormTemplate" Title="Edit Form Template" SeoTitle="Template for Edit Form">
<Description>
<![CDATA[<p>
The ASPxTreeList allows you to provide any possible layout for its Edit Form using the appropriate template.
In this demo, we are using our ASPxPageControl to reduce the space occupied by the Edit Form.
</p><p>
Note, to display edit cells, within the regular Edit Form, create an <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxTreeListASPxTreeListTemplateReplacementtopic">ASPxTreeListTemplateReplacement</helplink> control and set its <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeListTemplateReplacement_ReplacementTypetopic">ReplacementType</helplink> to 'Editors'.
</p>]]>
</Description>
</Demo>
<Demo Key="Validation" Title="Validation" SeoTitle="Data Input Validation">
<Description>
<![CDATA[<p>The ASPxTreeList allows you to manually validate edited nodes and display errors for invalid fields.</p><p>
This demo illustrates how to include data validation into your next ASP.NET project.
Validation is implemented within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_NodeValidatingtopic">NodeValidating</helplink> event handler.
Invalid values are indicated via error icons.
Hovering the mouse over an icon displays a hint along with an error description.
</p><p>
The <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_HtmlRowPreparedtopic">HtmlRowPrepared</helplink> event is handled to indicate nodes with invalid data.
This event is raised for each node when the corresponding row within the table has been created.
In this sample, nodes with invalid data are painted in red.
</p>]]>
</Description>
</Demo>
<Demo Key="FileManager" Title="File Manager" SeoTitle="File and Folder Tree">
<Description><![CDATA[<p>In this demo, we’ve implemented a simple file manager using our ASPxTreeList. You can create new folders and upload files into them, rename and remove existing files and folders.</p><p>This is a complex demo, which covers multiple functional capabilities introduced by the ASPxTreeList. You’ll learn how to add and delete nodes, insert a node at a specified position, implement node dragging, provide custom sorting rules, etc.</p>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Export" Title="Exporting Data">
<Demo Key="Export" Title="Exporting to PDF, XLS, XLSX and RTF">
<Description><![CDATA[<p>The ASPxTreeList allows you to easily export data via the <helplink href="http://help.devexpress.com/#AspNet/clsDevExpressWebASPxTreeListExportASPxTreeListExportertopic">ASPxTreeListExporter</helplink> component.</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/DevExpressWebASPxTreeListExportASPxTreeListExporter_WritePdfToResponsetopic">WritePdfToResponse</helplink>)</li><li>XLS (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListExportASPxTreeListExporter_WriteXlsToResponsetopic">WriteXlsToResponse</helplink>)</li><li>XLSX (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListExportASPxTreeListExporter_WriteXlsxToResponsetopic">WriteXlsxToResponse</helplink>)</li><li>RTF (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListExportASPxTreeListExporter_WriteRtfToResponsetopic">WriteRtfToResponse</helplink>)</li></ul>]]></Description>
</Demo>
</DemoGroup>
<DemoGroup Key="Selection" Title="Node Selection">
<Demo Key="FocusedNode" Title="Focused Node">
<Description>
<![CDATA[<p>By default, our Focused Node feature is disabled. To enable it, set the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsBehavior_AllowFocusedNodetopic">SettingsBehavior.AllowFocusedNode</helplink> property to true.</p><p>The focused node's appearance can be specified using the style settings provided by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListStyles_FocusedNodetopic">Styles.FocusedNode</helplink> property.</p><p>This demo shows how to dynamically display a focused message's text outside the ASPxTreeList.</p><p>The client-side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_FocusedNodeChangedtopic">FocusedNodeChaged</helplink> event is handled to query the server to return the focused message's Text.
This value is returned by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeListCustomDataCallbackEventArgs_resulttopic">result</helplink> property within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_CustomDataCallbacktopic">CustomDataCallback</helplink> event handler, and
specifies the value for the corresponding HTML element.</p>
<p>Server-Side API</p><p>A focused node is identified by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_FocusedNodetopic">FocusedNode</helplink> property. To move node focus in code, use the node's
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxClassesASPxWebControl_Focustopic">Focus</helplink> method. In this demo, this method is called when the page is being loaded to focus an unread message.</p>
<p>Client-Side API</p><p>End-users move node focus by clicking nodes they desire. To respond to changing node focus, handle the Client-Side
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_FocusedNodeChangedtopic">FocusedNodeChanged</helplink> event.</p><p>To identify a node currently being focused, use the Client-Side <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_GetFocusedNodeKeytopic">GetFocusedNodeKey</helplink> method.
To move node focus, use the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListScriptsASPxClientTreeList_SetFocusedNodeKeytopic">SetFocusedNodeKey</helplink> method.</p><p>To learn more, please see the ASPxTreeList's help documentation.</p>]]>
</Description>
</Demo>
<Demo Key="Multiple" Title="Multiple Node Selection" HighlightedIndex="2" HighlightedImageUrl="~/Content/DemoIcons/Selection.png">
<Description>
<![CDATA[<p>To allow end-users to select nodes, enable the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Enabledtopic">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 ASPxTreeList, set the
<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_AllowSelectAlltopic">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 ASPxTreeList supports recursive node selection, which is enabled by the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Recursivetopic">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.
The number of selected nodes is displayed below the ASPxTreeList.</p>]]>
</Description>
<HighlightedDescription>The Multiple Node Selection feature displays check boxes that allow end-users to select multiple nodes in the DevExpress ASP.NET Tree List (ASPxTreeList). This demo illustrates how you can allow a user to select all nodes, child nodes only, parent nodes only, or nodes above a particular level in the hierarchy.</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="Summary" Title="Data Summary">
<Demo Key="BuiltIn" Title="Built-in Functions" SeoTitle="Automatic Summary Calculation">
<Description>
<![CDATA[<p>The ASPxTreeList 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 ASPxTreeList provides five built-in aggregate
functions (count, max, min, etc.).</p><p>Summaries can be displayed within Footer or Group Footer cells. The ASPxTreeList 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">Settings.ShowFooter</helplink> property is set to true.
Group Footers are displayed if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettings_ShowGroupFootertopic">Settings.ShowGroupFooter </helplink>option is enabled.</p><p>The ASPxTreeList stores its summary items within the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_Summarytopic">Summary</helplink> collection.</p>]]>
</Description>
</Demo>
<Demo Key="Custom" Title="Manual Summary Calculation" SeoTitle="Manual Summary Calculation"
HighlightedIndex="3" HighlightedImageUrl="~/Content/DemoIcons/Summary.png">
<Description>
<![CDATA[<p>The ASPxTreeList enables you to manually implement custom aggregate functions or calculate
summary values using a custom algorithm. Custom summaries allow you the following:</p><ul><li>Calculate summaries against nodes that meet specific criteria</li><li>Involve multiple data fields in calculations</li><li>Implement complex summary functions</li></ul><p>To manually calculate summaries, you should set the summary item's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSummaryItem_SummaryTypetopic">SummaryType</helplink> property to Custom
and handle the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_CustomSummaryCalculatetopic">CustomSummaryCalculate</helplink> event.</p><p>In this demo, we sum the budget of selected departments.</p>]]>
</Description>
<HighlightedDescription>Easily create custom summaries in the DevExpress ASP.NET Tree List (ASPxTreeList). The CustomSummaryCaluculate event enables you to manually calculate summary values using a custom algorithm. This demo illustrates how to calculate the sum of the values of selected nodes in a tree.</HighlightedDescription>
</Demo>
</DemoGroup>
<DemoGroup Key="Accessibility" Title="Accessibility">
<Demo Key="KeyboardSupport" Title="Keyboard Support" SeoTitle="Keyboard Navigation">
<Keywords>wcga, 508, section</Keywords>
<Description>
<![CDATA[<p>With the provided keyboard support, the ASPxTreeList's primary navigation operations (such as accessing the control within the form, moving focus through its nodes, node selection and expanding/collapsing, paging) can be quickly and effectively performed, using a keyboard as an alternative to a pointing device. In addition, enabling keyboard support within the ASPxTreeList helps you more easily create web pages that conform to accessibility guidelines.</p><p>To enable keyboard navigation, set the ASPxTreeList's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_KeyboardSupporttopic">KeyboardSupport</helplink> property to true. This activates the following features:</p><ul><li>Access Key - The ASPxTreeList control can be easily accessed (focused) by using a user-defined keyboard shortcut. This shortcut is composed by combining the preset CTRL+SHIFT combination with a single character string specified via the AccessKey property. For example, setting the access key of a TreeList control to the string "T" indicates that an end-user can navigate to the grid by pressing CTRL+SHIFT+T.
</li><li>Focused Node - The Focused Node feature is automatically activated, regardless of the corresponding feature property setting (<helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsBehavior_AllowFocusedNodetopic">SettingsBehavior.AllowFocusedNode</helplink>). Focus can be moved between nodes by using the UP and DOWN ARROW keys. The LEFT and RIGHT ARROW keys can also be used to move node focus, but these keys initially try to collapse/expand a node and, if it's impossible, only then do they move focus. Moving focus from the ultimate (first or last) node within a page changes the page within the ASPxTreeList, if possible.
</li><li>Node Selection - The SPACE key can be used to mark a focused node as selected/unselected. This works if selection can be applied to a node - that is, if the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Enabledtopic">SettingsSelection.Enabled</helplink> property is enabled.
If the <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListTreeListSettingsSelection_Recursivetopic">SettingsSelection.Recursive</helplink> property is disabled,
multiple nodes can be easily selected, by moving row focus using the ARROW keys (UP/DOWN or LEFT/RIGHT) while holding down the SHIFT key.
</li><li>Expanding/Collapsing Nodes - The PLUS and MINUS keys can be respectively used to expand and collapse nodes. In addition, node collapsing and expanding can be performed using the LEFT and RIGHT ARROW keys.
</li><li>Paging - The SHIFT+PAGE UP and SHIFT+PAGE DOWN key combinations can be used to go to the next/previous grid page.
</li></ul>]]>
</Description>
</Demo>
<Demo Key="RightToLeft" Title="Right to Left">
<Keywords>rtl, Accessibility, arabic, Hebrew, Samaritan, Thaana, Syriac, Phoenician</Keywords>
<Description>
<![CDATA[
<p>
The ASPxTreeList provides support for right-to-left languages like Arabic or Hebrew. So, you can completely on the ASPxTreeList when creating international web pages that include support for right-to-left reading order, and mirroring of UI elements.
</p>
<p>
To switch the ASPxTreeList to right-to-left representation, just enable a single property - <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_RightToLefttopic">RightToLeft</helplink>. When this property is on, text flows right-to-left and the layout of the most control UI elements is reversed.
</p>
<p>
If you need to apply right-to-left representation to all DevExpress web controls within your web application, you can enable our specifically provided configuration option within the web.config file, instead of switching each control's <helplink href="http://help.devexpress.com/#AspNet/DevExpressWebASPxTreeListASPxTreeList_RightToLefttopic">RightToLeft</helplink> property. This is the <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8843">rightToLeft</helplink> option, that can be accessed within the settings group of our <helplink href="http://help.devexpress.com/#AspNet/CustomDocument8007">devExpress</helplink> section.
</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, ies</Postfixes>
</Exclusions>
</Search>
</Demos>