dev express end-user documentation (asp.net)

138
1 Contents © 2011 DevExpress Inc. 1 Table of Contents Interface Elements for Web (Home Page) ................................................................................................................................................. 5 ........................................................................................................................................................................................... 6 Work with Dropdown Editors ........................................................................................................................................................................................... 7 Editing Values, Selecting Text and Using the Clipboard ........................................................................................................................................................................................... 10 Editor Context Menu ........................................................................................................................................................................................... 11 Masked Input ........................................................................................................................................................................................... 12 Captcha ........................................................................................................................................................................................... 13 Validation Summary ................................................................................................................................................. 14 File Manager ........................................................................................................................................................................................... 15 Files and Folders Editing ........................................................................................................................................................................................... 16 Filtering Files ........................................................................................................................................................................................... 17 Uploading Files ................................................................................................................................................. 18 File Upload Control ........................................................................................................................................................................................... 19 Uploading a Single File ........................................................................................................................................................................................... 20 Uploading Multiple Files ........................................................................................................................................................................................... 21 Canceling File Uploading ................................................................................................................................................. 22 Filter Editor ........................................................................................................................................................................................... 23 Create New Conditions in Filter Editor ........................................................................................................................................................................................... 24 Change Conditions in Filter Editor ........................................................................................................................................................................................... 26 Delete Conditions in Filter Editor ................................................................................................................................................. 27 Grid ........................................................................................................................................................................................... 29 Data Editing .................................................................................................................................................................................. 29 Add and Delete Grid Rows .................................................................................................................................................................................. 30 Save or Discard Changes when Editing Grid Rows .................................................................................................................................................................................. 31 Switch a Grid to Edit Mode ........................................................................................................................................................................................... 32 Data Presentation .................................................................................................................................................................................. 32 Expand and Collapse Group Rows in Grids .................................................................................................................................................................................. 33 Filter Grid Data .................................................................................................................................................................................. 36 Group Grid Rows .................................................................................................................................................................................. 37 Sort Grid Rows ........................................................................................................................................................................................... 38 Grid Lookup .................................................................................................................................................................................. 38 Grid Lookup .................................................................................................................................................................................. 39 Filter Grid Lookup Data .................................................................................................................................................................................. 40 Select Grid Lookup Rows ........................................................................................................................................................................................... 41 Layout Customization .................................................................................................................................................................................. 41 Hide and Display Grid Columns .................................................................................................................................................................................. 42 Reorder Grid Columns ........................................................................................................................................................................................... 43 Selection and Navigation .................................................................................................................................................................................. 43 Page Navigation in Grids .................................................................................................................................................................................. 44 Select Grid Rows .................................................................................................................................................................................. 45 Keyboard Navigation ................................................................................................................................................. 46 HTML Editor ........................................................................................................................................................................................... 48 HTML Editor UI ........................................................................................................................................................................................... 49 Formatting Text .................................................................................................................................................................................. 49 Make Text Bold in HTML Editor .................................................................................................................................................................................. 50 Apply Italic Formatting in HTML Editor .................................................................................................................................................................................. 51 Underline Text in HTML Editor

Upload: wiwat-tanwongwan

Post on 26-Mar-2015

1.682 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: Dev Express End-User Documentation (ASP.net)

1Contents

© 2011 DevExpress Inc. 1

Table of ContentsInterface Elements for Web (Home Page)

................................................................................................................................................. 5Editors

........................................................................................................................................................................................... 6Work w ith Dropdown Editors

........................................................................................................................................................................................... 7Editing Values, Selecting Text and Using the Clipboard

........................................................................................................................................................................................... 10Editor Context Menu

........................................................................................................................................................................................... 11Masked Input

........................................................................................................................................................................................... 12Captcha

........................................................................................................................................................................................... 13Validation Summary

................................................................................................................................................. 14File Manager

........................................................................................................................................................................................... 15Files and Folders Editing

........................................................................................................................................................................................... 16Filtering Files

........................................................................................................................................................................................... 17Uploading Files

................................................................................................................................................. 18File Upload Control

........................................................................................................................................................................................... 19Uploading a Single File

........................................................................................................................................................................................... 20Uploading Multiple Files

........................................................................................................................................................................................... 21Canceling File Uploading

................................................................................................................................................. 22Filter Editor

........................................................................................................................................................................................... 23Create New Conditions in Filter Editor

........................................................................................................................................................................................... 24Change Conditions in Filter Editor

........................................................................................................................................................................................... 26Delete Conditions in Filter Editor

................................................................................................................................................. 27Grid

........................................................................................................................................................................................... 29Data Editing

.................................................................................................................................................................................. 29Add and Delete Grid Rows

.................................................................................................................................................................................. 30Save or Discard Changes when Editing Grid Rows

.................................................................................................................................................................................. 31Switch a Grid to Edit Mode

........................................................................................................................................................................................... 32Data Presentation

.................................................................................................................................................................................. 32Expand and Collapse Group Rows in Grids

.................................................................................................................................................................................. 33Filter Grid Data

.................................................................................................................................................................................. 36Group Grid Rows

.................................................................................................................................................................................. 37Sort Grid Rows

........................................................................................................................................................................................... 38Grid Lookup

.................................................................................................................................................................................. 38Grid Lookup

.................................................................................................................................................................................. 39Filter Grid Lookup Data

.................................................................................................................................................................................. 40Select Grid Lookup Rows

........................................................................................................................................................................................... 41Layout Customization

.................................................................................................................................................................................. 41Hide and Display Grid Columns

.................................................................................................................................................................................. 42Reorder Grid Columns

........................................................................................................................................................................................... 43Selection and Navigation

.................................................................................................................................................................................. 43Page Navigation in Grids

.................................................................................................................................................................................. 44Select Grid Rows

.................................................................................................................................................................................. 45Keyboard Navigation

................................................................................................................................................. 46HTML Editor

........................................................................................................................................................................................... 48HTML Editor UI

........................................................................................................................................................................................... 49Formatting Text

.................................................................................................................................................................................. 49Make Text Bold in HTML Editor

.................................................................................................................................................................................. 50Apply Italic Formatting in HTML Editor

.................................................................................................................................................................................. 51Underline Text in HTML Editor

Page 2: Dev Express End-User Documentation (ASP.net)

2Contents

© 2011 DevExpress Inc. 2

.................................................................................................................................................................................. 52Apply Strikethrough Formatting in HTML Editor

.................................................................................................................................................................................. 53Change Foreground Color in HTML Editor

.................................................................................................................................................................................. 54Change Background Color in HTML Editor

.................................................................................................................................................................................. 55Change Font Type in HTML Editor

.................................................................................................................................................................................. 56Change Font Size in HTML Editor

.................................................................................................................................................................................. 57Make Text Superscript or Subscript in HTML Editor

.................................................................................................................................................................................. 58Remove Formatting in HTML Editor

........................................................................................................................................................................................... 59Formatting Paragraphs

.................................................................................................................................................................................. 59Text Indentation in HTML Editor

.................................................................................................................................................................................. 60Text Alignment in HTML Editor

.................................................................................................................................................................................. 61Paragraph Styling in HTML Editor

.................................................................................................................................................................................. 62Ordered and Bullet Lists in HTML Editor

........................................................................................................................................................................................... 63Working with Hyperlinks

.................................................................................................................................................................................. 63Create a Hyperlink in HTML Editor

.................................................................................................................................................................................. 66Modify a Hyperlink in HTML Editor

.................................................................................................................................................................................. 67Remove a Hyperlink in HTML Editor

........................................................................................................................................................................................... 68Working with Images

.................................................................................................................................................................................. 68Insert an Image in HTML Editor

.................................................................................................................................................................................. 70Modify an Image's Settings in HTML Editor

........................................................................................................................................................................................... 71Working with Tables

.................................................................................................................................................................................. 71Create a Table in HTML Editor

.................................................................................................................................................................................. 73Modify a Table in HTML Editor

.................................................................................................................................................................................. 74Remove a Table in HTML Editor

........................................................................................................................................................................................... 75Miscellaneous Operations

.................................................................................................................................................................................. 75Repeat and Undo Actions in HTML Editor

.................................................................................................................................................................................. 76Printing HTML Editor Content

.................................................................................................................................................................................. 77Clipboard Operations in HTML Editor

.................................................................................................................................................................................. 78Check Spelling in HTML Editor

.................................................................................................................................................................................. 79Sizing and Full-Screen Mode

................................................................................................................................................. 80Menu

........................................................................................................................................................................................... 81Menu Scrolling

................................................................................................................................................. 82Pivot Table

........................................................................................................................................................................................... 83Data Presentation

.................................................................................................................................................................................. 83Sort Data in Pivot Tables

.................................................................................................................................................................................. 84Filter Data in Pivot Tables

........................................................................................................................................................................................... 85Layout Customization

.................................................................................................................................................................................. 85Expand and Collapse Groups in Pivot Tables

.................................................................................................................................................................................. 87Hide and Display Pivot Table Fields

.................................................................................................................................................................................. 89Reorder Pivot Table Fields

................................................................................................................................................. 90Report Viewer

........................................................................................................................................................................................... 91Navigation

.................................................................................................................................................................................. 91Navigate to a Specific Report Page

.................................................................................................................................................................................. 92Navigate using Report Bookmarks

.................................................................................................................................................................................. 93Search for a Specific Text w ithin a Report

........................................................................................................................................................................................... 94Printing

.................................................................................................................................................................................. 94Print a Report in Internet Explorer Using the Acrobat Reader Plug-In

.................................................................................................................................................................................. 95I Have Acrobat Reader Installed, But Can't Print Reports Using It

.................................................................................................................................................................................. 96Print Reports in Browsers Other than Internet Explorer

........................................................................................................................................................................................... 97Exporting

.................................................................................................................................................................................. 97Export a Report and Save It to the Disk

.................................................................................................................................................................................. 98Export a Report and Show It in a New Window

................................................................................................................................................. 99Scheduler

........................................................................................................................................................................................... 100Appointment Management

.................................................................................................................................................................................. 100Create an Appointment

Page 3: Dev Express End-User Documentation (ASP.net)

3Contents

© 2011 DevExpress Inc. 3

