Resharper Style ToDo Indicator Control

• Download demo project - 13.0 Kb
• Download source code - 19.0 Kb

Introduction

This simple "Resharper Style" ToDo Indicator control, when associated to a row based view component such as DataGrid, ListView, TextBox (multi-line) etc., provides a simple mechanism to inform users of data content that requires attention. The control can also be used to simplify navigating large amounts of data. With a simple click of a marker, the view can be quickly updated to display the associated row element.

The control can be used in one of two modes, simple and advanced. In the simple mode, the control is configured to correspond to three states: error, warning, and information. Each marker can then be used to represent these states, identified either by the colour of the marker or by the tooltip text displayed when the mouse hovers over a marker. In the advanced mode, the colour and text associated for each marker, are configured independently.

The above example shows the test application configured with a DataGrid and a ToDoIndicator and a number of controls to enable the ToDoIndicator to be tested.

Using the control

This section describes how to use the component in conjunction with the DataGrid example provided.

Installing / configuring the control

To install the component, open the Microsoft Visual Studio .NET toolbox, and either choose an existing category to install in, or create a new category. From within the category, select Add / Remove Items, and then using the Browse option, locate and select ToDoIndicator.dll. The ToDoIndicator component is now available for use in your project.

To then use the control at design time, from an open project, drag the ToDoIndicator control onto the designer view. It is recommended that the control be docked to one side of the form, but this is not mandatory.

Simple Operation

When using the control in the simple mode, it is recommended that you configure the component at design time. To configure the component, after dragging the component onto the designer view of the form, the control's properties can be set accordingly in the Designer view located in the "Appearance" section. The important properties to set for simple operation are:

• WarningText
• ErrorText
• InfoText

All other properties can be left to there default settings. In addition, all properties can be set programmatically.

The client application is responsible for linking the ToDoIndicator component to a data view component, e.g. a DataGrid. Whenever a row is added / deleted to the data view component, the client must update the ToDoIndicator accordingly, using the SetViewRows() method. This enables the ToDoIndicator to scale its markers according to the associated row in the view data.

rowId++;
dataTable.AcceptChanges();
RowsComboBox.SelectedIndex = 0;

toDoIndicator.SetViewRows(maxLoop);

It is usual for the data view to have more rows than the ToDoIndicator is capable of displaying. The ToDoIndicator does the best effort to display the markers in proportion to the row location in the actual data. For example, if there are 1000 rows in the data and markers are set for rows 250 and 500, the markers will be set at 25% and 50% in the ToDoIndicator. This scaling will be maintained even if the component is resized. In situations where there is a large amount of data (say 2000 rows) and indicators are set close together, e.g. row 10 and 11, the ToDoIndicator priority is to maintain the ratio as previously described; this will cause markers to overlap.

To add a simple marker, the client calls the AddMarker() method providing the associated row in the data view area, and a state, e.g. Info, Error, Warning. See below:

toDoIndicator.AddMarker((int)RowsComboBox.SelectedItem, ToDoIndicator.State.Info);

The marker will then be added to the ToDoIndicator control at a position relative to the row's position in the data view. To remove one or more markers, use the RemoveMarker(Row) or RemoveAllMarkers() methods respectively.

Advanced Operation

To use the control in the advanced mode, the client provides the color and text information when creating the marker, using the method AddMarker().

All of the other procedures apply as per the simple operation. With this operation, the user can choose on a per marker basis, the color to be used and also the text to be displayed in the associated marker tooltip.

Additional Operations

In addition to displaying markers relative to data in a data view element, it is also possible for the ToDoIndicator control to fire a ScrollViewEvent() whenever the client clicks on a marker. The event is registered as shown below:

this.toDoIndicator.ScrollViewEvent += new 
  ToDoIndicator.ToDoIndicator.ScrollViewDelegate(toDoIndicator_ScrollViewEvent);

The event content contains the row identifier associated with the marker which the client application can, for example, use to scroll the selected row into the visible area of the control.

The client can also indicate a summary status by changing the color of the summary status box located at the top of the ToDoIndicator control. The color is changed using the SetSummary() method, providing the required display colour as a parameter..

Test Application

Provided with this control is a test application based on a DataGrid. When the application is started, select the "Add 10 Rows" a few times, to add some data into the control. Notice that the ComboBox is updated to show the rows in the table. To add a marker, select a row in the ComboBox and select the button AddMarker. A marker will be added to the ToDoIndicator control. The marker can be deleted by selecting a marker row in the ComboBox and selecting the DeleteMarker button.

With markers added to the control, try resizing the control and observe how the markers maintain their positions in relation to the actual data in the grid. Try the same with more records added. Try hovering the mouse over a marker and note the operation of the tooltip control. Lastly, click on a marker and notice how the grid scrolls and highlights the associated row in the grid.

I hope someone finds this control useful and I appreciate feedback on its design and possible enhancements.

History

• 4^th January 2005 - V1.0 - The initial release of the component.