Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
general_navigation_tree [2017/03/20 13:05] steveclarke [Tree Controls] |
general_navigation_tree [2017/03/20 13:17] (current) steveclarke |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Tree Controls ====== | ====== Tree Controls ====== | ||
| + | Tree controls are used to display hierarchical data. They are used primarily in the [[bank_select_level_3|Bank Selection]], [[exam_edit_layout|Exam Layout]] and when working with [[competency_entry|Competencies]]. | ||
| + | |||
| + | === Expand a Tree === | ||
| + | The image below is from Exam Layout. It show a collapsed Exam with its Sections. To expand collapsed nodes, click the arrow next to the node. | ||
| + | |||
| {{:treecollapsed.png?200|}} | {{:treecollapsed.png?200|}} | ||
| - | Tree controls are used to display hierarchical data. They are used primarily in the [[bank_select_level_3|Bank Selection]],[[exam_edit_layout|Exam Layout]] and when working with [[competency_entry|competencies]]. | + | === Collapse a Tree === |
| + | The image below is from Exam Layout. It show an expanded Exam with its Sections. To collapse an expanded node, click the arrow next to the node. | ||
| + | |||
| + | {{:treeexpanded.png?200|}} | ||
| + | |||
| + | === Context Menus === | ||
| + | Some trees like on Exam Layout support right-click context menus. To open a context menu, right click the node on the tree. | ||
| + | |||
| + | {{:treecontext.png?200|}} | ||
| + | |||
| + | === Drag and Drop === | ||
| + | Some trees support drag and drop functionality to help reorder nodes in the tree. For example, the Exam layout tree supports drag and drop to reorder Items on the Exam. | ||
| + | |||
| + | To drag and drop: | ||
| + | * Select a node by clicking the mouse button down on the node. | ||
| + | * While holding the mouse button down, **Drag** the node to another part of the tree. When doing this, drop points are shown via a dashed line. | ||
| + | * When the node is in position, **Drop** the node by releasing the mouse button. | ||
| - | {{:radeditor.png?600|}} | + | {{:treedrag.png?200|}} |
| - | The rich text editor allows the user to maintain and format content. There are three edit modes. | + | Note: If dragging a node to an area that is invalid, like dragging an Item to drop directly on an Exam, a "Not Allowed" symbol is displayed over the node. |
| - | * Design: In the Design mode you can edit and format the content by using the toolbar buttons, dropdowns and dialogs. | + | {{:not_allowed_sign.jpg?50|}} |
| - | * Html: HTML mode provides direct access to the content HTML. This mode is used most often by advanced users. | + | |
| - | * Preview: Shows how the content will look like before updating the page. | + | |
| - | ==== Editor Tools ==== | + | |
| - | ^Icon^Tool Name^Descirption^ | + | |
| - | |{{:radeditor_bold.png|}}|Bold|Applies bold formatting to the selected text.| | + | |
| - | |{{:radeditor_italic.png|}}|Italic|Applies italic formatting to the selected text. | + | |
| - | |{{:radeditor_underline.png|}}|Underline|Applies underline formatting to the selected text.| | + | |
| - | |{{:radeditor_left.png|}}|Justify Left|Aligns the selected paragraph to the left.| | + | |
| - | |{{:radeditor_center.png|}}|Justify Center|Aligns the selected paragraph to the center.| | + | |
| - | |{{:radeditor_right.png|}}|Justify Right|Aligns the selected paragraph to the right.| | + | |
| - | |{{:radeditor_applyclass.png|}}|Apply Class|Applies custom, predefined styles to the selected text.| | + | |
| - | |{{:radeditor_customlink.png|}}|Custom Link|Inserts an internal or external link from a predefined list.| | + | |
| - | |{{:radeditor_fontfamily.png|}}|Font Name|Sets the font typeface.| | + | |
| - | |{{:radeditor_fontsize.png|}}|Font Size|Sets the font size.| | + | |
| - | |{{:radeditor_forecolor.png|}}|Fore Colour|Changes the foreground color of the selected text.| | + | |
| - | |{{:radeditor_backcolor.png|}}|Back Colour|Changes the background color of the selected text.| | + | |
| - | |{{:radeditor_table.png|}}|Insert Table|Inserts a table in the editor. for more on inserting tables and their dialog windows click [[http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/dropdowns/insert-table|here]].| | + | |
| - | |{{:radeditor_findreplace.png|}}|Find and Replace|Find (and replaces) text in the editor's content area.| | + | |
| - | |{{:radeditor_print.png|}}|Print|Prints the contents of the editor or the whole web page.| | + | |
| - | |{{:radeditor_spellcheck.png|}}|Spell Check|Launches the spell checker.| | + | |
| - | |{{:radeditor_undo.png|}}|Undo|Undoes the last action.| | + | |
| - | |{{:radeditor_redo.png|}}|Redo|Redoes/repeats the last action, which has been undone.| | + | |
| - | |{{:radeditor_cut.png|}}|Cut|Cuts the selected content and copies it to the clipboard.| | + | |
| - | |{{:radeditor_copy.png|}}|Copy|Copies the selected content to the clipboard.| | + | |
| - | |{{:radeditor_paste.png|}}|Paste|Pastes the copied content from the clipboard into the editor.| | + | |
| - | |{{:radeditor_pasteword.png|}}|Paste Word|Pastes content copied from Word and removes the web-unfriendly tags.| | + | |
| - | |{{:radeditor_wordstripfont.png|}}|Paste Word Strip Font|Paste from Word cleaning fonts and sizes - Cleans all Word-specific tags and removes font names and text sizes.| | + | |
| - | |{{:radeditor_pastetext.png|}}|Paste Text|Paste from Word cleaning fonts and sizes - Cleans all Word-specific tags and removes font names and text sizes.| | + | |
| - | |{{:radeditor_pasteashtml.png|}}|Paste as HTML|Pastes HTML code in the content area and keeps all the HTML tags.| | + | |
| - | |{{:radeditor_pastehtml.png|}}|Paste HTML|Pastes HTML code in to the current selection and renders it. It is helpful when needed to enter predefined HTML code such as media embed source.| | + | |
| - | |{{:radeditor_formatstripper.png|}}|Format Stripper|Removes custom or all formatting from selected text.| | + | |
| - | |{{:radeditor_addattachment.png|}}|Add Attachment|Opens an Attachment Selector dialog that allows the user to embed an Attachment image in the text.| | + | |