.................................................................................................................................................................................. 102Edit an Appointment

.................................................................................................................................................................................. 107Manage Reminders

.................................................................................................................................................................................. 109Make a Series of Recurring Appointments

.................................................................................................................................................................................. 112Delete an Appointment

.................................................................................................................................................................................. 113Restrictions for Operations with Appointments

........................................................................................................................................................................................... 114Layout Customization

.................................................................................................................................................................................. 114Switch Scheduler Views

.................................................................................................................................................................................. 116Scheduler Grouping

........................................................................................................................................................................................... 117Selection and Navigation

.................................................................................................................................................................................. 117Navigate Time Cells and Dates in the Scheduler

.................................................................................................................................................................................. 120Navigate Scheduler Resources

.................................................................................................................................................................................. 121Scheduler Navigation Buttons

.................................................................................................................................................................................. 122Scheduler 'More' Buttons

................................................................................................................................................. 123Splitter

........................................................................................................................................................................................... 124Expand or Collapse a Pane

........................................................................................................................................................................................... 125Resizing a Pane

................................................................................................................................................. 126Tab Control

........................................................................................................................................................................................... 127Tab Scrolling

................................................................................................................................................. 128Tree List

........................................................................................................................................................................................... 129Data Editing

........................................................................................................................................................................................... 130Data Presentation

.................................................................................................................................................................................. 130Expand and Collapse Tree List Nodes

.................................................................................................................................................................................. 131Sort Nodes in Tree List

........................................................................................................................................................................................... 132Layout and Navigation

.................................................................................................................................................................................. 132Selection and Navigation in Tree List

.................................................................................................................................................................................. 133Reorder Columns in Tree Lists

.................................................................................................................................................................................. 134Reorder Tree List Nodes

.................................................................................................................................................................................. 135Keyboard Navigation

................................................................................................................................................. 136Tree View

........................................................................................................................................................................................... 137Expand and Collapse Tree View Nodes

........................................................................................................................................................................................... 138Tree View Nodes Checking

Page 4: Dev Express End-User Documentation (ASP.net)

4

© 2011 DevExpress Inc. 4

Interface Elements for Web

This documentaion provides information on individual User Interface Elements such as grids, navigation panes,data editors, etc. Each element can provide context menus, allow numerous mouse operations and support anumber of keyboard shortcuts.

To obtain information about these features, browse through the table of contents to locate the element you areinterested in.

Editors

File Manager

File Upload Control

Filter Editor

Grid

HTML Editor

Pivot Table

Report Viewer

Scheduler

Splitter

Tree List

Tree View

Page 5: Dev Express End-User Documentation (ASP.net)

Editors 5

© 2011 DevExpress Inc. 5

Editors

This section describes the capabilities provided by the editor controls:

Work with Dropdown Editors

Editing Values, Selecting Text and Using the Clipboard

Editor Context Menu

Masked Input

Captcha

Validation Summary

Page 6: Dev Express End-User Documentation (ASP.net)

Editors 6

© 2011 DevExpress Inc. 6

Work with Dropdown Editors

Open Editor's Dropdown

Focus the editor and press ALT+DOWN ARROW or ALT+UP ARROW .

Click the editor's dropdown button.

Close Editor's Dropdown

For all editors providing a dropdown, you can close the dropdown by pressing ALT+DOWN ARROW, ALT+UPARROW or ESC.

Dropdowns displaying lists of items can be closed by clicking on an item with a mouse, or by selecting an item witha keyboard and pressing ENTER.

Filter Editor's Dropdown Content

To filter data within a dropdown, type the filter condition within an editor. Note that the filter is used after theminimum number of characters has been typed within an editor.

Page 7: Dev Express End-User Documentation (ASP.net)

Editors 7

© 2011 DevExpress Inc. 7

Editing Values, Selecting Text and Using the Clipboard

Select and Deselect Editor's Contents

To select all the text within an editor, invoke the control's Editor Context Menu and choose Select All. To select apart of the editor's content, click on the position where the selection should start, drag the pointer to the endposition, and then release the mouse button.

Additionally, the following keyboard shortcuts allow you to manage selections.

Shortcut Description

CTRL+A Select all the text within an editor.

SHIFT+ARROW Extends or shrinks the selection by one character.

CTRL+SHIFT+ARROW Extends or shrinks the selection by one word.

Clipboard Operations

Clipboard operations are represented by copying, cutting and pasting operations.

To copy selected text into the clipboard, do the following.

Press CTRL+C or CTRL+INSERT.

Open the Editor Context Menu and select Copy.

To paste text from the clipboard, do the following.

Press CTRL+V or SHIFT+INSERT.

Open the Editor Context Menu and select Paste.

To cut text from an editor into the clipboard, do the following.

Press CTRL+X or SHIFT+DELETE.

Open the Editor Context Menu and select Cut.

Delete Selected Text

To delete the selected text within an editor, do one of the following:

Press DELETE or BACKSPACE.

Open the Editor Context Menu and select Delete.

Undo and Redo

To undo the last text editing operation, do one of the following:

Press CTRL+Z.

Open the Editor Context Menu and select Undo.

To redo a canceled operation, press CTRL+Y.

Change Date Values within a Edit Box

To change the date value within the edit box, click the required part of the date value (month, day, year, etc.) andpress the Increment or Decrement button. Alternatively, you can use the Up and Down Arrows.

Page 8: Dev Express End-User Documentation (ASP.net)

Editors 8

© 2011 DevExpress Inc. 8

Change Date Values within a Calendar

Click a date to set a new edit value.

To change the year value use the and calendar buttons. Also, you can click the current date withinthe control header and specify the year within the opened fast navigation panel.

To change the month value use the and calendar buttons. Also, you can click the current date withinthe control header and specify the month within the opened fast navigation panel.

Page 9: Dev Express End-User Documentation (ASP.net)

Editors 9

© 2011 DevExpress Inc. 9

The arrow keys can also be used for navigating within the calendar.

Change Numeric Values

To increment a value, press the UP ARROW or increment button. To decrement the value, press the DOWN ARROWor decrement button. Or, use the mouse wheel.

Change Values of Editors That Display Items in the Dropdown

To select the previous or the next value, press the UP or DOWN ARROW. Or, use the mouse wheel.

Page 10: Dev Express End-User Documentation (ASP.net)

Editors 10

© 2011 DevExpress Inc. 10

Editor Context Menu

Text editors support a context menu. To open the menu, right-click an editor.

Page 11: Dev Express End-User Documentation (ASP.net)

Editors 11

© 2011 DevExpress Inc. 11

Masked Input

Masked input functionality is available for the text and date editors. It allows end users to enter the string in thespecified format. For instance, a text editor shall accept date/time values in the 24-hour format only, or onlynumeric values, or a phone number that only allows an end-user to enter digits into automatically constructedplaceholders.

Note

The keyboard and mouse wheel can be used to incrementally modify portions of the edit value.

Page 12: Dev Express End-User Documentation (ASP.net)

Editors 12

© 2011 DevExpress Inc. 12

Captcha

Captcha is used to distinguish human input from machine input.

Enter the code displayed within the challenge image into the text box.

If the code seems unreadable, refresh it clicking the refresh button.

Page 13: Dev Express End-User Documentation (ASP.net)

Editors 13

© 2011 DevExpress Inc. 13

Validation Summary

Editors validate input values. If a value doesn't pass validation, the explanatory notes are displayed in red. Ifallowed by the application vendor, the notes can serve as links. Clicking a link in this case, moves focus to thecorresponding invalid editor.

Page 14: Dev Express End-User Documentation (ASP.net)

File Manager 14

© 2011 DevExpress Inc. 14

File Manager

This section describes the capabilities provided by the File Manager.

Files and Folders Editing

Filtering Files

Uploading Files

Page 15: Dev Express End-User Documentation (ASP.net)

File Manager 15

© 2011 DevExpress Inc. 15

Files and Folders Editing

Create a Folder

To create a new folder:

Select the folder in which you want to create child folder.

Click on the Create button ( ) or press F7.

Type the new folder's name.

Rename Files and Folders

To rename a file or folder:

Select a file/folder you want to rename.

Click on the Rename button ( ) or press F2.

Type new folder name.

Move Files and Folders

To move a file or folder:

Select a file/folder you want to move.

Click on the Move button ( ) or press F6.

Chose a folder you want to move the file/folder into and click Ok.

Delete Files and Folders

To delete a file or folder:

Select a file/folder you want to delete.

Click on the Delete button ( ) or press the Delete key.

Page 16: Dev Express End-User Documentation (ASP.net)

File Manager 16

© 2011 DevExpress Inc. 16

Filtering Files

Filtering allows only files that meet the specified criteria be displayed.

To filter files or change the filter conditions type text within the Filter Box.

To remove a filter, clear the text from the Filter Box.

Page 17: Dev Express End-User Documentation (ASP.net)

File Manager 17

© 2011 DevExpress Inc. 17

Uploading Files

To upload files by a file manager do the following.

Click on the Browse button.

Select a file you want to upload. Its name is shown in an editor.

Select a folder into which you want to upload the file.

Click on the Upload button.

Page 18: Dev Express End-User Documentation (ASP.net)

File Upload Control 18

© 2011 DevExpress Inc. 18

File Upload Control

This section describes the capabilities provided by the File Upload element.

Uploading a Single File

Uploading Multiple Files

Canceling File Uploading

Page 19: Dev Express End-User Documentation (ASP.net)

File Upload Control 19

© 2011 DevExpress Inc. 19

Uploading a Single File

To select a file, click the button and select a file within the invoked Choose File dialog. As a result,the selected file's path is placed into the edit box.

Then, click Upload to upload the selected file to the server.

Page 20: Dev Express End-User Documentation (ASP.net)

File Upload Control 20

© 2011 DevExpress Inc. 20

Uploading Multiple Files

Sometimes uploading multiple files is allowed. In this instance, the File Upload element will look like this.

Add a File

Use the Add button to add a file input to the upload control.

Remove a File Input

Use the Remove button to delete a file input from the upload control.

Then, click Upload to upload the selected files to the server.

Page 21: Dev Express End-User Documentation (ASP.net)

File Upload Control 21

