Customize JavaScript Data Grid Behavior with Built-In Events

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.

Mouse Events in Wijmo FlexGrid

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.

Wijmo FlexGrid Keyboard Events

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.

Wijmo FlexGrid Selection Events

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.

Wijmo FlexGrid Editing Events

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.

Wijmo FlexGrid Resizing Events

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.

Wijmo FlexGrid Reordering Events

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.

Wijmo Drag and Drop Events

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.


GrapeCity Developer Tools
comments powered by Disqus