FlexGrid's famous flexibility extends to events (actions that software recognizes and might respond to) — which you can use to customize your data grid's behavior to fit your needs. Let's look at the ways in which FlexGrid's events make it easier to set up event handlers and listeners for your project.
Mouse Events
Mouse events are based around the user's pointer and its movement (e.g. hovering the pointer over a browser tab). You can add an event listener to Wijmo FlexGrid's 'mousemove' event to show your users information about the element they're hovering over with their mouse. The screenshot below — taken from LearnWijmo — shows what cell a user's pointer is hovering over, as well as the value of that cell.
To handle mouse events like 'mousemove' in Wijmo FlexGrid, add an event listener to the hostElement property, then determine which grid panel and cell a user clicked on by using the hitTest method.
Keyboard Events
Keyboard events are, of course, actions involving keyboard keys — like using your up and down arrow keys to scroll through documents and webpages. In your data grid, you can customize keyboard events so your users can use their keyboard to edit the grid.
Just like with mouse events, you can handle keyboard events by adding HTML event listeners to the hostElement property.
Selection Events
When a selection changes in your Wijmo FlexGrid grid, it raises two events: the 'selectionChanging' event (which occurs before the user’s selection changes) and the 'selectionChanged' event (which occurs after the user changes their selection — hence the past tense). In the LearnWijmo demo for selection events, the grid handles the 'selectionChanged' event to show the average, sum, and amount of sales (count) for the selected range of cells.
Editing Events
Wijmo FlexGrid includes multiple editing-related events that occur throughout a user’s cell-editing process, like when a user is about to edit a row (the 'rowEditStarted' event).
The 'cellEditEnding' event occurs when a user is editing a cell but hasn't fully added the edit to the grid yet. You can use this event to prevent users from entering invalid content into your grid. In the following screenshot, the LearnWijmo grid prevents users from entering negative amounts into the sales and expenses columns.
Resizing Events
In Wijmo FlexGrid, the 'resizingColumn' and 'resizedColumn' events occur when a user resizes a column in the grid. You can use the 'resizingColumn' event to show a tooltip while your user changes the column’s width, as shown in the screenshot below from the LearnWijmo demo.
Reordering Events
You can determine which columns users can drag into new positions — and what new positions users can drag columns to — using a column’s 'allowDragging' property. Handle the 'draggingColumnOver' event for control over a column’s new position (aka the drop target). Prevent invalid source/target combinations by setting the 'draggingColumnOver' event’s cancel property to true for those combinations.
Drag and Drop Events
You can allow users to drag and drop rows and columns to, from, and between FlexGrid controls with Wijmo FlexGrid’s HTML5 drag/drop API. You can also use this API to give your users drag and drop functionality for individual cells.
Check out these events and other Wijmo features in the LearnWijmo application, and learn more about Wijmo FlexGrid’s events in the control’s online documentation.
MESCIUS inc.