© 2011 DevExpress Inc. 21

Canceling File Uploading

File uploading can be cancelled by using the specific Cancel button.

Page 22: Dev Express End-User Documentation (ASP.net)

Filter Editor 22

© 2011 DevExpress Inc. 22

Filter Editor

The web Filter Editor is used to edit filter criteria. To create and customize filter criteria, use the and buttons,embedded into the control and context menus supported by the editor's elements:

Remarks

A filter condition group is a set of conditions combined by the same logical operator. The following filter expressioncontains two groups combined by the logical operator. In the Filter Editor it's represented as follows:

In this section you will learn how to add, change and delete filter conditions:

Create New Conditions in Filter Editor

Change Conditions in Filter Editor

Delete Conditions in Filter Editor

Page 23: Dev Express End-User Documentation (ASP.net)

Filter Editor 23

© 2011 DevExpress Inc. 23

Create New Conditions in Filter Editor

To add a condition to a logical group, do one of the following:

Click the button for the group.

Click the group's logical operator and select Add Condition.

To add a group of conditions to another group, do one of the following:

Click the group's logical operator and select Add Group.

Page 24: Dev Express End-User Documentation (ASP.net)

Filter Editor 24

© 2011 DevExpress Inc. 24

Change Conditions in Filter Editor

You can modify the manner that filter conditions change the columns in a filter.

Change a Column in a Filter Condition

To change a condition's column, invoke the column list by clicking the current column. Then, choose the requiredcolumn from the list that will be invoked.

Change an Operator in a Filter Condition

To change a condition's operator, invoke the operator list by clicking the condition's current operator. Then,choose the required operator from the list that will be invoked.

Edit a Condition's Value

To edit a condition's value, click the operand value and type text. To activate the operand value's edit box withoutchanging the value, click the value. To close the active edit box, press ENTER. To discard changes to the value andclose the active edit box, press ESC.

Page 25: Dev Express End-User Documentation (ASP.net)

Filter Editor 25

© 2011 DevExpress Inc. 25

Page 26: Dev Express End-User Documentation (ASP.net)

Filter Editor 26

© 2011 DevExpress Inc. 26

Delete Conditions in Filter Editor

To delete a condition, click the button. To delete a group, click the logical operator and select Remove.

Page 27: Dev Express End-User Documentation (ASP.net)

Grid 27

© 2011 DevExpress Inc. 27

Grid

This section describes the capabilities provided by the Grid control, which represents data in a tabular form,supports data editing, sorting, grouping, filtering, summary calculation and many other features.

Data Editing

Add and Delete Grid Rows

Save or Discard Changes when Editing Grid Rows

Switch a Grid to Edit Mode

Data Presentation

Expand and Collapse Group Rows in Grids

Filter Grid Data

Group Grid Rows

Sort Grid Rows

Layout Customization

Hide and Display Grid Columns

Reorder Grid Columns

Selection and Navigation

Page Navigation in Grids

Select Grid Rows

Grid Lookup

Grid Lookup

Page 28: Dev Express End-User Documentation (ASP.net)

Grid 28

© 2011 DevExpress Inc. 28

Filter Grid Lookup Data

Select Grid Lookup Rows

Page 29: Dev Express End-User Documentation (ASP.net)

Grid 29

© 2011 DevExpress Inc. 29

Data Editing

Add and Delete Grid Rows

Add a Record

To create a new record:

Click New.

Specify cell values.

Click Update.

Delete a Record

To delete a record, click Delete within the row to be deleted.

Note

Records management links may be unavailable in your application. This is the choice of the application vendor.

Page 30: Dev Express End-User Documentation (ASP.net)

Grid 30

© 2011 DevExpress Inc. 30

Save or Discard Changes when Editing Grid Rows

Save Changes

To save the changes made, click Update.

Discard Changes

To cancel the changes made, click Cancel.

Page 31: Dev Express End-User Documentation (ASP.net)

Grid 31

© 2011 DevExpress Inc. 31

Switch a Grid to Edit Mode

To edit cell values, switch to the edit mode. To do this, click Edit.

Note

In-place editing links may be unavailable in your application. This is up to the application vendor.

Page 32: Dev Express End-User Documentation (ASP.net)

Grid 32

© 2011 DevExpress Inc. 32

Data Presentation

Expand and Collapse Group Rows in Grids

To expand or collapse a group, click this row's expand button.

Page 33: Dev Express End-User Documentation (ASP.net)

Grid 33

© 2011 DevExpress Inc. 33

Filter Grid Data

To filter data or change the filter conditions:

Click a filter button. This invokes the filter dropdown, which lists unique values within a column. To applyfilter criteria, click the required value.

If filtering is applied, the filter dropdown only displays values which match the filter criteria. To remove thefilter, click (All).

Type text within the Auto Filter Row. A filter condition is automatically created based upon the valueentered, and this is applied to the corresponding column.

To remove the column's filter, clear the text from the auto-filter row. To remove the grid's entire filter, click Clear:

To build complex filter criteria with an unlimited number of filter conditions, combined by logical operators, use thebuilt-in Filter Control:

Page 34: Dev Express End-User Documentation (ASP.net)

Grid 34

© 2011 DevExpress Inc. 34

To open the Filter Control, click:

the filter image displayed within the filter bar:

the filter expression link:

To create and customize filter criteria, use the and buttons embedded into the control:

Remarks

A filter condition group is a set of conditions combined by the same logical operator. The following filter expressioncontains two groups combined by the logical OR operator: "(Country Equals 'UK' And Category Equals'Beverages') Or (Country Equals 'USA' And Category Equals 'Produce')". In the Filter Control it's represented asfollows:

Page 35: Dev Express End-User Documentation (ASP.net)

Grid 35

© 2011 DevExpress Inc. 35

To learn more, please see Filter Editor.

Page 36: Dev Express End-User Documentation (ASP.net)

Grid 36

© 2011 DevExpress Inc. 36

Group Grid Rows

To group data, drag a column header from the column header panel to the group panel.

To change the group order, move a column header within the group panel.

To ungroup data, drag a column header(s) from the group panel to the column header panel.

Page 37: Dev Express End-User Documentation (ASP.net)

Grid 37

© 2011 DevExpress Inc. 37

Sort Grid Rows

To sort data, click a column header. If sorting against this column hasn't been applied, a header click willapply sorting in ascending order. If sorting has already been applied, subsequent clicks reverse thecurrent sort order.

A click on a column header clears the sort settings on any other columns. To sort against multiple columns,hold the SHIFT key down while clicking.

To clear a column's sorting, click its header while pressing the CTRL key.

Page 38: Dev Express End-User Documentation (ASP.net)

Grid 38

© 2011 DevExpress Inc. 38

Grid Lookup

Grid Lookup

GridLookup is used to easily locate and select values from a dropdown grid.

Topics in this section:

Filter Grid Lookup Data

Select Grid Lookup Rows

Page 39: Dev Express End-User Documentation (ASP.net)

Grid 39

© 2011 DevExpress Inc. 39

Filter Grid Lookup Data

Type text within the editor to filter data. A filter condition is automatically created based upon the value entered.

Page 40: Dev Express End-User Documentation (ASP.net)

Grid 40

© 2011 DevExpress Inc. 40

Select Grid Lookup Rows

If multiple row selection is allowed by the application vendor, you can select multiple rows by doing one of thefollowing.

Click a row to toggle its selected state.

If selection check boxes are visible, check rows that need to be selected.

Page 41: Dev Express End-User Documentation (ASP.net)

Grid 41

© 2011 DevExpress Inc. 41

Layout Customization

Hide and Display Grid Columns

To hide a column, invoke the Customization Window, and drag the column's header onto it.

To make a column visible, drag its header from the Customization Window and drop it onto the columnheader panel.

Note

Depending on the application vendor's preferences, the Customization window may be unavailable in yourapplication.

Page 42: Dev Express End-User Documentation (ASP.net)

Grid 42

© 2011 DevExpress Inc. 42

Reorder Grid Columns

To reorder columns, drag a column header to a new position within the column header panel.

Page 43: Dev Express End-User Documentation (ASP.net)

Grid 43

© 2011 DevExpress Inc. 43

Selection and Navigation

Page Navigation in Grids

To switch between pages, use the grid's Pager:

When data is grouped, rows that belong to one group may be displayed on different pages. This occurs when thenumber of rows contained within a group exceeds the maximum number of rows that can be displayed on a page.In this instance, to indicate that rows belong to a group, the image is displayed within the top data row(s).Hovering over this image displays parent group rows.

Page 44: Dev Express End-User Documentation (ASP.net)

Grid 44

© 2011 DevExpress Inc. 44

Select Grid Rows

If multiple row selection is allowed by the application vendor, you can select multiple rows by doing one of thefollowing.

Click a row while holding the CTRL key. This toggles a row's selected state without affecting other rows.

If selection check boxes are visible, check rows that need to be selected.

To select all rows between the clicked row and the previously focused row, click a row while holding the SHIFTkey. In this case, the previous selection is cleared.

Page 45: Dev Express End-User Documentation (ASP.net)

Grid 45

© 2011 DevExpress Inc. 45

Keyboard Navigation

If keyboard support is enabled within the GridView, its primary navigation operations (such as accessing the gridwithin the form, moving focus through grid rows, row selection, row expanding/collapsing, paging) can be quicklyand effectively performed, using a keyboard as an alternative to a pointing device.

The enabled keyboard navigation activates the following grid features:

Access Key - The grid control can be easily accessed (focused) by using a keyboard shortcut. Thisshortcut combines the preset CTRL+SHIFT combination with a single character string specified by anapplication developer. For example, setting the access key of a grid control to the string "G" indicates thatan end-user can navigate to the grid by pressing CTRL+SHIFT+G.

Focused Row - Focus can be moved between rows by using the UP and DOWN ARROW keys. The LEFTand 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. Moving focus from the ultimate (first orlast) row within a page changes the page within the grid, if possible.

Row Selection - The SPACE key can be used to mark a focused row as selected/unselected. This works ifselection can be applied to a row - that is, if it's not a group or detail row, the multiple row selection modeis enabled, or the row contains a selection check box or button. Multiple rows can be easily selected, bymoving row focus using the ARROW keys (UP/DOWN or LEFT/RIGHT) while holding down the SHIFT key.

