DataGridXL » Docs

Getting Started

Handling Events

If you're familiar with vanilla Javascript events, you'll know that there are different ways to add & remove event listeners. Arguably the most common way to add & remove native event listeners is the one below:

const clickHandler = function(event){
	console.log('button was clicked!', event);
};

// add event handler
someButton.addEventListener('click', clickHandler);
// remove event handler
someButton.removeEventListener('click', clickHandler);

Any vanilla Javascript event will pass an event object to any of its listeners. The event object holds all kinds of useful information, like mouse coordinates at the moment the button was clicked.

DataGridXL events

DataGridXL events work in a similar fashion. Any DataGridXL event will pass a gridEvent object that contains useful information about the event. This is how you add & remove DataGridXL event listeners:

const eventHandler = function(gridEvent){
	console.log(gridEvent);
};

// add event handler
grid.events.on(eventName, eventHandler);
// remove event handler
grid.events.off(eventName, eventHandler);

Inserting Rows

We've created a little demo grid that lets you insert empty rows. The button calls grid.insertEmptyRows(2,1) which inserts two rows starting at row coordinate 1.

You can also insert a row by selecting "Insert Empty Rows" from the Context Menu (by mouse):

We've attached a listener to our grid's insertemptyrows event, so we'll get notified whenever rows are inserted.

const insertEmptyRowsHandler = function(gridEvent){
	console.log('rows were inserted!', gridEvent);
};

// add event handler
grid.events.on('insertemptyrows', insertEmptyRowsHandler);
// remove event handler
grid.events.off('insertemptyrows', insertEmptyRowsHandler);

The gridEvent object for insertemptyrows holds two properties: an array of IDs of the newly inserted rows and a target row ID (the row ID after which the rows are inserted). You can view it in your browser console.

Canceling events

In some cases you might want to cancel the actual execution of an event.

For native Javascript events you would either return false or use event.preventDefault(). For certain DataGridXL events, you can return false to do the same.

Let's say you want to prevent the user from removing more than 10 rows at a time. A little weird, we agree, but here's how to do do it:

const beforeDeleteRowsHandler = function(gridEvent){

	if(gridEvent.amount > 10){
		console.log('user is not allowed to remove this many rows at once');
		return false;
	}

};

// add event handler
grid.events.on('beforedeleterows', beforeDeleteRowsHandler);

Not all events can be canceled. Only the events that start with "before" can be canceled. Our API will tell you for every DataGridXL event whether they're cancelable or not.

Further reading

We hope we've given you a solid introduction to working with DataGridXL, and we can't wait to see what you'll create with DataGridXL!

To become a data grid master, study the data grid demo and read the How Tos. Then there's always the API, of course!