Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Wisej provides several kind of controls able to manage data in lists. The "List" controls handle single items in the data list while the "Grid" controls can handle multiple properties of each item in the list.
All list controls are derived from the ListControl class and are usually either a ComboBox or a ListBox, other similar controls are derived from one of the two. However, the ListControl base class provides all the infrastructure needed to build a custom data-bound list control.
All list controls are custom built widgets: they are all rendered as complex <div> containers since the native <select> element is too limited.
The most powerful grid control is the DataGridView. It is fully integrated with the server side and provides a large number of features and events (more than any grid from any third party vendor).
Another extremely powerful control able to manage multiple properties in a bound data list is the DataRepeater. While it's not technically a grid, it functions as a custom grid where the developer can build a template used to display data in rows or columns.
A third type of grid control is the ListView, it can show data in two main layouts: grid and items. When it shows the data in grid view, it uses an internal DataGridView.
The TreeViewComboBox control represents a UserComboBox control with a TreeView as the drop down panel.
Based upon the UserComboBox, the TreeViewComboBox control allows users to select options from a TreeView control embedded into the drop down panel of a ComboBox control.
The TreeViewComboBox control can be customized to specify whether users are allowed to select an item when it's first clicked or if an additional action should be performed such as double-clicking or clicking on the checkbox.
For a full list of properties, methods and events see the .
The TreeViewComboBox control supports the inline property. This allows an application to set a label in relation to a TreeViewComboBox control without having to create an additional Label control.
Item | Description |
---|
Class name | "wisej.web.UserComboBox" |
Theme appearance |
Child components |
ToolContainer state |
Source code |
"combobox", "listitem" for the items in the drop down, see .
"textfield" is the inner <input> widget, "button" is the drop down button, "list" is the drop down list, "popup" is the container of the drop down list, "labelfield" is the inner content when the ComboBox is not editable, and "icon" is the icon for the selected item when it shows an icon. See .
"treeview", see .
The UserComboBox control represents a ComboBox control with a custom panel that drops down when the user clicks the down arrow.
The UserComboBox control allows the creation of a custom template to use as the dropdown portion of the ComboBox.
For a full list of properties, methods and events see the API documentation.
The DropDownControl property of the UserComboBox control specifies which control to use as a template for the drop down panel of the combo box.
The UserComboBox control supports the inline Label property. This allows an application to set a label in relation to a UserComboBox control without having to create an additional Label control.
Item | Description |
---|---|
Class name
"wisej.web.UserComboBox"
Theme appearance
"combobox", "listitem" for the items in the drop down, see Themes.
Child components
"textfield" is the inner <input> widget, "button" is the drop down button, "list" is the drop down list, "popup" is the container of the drop down list, "labelfield" is the inner content when the ComboBox is not editable, and "icon" is the icon for the selected item when it shows an icon. See JavaScript.
Source code
The TreeViewComboBox control represents a UserComboBox control with a ListView as the drop down panel.
Based upon the UserComboBox, the ListViewComboBox control allows users to select options from a ListView control embedded into the drop down panel of a ComboBox control.
For a full list of properties, methods and events see the API documentation.
The ListViewComboBox control supports the inline Label property. This allows an application to set a label in relation to a ListViewComboBox control without having to create an additional Label control.
Item | Description |
---|---|
Class name
"wisej.web.UserComboBox"
Theme appearance
"combobox", "listitem" for the items in the drop down, see Themes.
Child components
"textfield" is the inner <input> widget, "button" is the drop down button, "list" is the drop down list, "popup" is the container of the drop down list, "labelfield" is the inner content when the ComboBox is not editable, and "icon" is the icon for the selected item when it shows an icon. See JavaScript.
ToolContainer state
"listview", see Embedded Tools.
Source code
Represents a drop down control in the browser.
The Wisej.Web.ComboBox control displays a text box combined with a ListBox, which enables the user to select items from the list or enter a new value. Objects in the drop down list can be of any type, the list will show a string representation of each item.
For a full list of properties, methods and events see the API documentation.
The ComboBox control supports the inline Label property. This allows an application to set a label in relation to a ComboBox control without having to create an additional Label control.
There are three DropDownStyle options that determine whether the user can edit the value in the ComboBox or must select an item from the drop down list:
DropDown. The ComboBox is editable, the user can either pick an item from the list or enter any value in the editable control. If the value entered by the user is not in the list, the SelectedIndex value will be -1.
DropDownList. The ComboBox is not editable, the user must pick an item from the list.
Simple. The ComboBox is editable, like the DropDown option, but the drop down list is always visible making the ComboBox display like a TextBox on top of a ListBox.
There are six auto complete modes supported by the ComboBox control:
None (Default). There is no auto complete. The user can type anything and the control will not auto select or suggest any item in the list.
Suggest. Causes the drop down list to open automatically as soon as the user starts typing and scrolls the list to show the items that start with the edited text. However, it doesn't select any item.
Append. Automatically completes the text with the full text of the first item that starts with the typed text and highlights the remaining portion of the text. It doesn't select any item, it only completes the text as it's typed. It doesn't open the drop down list, but if the list is already opened it also scrolls the list to show the items that match the text.
SuggestAppend. It's the combination of Suggest and Append. It opens the drop down list as soon as the user starts typing and completes the text being entered with the text of the first matching item.
Filter. Automatically opens the list when the user starts typing and filters the items in the list to show only the items that start with the text being typed. See Custom Item Filtering to implement custom filters.
AppendFilter. It is the combination of Filter and Append. Automatically opens the list when the user starts typing and filters the items in the list to show only the items that start with the text being typed, and completes the text being type with the firs item that matches. See Custom Item Filtering to implement custom filters.
Data binding is fully supported, including formatting and conversion of the value, through the default data binding infrastructure. For the ComboBox the default data property is Text.
In addition to binding the value (Text, or SelectedItem or SelectedValue bindable properties), the ComboBox control also supports data binding to populate the drop down list using the DataSource property in conjunction with the DisplayMember, ValueMember, ToolTipMember and IconMember properties.
You can use DisplayMember, ValueMember, ToolTipMember and IconMember to name which properties to use from objects in the ComboBox.Items list without binding to a DataSource.
When the ShowToolTips property is set to true, the ComboBox control uses the name specified in the ToolTipMember to read the tooltip text to display next to each item in the drop down list.
The code above shows how to add custom objects to the drop down list and bind to their properties.
You can enable the browser's built-in spell checking by setting the SpellCheck property to true.
This functionality is entirely based on the browser's current language and spell checking support. If you need to use a third party spell checking you can, but it's outside of the Wisej functionality.
This is one of the most useful features that Wisej adds to most controls. The Tools property allows the application to add internal buttons aligned left or right and handle user clicks through the ToolClicked event.
For the ComboBox, the tools are located to the left of the drop down button (arrow).
Some events exposed by the ComboBox control are fired only when there is a handler attached to the event. This features prevents the browser from sending frequent events unless the application has explicitly subscribed to the event.
For example, the KeyDown event is a Lazy Event, otherwise the browser would fire an ajax request every time the user typed a character in the ComboBox.
If you extend a control class and override the On[EventName] method to handle a lazy event without attaching a handler, your code will not be called unless there is an handler attached to the event.
Displays a background text in the control when there is no item selected. The watermark text is replaced by the selected item's text and it's restored when the SelectedIndex is reset to -1.
Wisej renders the watermark property to the placeholder HTML attribute, if it's supported by the browser, otherwise it creates an overlaid label entirely managed by the Wisej JavaScript library.
Use the CharacterCasing property to force the browser and the server to change the casing of the text entered by the user. Wisej performs the transformation on the client when typing and on the server when assigning the Text property.
Use the AllowHtml property to render the text in the items as plain HTML. This feature allows an application to render any type of content in the drop down list.
An item with this text "<big><big><big>A</big></big></big>ustralia" is rendered like this:
Wisej uses the plain text version of the item's HTML text for item filtering, and the AutoCompleteMode options.
Unlike the TextBox control, the ComboBox doesn't provide a Filter property. You can, however, attach to the "keydown" JavaScript event on the client and filter the keyboard input.
It is not possible to stop the <input> element from accepting a character by handling the KeyDown event on the server side - the event has already happened and it has already been processed by the browser by the time it reaches the server.
For example, to allow the user to only type alphabetical characters in the range a-z or A-Z add an handler for the keydown event and prevent the default processing by the browser when the typed character doesn't match the expression.
There are several ways to customize the appearance of a ComboBox: use the available properties, customize the theme, or adding custom styles.
The properties that can change the appearance of a ComboBox (and most controls) are usually limited to BackColor, ForeColor, BorderStyle, and Font properties.
If you need to achieve some very special UI design, like the Material-3 animated underline when the ComboBox gains the focus, you will have to either create a custom theme, or a theme mixin or add custom styles to the control.
You can see in the image above a ComboBox with "border:2px solid green;border-radius:20px" assigned to the CssStyle property. To apply a shared style, set the CssClass property instead and add a StyleSheet file (.css) to the application either in Default.html or using the StyleSheet extender.
The minimum height of the items in the drop down list is set in the theme under the "combobox" appearance: combobox/states/default/properties/itemHeight.
However, the rendered height in the browser depends on the content of each item and the font. You can change the minimum height either in the theme or programmatically by setting the ComboBox.ItemHeight property, in pixels.
By default, all the items of a ComboBox are sent to the browser together with the data necessary for the creation of the ComboBox widget. However, what if the user never drops down a particular ComboBox and just wants to read the selected item, and that ComboBox happens to have 5,000 items? There is no reason to send all that data back to the browser unless the user opens the drop down list.
Set the LazyLoading property to true and Wisej will take care of the rest. It will show the selected item as if the list is already populated and, when the user open the list, it will show an ajax loader icon over the drop down button while it retrieves the items from the server.
If the ComboBox.Items collection is already populated, Wisej sends back to the browser all the items in the list. However, when LazyLoading is true, it also fires the Load event allowing the application to add items to the list the first time it's opened by the user.
While the Load event is fired only the first time a LazyLoading ComboBox is opened, the DropDown event is always fired, with or without LazyLoading, giving your app a chance to update the items list every time the user opens the drop down list.
The ComboBox in Wisej can handle an unlimited number of items (we have projects with close to 100,000 items in a ComboBox!) However, creating too many widgets - each item is a widget - will impact the performance of the browser. Fortunately, Wisej implements a sophisticated virtual scrolling infrastructure for all controls that manage child items.
For the ComboBox, ListBox, and TreeView it's the VirtualScroll property. Set VirtualScroll to true and the JavaScript widget will only render the visible items allowing your application to show huge amount of data with no impact to the browser performance.
Override the dynamic RenderItem(object item) method to implement your custom rendering of the items in the list. This method is called for each item in the list and returns a dynamic object representing the corresponding widget in the list. Since each item is an actual widget, the rendering object can specify any valid widget property.
For example, if you have a ComboBox that shows a list of strings (countries) and you want to show all the ones that start with "A" with a yellow background and the ones that start with "B" with a blue background:
This is the simple override:
Remember that in VB.NET you need to use Option Strict Off for dynamic objects or use the indexer for the fields of the dynamic object.
Items in the drop down list are filtered as the user types when the AutoCompleteMode is set to either Filter or AppendFilter. The built-in filter matches the starting text of the items in a case insensitive comparison.
If you want to implement a different filtering algorithm you can do it simply by overriding the onFilterListItem(label, text) JavaScript function in the wisej.web.ComboBox JavaScript class. You can install the method override on a specific control, or you can patch the wisej.web.ComboBox class, or you can create a new custom JavaScript class.
To install a specific custom filter on a ComboBox control, add your JavaScript override to the InitScript property:
Return true to include the item represented by label or false to remove it from the list.
Represents a control to display a list of items.
The Wisej.Web.ListBox control displays a list of strings or data-bound values, allowing the user to select one or multiple options.
For a full list of properties, methods and events see the API documentation.
The ListBox control supports the inline Label property. This allows an application to set a label in relation to a ListBox control without having to create an additional Label control.
Data binding is fully supported, including formatting and conversion of the value, through the default data binding infrastructure.
In addition to binding the value (Text, or SelectedItem or SelectedValue bindable properties), the ListBox control also supports data binding to populate the list using the DataSource property in conjunction with the DisplayMember, ValueMember, ToolTipMember and IconMember properties.
You can use DisplayMember, ValueMember, ToolTipMember and IconMember to name which properties to use from objects in the ListBox.Items list without binding to a DataSource.
When the ShowToolTips property is set to true, the ComboBox control uses the name specified in the ToolTipMember to read the tooltip text to display next to each item in the drop down list.
The ListBox control allows users to define one of several different selection modes for the control's configuration.
You can see the different configuration options shown below.
The ListBox control includes lazy loading support. Lazy loading works by sending the minimum number of records to the browser that is required for display within the control.
Lazy loading will significantly reduce waiting times related to rendering on the browser and network congestion caused by transferring large datasets from the server to the client (browser).
The ListBox control has the ability to use virtual scrolling, a feature that only renders the list items currently visible in the browser.
Using this option can drastically reduce the amount of time spent rendering in the browser for large datasets. For a List containing 25,000 strings, the effect will be a noticeable difference of several seconds.
Try the following sample code to test the loading times:
There are a few different ways to populate a ListBox control.
You can add a list of strings using the Items property of the ListBox control.
Alternatively, you can assign a list of items using the DataSource property of the control.
When assigning a list of complex objects to the DataSource or Items property, the objects will be converted into their string representations for display in the ListBox control unless the DisplayMember property is set.
Icon
Building off of the previous code snippet, it is easy to add an icon to the ListBox items.
IconMember, DisplayMember, ToolTipMember, and ValueMember retrieve and set the properties of the clicked data-bound item to use for the icon, text to display, tooltip text, and click value, respectively.
The icon paths specified in each object refer to the location of the image relative to the root of the project.
The above code will result in something similar to the following:
If you are working currencies, dates, or other forms of data, you might want to utilize the FormatString property of the ListBox control.
You only need to specify FormattingEnabled = true when using a DisplayMember.
The result will look something like this (dependent on system currency):
Displays a hierarchical collection of labeled items, each represented by a TreeNode.
The Wisej.Web.TreeView control shows nested items within a hierarchical tree. Each item can have a number of subitems, allowing the user to expand and collapse nested items accordingly.
The TreeView control features a CheckBoxes property that will display a checkbox next to each node in the TreeView.
The TreeView control has the ability to use virtual scrolling, a feature that only renders the list items currently visible in the browser.
Using this option can drastically reduce the amount of time spent rendering in the browser for large datasets.
Scrolling when VirtualMode is true may be slower than rendering all of the items at the same time. To improve scrolling performance, set the PrefetchItems property to pre-render items.
Represents a column in a DataGridView control.
The DataGridViewColumn class represents a logical column in a DataGridView control. You can retrieve columns through the Columns collection of the control.
Unlike a DataGridViewRow, which contains the actual collection of cells in a DataGridView, DataGridViewColumn is used mainly to adjust the appearance and behavior of the column user interface (UI), such as column width and cell style.
Types that derive from DataGridViewColumn typically initialize the CellTemplate property to a new instance of a related type derived from the DataGridViewCell class. Any column properties that relate to the appearance or behavior of individual cells are wrappers for the corresponding properties of the template cell. Changing one of these properties on the column automatically changes the value on the cell template and on all cells in the column. To override the specified value for individual cells, set the cell values after you set the column value.
Displays a ListBox in which a check box is displayed to the left of each item.
Each item within the CheckedListBox control has a checkbox on the left side of it.
Similar to DisplayMember, ValueMember, etc. The CheckedListBox control contains a property, CheckStateMember, that defines the property of the data source or list that sets the check state for each item.
The CheckOnClick property of the CheckedListBox control can also be set to accept check state changes on a list item.
Adding Checkboxes to the CheckedListBox control is easy. See the following code snippet:
The above code snippet results in:
Represents a list view control, which displays a collection of items that can be displayed using one of four different views.
The Wisej.Web.ListView is a control used to display a list of items through one of four predefined views.
Setting the VirtualMode property to true
puts the ListView into virtual mode. In Virtual mode, the normal Items collection is unused. Instead, items are created dynamically as the ListView requires them.
Virtual mode can be useful under many circumstances. If a ListView object must be populated from a very large collection already in memory, creating a ListViewItem object for each entry can be wasteful. In virtual mode, only the items required are created. In other cases, the values of the ListViewItem objects may need to be recalculated frequently, and doing this for the whole collection would produce unacceptable performance. In virtual mode, only the required items are calculated.
In order to use virtual mode, you must handle the RetrieveVirtualItem event, which is raised every time the ListView requires an item. This event handler should create the ListViewItem object that belongs at the specified index. In addition, the VirtualListSize property must be set to the size of the virtual list.
The ListView control contains four main views for displaying list items: LargeIcon
, SmallIcon
, Details
, and Tile
.
LargeIcon
Each item appears as a fully-sized icon with a label below it.
SmallIcon
Each item appears as a small icon with a label to its right.
Details
Each item appears on a separate line with further information about each item arranged in columns.
Tile
Each item appears as a full-sized icon with the item label and sub item information below the label.
Represents a data grid control.
The DataGridView control provides a customizable table for displaying data. The DataGridView class allows customization of cells, rows, columns, and borders through the use of properties such as DefaultCellStyle, ColumnHeadersDefaultCellStyle, CellBorderStyle, and GridColor.
You can use a DataGridView control to display data with or without an underlying data source. Without specifying a data source, you can create columns and rows that contain data and add them directly to the DataGridView using the Rows and Columns properties. You can also use the Rows collection to access DataGridViewRow objects and the DataGridViewRow.Cells property to read or write cell values directly.
As an alternative to populating the control manually, you can set the DataSource and DataMember properties to bind the DataGridView to a data source and automatically populate it with data.
When working with very large amounts of data, you can set the VirtualMode property to true
to display a subset of the available data. Virtual mode requires the implementation of a data cache from which the DataGridView control is populated.
Populate the DataGridView control without binding them to a data source by using the Append and Fill methods.
AutoSizeColumnsMode and AutoSizeRowsMode let you configure the control so that column widths and row heights are automatically adjusted either to fill the control or to fit cell contents. Size adjustments occur in fill mode whenever the width of the control changes. In content-based sizing modes, size adjustments occur whenever cell contents change or, if WrapMode is enabled, whenever row heights change. Some content-based sizing modes let you limit the size adjustment to the currently displayed rows in order to increase performance.
To change the sizing mode for an individual column, set its AutoSizeMode property. The default value of this property is NotSet
, indicating that the column inherits its behavior and its InheritedAutoSizeMode property value from the control.
Don't confuse the AutoSize property with the rows and columns autosizing. If you set The AutoSize property of the DataGridView to true, it will cause the grid to grow horizontally and/or vertically (depending on the layout settings) to fit all the coulumns and all the rows.
The DataGridView control supports the standard Windows Forms data binding model, so it can bind to a variety of data sources. Usually, you bind to a BindingSource that manages the interaction with the data source. The BindingSource can be any Windows Forms data source, which gives you great flexibility when choosing or modifying your data's location.
To connect a DataGridView control to data:
Implement a method to handle the details of retrieving the data.
In the form's Load event handler, bind the DataGridView control to the BindingSource, and call the appropriate method to retrieve the data.
Columns are automatically generated when AutoGenerateColumns is set to true
and the DataSource or DataMember properties are set or changed. Columns can also be automatically generated when the AutoGenerateColumns property is changed from false
to true
. If this property is true
and the DataSource changes so there are columns that do not match the columns of the previous DataSource value, data in the unmatched columns is discarded. This property is ignored if the DataSource or DataMember properties are not set.
The DataGridView control supporting providing user-defined data management operations.
Virtual mode is designed for use with very large stores of data. When the VirtualMode property is true
, you create a DataGridView with a set number of rows and columns and then handle the CellValueNeeded event to populate the cells. Virtual mode requires implementation of an underlying data cache to handle the population, editing, and deletion of DataGridView cells based on actions of the user.
The DataGridView control is probably the largest and most complex control and widget in Wisej.NET. It exposes dozens of events, properties and methods and supports a large set of complex and advanced features.
Usually when an application needs to extend a control, in this case the DataGridView control, with additional features like a status bar, or paging strip, or other "connected" controls, the approach is to create a UserControl, drop a DataGridView in it and add all the additional controls around it in order to create a cool custom grid.
This approach, however, "hides" the DataGridView in a UserControl (or another container) and may require a large number of wrapper properties, events and methods to expose the DataGridView features to the code that uses the new custom control.
A really powerful feature of the DataGridView in Wisej.NET is the ability to also behave as a container. You can drag and drop (or add programmatically) any control inside the DataGridView and it will adapts its "inside" configuration to incorporate the additional controls - it is a composed DataGridView.
You can do that directly in the container using the composed grid, or you can create a custom control extending the DataGridView and dropping controls in there.
Control the layout using Docking and BringToFront or SendToBack. You can also set the ResizableEdges property of the inner controls and implement a simple splitting system where ethe user can resize the inner controls.
When the built-in cell editors are not sufficient, or you need to customize the editing of any cell, you can assign a custom editing control to DataGridViewColumn.Editor and Wisej will use that instance of the control to edit the content of the cells in that column.
Unless the editing control fires the TextChanged event when edited, it's up to your code to handle the CellBeginEdit and CellEndEdit events and update the value of the cell.
When the custom cell editors, or the HTML content, or the cell painting are not enough, the DataGridView support placing any control in any cell, even spanning multiple cells!
"With great power come great responsibility".
Use this feature responsibly, adding a control on every cell will, well, add a control to every cell and if your grid has 10,000 rows you will end up having 10,000 controls and slow down the browser and use up memory on the server.
When you really need to display something too complex for HTML, or you have an existing painting routine in .NET, the DataGridView allows you to paint directly into the cell.
Attach a handler to DataGridView.CellPaint and enable user painting on the cell by setting the UserPaint property to true:
Setting the AllowHtml property of a DataGridViewColumn or a specific DataGridViewCell allows the cell to display HTML text in the browser. This feature allows you to display just about anything in cell: images, progress bars, charts, multiple data, etc.
Another way to display custom HTML in a cell without having to store HTML in the cell value is to use the CellFormatting event. It allows you to "render" the display of the cell:
You can detect clicks inside a particular element inside a cell by setting the "role" attribute of the HTML element and check the e.Role string that comes with the cell click events.
Item | Description |
---|---|
Selection Mode | Description |
---|---|
Item | Description |
---|---|
For a full list of properties, methods and events see the .
Item | Description |
---|
For a full list of properties, methods and events see the .
The is based upon the control but includes a checkbox on the left side of each list item.
For a full list of properties, methods and events see the .
Item | Description |
---|
For a full list of properties, methods and events see the .
Data binding is fully supported, including formatting and conversion of the value, through the default infrastructure.
Item | Description |
---|
For a full list of properties, methods and events see the
When AutoGenerateColumns is set to true
, the DataGridView control generates one column for each public property of the objects in the data source. If the bound objects implement the interface, the control generates one column for each property returned by the GetProperties method. Each column header will contain the value of the property name the column represents.
Use the event to build and maintain your server-side cache or data retrieval code that collects the data to feed the CellValueNeeded event.
Item | Description |
---|
Class name
"wisej.web.ComboBox" or "wisej.web.VirtualComboBox" when VirtualScroll is true.
Theme appearance
"combobox", "listitem" for the items in the drop down, see Themes.
Child components
"textfield" is the inner <input> widget, "button" is the drop down button, "list" is the drop down list, "popup" is the container of the drop down list, "labelfield" is the inner content when the ComboBox is not editable, and "icon" is the icon for the selected item when it shows an icon. See JavaScript.
ToolContainer state
"editor", see Embedded Tools.
Source code
None
No items can be selected.
One
Only one item can be selected.
MultiSimple
Multiple items can be selected.
MultiExtended
Multiple items can be selected, and the user can use the SHIFT, CTRL, and arrow keys to make selections.
Class name
wisej.web.ListBox for the ListBox. wisej.web.listbox.ListItem for each list box item.
Theme appearance
"list", "listitem" for the items in the list box, see Themes.
ListBox child components
"scrollbar-x" is the horizontal scrollbar and "scrollbar-y" is the vertical scrollbar. See JavaScript.
List item child components
"checkbox" is the list item's checkbox. "icon" is the list item's icon. See JavaScript.
ToolContainer state
"listbox", see Embedded Tools.
Source code
Hosts a collection of DataGridViewTextBoxCell cells.
The DataGridViewTextBoxColumn class is a specialized type of DataGridViewColumn class used to logically host cells that enable displaying and editing of text strings. A DataGridViewTextBoxColumn has an associated DataGridViewTextBoxCell object in every DataGridViewRow that intersects it. When a DataGridViewTextBoxCell becomes activated, it supplies a DataGridViewTextBoxEditingControl control to handle user input.
The sort mode for this column type defaults to Automatic
.
For a full list of properties, methods and events see the API documentation.
Represents a column of cells that contain links in a DataGridView control.
The DataGridViewLinkColumn class is a specialized type of the DataGridViewColumn class used to logically host cells that respond to user clicks. The DataGridViewLinkColumn class is similar to the DataGridViewButtonColumn class but provides a different user experience that may be more appropriate in certain situations, such as displaying a URL stored in a database table.
To display the same link text for every cell, set the UseColumnTextForLinkValue property to true
and set the Text property to the desired link text.
A DataGridViewLinkColumn has an associated DataGridViewLinkCell in every DataGridViewRow that intersects it.
The default sort mode for this column type is NotSortable
.
To respond to user link clicks, handle the DataGridView.CellMouseClick event. You can also use the DataGridView.CellClick event to respond to clicks anywhere in the cell.
For a full list of properties, methods and events see the API documentation.
Class name | wisej.web.TreeView for the TreeView. wisej.web.TreeNode for each tree node. |
Theme appearance |
TreeView child components |
TreeItem child components |
TreeNode child components |
ToolContainer state |
Source code |
Class name | wisej.web.CheckedListBox for the CheckedListBox. wisej.web.listbox.ListItem for each list box item. |
Theme appearance |
ListBox child components |
List Item child components |
ToolContainer state |
Source code |
Class name | wisej.web.ListView |
Theme appearance |
Child components |
ToolContainer state |
Source code |
Class name | wisej.web.DataGrid |
Theme appearance |
Child components |
ToolContainer state |
Source code |
"tree", "tree-item" for the items in the tree view, "tree-folder" for the folders in the tree view, "tree-file" for the end nodes in the tree view. See .
"scrollbar-x" is the horizontal scrollbar and "scrollbar-y" is the vertical scrollbar. See .
"checkbox" is the list item's checkbox. "label" is the node (folder)'s text. "icon" is the list item's icon. See .
"open" is the icon showing whether the row is expanded. "checkbox" is the node's checkbox. "label" is the node's text. See .
"treeview", see .
"list", "listitem" for the items in the list box. See .
"scrollbar-x" is the horizontal scrollbar and "scrollbar-y" is the vertical scrollbar. See .
"checkbox" is the checkbox shown in each list item. "icon" is the icon shown in each list item. .
"listbox", see .
"listview" is the entire widget, "item-view" is the container for the items, "grid-view" is the container for the items when the view is "Details", "grid-row" is the item when the view is "Details", "grid-cell" is one cell in the grid when view is "Details", "item" is the list item, "tools" is the container for the tool icons. See .
See .
"listview", see .
"table" is the entire widget. All components of the grid use the "table-[name]" appearance key. See .
See .
"datagrid", see .
Hosts a collection of DataGridViewImageCell objects.
The DataGridViewImageColumn class is a specialized type of the DataGridViewColumn class used to logically host cells that display images. A DataGridViewImageColumn has an associated DataGridViewImageCell in every DataGridViewRow that intersects it. Each cell is capable of containing an Image or an Icon.
By default, empty cells display a default error graphic. To prevent this graphic from appearing for cell values equal to null
or DBNull.Value
, set the DataGridViewCellStyle.NullValue property of the cell style object returned by the DefaultCellStyle property to null
before adding rows to the control. This does not affect the row for new records, however. To prevent the error graphic from appearing in the row for new records when the control AllowUserToAddRows property value is true
, you must also either explicitly set the cell value to null
in a handler for the control RowsAdded event or set the column CellTemplate property to an instance of a DataGridViewImageCell-derived type with an overridden DefaultNewRowValue property that returns null
.
The default sort mode for this column type is NotSortable
.
For a full list of properties, methods and events see the API documentation.
Represents a column of cells that contain DateTimePicker controls in a DataGridView.
The DateTimePickerColumn class is a specialized type of the DataGridViewColumn class used to logically host cells that display DateTimePicker controls. A DateTimePickerColumn has an associated DataGridViewDateTimePickerCell in every DataGridViewRow that intersects it. Each cell contains a DateTimePicker control.
You can populate the cells manually by setting their Value properties. Alternatively, you can bind the column to the data source indicated by the DataGridView.DataSource property. If the DataGridView is bound to a database table, set the column DataPropertyName property to the name of a column in the table. If the DataGridView is bound to a collection of objects, set the DataPropertyName property to the name of an object property.
For a full list of properties, methods and events see the API documentation.
Represents a column of cells that contain NumericUpDown controls in a DataGridView.
The DataGridViewNumericUpDownColumn class is a specialized type of the DataGridViewColumn class used to logically host cells that display NumericUpDown controls. A DataGridViewNumericUpDownColumn has an associated DataGridViewNumericUpDownCell in every DataGridViewRow that intersects it. Each cell contains a NumericUpDown control.
You can populate the cells manually by setting their Value properties. Alternatively, you can bind the column to the data source indicated by the DataGridView.DataSource property. If the DataGridView is bound to a database table, set the column DataPropertyName property to the name of a column in the table. If the DataGridView is bound to a collection of objects, set the DataPropertyName property to the name of an object property.
For a full list of properties, methods and events see the API documentation.
Represents a column of cells that contain MaskedTextBox controls in a DataGridView.
The MaskedTextBoxColumn class is a specialized type of the DataGridViewColumn class used to logically host cells that display MaskedTextBox controls. A MaskedTextBoxColumn has an associated DataGridViewMaskedTextBoxCell in every DataGridViewRow that intersects it. Each cell contains a MaskedTextBox control.
You can populate the cells manually by setting their Value properties. Alternatively, you can bind the column to the data source indicated by the DataGridView.DataSource property. If the DataGridView is bound to a database table, set the column DataPropertyName property to the name of a column in the table. If the DataGridView is bound to a collection of objects, set the DataPropertyName property to the name of an object property.
For a full list of properties, methods and events see the API documentation.
The MaskedTextBox's Mask property features a popup dialog to quickly select one of the common predefined masks.
Represents a column of DataGridViewComboBoxCell objects.
The DataGridViewComboBoxColumn class is a specialized type of DataGridViewColumn used to logically host cells that enable users to select values from a list of choices. A DataGridViewComboBoxColumn has an associated DataGridViewComboBoxCell in every DataGridViewRow that intersects it.
You can populate the cells manually by setting their Value properties. Alternatively, you can bind the column to the data source indicated by the DataGridView.DataSource property. If the DataGridView is bound to a database table, set the column DataPropertyName property to the name of a column in the table. If the DataGridView is bound to a collection of objects, set the DataPropertyName property to the name of an object property.
You can populate the column drop-down list manually by adding values to the Items collection. Alternatively, you can bind the drop-down list to its own data source by setting the column DataSource property. If the values are objects in a collection or records in a database table, you must also set the DisplayMember and ValueMember properties. The DisplayMember property indicates which object property or database column provides the values that are displayed in the drop-down list. The ValueMember property indicates which object property or database column is used to set the cell Value property.
For a full list of properties, methods and events see the API documentation.
The DataGridViewComboBoxColumn features several different drop down presets:
Simple: The list is always visible and that the text portion is editable. The user can enter a new value or can select an existing value in the list.
DropDown: The list is displayed by clicking the down arrow, or pressing either the Down, Alt+Down or Alt+Up keys, and that the text portion is editable. The user can enter a new value or select an existing value in the list.
DropDownList: The list is displayed by clicking the down arrow, or pressing either the Down, Alt+Down or Alt+Up keys, and that the text portion is not editable. The user cannot enter a new value and can only select a value already in the list.
Provides a user interface for browsing the properties of an object.
To use the property grid, you create a new instance of the PropertyGrid class on a parent control and set SelectedObject to the object to display the properties for.
The information displayed in the grid is a snapshot of the properties at the time the object is assigned. If a property value of the object specified by the SelectedObject is changed in code at run time, the new value is not displayed until an action is taken in the grid that causes the grid to refresh.
For a full list of properties, methods and events see the API documentation.
Displays data in a customizable list format.
The DataRepeater control functions as a scrollable container for controls that display repeated data, for example, rows in a database table. It can be used as an alternative to the DataGridView control when you need more control over the layout of the data.
You can use a DataRepeater control to display data with or without an underlying data source.
Without specifying a data source, you can create rows that contain data and add them to the DataRepeater.
When working with large amounts of data, you can set the VirtualMode property to True
to display a subset of the available data. Virtual mode requires the implementation of a data cache from which the DataRepeater control is populated.
When the DataRepeater has VirtualMode property set to true, it can handle any number of records. The entries are only retrieved from the server when they become visible on the client (unless the PrefetchItems count is set).
Item | Description |
---|---|
For a full list of properties, methods and events see the .
Item | Description |
---|
Class name
wisej.web.PropertyGrid
Source code
Class name | wisej.web.DataRepeater |
Source code |
Hosts a collection of DataGridViewCheckBoxCell objects.
The DataGridViewCheckBoxColumn class is a specialized type of the DataGridViewColumn class used to logically host cells that indicate binary state. A DataGridViewCheckBoxColumn has an associated DataGridViewCheckBoxCell in every DataGridViewRow that intersects it. Each cell supplies a user interface (UI) that is similar to a CheckBox control.
The default sort mode for this column type is NotSortable
.
Typically, check box cell values are intended either for storage, like any other data, or for performing bulk operations. If you want to respond immediately when users click a check box cell, you can handle the DataGridView.CellContentClick event, but this event occurs before the cell value is updated. If you need the new value at the time of the click, one option is to calculate what the expected value will be based on the current value. Another approach is to commit the change immediately, and handle the DataGridView.CellValueChanged event to respond to it.
For a full list of properties, methods and events see the API documentation.
The ThreeState property defines whether the checkbox cells will allow three check states or the default two check states.
The DataGridViewCheckBoxColumn can also be sorted according to the cells value in ascending or descending order:
Hosts a collection of DataGridViewButtonCell objects.
The DataGridViewButtonColumn class is a specialized type of the DataGridViewColumn class used to logically host cells that respond to simple user input. A DataGridViewButtonColumn has an associated DataGridViewButtonCell in every DataGridViewRow that intersects it. Each cell supplies a user interface (UI) that is similar to a Button control.
To display the same button text for every cell, set the UseColumnTextForButtonValue property to true
and set the Text property to the desired button text.
The default sort mode for this column type is NotSortable
.
To respond to user button clicks, handle the DataGridView.CellClick or DataGridView.CellContentClick event. In the event handler, you can use the DataGridViewCellEventArgs.ColumnIndex property to determine whether the click occurred in the button column. You can use the DataGridViewCellEventArgs.RowIndex property to determine whether the click occurred in a button cell and not on the column header.
For a full list of properties, methods and events see the API documentation.