Expanding/Collapsing Rows - The PLUS and MINUS keys can be used respectively, to expand andcollapse group and detail rows. In addition, row collapsing and expanding can be performed using theLEFT and RIGHT ARROW keys.

Paging - The SHIFT+PAGE UP and SHIFT+PAGE DOWN key combinations can be used to go to the next/previous grid page.

Page 46: Dev Express End-User Documentation (ASP.net)

HTML Editor 46

© 2011 DevExpress Inc. 46

HTML Editor

This section describes the capabilities provided by the HTML Editor (Rich Text Editor), which provides a wide rangeof capabilities for html content editing. It can work in three modes:

Design Mode. It provides a WYSIWYG editing interface.

HTML Mode. It allows you to edit the HTML markup of the editor's content.

Preview Mode. Use this mode to preview the editor's content as regular HTML.

HTML Editor UI

HTML Editor UI

Formatting Text

Make Text Bold in HTML Editor

Apply Italic Formatting in HTML Editor

Underline Text in HTML Editor

Apply Strikethrough Formatting in HTML Editor

Change Foreground Color in HTML Editor

Change Background Color in HTML Editor

Change Font Type in HTML Editor

Change Font Size in HTML Editor

Make Text Superscript or Subscript in HTML Editor

Remove Formatting in HTML Editor

Formatting Paragraphs

Text Indentation in HTML Editor

Text Alignment in HTML Editor

Paragraph Styling in HTML Editor

Page 47: Dev Express End-User Documentation (ASP.net)

HTML Editor 47

© 2011 DevExpress Inc. 47

Ordered and Bullet Lists in HTML Editor

Working with Hyperlinks

Create a Hyperlink in HTML Editor

Modify a Hyperlink in HTML Editor

Remove a Hyperlink in HTML Editor

Working with Images

Insert an Image in HTML Editor

Modify an Image's Settings in HTML Editor

Working with Tables

Create a Table in HTML Editor

Modify a Table in HTML Editor

Remove a Table in HTML Editor

Miscellaneous Operations

Repeat and Undo Actions in HTML Editor

Printing HTML Editor Content

Clipboard Operations in HTML Editor

Check Spelling in HTML Editor

Sizing and Full-Screen Mode

Page 48: Dev Express End-User Documentation (ASP.net)

HTML Editor 48

© 2011 DevExpress Inc. 48

HTML Editor UI

The Editor's toolbar represents a set of toolbar buttons, which perform common tasks in text editing andformatting. Most toolbar buttons work in the same manner as in Microsoft Word.

Each standard toolbar button has its own tooltip, invoked while the button is hovered with the mouse cursor.Some buttons have a selected mode, which indicates the active state of the button.

The Editor supports a context menu providing common commands. To open the menu, right-click the Editor.

All trademarks and registered trademarks are the property of their respective owners.

Page 49: Dev Express End-User Documentation (ASP.net)

HTML Editor 49

© 2011 DevExpress Inc. 49

Formatting Text

Make Text Bold in HTML Editor

To apply bold formatting to a specific portion of the text, do the following:

1.Select the text that you want to make bold.

2.Click the button or press Ctrl+B.

Note

Note that if you want to remove bold formatting from the text, select the required bold-formatted part of the text,and repeat the actions described above.

Note

To type bold formatted text, press the button. To stop bold formatting, press the button again.

Page 50: Dev Express End-User Documentation (ASP.net)

HTML Editor 50

© 2011 DevExpress Inc. 50

Apply Italic Formatting in HTML Editor

To apply italic formatting to a specific portion of the text, do the following.

1.Select the text you want to format.

2.Click the button or press Ctrl+I.

Note

Note that if you want to remove italic formatting from the text, select the desired italic-formatted part of the text,and repeat the actions described above.

Note

To type italic formatted text, press the button. To stop italic formatting, press the button again.

Page 51: Dev Express End-User Documentation (ASP.net)

HTML Editor 51

© 2011 DevExpress Inc. 51

Underline Text in HTML Editor

To apply underlined formatting to a specific portion of the text, do the following:

1.Select the required part of the text (or the whole text).

2.Click the button.

Note

Note that if you want to remove underline formatting from the text, select the required part of the text (which isalready underlined) and repeat the actions described above.

Note

To type underlined text press the button. To stop underlining, press this button again.

Page 52: Dev Express End-User Documentation (ASP.net)

HTML Editor 52

© 2011 DevExpress Inc. 52

Apply Strikethrough Formatting in HTML Editor

To apply strikethrough formatting to a specific portion of the text, do the following:

1.Select the required part of the text (or the whole text).

2.Click the button.

Note

Note that if you want to remove strikethrough formatting from the text, select the desired part of the text (which isalready strikethrough-formatted) and repeat the actions described above.

Note

To type strikethrough formatted text, press the button. To stop formatting, press the button again.

Page 53: Dev Express End-User Documentation (ASP.net)

HTML Editor 53

© 2011 DevExpress Inc. 53

Change Foreground Color in HTML Editor

To change the text color, do the following.

1.Select a portion of the text you are going to process.

2.Click the button, and select the color from the invoked color selector.

Note

To type text with the specified fore color, select the color via the button. To stop formatting, select anothercolor.

Page 54: Dev Express End-User Documentation (ASP.net)

HTML Editor 54

© 2011 DevExpress Inc. 54

Change Background Color in HTML Editor

To apply a specific background color to the text, do the following.

1.Select the portion of the text you are going to process.

2.Click the button and select the color from the invoked color selector.

Note

To type text with the specified background color, select the color by using the button. To stop formatting, selectthe another color.

Page 55: Dev Express End-User Documentation (ASP.net)

HTML Editor 55

© 2011 DevExpress Inc. 55

Change Font Type in HTML Editor

To change the text's font type, do the following.

1.Select the part of the text you want to process.

2.Click the Font list box' dropdown button and select the appropriated font within the opened list.

Note

To type text with specified font, set it by using the Font list box. To stop formatting, define another font.

Page 56: Dev Express End-User Documentation (ASP.net)

HTML Editor 56

© 2011 DevExpress Inc. 56

Change Font Size in HTML Editor

To change the text's font size, do the following.

1.Select the required part of the text you want to process.

2.Click the Font Size list box's dropdown button and select the appropriate font size within the invokedlist.

Note

To type text with the specified font size, set it by using the Font Size list box. To stop formatting, set the anotherfont size.

Page 57: Dev Express End-User Documentation (ASP.net)

HTML Editor 57

© 2011 DevExpress Inc. 57

Make Text Superscript or Subscript in HTML Editor

To apply superscript or subscript style to text, select the required characters and click the Superscript orSubscript button.

Note

To clear this text formatting, select the required portion of the text and click the corresponding formatting buttonagain.

Note

To type superscript or subscript text, press the corresponding button. To stop formatting, press the button again.

Page 58: Dev Express End-User Documentation (ASP.net)

HTML Editor 58

© 2011 DevExpress Inc. 58

Remove Formatting in HTML Editor

