RadioButton and AutoComplete DataMap Editors for FlexGrid

March 31 2020

DataMaps have been an essential feature of the FlexGrid control since its first release. When you assign a DataMap to a FlexGrid column, you get two things:

The automatic mapping between the raw data values and the values displayed by the grid.
Enhanced editing with drop-down lists, auto-complete, and validation.

For example, imagine you have a list of data items with a country field that contains the country name. If you bind that to a grid, users might type invalid or inconsistent information ("US" vs. "USA" vs. "United States." for example, or simply "don't know").

You can prevent that type of mistake by creating a data map containing a list of valid countries and assigning that list to the grid's "country" column:

let validCountries = [ 'US', 'UK', 'Japan', 'Other' ];  
 let theGrid = new FlexGrid(hostElement, {  
     autoGenerateColumns: false,  
     columns: [  
         { binding: 'id', header: 'ID', isReadOnly: true },  
         { binding: 'country', header: 'Country', dataMap: validCountries },  
         ….  
     ],  
     itemsSource: getData()  
 });

In this example, the column's dataMap property is set to an array of strings. There is no automatic mapping going on, but the map is still useful for restricting input to valid entries, including a drop-down list:

RadioButton and AutoComplete DataMap Editors

We like this type of UI and the functionality it provides. Users may edit cells easily and change their values with two clicks (one to drop-down the list, one to select the value they want).

But one of our customers wanted to go beyond that. They wanted to allow their users to change cell values with one click, not two. To achieve that, they wanted the grid to render the options as radio buttons within each cell.

We thought this would be a nice feature to have, especially in situations where the data map contains only a few values, so we added a new dataMapEditor property to the column class. It is an enumeration that can take the following values:

AutoComplete: Use an input element with auto-complete and validation, but no drop-down.
DropDownList: Use an input element with auto-complete, validation, and a drop-down list. (This is the default setting.)
RadioButtons: Use radio buttons with mouse and keyboard support.

This code snippet demonstrates how you can use all editor types:

let grid = new FlexGrid('#theGrid', {  
     showMarquee: true,  
     autoGenerateColumns: false,  
     columns: [  
         { binding: 'id', header: 'ID' },  
         { binding: 'country', header: 'Country (AC)', dataMap: getDataMap(),  
           dataMapEditor: DataMapEditor.AutoComplete },  
         { binding: 'country', header: 'Country (DD)', dataMap: getDataMap(),  
           dataMapEditor: DataMapEditor.DropDownList },  
         { binding: 'country', header: 'Country (RB)', dataMap: getDataMap(),  
           dataMapEditor: DataMapEditor.RadioButtons, align: 'center' },  
         …  
     ],  
     itemsSource: getData(),  
 });

The image below shows the result:

The "Country (RB)" column shows the data map as a series of radio buttons. Users may change cell values with a single click, as the customer requested. Users may also select the country by typing the first letter of the option they want (e.g. 'j' for Japan, or 'u' to cycle between 'US' and 'UK').

We believe this the right solution in scenarios that use data maps with a small number of items. It makes editing very efficient and visual, either with a keyboard or mouse.