The AutoCompleteTextBox control adds the common auto-complete paradigm to the textboxes. The control is loaded with features to help you customize the behavior and look and feel in many different ways.
The control allows you to specify any custom IEnumerable data as a reference dictionary. Choice list can be populated either at the server side or client side.
AutoComplete Text Box
Several built-in customization options:
Support for selecting multiple items using a specified delimiter.Optionally disaply a combobox type dropdown button to display all the options.
Show a loading indicator while the suggestion list is being built.
Case sensitive or insensitive comparison.
The look and feel of each line in the dropdown suggestion list is fully customizable.
Customized dropdown list look and feel.
The search terms can also be highlighted in the dropdown. The dropdown positioning can also be controlled and the text right aligned.
AutoComplete Text Highlighting with right aligned text
AutoComplete Text Box—Syncfusion Skins
Masked-edit text boxes can be used to restrict data entry to a specific format. It supports all common mask types including telephone numbers, social security numbers, and zipcodes.
The appearance of a masked-edit text box can be customized by altering its Add and Prompt characters.
Customized Masked-Edit Text Box
There are several client-side events and methods that allow you to interact with the masked-edit text box through JavaScript.
The DatePicker control contains a drop-down calendar, which can be used to select date values. The control allows you to optionally display
multiple months and enable drop-down menus to select years and months.
Date Picker with Multi Month Display
The DatePicker also has an inline mode where the Calendar is displayed directly on the page as opposed to a dropdown.
Calendar shown inline in the page.
You can also optionally show the month and year dropdowns in the calendar.
Month and Year Drop-down List
The DatePicker's look and feel can be customized from one of the jquery skins or Syncfusion skins.
Date Picker jQuery Skins
Date Picker Syncfusion Skins
There is also full support for localization. Pick a culture and the DatePicker will show text in that culture.
Date Picker in French
The GenericDropDown control is a generic container for hosting any custom content in a drop-down list.
GenericDropDown Control with a Custom List
The GenericDropDown control provides support for data binding, allowing you to easily use items in a table or any IList data source to populate the list items.
The control is also optimized to handle large data sets.
Data-Bound GenericDropDown Control
Here are some real-world scenarios that can be built using the GenericDropDown.
Multiple Selection in the dropdwon
Color Selection UI built using GenericDropDown
The NumericTextBox control can be used to restrict user input to numeric values, and the PercentageTextBox control can be used to restrict the user input to percentage values.
You can specify the maximum, minimum, and step-increment values. The spin buttons can optionally be hidden.
Numeric Text Box
Percentage Text Box
Watermark text can be displayed in a numeric text box to give additional information about the user input.
Numeric Text Box with a Watermark
The number of decimal digits displayed in a numeric text box can be customized.
Customizing Decimal Digits
There are several client-side events and methods you can use to listen to user actions in JavaScript. Controls in Essential Tools also respond to appropriate arrow keys and mouse wheel spins.
Predefined styles can be applied to controls using the automatic formatting options.
Built-in Styles for Numeric Text Boxes
Built-in Styles for Percentage Text Boxes
Essential Tools has built-in support for validating the most commonly used types of data, such as dates, e-mail addresses, IP addresses, zipcodes, time, and URLs.
Form with Validation Messages
All common features you would expect from a word processor are supported.
Text formatting like Font name and size, Bold, Italic, Underline and Strikethrough.Horizontal text alignment.Bullets and Numbered lists.Undo/RedoInserting HyperlinksInserting ImagesSuper script and sub scripts, etc.
Rich Tool Set Options
End users can also switch between design and HTML views, allowing them to go beyond standard formatting options available in the design view and provide more detailed formatting options in the HTML view.
RichTextEditor in HTML Mode
There is also support for cleaning up HTML pasted from other sources like Word.
The RichTextEditor control provides end users an option for inserting images within the editor from a predefined path.
The File Select dialog allows the end-users to select from a list of predefined images. The dialog also has a built-in preview option.
Insert Image Option
The RichTextEditor control also comes with a set of built-in smiley images that the end-user can pick and choose to insert into their documents. Turn on this feature for blog like content editing.
Insert Smileys
The RichTextEditor control supports 14 predefined skins that enhace the look and feel.
Rich Text Editor Skins
The RichTextEditor control is culture-aware, comes with built-in support for several languages and can also be localized for any desired language.
RichTextEditor with French culture
The RichTextEditor control supports resizing, providing your end users more control over the size of the editor. With jQuery-powered resizing, you’ll be able to turn this functionality on and off.
Resizing the Rich-Text Editor
Give your end users the ability to insert form elements in a rich-text editor control, providing the ability to add more interactive content to your end-users.
The following elements can be added:
FormButtonCheckboxHiddenPasswordRadio buttonResetSubmitText boxText areaSelect (drop-down box)
Rich-Text Editor Form Elements
The TreeView includes several client side methods that will allow you to Expand all or specific nodes as well as Collapse all or specific nodes, Select or deselect a specific node, enable/disable a node and even
add new nodes or remove an existing node.
The TreeView control also raises extensive client-side events.
Client-side events are raised for several node operations such as add, remove, expand, collapse, drag, drop, rename, and select.
There are also client-side validation events that are raised if a tree contains editable nodes.
A rich set of predefined styles enable the creation of professional-looking tree controls with ease.
Built-in Styles for the TreeView Control
Besides styles, TreeView features predefined skins that enhance the look and feel which are customizable with images.
Built-in Skins for the TreeView Control
It is also possible to define custom styles that define the appearance of different node states.
Node Images change as expand/collapse state changes
Full support for including icons in nodes.
Images in Tree Nodes
Lines indicating hierarchy can be customized or completely removed.
Visible Tree Lines
Hidden Tree Lines
The Menu control requires simple ul and li tags as input. It provides a rich set of client-side events and a variety of show and hide animations.
Menu
When you select vertical orientation, a menu's content is displayed in a vertical manner.
Vertical Menu
When you select horizontal orientation, a menu's content is displayed in a horizontal manner.
Horizontal Menu
The Menu control now supports a context menu that can be bound to any target control, thus preventing the default browser’s context from appearing in the target control.
Context Menu
Context Menu Skins
Enable and Disable Menu Items
The Menu control supports disabling and enabling menu items from the client-side, thereby preventing end-users from interacting with a particular menu item. Also, a menu can be disabled as a whole.
Menu with Disabled Items
The Menu control supports fourteen built-in skins that enhance its look and feel.
Syncfusion Menu Skins
The ToolBar control provides options for disabling, enabling, selecting, and deselecting toolbar items.
Toolbar with Items Disabled
Toolbar with Items Selected
The ToolBar control provides support for data binding, thereby allowing items in a table or any IList data source to be bound to a toolbar.
Data-Bound Toolbar
The ToolBar control comes with fourteen built-in skins.
Toolbar Skins
The Tab control can be used to create professional tabbed interfaces for Web pages. This control is extremely lightweight, and switching between tabs is done entirely client-side.
Illustrated Tab
The default behavior of the Tab control is to open contents associated with a tab on mouseover.
Tab Set to Expand on Mouseover
An open tab, displaying all its contents, can be closed by clicking on it.
Collapsed Tab
The Tab control supports fourteen predefined skins apart from the jQuery skins that enhance its look and feel.
jQuery Tab Skins
Syncfusion Tab Skins
The ToolBar control in Essential Tools includes a Rotator control that is ideal for setting up slide shows.
Rotator
Vertically Aligned Rotator
Rotator Control in Pager Mode
Rotator Control in Slider Mode
Display images, text, and templates.Horizontal, vertical, image viewer, circular, auto scroll, and slideshow modes.Automatic scrolling, button, button hover, and mouse wheel navigation types.Data source and load on demand loading types.Item highlight and resize on mouseover.Customizable animation and background.Integrate Pager in the rotator to view the items in the rotator seamlessly.Resize window and border for each item.
The Accordion control can be used to organize content into multiple collapsible sections that can be expanded on demand. This control is highly customizable and has several built-in skins to simplify styling.
Accordion
When expanded content is selected, the content collapses and only the header is displayed.
Collapsed Accordion
The default behavior of the Accordion control is to expand its contents on mouseover.
Expand Accordion on Mouseover
The Accordion control has more than 30 predefined styles.
jQuery Accordion Skins
The Accordion control supports fourteen predefined skins apart from the jQuery skins that enhance its look and feel.
Syncfusion Accordion Skins
The ProgressBar control is a highly customizable HTML 5-based component used to visually display the progress of an ongoing process.
Progress Bar
Horizontal and vertical orientation modes are available.
Progress Bar with Vertical Orientation
Some of the customization options include changing the border color, fill color, font, font color, and font size.
Customized Progress Bar
The Captcha control featured in Essential Tools for ASP.NET MVC allows you to ensure human logins rather than machine logins into your system. Captcha is the acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart", and is the most popular technique used for blocking meta-searching search engines, performing dictionary attacks on login pages, or sending spam using mail servers.
Key features:
Customizable dimensions.
Customizable captcha feeds.
Auto-validation support.
Fourteen buit-in themes to enhance the control's look and feel.
Custom style support.
Captcha Control
The Captcha control also provides an option to regenerate the verification text if the user finds it difficult to verify a specific text.
Captcha - Refreshable Verification Text
The Captcha control supports fourteen predefined skins that enhace its look and feel.
Captcha with Office 2007 Blue Theme
Captcha with Midnight Theme
The TagCloud control provides a visual depiction of user-generated tags or keywords, where the importance of the tags are differentiated with varied font sizes, colors, or styles.
Tag Cloud
The TagCloud control supports fourteen predefined skins that enhance its look and feel.
Tag Cloud with Syncfusion Vista Skin
Tag Cloud with Syncfusion Almond Skin
Tag Cloud with Syncfusion Midnight Skin
Tag Cloud with Syncfusion Sandune Skin
The Dialog control allows you to display custom content in a resizable window within a Web page. It has several customization options, including adding close buttons and defining callback functions in order to respond to client-side actions.
Dialog Control
The Dialog control supports fourteen predefined skins that enhace the look and feel.
Dialogs with Syncfusion Skins
The WaitingPopup is ideal for disabling some poritions of your page temporarily while you are typically waiting for something to load from
the server. The popup could be displayed semi-transparently over a region in the page, giving it a disabled look as well as show a "loading" status image to indicate the state.
Waiting Pop-up over an Accordion making it disabled
Also use from a set of 4 pre-defined animated shapes to indicate loading state.
Waiting Pop-up over an Accordion making it disabled