In some cases, you might wish to remove text formatting (for example, if the editor's content text was pastedfrom from a Microsoft Word document and contains unnecessary tags).

To remove text formatting, click the editor's Remove Formatting button ( ).Note

Note that the Remove Formatting button affects the entire text.

All trademarks and registered trademarks are the property of their respective owners.

Page 59: Dev Express End-User Documentation (ASP.net)

HTML Editor 59

© 2011 DevExpress Inc. 59

Formatting Paragraphs

Text Indentation in HTML Editor

To change text indentation, do the following.

1.Place the mouse pointer over the paragraph you want to format, or select multiple paragraphs.

2.Click the or button, to indent or outdent the text.

Page 60: Dev Express End-User Documentation (ASP.net)

HTML Editor 60

© 2011 DevExpress Inc. 60

Text Alignment in HTML Editor

The Editor allows users to apply the left, right, centered or justified alignment to the text. To change textalignment, do the following.

1.Place the mouse pointer onthe paragraph you are going to format, or select multple paragraphs.

2.Click the appropriate alignment button within the editor's toolbar.

Page 61: Dev Express End-User Documentation (ASP.net)

HTML Editor 61

© 2011 DevExpress Inc. 61

Paragraph Styling in HTML Editor

The Paragraph style dropdown editor makes formatting the editor's content easier. To apply a style, do thefollowing.

1.Select the text you are going to format.

2.Click the Paragraph dropdown button within the Editor's toolbar, to invoke a list of available Paragraphstyles.

3.Select the required Paragraph style.

Note

This functionality may be unavailable in your application. This depends on the choice of the application vendor.

Page 62: Dev Express End-User Documentation (ASP.net)

HTML Editor 62

© 2011 DevExpress Inc. 62

Ordered and Bullet Lists in HTML Editor

Start a New List

Click a list button on the main toolbar ( or ). Type in the first item, then press ENTER to create anotheritem.

Convert Existing Paragraphs into a List

1.Select the paragraphs you want to turn into a list.

2.Click the button if you want to apply ordered list formatting to the text, or the button - tocreate a bullet list.

3.Place the mouse pointer at the end of the last item and press Enter to create a new list item.

Page 63: Dev Express End-User Documentation (ASP.net)

HTML Editor 63

© 2011 DevExpress Inc. 63

Working with Hyperlinks

Create a Hyperlink in HTML Editor

Automatic Hyperlink Creation

The simplest way to create a text hyperlink is to type it within the editor's content. The editor automaticallyconverts URL to hyperlinks after you type them. Press SPACE. If you don't want the entered URL to become a link,press BACKSPACE after the automatic conversion.

Add a Hyperlink Manually

1.Select the text or image that you want to display as a hyperlink.

2.Click the Insert Link button within the editor's toolbar.

Note

The first step is unnecessary. You can simply click the Insert Link button to create a new text link at the currentcursor position.

Specify Hyperlink Settings

After you've pressed the Insert Link button, the Insert Link dialog is invoked. The radio button at the top allowsyou to choose whether you want to enter a URL or an e-mail address.

Enter a URL

Page 64: Dev Express End-User Documentation (ASP.net)

HTML Editor 64

© 2011 DevExpress Inc. 64

The hyperlink's settings can be customized by using the following parameters:

Parameter Required Description

URL Yes Specifies the target URL.

Text No Specifies the link text.This parameter is not availablewhen creating image links.

Tooltip No Specifies the text that will appearin the tooltip when the mousecursor is placed over the hyperlink.

Open in new window No Specifies whether to open the URLin the same window, or new one.

Enter an E-mail Address

The hyperlink's settings can be customized by using the following parameters:

Page 65: Dev Express End-User Documentation (ASP.net)

HTML Editor 65

© 2011 DevExpress Inc. 65

Parameter Required Description

Email to Yes Defines an email address.

Subject No Specifies the subject of the emailmessage.

Text No Specifies the link text.This parameter is not availablewhen creating image links.

Tooltip No Specifies the text that will appearin the tooltip when the mousecursor is placed over the hyperlink.

Click the OK or Cancel button to save or reject the changes made.

Page 66: Dev Express End-User Documentation (ASP.net)

HTML Editor 66

© 2011 DevExpress Inc. 66

Modify a Hyperlink in HTML Editor

To modify a hyperlink, do the following.

1.Select a hyperlink. Place a mouse pointer inside a link if you are going to modify a text hyperlink. Or,select an image in order to edit an image hyperlink.

2.Click the Insert link button. Alternatively, you can right-click and select the Change Link item within theinvoked context menu.

3.Modify the hyperlink's settings within the invoked Change Link dialog, according to the type of ahyperlink - text or image hyperlink. Detailed information about the hyperlink's available settings can beobtained from the Create a Hyperlink section.

4.Click OK to save the modified hyperlink.

Page 67: Dev Express End-User Documentation (ASP.net)

HTML Editor 67

© 2011 DevExpress Inc. 67

Remove a Hyperlink in HTML Editor

To remove a hyperlink, do the following.

1.Select a hyperlink. Place a mouse pointer inside a link if you are going to modify a text hyperlink. Or,select an image in order to edit an image hyperlink.

2.Click the Unlink button.

Page 68: Dev Express End-User Documentation (ASP.net)

HTML Editor 68

© 2011 DevExpress Inc. 68

Working with Images

Insert an Image in HTML Editor

This topic describes how to insert an image into an editor's content.

First, position the mouse pointer on the place in the text where you want to add an image and click the InsertImage button.

Now, define the required parameters of the image within the invoked Insert Image dialog.

Insert an Image by Specifying Its URL

Select the From the web (URL) radio button within the opened dialog.

Type a web address of the image within the edit box or call a built-in image selector clicking Browsebutton.

Check Save file to this server if you want to upload the image to the web server.

Check More options to customize the image's settings (optional).

Page 69: Dev Express End-User Documentation (ASP.net)

HTML Editor 69

© 2011 DevExpress Inc. 69

Insert an Image Stored on the Local Machine

Select the From this computer radio button within the Insert Image dialog.

Click the Browse button and select an image file that you want to add, by using the invoked Open filedialog.

Check More Options to customize the image's settings (optional).

After completing all the steps above, click the Insert button to close the dialog and insert the image into theeditor's content.

Page 70: Dev Express End-User Documentation (ASP.net)

HTML Editor 70

© 2011 DevExpress Inc. 70

Modify an Image's Settings in HTML Editor

To modify an image's settings within the editor's content, do one of the following.

Right-click on the image and select Change Image within the invoked context menu.

Select the image and click the Insert Image button.

The opened Change Image dialog allows you to modify the image's settings. More detailed information aboutmodifying image settings is available in the Insert an Image section.

Page 71: Dev Express End-User Documentation (ASP.net)

HTML Editor 71

© 2011 DevExpress Inc. 71

Working with Tables

Create a Table in HTML Editor

Create a Table

Place a mouse pointer where you want to create a table. Click the button in the editor's toolbar.

Specify Table Settings

Pressing the Insert Table button invokes the Insert Table dialog.

Page 72: Dev Express End-User Documentation (ASP.net)

HTML Editor 72

© 2011 DevExpress Inc. 72

The invoked window provides a set of parameters to customize a table's settings:

Table Size

These settings are used to specify the row/column count and the table's width and height.

Layout

This section contains settings useful for customizing the table's layout (paddings, alignment).

Appearance

These settings are used to customize the table's background color and borders size and color.

Check the Accessibility to enable accessibility compliance for the table.

Click the OK or Cancel button to save or reject the changes.

Page 73: Dev Express End-User Documentation (ASP.net)

HTML Editor 73

© 2011 DevExpress Inc. 73

Modify a Table in HTML Editor

You can modify a table by changing its properties, adding/deleting a row or column, etc.

Changing Table Properties

To modify a table's (and its rows, columns and cells) properties, select a table (a row, column, cell) and click one ofthe following buttons:

Command Button Description

Table Properties Use this command to modify thetable's properties (size, layout,appearance).

Row Properties Use this command to modify arow's alignment, size andappearance.

Column Properties Use this command to modify acolumn's alignment, size andappearance.

Cell Properties Use this command to modify a cell'salignment and appearance.

Each button click invokes the specified windows for modifying a table, row, column or cell. When complete, clickthe OK button to save the changes.

Inserting Rows and Columns

Select a cell of the required row, and click the or button to insert a new row above or below the specifiedrow.

To insert a new column to right or to the left from the selected column, click the corresponding or button.

Splitting

You can split a cell vertically or horizontally by using the or the button.

Merging

To merge two cells to the right or down use the or button.

Page 74: Dev Express End-User Documentation (ASP.net)

HTML Editor 74

© 2011 DevExpress Inc. 74

Remove a Table in HTML Editor

You can remove a table or its elements from the HTML Editor by using the following commands:

Command Button Description

Delete Table Removes a table from the HTMLEditor.

Delete Row Removes the specified row andautomatically shifts other rows up.

Delete Column Removes the specified column andautomatically shifts other columnsto the left.

Page 75: Dev Express End-User Documentation (ASP.net)

HTML Editor 75

© 2011 DevExpress Inc. 75

Miscellaneous Operations

Repeat and Undo Actions in HTML Editor

The Editor keeps track of all user actions, and allows you to undo or repeat them. The following table listskeyboard shortcuts and toolbar buttons providing this functionality.

Editor's Button Shortcut Description

UndoCTRL+Z Reverses the last operation.

RedoCTRL+Y Reverses the last "Undo"

operation.

Page 76: Dev Express End-User Documentation (ASP.net)

HTML Editor 76

© 2011 DevExpress Inc. 76

Printing HTML Editor Content

The editor's content can be printed by using the Print ( ) toolbar button.

This invokes the standard print dialog, where you can specify required print settings.

Page 77: Dev Express End-User Documentation (ASP.net)

HTML Editor 77

© 2011 DevExpress Inc. 77

Clipboard Operations in HTML Editor

Any part of the editor's content (images, tables or other content) can be cut, copied or pasted. The following tablelists keyboard shortcuts and toolbar buttons providing this functionality.

Editor's Button Shortcut Description

CopyCTRL+C, CTRL+INS Copies the selected content to the

clipboard.

CutCTRL+X, SHIFT+DEL Cuts the selected content to the

clipboard.

PasteCTRL+V, SHIFT+INS Pastes the selected content to the

editor. This action is available if theclipboard is not empty.

Paste From WordNone Pastes the copied content from

Word to the editor. This action isavailable if the clipboard is notempty.

Note

The copy and cut operations place the copied or cut content onto the clipboard, replacing the existing content.

Page 78: Dev Express End-User Documentation (ASP.net)

HTML Editor 78

© 2011 DevExpress Inc. 78

Check Spelling in HTML Editor

Click the Check spelling ( ) button. If the text contains spelling errors, the following dialog box allows you topreview, correct or ignore them.

After the entire text has been scanned, the following window is shown.

Page 79: Dev Express End-User Documentation (ASP.net)

HTML Editor 79

© 2011 DevExpress Inc. 79

Sizing and Full-Screen Mode

To resize an HTML Editor place the mouse pointer over the size grip, press the left mouse button and dragthe editor's scope to the required size.

To switch to full-screen mode, click the button or press F11 while the HTML Editor has focus. Notethat this mode is in effect for the Design View only.

Page 80: Dev Express End-User Documentation (ASP.net)

Menu 80

© 2011 DevExpress Inc. 80

Menu

Menu is used to navigate you through items.

Click a menu item to choose them. If an item has an arrow sign ( ), hover it to expand a submenu.

Menu Scrolling

Menu Scrolling

Page 81: Dev Express End-User Documentation (ASP.net)

Menu 81

© 2011 DevExpress Inc. 81

Menu Scrolling

If a submenu doesn't fit into the visible document area, it displays scroll buttons. To scroll a submenu use thebutton.

Page 82: Dev Express End-User Documentation (ASP.net)

Pivot Table 82

© 2011 DevExpress Inc. 82

Pivot Table

The Pivot Table is a data bound control that provides maximum capabilities for organizing, summarizing andanalyzing your business data.

Data Presentation

Filter Data in Pivot Tables

Sort Data in Pivot Tables

Layout Customization

Expand and Collapse Groups in Pivot Tables

Hide and Display Pivot Table Fields

Reorder Pivot Table Fields

Page 83: Dev Express End-User Documentation (ASP.net)

Pivot Table 83

© 2011 DevExpress Inc. 83

Data Presentation

Sort Data in Pivot Tables

Values of dimension fields are always arranged in ascending or descending order. The sort order is indicated byan Up or Down arrow displayed within a corresponding dimension field's header. Subsequent clicks toggle thecurrent sort order.

You can also sort the values of a particular dimension field by the summary values calculated against a specificdata field.

Page 84: Dev Express End-User Documentation (ASP.net)

Pivot Table 84

© 2011 DevExpress Inc. 84

Filter Data in Pivot Tables

To filter data or change the filter conditions:

Click a header's filter button. This invokes the filter dropdown, which lists unique field values.

To apply filter criteria, select the required values and click OK.

If a field's values are filtered, the corresponding filter button is highlighted.

Page 85: Dev Express End-User Documentation (ASP.net)

Pivot Table 85

© 2011 DevExpress Inc. 85

Layout Customization

Expand and Collapse Groups in Pivot Tables

Expand/Collapse Values Groups

To expand/collapse value groups, do one of the following.

Click the corresponding expand button.

Right-click a value that has nested values, and select the required Expand or Collapse command from themenu that opens.

Expand/Collapse Fields

To expand/collapse a group of fields, click a corresponding field expand button.

Page 86: Dev Express End-User Documentation (ASP.net)

Pivot Table 86

© 2011 DevExpress Inc. 86

Page 87: Dev Express End-User Documentation (ASP.net)

Pivot Table 87

© 2011 DevExpress Inc. 87

Hide and Display Pivot Table Fields

Hide Fields

To hide a field, right-click within its header and select Hide within the context menu that opens.

Display Hidden Fields

To display hidden fields do the following.

Right-click within the header region that is not occupied by data cells and field values, and select ShowField List from the context menu that opens.

This displays the Customization Form that provides access to hidden fields:

Page 88: Dev Express End-User Documentation (ASP.net)

Pivot Table 88

© 2011 DevExpress Inc. 88

Drag-and-drop the required field from the Customization Form onto the required area of the Pivot Table.

Page 89: Dev Express End-User Documentation (ASP.net)

Pivot Table 89

© 2011 DevExpress Inc. 89

Reorder Pivot Table Fields

To move a field to another position, use drag-and-drop.

Page 90: Dev Express End-User Documentation (ASP.net)

Report Viewer 90

© 2011 DevExpress Inc. 90

Report Viewer

This section describes the capabilities provided by the Report Viewer, which is used to display, navigate, save andexport report documents on the web:

Navigation

Navigate to a Specific Report Page

Navigate using Report Bookmarks

Search for a Specific Text within a Report

Printing

Print a Report in Internet Explorer Using the Acrobat Reader Plug-In

I Have Acrobat Reader Installed, But Can't Print Reports Using It

Print Reports in Browsers Other than Internet Explorer

Exporting

Export a Report and Save It to the Disk

Export a Report and Show It in a New Window

Page 91: Dev Express End-User Documentation (ASP.net)

Report Viewer 91

© 2011 DevExpress Inc. 91

Navigation

Navigate to a Specific Report Page

To navigate to a specific page of a document, open the Page list on the report toolbar, and select the requiredpage.

Also, use the buttons on the report toolbar to navigate to the first, previous, next or last pagerespectively.

Page 92: Dev Express End-User Documentation (ASP.net)

Report Viewer 92

© 2011 DevExpress Inc. 92

Navigate using Report Bookmarks

If it is provided by your application, you can use the Document Map for navigation purposes.

To navigate using bookmarks, click the required bookmark on the Document Map. Then, the appropriate reportpage will be shown. Also you will see a dotted rectangle on the report page, which corresponds to this bookmark.

Page 93: Dev Express End-User Documentation (ASP.net)

Report Viewer 93

© 2011 DevExpress Inc. 93

Search for a Specific Text within a Report

To locate specific text within a report, click the Display the search window button on the toolbar. This willactivate the Search dialog.

To initiate a search, enter the text you wish to locate, specify additional search options (such as case matching,whole word matching, and search direction), then press the Find Next button.Note

If you use a web browser different from Microsoft® Internet Explorer, this option is not available, and thecorresponding button is disabled on the report toolbar. You can still use the browser's built-in search capabilities,but in this case you will only search within the currently visible report page.

All trademarks and registered trademarks are the property of their respective owners.

Page 94: Dev Express End-User Documentation (ASP.net)

Report Viewer 94

© 2011 DevExpress Inc. 94

Printing

Print a Report in Internet Explorer Using the Acrobat Reader Plug-In

If you use Microsoft® Internet Explorer (versions 6.0, 7.0 or other), and have Adobe® Acrobat Reader installed onyour computer, then you can print a report using the Adobe® Reader plug-in, which is built into the web browser.This method is recommended, because it allows you to avoid possible errors, which may appear when usingdifferent web browsers on different platforms.

To download and install Adobe® Acrobat Reader, use the following link: http://www.adobe.com/go/BONRM.

Then, do one of the following:

To print the entire report using the Adobe® Reader plug-in, click the Print the report button on thereport toolbar.

To print the current page using the Adobe® Reader plug-in, click the Print the current page button onthe report toolbar.

The following Print dialog will be invoked:

If required, customize the print settings and then click OK to start printing.

All trademarks and registered trademarks are the property of their respective owners.

Page 95: Dev Express End-User Documentation (ASP.net)

Report Viewer 95

© 2011 DevExpress Inc. 95

I Have Acrobat Reader Installed, But Can't Print Reports Using It

If you use a web browser different from Microsoft® Internet Explorer, refer to the Print Reports in Browsers Otherthan Internet Explorer section.

Otherwise, launch Adobe® Acrobat Reader. Then on its Edit menu, click Preferences. On the invoked Preferencesdialog, check the Display PDF in browser option in the Internet category.

You might need to close and re-open Microsoft® Internet Explorer to apply the changes.

All trademarks and registered trademarks are the property of their respective owners.

Page 96: Dev Express End-User Documentation (ASP.net)

Report Viewer 96

© 2011 DevExpress Inc. 96

Print Reports in Browsers Other than Internet Explorer

If you don't have Adobe® Acrobat Reader installed, or you use a web browser different from Microsoft® InternetExplorer, you are still able to print a report, but you'll need to manually define all print settings to properly printa report.

To start printing, do one of the following.

To print the entire report using the Adobe® Reader plug-in, click the Print the report button on thereport toolbar.

To print the current page using the Adobe® Reader plug-in, click the Print the current page button onthe report toolbar.

Then, the web browser's print dialog will be invoked.

All trademarks and registered trademarks are the property of their respective owners.

Page 97: Dev Express End-User Documentation (ASP.net)

Report Viewer 97

© 2011 DevExpress Inc. 97

Exporting

Export a Report and Save It to the Disk

To export a document, first choose the required format for export from the list on the report toolbar. The availableformats are PDF, XLS, XLSX, RTF, MHT, Text, Image and CSV.

Then, click the Export a report and save it to the disk button on the report toolbar.

Click Save on the invoked web browser's File Download dialog.

Define a path for the exported document in the invoked Save As dialog, and click Save.

Page 98: Dev Express End-User Documentation (ASP.net)

Report Viewer 98

© 2011 DevExpress Inc. 98

Export a Report and Show It in a New Window

If your web browser supports the appropriate document format, it is possible to export a report and immediatelyshow it in a new web browser's window.

First, choose the required format for a document for export from the list on the report toolbar. The availableformats are PDF, XLS, XLSX, RTF, MHT, Text, Image and CSV.

Then, click the Export a report and show it in a new window button on the report toolbar.

Page 99: Dev Express End-User Documentation (ASP.net)

Scheduler 99

© 2011 DevExpress Inc. 99

Scheduler

This section describes the capabilities provided by the Scheduler, which is used for scheduling/calendar activities.

Appointment Editing

Create an Appointment

Edit an Appointment

Manage Reminders

Make a Series of Recurring Appointments

Delete an Appointment

Restrictions for Operations with Appointments

Layout Customization

Switch Scheduler Views

Scheduler Grouping

Selection and Navigation

Navigate Time Cells and Dates in the Scheduler

Navigate Scheduler Resources

Scheduler Navigation Buttons

Scheduler 'More' Buttons

Page 100: Dev Express End-User Documentation (ASP.net)

Scheduler 100

© 2011 DevExpress Inc. 100

Appointment Management

Create an Appointment

To create a new appointment, click within the Scheduler time cell area to select cell(s). A smart tag will appearshortly:

Click it to invoke the default popup menu.

Menu items highlighted in the illustration, are intended for creating new appointments. By default, they are:

1.New AppointmentInvokes the Edit Appointment dialog shown below.

The Start time and End time values are initially set to the beginning and ending boundaries of thecurrent date and time selection. The Show time as field is set to Busy. The Resource field value is setto the resource to which the selected cell belongs, although it may be Any, when appointments are notgrouped by resources.

Page 101: Dev Express End-User Documentation (ASP.net)

Scheduler 101

© 2011 DevExpress Inc. 101

Fill in the Subject and Location fields. If necessary, drop some lines of text into the text box at thebottom of the dialog, and they will be shown within an appointment in either Day View or Work WeekView.

You can switch the appointment's Reminder on, for future notifications.

2.New All Day EventInvokes the Edit Event window, which is used to create a new all-day appointment (also called an 'all-day event'). The window is the same as the Edit Appointment, except that, in this case, the All dayevent option is checked, its time range is measured in days (not hours) and marked as Free. Theappointment can be transformed into the all-day event and vice-versa, by selecting this check box.

3.New Recurring AppointmentAll appointments maintained by the Scheduler can either be simple (non-recurring), which happen onlyonce, or recurring, which occur multiple times with a predefined time interval.

Selecting this menu item invokes the Edit Appointment dialog, used to create a new appointment,extended with the Recurrence feature, which allows the recurrence pattern to be specified for the newappointment.

4.New Recurring EventSelecting this menu item invokes the Edit Event window, used to create a new all-day appointment,extended with the Recurrence feature, which allows the recurrence pattern to be specified for the newevent.

For more information, see Make a Series of Recurring Appointments.

Page 102: Dev Express End-User Documentation (ASP.net)

Scheduler 102

© 2011 DevExpress Inc. 102

Edit an Appointment

Context Menu

There are two ways to invoke the context menu for an appointment:

Right-click an appointment.

Use a smart tag. To invoke a smart tag, click the appointment to select it, and wait for the smart tag toappear. Then, click it to invoke the context menu.

Note

This approach may be useful if you use a web browser (e.g. Opera), where right-clicking an appointment doesn'tinvoke a Scheduler control's context menu.

This context menu contains items that enable you to modify some of the appointment's properties. For example,you can use the Show Time As submenu to change the appointment status.

If you select the Label As menu item, you can choose another label for the current appointment from the list ofavailable label types.

Also, this menu contains the Open item, which allows you to invoke the Edit Appointment dialog for the currentappointment.

Page 103: Dev Express End-User Documentation (ASP.net)

Scheduler 103

© 2011 DevExpress Inc. 103

Note

In addition, the appointment context menu may contain the Edit Series and Restore Default State menu items. Thismeans that an appointment is a part of a series of recurring appointments. For more information, see Make a Seriesof Recurring Appointments.

Edit Appointment Dialog

To invoke the Edit Appointment dialog, you can use the Open item of the appointment's context menu. Thecommon appearance of this dialog is illustrated below.

The Edit Appointment dialog allows you to edit the following properties of an appointment:

Subject

The subject text of an appointment. This text is displayed within an appointment to identify it.

Location

The location text that specifies where an appointment takes place. This text is displayed within theappointment in parentheses after the subject text.

Label

A mark used for at-a-glance identification of an appointment. It is displayed in the Scheduler as abackground color of the rectangle region that represents the appointment.

Page 104: Dev Express End-User Documentation (ASP.net)

Scheduler 104

© 2011 DevExpress Inc. 104

Start time and End time

The start/end date and time of an appointment.

Show time as

A mark that specifies the appointment's availability status. It is displayed as a strip on the left side of theappointment rectangle. The strip is colored according to the status type.

All day event

Transforms an appointment into an all-day event, which always lasts an entire day (or several days). Notethat if this property is true, real time values of the Start and End properties are ignored, and instead, thestart of the appointment is considered to be 0:00 of the Start date, and the end of the appointment isconsidered to be 24:00 of the End date.

Resource

A resource that is assigned to an appointment. This resource can be used to group appointments byresources.

Reminder

Allows you to set a reminder that is responsible for sending notifications at a specified time period beforean appointment's start time. For detailed information, see Manage Reminders.

Description

The text box located below the Resource and Reminder options. This text box allows you to enterdescription text that will be shown within an appointment in either Day View or Work Week View.

Recurence

Expands the Recurrence section, that specifies a recurrence pattern for the appointment. For moreinformation, see Make a Series of Recurring Appointments.

Page 105: Dev Express End-User Documentation (ASP.net)

Scheduler 105

© 2011 DevExpress Inc. 105

In-place Editor

Double-click a specific appointment to invoke its In-place Editor, which allows you to edit the appointment'sSubject.

Note that if you need to edit other properties of the appointment, you can invoke the Edit Appointment dialog viathe Open Appointment Editing Form button.

Mouse Operations

Drag-and-drop operations enable you to change an appointment's time interval, if an appointment is moved alongthe time cell area:

If you press ESC before dropping the appointment, all changes are canceled and the appointment returns to

Page 106: Dev Express End-User Documentation (ASP.net)

Scheduler 106

© 2011 DevExpress Inc. 106

where it used to be.

You can also change an appointment's type to all-day and vice-versa by dragging the appointment between theall-day area and time cells.

In grouped views, when different resources are represented by different columns, dragging the appointment toanother column automatically changes the associated resource.

Page 107: Dev Express End-User Documentation (ASP.net)

Scheduler 107

© 2011 DevExpress Inc. 107

Manage Reminders

What is a Reminder?

Any appointment can have one or more reminders. They are responsible for sending alerts at a specified time

period before an appointment's start time. If an appointment has a reminder, the bell image is displayed.

Specifying Reminders

A reminder can be created for a particular appointment with the help of the appointment's editing form,demonstrated below. Select the Reminder check box and enter the amount of time before the appointment whenyou want the reminder to occur. You can select a predefined value in a drop-down list, or just type it in. Theduration editor recognizes digits as the number of minutes, if an "h" postfix is added - as hours, "d" - days.

How Does It Work?

When the time has come for the reminder alert, it invokes the notification dialog, as illustrated below:

Page 108: Dev Express End-User Documentation (ASP.net)

Scheduler 108

© 2011 DevExpress Inc. 108

You can switch the reminders off by clicking the Dismiss or Dismiss All buttons.

Another option is to shift the alert time by selecting the time interval in the combo box and clicking the Snoozebutton. Then, the notification will be postponed for a specified time frame.

Page 109: Dev Express End-User Documentation (ASP.net)

Scheduler 109

© 2011 DevExpress Inc. 109

Make a Series of Recurring Appointments

What is a Recurring Appointment?

All appointments supported by the Scheduler control can be simple (non-recurring) or recurring. Non-recurringappointments occur only once in a specified time interval. Recurring appointments occur many times in the sametime interval on different dates.

Recurring appointments are created as series of appointments, specified by the recurrence pattern and indicated

with the recurrence sign.

Recurrence Pattern

The recurrence pattern contains information on appointment recurrence (a start date and time of the recurrenceseries and a rule according to which a series is repeated). You can create and edit the recurrence pattern of anappointment in the standard Edit Appointment dialog, by selecting the Recurrence check box. The image belowdemonstrates the common appearance of the recurrence section of the Edit Appointment dialog.

Page 110: Dev Express End-User Documentation (ASP.net)

Scheduler 110

© 2011 DevExpress Inc. 110

In this dialog you can specify all the required values of different elements to define the recurrence behavior. Thebase element of the recurrence pattern is frequency. It specifies how often corresponding appointments willoccur: Daily, Weekly, Monthly or Yearly.

In addition, for each of these frequency types you can define periodicity - the time interval in which therecurrence's frequency will be applied. For instance, if you have defined that appointments occur Daily, you canalso specify whether appointments repeat every several days or every week day. For the Monthly appointmentfrequency, you can specify for how many weeks and on which week days an appointment will recur.

Also, you can specify when appointment recurrence must be stopped.

If an appointment is recurring, its context menu contains the Edit Series item. Clicking this item invokes the EditAppointment dialog that you can use to edit the recurrence pattern.

If you use the Open item of the context menu to invoke the Edit Appointment dialog, you can edit only the currentappointment, rather than the entire series. This way you can create exceptions.

Exceptions

If an occurrence (appointment that belongs to a series of recurring appointments) has some of its properties

Page 111: Dev Express End-User Documentation (ASP.net)

Scheduler 111

© 2011 DevExpress Inc. 111

modified, it is called an Exception. Such appointments are marked with the crossed recurrence sign.

You can delete one or several occurrences in the recurrence chain. Deleted occurrence is a kind of Exception forthe recurrence pattern. They are not visualized by the SchedulerControl.

To replace an exception with a normal occurrence and discard all modifications, right-click the exception and clickon the Restore Default State item of the invoked context menu.

If you edit the recurrence pattern for an appointment series (Edit Series context menu item), the recurrence chainis reset and all exceptions are restored to a default state. You'll get a warning before this happens.

Page 112: Dev Express End-User Documentation (ASP.net)

Scheduler 112

© 2011 DevExpress Inc. 112

Delete an Appointment

Use the popup (context) menu to delete an appointment.

First, click within the appointment to select it. Wait a moment. A smart tag will appear shortly:

Click it to invoke the default popup menu.

Note

You can right-click within the appointment to invoke the editing menu, but this action may result in different menus ifthe browser (or the page) provides another context menu, overriding the scheduler action.

Click Delete.

If an appointment belongs to a recurrence chain, then a confirmation dialog appears.

You can choose whether all appointments in a series should be deleted, or only this particular appointment.

Page 113: Dev Express End-User Documentation (ASP.net)

Scheduler 113

© 2011 DevExpress Inc. 113

Restrictions for Operations with Appointments

Access to several operations may be restricted. You may find that you're not able to perform the followingoperations due to restrictions applied by the application vendor or administrator.

Create new appointments.

Edit appointments.

Invoke the appointment editing form.

Activate an in-place editor for an appointment.

Change the time boundaries of appointments.

Drag and drop appointments to another time slot or date.

Drag and drop appointments between resources.

Copy appointments.

Delete appointments.

Select more than one appointment simultaneously.

Share the scheduled time between two or more appointments.

When you drag an appointment to relocate it, it may come into conflict with another by sharing the sametime interval or resource. If conflicts are forbidden, then an attempt to move the appointment fails, and itis restored to its previous position. This situation is visually indicated as illustrated below:

Page 114: Dev Express End-User Documentation (ASP.net)

Scheduler 114

© 2011 DevExpress Inc. 114

Layout Customization

Switch Scheduler Views

The Scheduler is intended to display appointments data using one of the standard Views.

The following views are currently available:

Day viewThis view gives the most detailed view of appointments for a certain day(s).

Work-Week viewThis view displays appointments for the working days in a particular week.

Week viewThis view displays appointments for any given week.

Month (also called Multi-Week) viewThe month view is the least detailed of the views, and is designed for browsing and long-term plananalysis. This view positions the days one after another horizontally, so that they form weeks, whileweeks are placed one under another.

Timeline viewThis view plots appointments as horizontal bars along the timescales, and provides a clearer overview forscheduling purposes.

To switch views, you may use either a special View Selector element, or the context menu.

The View Selector element may look like this:

When a particular view is disabled, the corresponding item is not shown.

The context menu is invoked when you right-click any region of the Scheduler control not occupied withan appointment. You can also click on a free area, wait until the smart tag appears, and then click it.

The invoked menu contains items for switching views, as illustrated in the following picture (this menu isspecific for the Day View):

The context menu also includes such date navigation commands as Go to Today and Go to This Day. Thelatter is available only in the Week View and Month View views. These commands switch the Schedulerto the Day View.

Page 115: Dev Express End-User Documentation (ASP.net)

Scheduler 115

© 2011 DevExpress Inc. 115

While navigating dates via the Go to Date dialog, you can specify a view type to display a new timeinterval. The following picture illustrates selecting the View type:

The Scheduler selects a view mode automatically, according to the date range selected in the Calendar.To learn more about this capability, refer to the Navigate Time Cells and Dates in the Scheduler topic.

Page 116: Dev Express End-User Documentation (ASP.net)

Scheduler 116

© 2011 DevExpress Inc. 116

Scheduler Grouping

The data can be grouped either by resources or by dates, to enhance the visual representation. The followingpictures illustrate the appearance of the control in grouping mode.

Appointments Grouped by Resources

Appointments Grouped by Date

Page 117: Dev Express End-User Documentation (ASP.net)

Scheduler 117

© 2011 DevExpress Inc. 117

Selection and Navigation

Navigate Time Cells and Dates in the Scheduler

View Navigator

To navigate dates, you can use the View Navigator shown below.

Use the left and right arrow buttons to go to the previous or next time interval (next day, week, month,depending on the currently visible date interval). The Today scrolls the view to locate the current date.

Calendar

The Calendar control is designed specifically for the date navigation and selection task. It is shown in thefollowing picture.

Note

The availability of the Calendar depends on the application vendor.

You are able to select either a particular date, or a range of dates by means of the Calendar, or directly in the

Page 118: Dev Express End-User Documentation (ASP.net)

Scheduler 118

© 2011 DevExpress Inc. 118

Scheduler's time cell grid. Selecting dates using the Calendar results in displaying them by the Scheduler, to whichit is linked.

The methods of selecting dates are listed below:

Using the Calendar control

Action Effect

Click any date in the Calendar. One day becomes selected, and the Schedulerdisplays it using the Day View. If the currentlyactive view is of another type, it is automaticallychanged to Day View. The only exception is theWork Week View. In this instance, the entirework week is selected.

Click and drag across the Calendar--or--click a start date, hold down the SHIFT key andclick an end date

The continuous range of dates is selected. TheScheduler adjusts the currently active view todisplay the selected range of dates. If theselection is smaller than a week, the view type isswitched to Day View. A week-long range isdisplayed using the Week View. If the range ismore than a week, then the Month View is used.

Hold down the CTRL key and click several dates. A set of dates is selected. The Scheduler displaysit using the Day View, irrespective of the size ofthe selected range.

Click a week number in the Calendar A corresponding week-long range is selected. TheScheduler displays it using the Week View.

Using the Scheduler control

Action Effect

Click any date in the Scheduler (if the currentlyactive view is set to either the Week View or theMonth View).

One day is selected.

Click and drag across the time cells (in the WeekView or Month View only).

A continuous range of dates is selected. Theselected range in the Calendar control is notaffected, although it goes along with the rangedisplayed within the Scheduler.

Context Menu

The popup (context) menu provides the capability to navigate to a particular date.

Page 119: Dev Express End-User Documentation (ASP.net)

Scheduler 119

© 2011 DevExpress Inc. 119

"Go to Date" Dialog

If the Go to Date... menu item is selected, the Go to Date form is invoked.

It enables you to select the date and the view to which the scheduler switches to display the date.

Page 120: Dev Express End-User Documentation (ASP.net)

Scheduler 120

© 2011 DevExpress Inc. 120

Navigate Scheduler Resources

When appointment data is grouped (either by resources or by dates), the number of resources shown on thescreen within the scheduler simultaneously can make it difficult to see all the scheduled data. To make the layoutmore readable, it is possible to limit the number of visible resources, and then scroll between them. In thesecases, use the Resource Navigator embedded into the Scheduler.

The Resource Navigator displays a set of buttons used to navigate to the first or last element, previous or nextresource, or page. Plus and minus buttons are used to increase or decrease the number of resources displayed atonce. The combo box allows you to select the resource to display (or the first resource to display if the pageshows several resources at one time).

Page 121: Dev Express End-User Documentation (ASP.net)

Scheduler 121

© 2011 DevExpress Inc. 121

Scheduler Navigation Buttons

The Navigation Buttons are used to scroll to the previous or next appointment. This feature is helpful when thereis a significant time interval between scheduled appointments.

A disabled button indicates that there is no appointment in that direction, i.e. before or after that date. Thebuttons can be smart enough to be displayed only when there are no appointments in the currently visibleinterval.

Page 122: Dev Express End-User Documentation (ASP.net)

Scheduler 122

© 2011 DevExpress Inc. 122

Scheduler 'More' Buttons

The "More" buttons are used to show more appointments for a particular day by scrolling to the nextappointment. They may appear in the Day View and Work-Week View.

Week View and Month (Multi-Week) View present another visual representation of these elements. Theyindicate that particular dates have more appointments than the view can display (due to insufficient space laid outfor day cells). The "Show more" hyperlink appears in these instances. Clicking this hyperlink shows the selecteddate using the Day View, enabling you to scroll the cells and review hidden appointments.

The "Show more" buttons are showin in the following image.

Page 123: Dev Express End-User Documentation (ASP.net)

Splitter 123

© 2011 DevExpress Inc. 123

Splitter

Splitter is used to separate the content of a web page into several resizable panes.

This section contains topics that describe how to work with Splitter:

Expand or Collapse a Pane

Resizing a Pane

Page 124: Dev Express End-User Documentation (ASP.net)

Splitter 124

© 2011 DevExpress Inc. 124

Expand or Collapse a Pane

Use the Collapse or Expand buttons to collapse or expand a pane.

Page 125: Dev Express End-User Documentation (ASP.net)

Splitter 125

© 2011 DevExpress Inc. 125

Resizing a Pane

To resize a pane, place the mouse pointer over the separator (vertical or horizontal) until a double-sided arrowappears. When the arrow appears, drag the separator to the required side.

Page 126: Dev Express End-User Documentation (ASP.net)

Tab Control 126

© 2011 DevExpress Inc. 126

Tab Control

This section describes the capabilities provided by the Tab Control, which is used for a presentation of tabbedinterfaces.

Click tabs to switch them. An active tab is highlighted.

Tab Scrolling

Tab Scrolling

Page 127: Dev Express End-User Documentation (ASP.net)

Tab Control 127

© 2011 DevExpress Inc. 127

Tab Scrolling

If tab scrolling is enabled, click the and buttons to scroll tabs.

Page 128: Dev Express End-User Documentation (ASP.net)

Tree List 128

© 2011 DevExpress Inc. 128

Tree List

This section describes the capabilities provided by the Tree List (multi-column tree view).

Data Editing

Edit Tree List Cells

Data Presentation and Layout

Expand and Collapse Tree List Nodes

Reorder Columns in Tree Lists

Reorder Tree List Nodes

Sort Nodes in Tree List

Selection and Navigation

Selection and Navigation in Tree List

Page 129: Dev Express End-User Documentation (ASP.net)

Tree List 129

© 2011 DevExpress Inc. 129

Data Editing

Switch to Edit Mode

To edit cell values, switch to the edit mode. To do this, click Edit.

Save Changes

To save the changes made, click Update.

Discard Changes

To cancel the changes made, click Cancel.

Note

In-place editing functionality may be disabled in your application. This is the choice of the application vendor.

Page 130: Dev Express End-User Documentation (ASP.net)

Tree List 130

© 2011 DevExpress Inc. 130

Data Presentation

Expand and Collapse Tree List Nodes

To expand or collapse a node, click its expand button.

Page 131: Dev Express End-User Documentation (ASP.net)

Tree List 131

© 2011 DevExpress Inc. 131

Sort Nodes in Tree List

To sort data, click a column header. If sorting isn't applied, clicking a column's header sorts data by itsvalues in ascending order. If sorting is already applied to a column, subsequent clicks reverse the currentsort order.

A regular click on a column header clears the sort settings on any other columns. To sort against multiplecolumns, hold the SHIFT key down while clicking.

To clear a column's sorting, click its header while pressing the CTRL key.

Page 132: Dev Express End-User Documentation (ASP.net)

Tree List 132

© 2011 DevExpress Inc. 132

Layout and Navigation

Selection and Navigation in Tree List

Navigation

To switch between pages, use the embedded Pager.

Selection

To toggle a node's selected state, preserving the previous selection, use the selection check box, if available.

Page 133: Dev Express End-User Documentation (ASP.net)

Tree List 133

© 2011 DevExpress Inc. 133

Reorder Columns in Tree Lists

To reorder columns, move a column header within the column header panel, using drag and drop.

Page 134: Dev Express End-User Documentation (ASP.net)

Tree List 134

© 2011 DevExpress Inc. 134

Reorder Tree List Nodes

To change a node's location, drag it via the mouse, and drop it at the required position.

Note

This functionality may be disabled in your application. This is the choice of the application vendor.

Page 135: Dev Express End-User Documentation (ASP.net)

Tree List 135

© 2011 DevExpress Inc. 135

Keyboard Navigation

If keyboard support is enabled within the TreeList, its primary navigation operations (such as accessing thecontrol within the form, moving focus through its nodes, node selection and expanding/collapsing, paging) can bequickly and effectively performed, using a keyboard as an alternative to a pointing device.

The enabled keyboard navigation activates the following features:

Access Key - The TreeList control can be easily accessed (focused) by using a keyboard shortcut. Thisshortcut combines the preset CTRL+SHIFT combination with a single character string specified by anapplication developer. For example, setting the access key of a TreeList control to the string "T" indicatesthat an end-user can navigate to the grid by pressing CTRL+SHIFT+T.

Focused Node - Focus can be moved between nodes by using the UP and DOWN ARROW keys. The LEFTand 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 (firstor last) node within a page changes the page within the TreeList, if applicable.

Node Selection - The SPACE key can be used to mark a focused node as selected/unselected. This worksif selection can be applied to a node. If the recursive selection is disabled, multiple nodes can be easilyselected, by moving row focus using the ARROW keys (UP/DOWN or LEFT/RIGHT) while holding down theSHIFT key.

Expanding/Collapsing Nodes - The PLUS and MINUS keys can be used to expand and collapse nodes,respectively. In addition, node collapsing and expanding can be performed using the LEFT and RIGHTARROW keys.

Paging - The SHIFT+PAGE UP and SHIFT+PAGE DOWN key combinations can be used to go to the next/previous TreeList page.

Page 136: Dev Express End-User Documentation (ASP.net)

Tree View 136

© 2011 DevExpress Inc. 136

Tree View

Tree View is used to represent hierarchical data as a tree.

Topics in this section:

Expand and Collapse Tree View Nodes

Tree View Nodes Checking

Page 137: Dev Express End-User Documentation (ASP.net)

Tree View 137

© 2011 DevExpress Inc. 137

Expand and Collapse Tree View Nodes

To expand or collapse a node, click its expand button.

Page 138: Dev Express End-User Documentation (ASP.net)

Tree View 138

© 2011 DevExpress Inc. 138

Tree View Nodes Checking

If node checking is allowed by the application vendor, a click on a check box toggles the node's checked state.